Fix and improvment of mock user crud example (#38)

* Fix and improvment of mock user crud example

* Mock user service, date filter with equality

src/components/examples/UsersCrudExample.vue

@@ -9,6 +9,7 @@
     :actions="users_crud.actions"
     :getItems="usersStore.getUsers"
     :addItem="usersStore.createUser"
+    :editItem="usersStore.updateUser"
     :components="{
       boolean: ActiveCell,
       date: DateCell
@@ -40,7 +41,7 @@ const usersStore = useUsersStore()
 const users_crud: Omit<VLCrudProps, 'getItems'> = {
   id: 'users',
   singular_label: 'user',
-  primary_key: 'username',
+  primary_key: 'id',
   filters_title: 'filters',
   headers: [
     {
@@ -181,11 +182,6 @@ const users_crud: Omit<VLCrudProps, 'getItems'> = {
     {
       i18n_key: 'Last name',
       value: 'lastName',
-      side_effect: (model, fields) => {
-        const { lastName } = model
-        fields.firstName.disabled = (lastName as string)?.length > 0
-        model.username = lastName
-      },
       input_type: 'text'
     },
     {

src/components/examples/dialogs/DeleteDialog.vue

@@ -11,21 +11,24 @@
 
 <script setup lang="ts">
 import { VLButton } from '../..'
+import { useUsersStore } from '../../../stores/users'
 
 const emit = defineEmits(['close', 'cancel', 'confirm'])
+const usersStore = useUsersStore()
 
 interface Props {
   data: any
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const onCanceled = () => {
   emit('cancel')
   closeDialog()
 }
 
-const onConfirm = () => {
+const onConfirm = async () => {
+  await usersStore.deleteUser(props.data.item[props.data.primary_key])
   emit('confirm')
   closeDialog()
 }

src/services/users.ts

@@ -38,7 +38,6 @@ const users = [
 
 export const getUsersAPI = async (page: number, rows: number, filters?: any) => {
   let result: any = [...users]
-
   if (filters && Object.keys(filters).length) {
     result = result.filter((user: any) => {
       return Object.keys(filters).every((key) => {
@@ -50,17 +49,22 @@ export const getUsersAPI = async (page: number, rows: number, filters?: any) =>
           case 'number':
             return user[key] === filters[key]
           case 'object':
-            if (key === 'activation_date') return user[key] > filters[key]
-            if (key === 'expiration_date') return user[key] < filters[key]
+            if (key === 'activation_date')
+              return user[key]?.toLocaleDateString() == filters[key].toLocaleDateString()
+            if (key === 'expiration_date')
+              return user[key]?.toLocaleDateString() == filters[key].toLocaleDateString()
             return user[key] === filters[key]
           default:
-            return user[key].includes(filters[key])
+            return user[key]?.toLowerCase()?.includes(filters[key].toLowerCase())
         }
       })
     })
   }
 
-  return { result, page: { totalRows: 3, currentPage: page, pageRows: rows, totalPages: 1 } }
+  return {
+    result: result.slice((page - 1) * rows, page * rows),
+    page: { totalRows: result.length, currentPage: page, pageRows: rows, totalPages: 1 }
+  }
 }
 
 export const getUserAPI = async (id: string) => {

src/stores/users.ts

@@ -47,9 +47,9 @@ export const useUsersStore = defineStore('users', () => {
     }
   }
 
-  const updateUser = async (id: string, user: User) => {
+  const updateUser = async (user: User) => {
     try {
-      await updateUserAPI(id, user)
+      await updateUserAPI(user.id, user)
     } catch (error) {
       console.log(error)
     }