Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Major Refactor

Browse Source
This commit is contained in:
Edwin Eames
2025-09-01 16:42:44 -04:00
parent 76cbca94e3
commit 992a1a217d
69 changed files with 12683 additions and 8082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
src/pages/employee/home.vue
View File

@@ -1,109 +1,109 @@
<template>
<Header />
<div class="flex">
<div class="">
<SideBar />
</div>
<div class=" w-full px-10 ">
<div class="text-sm breadcrumbs mb-10">
<div class="w-full px-4 md:px-10 py-4">
<!-- Breadcrumbs & Title -->
<div class="text-sm breadcrumbs">
<ul>
<li>
<router-link :to="{ name: 'home' }">
Home
</router-link>
</li>
<li>
<router-link :to="{ name: 'employee' }">
employees
</router-link>
</li>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li>Employees</li>
</ul>
</div>
<h1 class="text-3xl font-bold mt-4">Employees</h1>
<div class="flex start pb-10 text-2xl">Employees </div>
<div class="flex justify-end mb-10">
<router-link :to="{ name: 'employeeCreate' }">
<button class="btn btn-secondary btn-sm">Create Employee</button>
</router-link>
<!-- Main Content Card -->
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
<!-- Header: Count and Add Button -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
<div class="badge badge-ghost">{{ recordsLength }} employees found</div>
<router-link :to="{ name: 'employeeCreate' }" class="btn btn-primary btn-sm">
Create New Employee
</router-link>
</div>
<div class="divider"></div>
<!-- DESKTOP VIEW: Table -->
<div class="overflow-x-auto hidden xl:block">
<table class="table w-full">
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Role</th>
<th>Town</th>
<th>Phone Number</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="person in employees" :key="person.id" class="hover:bg-blue-600 hover:text-white">
<td>{{ person.id }}</td>
<td>{{ person.employee_first_name }} {{ person.employee_last_name }}</td>
<td><span class="badge badge-ghost badge-sm">{{ getEmployeeTypeName(person.employee_type) }}</span></td>
<td>{{ person.employee_town }}</td>
<td>{{ person.employee_phone_number }}</td>
<td class="text-right">
<div class="flex items-center justify-end gap-2">
<router-link :to="{ name: 'employeeEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
<router-link :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- MOBILE VIEW: Cards -->
<div class="xl:hidden space-y-4">
<div v-for="person in employees" :key="person.id" class="card bg-base-100 shadow-md">
<div class="card-body p-4">
<div class="flex justify-between items-start">
<div>
<h2 class="card-title text-base">{{ person.employee_first_name }} {{ person.employee_last_name }}</h2>
<p class="text-xs text-gray-400">ID: #{{ person.id }}</p>
</div>
<div class="badge badge-ghost">
{{ getEmployeeTypeName(person.employee_type) }}
</div>
</div>
<div class="text-sm mt-2">
<p>{{ person.employee_town }}</p>
<p>{{ person.employee_phone_number }}</p>
</div>
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
<router-link :to="{ name: 'employeeEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">Edit</router-link>
<router-link :to="{ name: 'employeeProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">View</router-link>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto bg-neutral">
<table class="table">
<!-- head -->
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Type</th>
<th>Town</th>
<th>Phone Number</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr v-for="person in employees" :key="person['id']">
<td>{{ person['id'] }} </td>
<td>{{ person['employee_first_name'] }} {{ person['employee_last_name'] }}</td>
<td>
<div v-if="person['employee_type'] == 0">Owner</div>
<div v-else-if="person['employee_type'] == 1">Manager</div>
<div v-else-if="person['employee_type'] == 2">Secretary</div>
<div v-else-if="person['employee_type'] == 3">Office</div>
<div v-else-if="person['employee_type'] == 4">Driver</div>
<div v-else-if="person['employee_type'] == 5">Service Tech</div>
<div v-else-if="person['employee_type'] == 6">Contract</div>
<div v-else-if="person['employee_type'] == 7">Cash</div>
<div v-else-if="person['employee_type'] == 8">Driver/Tech</div>
<div v-else></div>
</td>
<td>{{ person['employee_town'] }}</td>
<td>{{ person['employee_phone_number'] }}</td>
<td class="flex gap-5">
<router-link :to="{ name: 'employeeEdit', params: { id: person['id'] } }">
<button class="btn btn-secondary btn-sm">Edit</button>
</router-link>
<router-link :to="{ name: 'employeeProfile', params: { id: person['id'] } }">
<button class="btn btn-secondary btn-sm">View</button>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options" class="mt-10">
<!-- Pagination -->
<div class="mt-6 flex justify-center">
<pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="50" :options="options">
</pagination>
<div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
</div>
</div>
</div>
<Footer />
</template>
<script lang="ts">
</template><script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import Header from '../../layouts/headers/headerauth.vue'
import PaginationComp from '../../components/pagination.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
export default defineComponent({
name: 'EmployeeHome',
components: {
Header,
SideBar,
Footer,
},
data() {
return {
token: null,
user: null,
employees: [],
employees: [] as any[],
page: 1,
perPage: 50,
recordsLength: 0,
@@ -114,49 +114,55 @@ export default defineComponent({
}
}
},
created() {
this.userStatus()
this.userStatus();
},
mounted() {
this.getPage(this.page)
this.getPage(this.page);
},
methods: {
getPage: function (page: any) {
// we simulate an api call that fetch the records from a backend
this.employees = [];
this.get_employees(page)
getPage: function (page: number) {
this.get_employees(page);
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios({
method: 'get',
url: path,
withCredentials: true,
headers: authHeader(),
})
const path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios.get(path, { withCredentials: true, headers: authHeader() })
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
.catch(() => {
this.user = null
this.user = null;
});
},
// --- METHOD CORRECTED TO MATCH YOUR SIMPLE ARRAY API RESPONSE ---
get_employees(page: number) {
// Using your original, working URL
const path = `${import.meta.env.VITE_BASE_URL}/employee/all/${page}`;
axios.get(path, { headers: authHeader() })
.then((response: any) => {
// --- FIX 1: Assign the response data directly, as it's an array ---
this.employees = response.data;
// --- FIX 2: Set the recordsLength from the array length ---
// NOTE: For full pagination, your API will eventually need to send the *total* count.
// For now, this will show the count of items on the current page.
// If you update your API to send { data: [], total_records: X }, this is the only line you'd change.
this.recordsLength = response.data.length;
})
.catch((error: any) => {
console.error("Failed to fetch employees:", error);
});
},
get_employees(page: any) {
let path = import.meta.env.VITE_BASE_URL + '/employee/all/' + page;
axios({
method: 'get',
url: path,
headers: authHeader(),
}).then((response: any) => {
this.employees = response.data
})
},
getEmployeeTypeName(typeId: number | string): string {
const typeMap: { [key: string]: string } = {
'0': 'Owner', '1': 'Manager', '2': 'Secretary', '3': 'Office',
'4': 'Driver', '5': 'Service Tech', '6': 'Contractor', '7': 'Cash Driver', '8': 'Driver/Tech'
};
return typeMap[String(typeId)] || 'Unknown Role';
}
},
})
</script>
<style scoped></style>
</script>