Revert "feat: connect Projects to the backend (#1063)"

This reverts commit 5554ae4.

src/data/pages/projects.ts

@@ -1,18 +1,20 @@
-import api from '../../services/api'
-import { Project } from '../../pages/projects/types'
+import { sleep } from '../../services/utils'
+import projectsDb from './projects-db.json'
+import usersDb from './users-db.json'
 
+// Simulate API calls
 export type Pagination = {
   page: number
   perPage: number
   total: number
 }
 
 export type Sorting = {
-  sortBy: 'project_owner' | 'team' | 'created_at'
+  sortBy: keyof (typeof projectsDb)[number] | undefined
   sortingOrder: 'asc' | 'desc' | null
 }
 
-const getSortItem = (obj: any, sortBy: Sorting['sortBy']) => {
+const getSortItem = (obj: any, sortBy: keyof (typeof projectsDb)[number]) => {
   if (sortBy === 'project_owner') {
     return obj.project_owner.fullname
   }
@@ -21,15 +23,21 @@ const getSortItem = (obj: any, sortBy: Sorting['sortBy']) => {
     return obj.team.map((user: any) => user.fullname).join(', ')
   }
 
-  if (sortBy === 'created_at') {
+  if (sortBy === 'creation_date') {
     return new Date(obj[sortBy])
   }
 
   return obj[sortBy]
 }
 
-export const getProjects = async (options: Partial<Sorting> & Pagination) => {
-  const projects: Project[] = await fetch(api.allProjects()).then((r) => r.json())
+export const getProjects = async (options: Sorting & Pagination) => {
+  await sleep(1000)
+
+  const projects = projectsDb.map((project) => ({
+    ...project,
+    project_owner: usersDb.find((user) => user.id === project.project_owner)! as (typeof usersDb)[number],
+    team: usersDb.filter((user) => project.team.includes(user.id)) as (typeof usersDb)[number][],
+  }))
 
   if (options.sortBy && options.sortingOrder) {
     projects.sort((a, b) => {
@@ -52,24 +60,43 @@ export const getProjects = async (options: Partial<Sorting> & Pagination) => {
     pagination: {
       page: options.page,
       perPage: options.perPage,
-      total: projects.length,
+      total: projectsDb.length,
     },
   }
 }
 
-export const addProject = async (project: Omit<Project, 'id' | 'created_at'>) => {
-  const headers = new Headers()
-  headers.append('Content-Type', 'application/json')
+export const addProject = async (project: Omit<(typeof projectsDb)[number], 'id' | 'creation_date'>) => {
+  await sleep(1000)
+
+  const newProject = {
+    ...project,
+    id: projectsDb.length + 1,
+    creation_date: new Date().toLocaleDateString('gb', { day: 'numeric', month: 'short', year: 'numeric' }),
+  }
 
-  return fetch(api.allProjects(), { method: 'POST', body: JSON.stringify(project), headers }).then((r) => r.json())
+  projectsDb.push(newProject)
+
+  return {
+    ...newProject,
+    project_owner: usersDb.find((user) => user.id === project.project_owner)! as (typeof usersDb)[number],
+    team: usersDb.filter((user) => project.team.includes(user.id)) as (typeof usersDb)[number][],
+  }
 }
 
-export const updateProject = async (project: Omit<Project, 'created_at'>) => {
-  const headers = new Headers()
-  headers.append('Content-Type', 'application/json')
-  return fetch(api.project(project.id), { method: 'PUT', body: JSON.stringify(project), headers }).then((r) => r.json())
+export const updateProject = async (project: (typeof projectsDb)[number]) => {
+  await sleep(1000)
+
+  const index = projectsDb.findIndex((p) => p.id === project.id)
+  projectsDb[index] = project
+
+  return project
 }
 
-export const removeProject = async (project: Project) => {
-  return fetch(api.project(project.id), { method: 'DELETE' })
+export const removeProject = async (project: (typeof projectsDb)[number]) => {
+  await sleep(1000)
+
+  const index = projectsDb.findIndex((p) => p.id === project.id)
+  projectsDb.splice(index, 1)
+
+  return project
 }

src/data/pages/users.ts

@@ -27,12 +27,12 @@ const getSortItem = (obj: any, sortBy: string) => {
 
 export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>) => {
   const { isActive, search, sortBy, sortingOrder } = filters
-  let filteredUsers: User[] = await fetch(api.allUsers()).then((r) => r.json())
+  let filteredUsers: User[] = await fetch(api.getAllUsers()).then((r) => r.json())
 
-  filteredUsers = filteredUsers.filter((user) => user.active === isActive)
+  filteredUsers = filteredUsers.filter((user) => user.isActive === isActive)
 
   if (search) {
-    filteredUsers = filteredUsers.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
+    filteredUsers = filteredUsers.filter((user) => user.fullName.toLowerCase().includes(search.toLowerCase()))
   }
 
   if (sortBy && sortingOrder) {
@@ -64,15 +64,15 @@ export const addUser = async (user: User) => {
   const headers = new Headers()
   headers.append('Content-Type', 'application/json')
 
-  return fetch(api.allUsers(), { method: 'POST', body: JSON.stringify(user), headers }).then((r) => r.json())
+  return fetch(api.getAllUsers(), { method: 'POST', body: JSON.stringify(user), headers })
 }
 
 export const updateUser = async (user: User) => {
   const headers = new Headers()
   headers.append('Content-Type', 'application/json')
-  return fetch(api.user(user.id), { method: 'PUT', body: JSON.stringify(user), headers }).then((r) => r.json())
+  return fetch(api.getUser(user.id), { method: 'PUT', body: JSON.stringify(user), headers })
 }
 
 export const removeUser = async (user: User) => {
-  return fetch(api.user(user.id), { method: 'DELETE' })
+  return fetch(api.getUser(user.id), { method: 'DELETE' })
 }

src/pages/admin/dashboard/cards/ProjectTable.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { defineVaDataTableColumns } from 'vuestic-ui'
+import { Project } from '../../../projects/types'
 import UserAvatar from '../../../users/widgets/UserAvatar.vue'
 import ProjectStatusBadge from '../../../projects/components/ProjectStatusBadge.vue'
 import { useProjects } from '../../../projects/composables/useProjects'
 import { Pagination } from '../../../../data/pages/projects'
 import { ref } from 'vue'
-import { useProjectUsers } from '../../../projects/composables/useProjectUsers'
 
 const columns = defineVaDataTableColumns([
   { label: 'Name', key: 'project_name', sortable: true },
@@ -18,7 +18,11 @@ const { projects, isLoading, sorting } = useProjects({
   pagination,
 })
 
-const { getTeamOptions, getUserById } = useProjectUsers()
+const avatarColor = (userName: string) => {
+  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
+  const index = userName.charCodeAt(0) % colors.length
+  return colors[index]
+}
 </script>
 
 <template>
@@ -43,16 +47,23 @@ const { getTeamOptions, getUserById } = useProjectUsers()
           </template>
           <template #cell(project_owner)="{ rowData }">
             <div class="flex items-center gap-2 ellipsis max-w-[230px]">
-              <UserAvatar
-                v-if="getUserById(rowData.project_owner)"
-                :user="getUserById(rowData.project_owner)!"
-                size="small"
-              />
-              {{ getUserById(rowData.project_owner)?.fullname }}
+              <UserAvatar :user="rowData.project_owner" size="small" />
+              {{ rowData.project_owner.fullname }}
             </div>
           </template>
           <template #cell(team)="{ rowData: project }">
-            <VaAvatarGroup size="small" :options="getTeamOptions(project.team)" :max="2" />
+            <VaAvatarGroup
+              size="small"
+              :options="
+                (project as Project).team.map((user) => ({
+                  label: user.fullname,
+                  src: user.avatar,
+                  fallbackText: user.fullname[0],
+                  color: avatarColor(user.fullname),
+                }))
+              "
+              :max="2"
+            />
           </template>
           <template #cell(status)="{ rowData: project }">
             <ProjectStatusBadge :status="project.status" />

src/pages/projects/ProjectsPage.vue

@@ -1,26 +1,17 @@
 <script setup lang="ts">
-import { ref, provide } from 'vue'
+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'
-import { useProjectUsers } from './composables/useProjectUsers'
 
 const doShowAsCards = useLocalStorage('projects-view', true)
 
 const { projects, update, add, isLoading, remove, pagination, sorting } = useProjects()
 
-const { users, getTeamOptions, getUserById } = useProjectUsers()
-
-provide('ProjectsPage', {
-  users,
-  getTeamOptions,
-  getUserById,
-})
-
 const projectToEdit = ref<Project | null>(null)
 const doShowProjectFormModal = ref(false)
 

src/pages/projects/composables/useProjects.ts

@@ -1,53 +1,79 @@
-import { Ref, ref, unref, computed } from 'vue'
-import { Sorting, Pagination } from '../../../data/pages/projects'
+import { Ref, ref, unref } from 'vue'
+import {
+  getProjects,
+  addProject,
+  updateProject,
+  removeProject,
+  Sorting,
+  Pagination,
+} from '../../../data/pages/projects'
 import { Project } from '../types'
-import { useProjectsStore } from '../../../stores/projects'
+import { watchIgnorable } from '@vueuse/core'
 
 const makePaginationRef = () => ref<Pagination>({ page: 1, perPage: 10, total: 0 })
-const makeSortingRef = () => ref<Sorting>({ sortBy: 'created_at', sortingOrder: 'desc' })
+const makeSortingRef = () => ref<Sorting>({ sortBy: 'creation_date', sortingOrder: 'desc' })
 
 export const useProjects = (options?: { sorting?: Ref<Sorting>; pagination?: Ref<Pagination> }) => {
   const isLoading = ref(false)
-  const projectsStore = useProjectsStore()
+  const projects = ref<Project[]>([])
 
   const { sorting = makeSortingRef(), pagination = makePaginationRef() } = options ?? {}
 
   const fetch = async () => {
     isLoading.value = true
-    await projectsStore.getAll({
-      sorting: unref(sorting),
-      pagination: unref(pagination),
+    const { data, pagination: newPagination } = await getProjects({
+      ...unref(sorting),
+      ...unref(pagination),
+    })
+    projects.value = data as Project[]
+
+    ignoreUpdates(() => {
+      pagination.value = newPagination
     })
 
     isLoading.value = false
   }
 
+  const { ignoreUpdates } = watchIgnorable([pagination, sorting], fetch, { deep: true })
+
   fetch()
 
   return {
     isLoading,
 
-    projects: computed(() => projectsStore.items),
+    projects,
 
     fetch,
 
-    async add(project: Omit<Project, 'id' | 'created_at'>) {
+    async add(project: Omit<Project, 'id' | 'creation_date'>) {
       isLoading.value = true
-      await projectsStore.add(project)
+      await addProject({
+        ...project,
+        project_owner: project.project_owner.id,
+        team: project.team.map((user) => user.id),
+      })
       await fetch()
       isLoading.value = false
     },
 
     async update(project: Project) {
       isLoading.value = true
-      await projectsStore.update(project)
+      await updateProject({
+        ...project,
+        project_owner: project.project_owner.id,
+        team: project.team.map((user) => user.id),
+      })
       await fetch()
       isLoading.value = false
     },
 
     async remove(project: Project) {
       isLoading.value = true
-      await projectsStore.remove(project)
+      await removeProject({
+        ...project,
+        project_owner: project.project_owner.id,
+        team: project.team.map((user) => user.id),
+      })
       await fetch()
       isLoading.value = false
     },

src/pages/projects/types.ts

@@ -1,17 +1,15 @@
 import { User } from '../users/types'
 
-export type UUID = `${string}-${string}-${string}-${string}-${string}`
-
 export type Project = {
-  id: UUID
+  id: number
   project_name: string
-  project_owner: User['id']
-  team: User['id'][]
+  project_owner: Omit<User, 'projects'>
+  team: Omit<User, 'projects'>[]
   status: 'important' | 'completed' | 'archived' | 'in progress'
-  created_at: string
+  creation_date: string
 }
 
-export type EmptyProject = Omit<Project, 'id' | 'project_owner' | 'created_at' | 'status'> & {
+export type EmptyProject = Omit<Project, 'id' | 'project_owner' | 'creation_date' | 'status'> & {
   project_owner: Project['project_owner'] | undefined
   status: Project['status'] | undefined
 }