From 5c8779cb6a155270d7b3c6eda0e530603983d11b Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 29 Apr 2026 08:30:15 +0300 Subject: [PATCH] Ajout pagination table employee --- .../app/Repositories/EmployeeRepository.php | 25 +- .../EmployeeRepositoryInterface.php | 3 +- .../Employee/EmployeePresentation.vue | 23 +- .../molecules/Employees/EmployeeTable.vue | 724 +++++++++--------- .../src/views/pages/Employes/Employees.vue | 45 +- 5 files changed, 452 insertions(+), 368 deletions(-) diff --git a/thanasoft-back/app/Repositories/EmployeeRepository.php b/thanasoft-back/app/Repositories/EmployeeRepository.php index 1d67a4f..fc1aa44 100644 --- a/thanasoft-back/app/Repositories/EmployeeRepository.php +++ b/thanasoft-back/app/Repositories/EmployeeRepository.php @@ -86,9 +86,28 @@ class EmployeeRepository extends BaseRepository implements EmployeeRepositoryInt /** * Get employees with pagination. */ - public function getPaginated(int $perPage = 10): array + public function getPaginated(int $perPage = 10, array $filters = []): array { - $paginator = $this->model->newQuery()->with(['thanatopractitioner', 'user'])->paginate($perPage); + $query = $this->model->newQuery()->with(['thanatopractitioner', 'user']); + + if (!empty($filters['search'])) { + $query->search($filters['search']); + } + + if (array_key_exists('active', $filters)) { + if (filter_var($filters['active'], FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE)) { + $query->active(); + } else { + $query->inactive(); + } + } + + $sortField = $filters['sort_by'] ?? 'last_name'; + $sortDirection = $filters['sort_direction'] ?? 'asc'; + + $paginator = $query + ->orderBy($sortField, $sortDirection) + ->paginate($perPage); return [ 'employees' => $paginator->getCollection(), @@ -97,6 +116,8 @@ class EmployeeRepository extends BaseRepository implements EmployeeRepositoryInt 'last_page' => $paginator->lastPage(), 'per_page' => $paginator->perPage(), 'total' => $paginator->total(), + 'from' => $paginator->firstItem(), + 'to' => $paginator->lastItem(), ], ]; } diff --git a/thanasoft-back/app/Repositories/EmployeeRepositoryInterface.php b/thanasoft-back/app/Repositories/EmployeeRepositoryInterface.php index bca85d4..6ff5bab 100644 --- a/thanasoft-back/app/Repositories/EmployeeRepositoryInterface.php +++ b/thanasoft-back/app/Repositories/EmployeeRepositoryInterface.php @@ -62,9 +62,10 @@ interface EmployeeRepositoryInterface * Get employees with pagination. * * @param int $perPage + * @param array $filters * @return array{employees: Collection, pagination: array} */ - public function getPaginated(int $perPage = 10): array; + public function getPaginated(int $perPage = 10, array $filters = []): array; /** * Get employees with their thanatopractitioner data. diff --git a/thanasoft-front/src/components/Organism/Employee/EmployeePresentation.vue b/thanasoft-front/src/components/Organism/Employee/EmployeePresentation.vue index 3a3e628..97315ee 100644 --- a/thanasoft-front/src/components/Organism/Employee/EmployeePresentation.vue +++ b/thanasoft-front/src/components/Organism/Employee/EmployeePresentation.vue @@ -14,9 +14,11 @@ :data="employeeData" :loading="loadingData" :pagination="pagination" + :search="search" @view="goToDetails" @delete="deleteEmployee" - @changePage="handleChangePage" + @page-change="handleChangePage" + @search-change="handleSearchChange" /> @@ -32,7 +34,12 @@ import { useRouter } from "vue-router"; const router = useRouter(); -const emit = defineEmits(["pushDetails", "deleteEmployee", "changePage"]); +const emit = defineEmits([ + "pushDetails", + "deleteEmployee", + "changePage", + "searchChange", +]); const props = defineProps({ employeeData: { @@ -47,6 +54,10 @@ const props = defineProps({ type: Object, default: null, }, + search: { + type: String, + default: "", + }, }); const goToEmployee = () => { @@ -77,8 +88,8 @@ const handleChangePage = (page) => { emit("changePage", page); } }; - - +const handleSearchChange = (query) => { + emit("searchChange", query); +}; + diff --git a/thanasoft-front/src/components/molecules/Employees/EmployeeTable.vue b/thanasoft-front/src/components/molecules/Employees/EmployeeTable.vue index aca98aa..963bb3d 100644 --- a/thanasoft-front/src/components/molecules/Employees/EmployeeTable.vue +++ b/thanasoft-front/src/components/molecules/Employees/EmployeeTable.vue @@ -1,72 +1,60 @@ @@ -513,31 +553,30 @@ onMounted(() => { .loading-container { position: relative; + min-height: 260px; } .loading-spinner { position: absolute; - top: 20px; - right: 20px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); z-index: 10; } +.loading-spinner-circle { + width: 2.25rem; + height: 2.25rem; + border-width: 0.28em; +} + .loading-content { - opacity: 0.7; + opacity: 0.55; pointer-events: none; } .skeleton-row { - animation: pulse 1.5s ease-in-out infinite; -} - -.skeleton-checkbox { - width: 18px; - height: 18px; - border-radius: 3px; - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; - animation: shimmer 2s infinite; + animation: none; } .skeleton-avatar { @@ -558,15 +597,6 @@ onMounted(() => { animation: shimmer 2s infinite; } -.skeleton-icon.small { - width: 24px; - height: 24px; - border-radius: 50%; - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; - animation: shimmer 2s infinite; -} - .skeleton-text { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; @@ -607,21 +637,13 @@ onMounted(() => { margin: 0 auto; } +.address-info, .text-xs { font-size: 0.75rem; } -/* Animations */ -@keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.7; - } - 100% { - opacity: 1; - } +.contact-info { + line-height: 1.2; } @keyframes shimmer { @@ -633,13 +655,7 @@ onMounted(() => { } } -/* Responsive adjustments */ @media (max-width: 768px) { - .loading-spinner { - top: 10px; - right: 10px; - } - .skeleton-text.long { width: 80px; } diff --git a/thanasoft-front/src/views/pages/Employes/Employees.vue b/thanasoft-front/src/views/pages/Employes/Employees.vue index 5c37ad8..7f25843 100644 --- a/thanasoft-front/src/views/pages/Employes/Employees.vue +++ b/thanasoft-front/src/views/pages/Employes/Employees.vue @@ -3,9 +3,11 @@ :employee-data="employeeStore.employees" :loading-data="employeeStore.loading" :pagination="employeeStore.getPagination" + :search="search" @push-details="goDetails" @delete-employee="confirmDeleteEmployee" @change-page="changePage" + @search-change="updateSearch" /> @@ -25,7 +27,7 @@