Merge pull request #277 from connorabbas/admin-role-dev

User filtering improvements

Author: connorabbas

app/Data/DataTransferObjects/Filtering/UserFilters.php

@@ -3,6 +3,8 @@
 namespace App\Data\DataTransferObjects\Filtering;
 
 use App\Enums\FilterMatchMode;
+use Carbon\Carbon;
+use DateTime;
 use Illuminate\Http\Request;
 
 class UserFilters extends BaseFilters
@@ -11,18 +13,31 @@ class UserFilters extends BaseFilters
     public ?FilterMatchMode $nameMatchMode = null;
     public ?string $email = null;
     public ?FilterMatchMode $emailMatchMode = null;
+    public ?DateTime $createdAt = null;
+    public ?FilterMatchMode $createdAtMatchMode = null;
 
     public static function fromRequest(Request $request): self
     {
-        /** @var array<string, mixed> $filters */
-        $filters = $request->input('filters', []);
+        /** @var array<string, mixed> $inputFilters */
+        $inputFilters = $request->input('filters', []);
 
-        return self::from([
+        $filters = [
+            'name' => self::getFilterValue($inputFilters, 'name'),
+            'nameMatchMode' => self::getMatchMode($inputFilters, 'name'),
+            'email' => self::getFilterValue($inputFilters, 'email'),
+            'emailMatchMode' => self::getMatchMode($inputFilters, 'email'),
+            'createdAtMatchMode' => self::getMatchMode($inputFilters, 'created_at'),
+        ];
+        $createdAt = self::getFilterValue($inputFilters, 'created_at');
+        if ($createdAt) {
+            $filters['createdAt'] = Carbon::parse($createdAt);
+        }
+
+        $params = [
             ...self::getPaginationFilters($request)->toArray(),
-            'name' => self::getFilterValue($filters, 'name'),
-            'nameMatchMode' => self::getMatchMode($filters, 'name'),
-            'email' => self::getFilterValue($filters, 'email'),
-            'emailMatchMode' => self::getMatchMode($filters, 'email'),
-        ]);
+            ...$filters,
+        ];
+
+        return self::from($params);
     }
 }

app/Services/UserService.php

@@ -19,6 +19,8 @@ public function getUsers(UserFilters $filters): LengthAwarePaginator|Collection
         $nameMatchMode = $filters->nameMatchMode;
         $email = $filters->email;
         $emailMatchMode = $filters->emailMatchMode;
+        $createdAt = $filters->createdAt;
+        $createdAtMatchMode = $filters->createdAtMatchMode;
 
         $query = User::query();
         if ($name !== null && $nameMatchMode instanceof FilterMatchMode) {
@@ -27,6 +29,9 @@ public function getUsers(UserFilters $filters): LengthAwarePaginator|Collection
         if ($email !== null && $emailMatchMode instanceof FilterMatchMode) {
             $query->applyFilter('email', $emailMatchMode, $email);
         }
+        if ($createdAt !== null && $createdAtMatchMode instanceof FilterMatchMode) {
+            $query->applyFilter('created_at', $createdAtMatchMode, $createdAt);
+        }
 
         if ($filters->sortField && $filters->sortDirection) {
             $query->applySort($filters->sortField, $filters->sortDirection);

package-lock.json

@@ -26,6 +26,7 @@
         "@types/qs": "^6.9.18",
         "@vitejs/plugin-vue": "^5.2.3",
         "@vueuse/core": "^13.0.0",
+        "date-fns": "^4.1.0",
         "globals": "^16.0.0",
         "laravel-vite-plugin": "^1.2.0",
         "lodash-es": "^4.17.21",

package.json

@@ -2,6 +2,7 @@
 import { ref, useTemplateRef } from 'vue';
 import { FilterMatchMode } from '@primevue/core/api';
 import { AlertCircle, EllipsisVertical, FunnelX, Pencil } from 'lucide-vue-next';
+import { format, parseISO } from 'date-fns';
 import { useLazyDataTable } from '@/composables/useLazyDataTable';
 import AppLayout from '@/layouts/AppLayout.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
@@ -52,6 +53,7 @@ const {
 } = useLazyDataTable('users', {
     name: { value: null, matchMode: FilterMatchMode.CONTAINS },
     email: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    created_at: { value: null, matchMode: FilterMatchMode.DATE_IS },
 }, props.users.per_page);
 </script>
 
@@ -123,11 +125,9 @@ const {
                         </div>
                     </template>
                     <Column
-                        field="name"
                         header="Name"
+                        field="name"
                         sortable
-                        :showFilterMenu="false"
-                        :showClearButton="true"
                     >
                         <template #filter="{ filterModel, filterCallback }">
                             <InputText
@@ -143,11 +143,9 @@ const {
                         </template>
                     </Column>
                     <Column
-                        field="email"
                         header="Email"
+                        field="email"
                         sortable
-                        :showFilterMenu="false"
-                        :showClearButton="true"
                     >
                         <template #filter="{ filterModel, filterCallback }">
                             <InputText
@@ -162,12 +160,26 @@ const {
                             {{ data.email }}
                         </template>
                     </Column>
-                    <!-- Format date as needed, likely use date-fns -->
                     <Column
-                        field="created_at"
                         header="Created"
+                        field="created_at"
+                        dataType="date"
                         sortable
-                    />
+                    >
+                        <template #filter="{ filterModel, filterCallback }">
+                            <DatePicker
+                                v-model="filterModel.value"
+                                dateFormat="mm/dd/yy"
+                                placeholder="mm/dd/yyyy"
+                                showButtonBar
+                                fluid
+                                @update:modelValue="filterCallback"
+                            />
+                        </template>
+                        <template #body="{ data }">
+                            {{ format(parseISO(data.created_at), 'MM/dd/yyyy') }}
+                        </template>
+                    </Column>
                     <Column header="Action">
                         <template #body="{ data }">
                             <Button