Fix#997/projects users followup (#1008)

* fix: same id in user db

* fix: incorrect active users when searching

* fix: fetch new data when it is updated

* fix: make edit and delete button smaller

* fix: save projects layout to local storage

src/data/pages/users-db.json

@@ -210,7 +210,7 @@
     "notes": "voluptatibus et soluta"
   },
   {
-    "id": 21,
+    "id": 22,
     "active": true,
     "fullname": "Raymond Simonis",
     "email": "[email protected]",
@@ -220,7 +220,7 @@
     "notes": "aut id molestiae"
   },
   {
-    "id": 22,
+    "id": 23,
     "active": true,
     "fullname": "Janice Sporer",
     "email": "[email protected]",
@@ -230,7 +230,7 @@
     "notes": "magnam eum aliquam"
   },
   {
-    "id": 23,
+    "id": 24,
     "active": true,
     "fullname": "Francis Schowalter",
     "email": "[email protected]",
@@ -240,7 +240,7 @@
     "notes": "similique architecto in"
   },
   {
-    "id": 24,
+    "id": 25,
     "active": true,
     "fullname": "Emilio Hoppe",
     "email": "[email protected]",
@@ -250,7 +250,7 @@
     "notes": "rerum quae dolorem"
   },
   {
-    "id": 25,
+    "id": 26,
     "active": true,
     "fullname": "Janice Harber",
     "email": "[email protected]",
@@ -260,7 +260,7 @@
     "notes": "iure dolor provident"
   },
   {
-    "id": 26,
+    "id": 27,
     "fullname": "Evelyn Morar",
     "email": "[email protected]",
     "role": "user",
@@ -270,7 +270,7 @@
     "notes": "quae eos placeat"
   },
   {
-    "id": 27,
+    "id": 28,
     "fullname": "Antoinette Schneider",
     "email": "[email protected]",
     "role": "user",
@@ -280,7 +280,7 @@
     "notes": "qui cumque unde"
   },
   {
-    "id": 28,
+    "id": 29,
     "fullname": "Ebony Daniel",
     "email": "[email protected]",
     "role": "user",

src/data/pages/users.ts

@@ -40,10 +40,10 @@ export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>)
   const { isActive, search, sortBy, sortingOrder } = filters
   let filteredUsers = users
 
-  filteredUsers = users.filter((user) => user.active === isActive)
+  filteredUsers = filteredUsers.filter((user) => user.active === isActive)
 
   if (search) {
-    filteredUsers = users.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
+    filteredUsers = filteredUsers.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
   }
 
   if (sortBy && sortingOrder) {

src/pages/projects/ProjectsPage.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
 import { useProjects } from './composables/useProjects'
 import ProjectCards from './widgets/ProjectCards.vue'
 import ProjectTable from './widgets/ProjectsTable.vue'
 import EditProjectForm from './widgets/EditProjectForm.vue'
 import { Project } from './types'
 import { useModal, useToast } from 'vuestic-ui'
 
-const doShowAsCards = ref(true)
+const doShowAsCards = useLocalStorage('projects-view', true)
 
 const { projects, update, add, isLoading, remove, pagination, sorting } = useProjects()
 
@@ -27,7 +28,6 @@ const createNewProject = () => {
 const { init: notify } = useToast()
 
 const onProjectSaved = async (project: Project) => {
-  isLoading.value = true
   doShowProjectFormModal.value = false
   if ('id' in project) {
     await update(project as Project)
@@ -42,8 +42,6 @@ const onProjectSaved = async (project: Project) => {
       color: 'success',
     })
   }
-
-  isLoading.value = false
 }
 
 const { confirm } = useModal()

src/pages/projects/composables/useProjects.ts

@@ -47,12 +47,12 @@ export const useProjects = (options?: { sorting: Ref<Sorting>; pagination: Ref<P
 
     async add(project: Omit<Project, 'id' | 'creation_date'>) {
       isLoading.value = true
-      const createdProject = await addProject({
+      await addProject({
         ...project,
         project_owner: project.project_owner.id,
         team: project.team.map((user) => user.id),
       })
-      projects.value.unshift(createdProject as Project)
+      await fetch()
       isLoading.value = false
     },
 
@@ -63,7 +63,7 @@ export const useProjects = (options?: { sorting: Ref<Sorting>; pagination: Ref<P
         project_owner: project.project_owner.id,
         team: project.team.map((user) => user.id),
       })
-      projects.value = projects.value.map((u) => (u.id === project.id ? project : u))
+      await fetch()
       isLoading.value = false
     },
 
@@ -74,7 +74,7 @@ export const useProjects = (options?: { sorting: Ref<Sorting>; pagination: Ref<P
         project_owner: project.project_owner.id,
         team: project.team.map((user) => user.id),
       })
-      projects.value = projects.value.filter((u) => u.id !== project.id)
+      await fetch()
       isLoading.value = false
     },
 

src/pages/projects/widgets/ProjectsTable.vue

@@ -57,7 +57,7 @@ const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagin
 </script>
 
 <template>
-  <div v-if="projects.length > 0">
+  <div>
     <VaDataTable
       v-model:sort-by="sortByVModel"
       v-model:sorting-order="sortingOrderVModel"
@@ -96,8 +96,8 @@ const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagin
 
       <template #cell(actions)="{ rowData: project }">
         <div class="flex gap-2 justify-end">
-          <VaButton preset="primary" icon="mso-edit" color="primary" @click="$emit('edit', project)" />
-          <VaButton preset="primary" icon="mso-delete" color="danger" @click="$emit('delete', project)" />
+          <VaButton preset="primary" size="small" color="primary" @click="$emit('edit', project)">Edit</VaButton>
+          <VaButton preset="primary" size="small" icon="mso-delete" color="danger" @click="$emit('delete', project)" />
         </div>
       </template>
     </VaDataTable>
@@ -133,5 +133,4 @@ const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagin
       </div>
     </div>
   </div>
-  <div v-else class="p-4 flex justify-center items-center text-[var(--va-secondary)]">No projects</div>
 </template>

src/pages/users/composables/useUsers.ts

@@ -61,28 +61,21 @@ export const useUsers = (options?: {
     async add(user: User) {
       isLoading.value = true
       await addUser(user)
-      users.value.unshift(user)
+      await fetch()
       isLoading.value = false
     },
 
     async update(user: User) {
       isLoading.value = true
       await updateUser(user)
-      users.value = users.value
-        .map((u) => (u.id === user.id ? user : u))
-        .filter((u) => u.active === filters.value.isActive)
-        .filter((u) => {
-          if (!filters.value.search) return true
-
-          return u.fullname.toLowerCase().includes(filters.value.search.toLowerCase())
-        })
+      await fetch()
       isLoading.value = false
     },
 
     async remove(user: User) {
       isLoading.value = true
       await removeUser(user)
-      users.value = users.value.filter((u) => u.id !== user.id)
+      await fetch()
       isLoading.value = false
     },
   }

src/pages/users/widgets/UsersTable.vue

@@ -118,8 +118,14 @@ const formatProjectNames = (projects: Project[]) => {
 
     <template #cell(actions)="{ rowData }">
       <div class="flex gap-2 justify-end">
-        <VaButton preset="primary" icon="mso-edit" @click="$emit('edit-user', rowData as User)" />
-        <VaButton preset="primary" icon="mso-delete" color="danger" @click="onUserDelete(rowData as User)" />
+        <VaButton preset="primary" size="small" @click="$emit('edit-user', rowData as User)">Edit</VaButton>
+        <VaButton
+          preset="primary"
+          size="small"
+          icon="mso-delete"
+          color="danger"
+          @click="onUserDelete(rowData as User)"
+        />
       </div>
     </template>
   </VaDataTable>