Revert "feat: connect Users to the backend"

This reverts commit 45956f1.

.env.example

@@ -5,5 +5,3 @@ VITE_APP_INCLUDE_DEMOS=
 VITE_APP_ROUTER_MODE_HISTORY=
 
 VITE_APP_BUILD_VERSION=
-
-VITE_API_BASE_URL=

.gitignore

@@ -11,7 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-.env
 
 # Editor directories and files
 .vscode/*
@@ -26,4 +25,3 @@ dist-ssr
 
 # Local Netlify folder
 .netlify
-

src/data/pages/users.ts

@@ -1,5 +1,23 @@
-import { User } from '../../pages/users/types'
-import api from '../../services/api'
+import { sleep } from '../../services/utils'
+import { User } from './../../pages/users/types'
+import usersDb from './users-db.json'
+import projectsDb from './projects-db.json'
+import { Project } from '../../pages/projects/types'
+
+export const users = usersDb as User[]
+
+const getUserProjects = (userId: number | string) => {
+  return projectsDb
+    .filter((project) => project.team.includes(Number(userId)))
+    .map((project) => ({
+      ...project,
+      project_owner: users.find((user) => user.id === project.project_owner)!,
+      team: project.team.map((userId) => users.find((user) => user.id === userId)!),
+      status: project.status as Project['status'],
+    }))
+}
+
+// Simulate API calls
 
 export type Pagination = {
   page: number
@@ -19,22 +37,25 @@ export type Filters = {
 
 const getSortItem = (obj: any, sortBy: string) => {
   if (sortBy === 'projects') {
-    return obj.projects.map((project: any) => project).join(', ')
+    return obj.projects.map((project: any) => project.project_name).join(', ')
   }
 
   return obj[sortBy]
 }
 
 export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>) => {
+  await sleep(1000)
   const { isActive, search, sortBy, sortingOrder } = filters
-  let filteredUsers: User[] = await fetch(api.getAllUsers()).then((r) => r.json())
+  let filteredUsers = users
 
-  filteredUsers = filteredUsers.filter((user) => user.isActive === isActive)
+  filteredUsers = filteredUsers.filter((user) => user.active === isActive)
 
   if (search) {
-    filteredUsers = filteredUsers.filter((user) => user.fullName.toLowerCase().includes(search.toLowerCase()))
+    filteredUsers = filteredUsers.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
   }
 
+  filteredUsers = filteredUsers.map((user) => ({ ...user, projects: getUserProjects(user.id) }))
+
   if (sortBy && sortingOrder) {
     filteredUsers = filteredUsers.sort((a, b) => {
       const first = getSortItem(a, sortBy)
@@ -61,18 +82,20 @@ export const getUsers = async (filters: Partial<Filters & Pagination & Sorting>)
 }
 
 export const addUser = async (user: User) => {
-  const headers = new Headers()
-  headers.append('Content-Type', 'application/json')
-
-  return fetch(api.getAllUsers(), { method: 'POST', body: JSON.stringify(user), headers })
+  await sleep(1000)
+  users.unshift(user)
 }
 
 export const updateUser = async (user: User) => {
-  const headers = new Headers()
-  headers.append('Content-Type', 'application/json')
-  return fetch(api.getUser(user.id), { method: 'PUT', body: JSON.stringify(user), headers })
+  await sleep(1000)
+  const index = users.findIndex((u) => u.id === user.id)
+  users[index] = user
 }
 
 export const removeUser = async (user: User) => {
-  return fetch(api.getUser(user.id), { method: 'DELETE' })
+  await sleep(1000)
+  users.splice(
+    users.findIndex((u) => u.id === user.id),
+    1,
+  )
 }

src/pages/users/UsersPage.vue

@@ -28,13 +28,13 @@ const onUserSaved = async (user: User) => {
   if (userToEdit.value) {
     await usersApi.update(user)
     notify({
-      message: `${user.fullName} has been updated`,
+      message: `${user.fullname} has been updated`,
       color: 'success',
     })
   } else {
-    await usersApi.add(user)
+    usersApi.add(user)
     notify({
-      message: `${user.fullName} has been created`,
+      message: `${user.fullname} has been created`,
       color: 'success',
     })
   }
@@ -43,7 +43,7 @@ const onUserSaved = async (user: User) => {
 const onUserDelete = async (user: User) => {
   await usersApi.remove(user)
   notify({
-    message: `${user.fullName} has been deleted`,
+    message: `${user.fullname} has been deleted`,
     color: 'success',
   })
 }

src/pages/users/composables/useUsers.ts

@@ -4,7 +4,7 @@ import { User } from '../types'
 import { watchIgnorable } from '@vueuse/core'
 
 const makePaginationRef = () => ref<Pagination>({ page: 1, perPage: 10, total: 0 })
-const makeSortingRef = () => ref<Sorting>({ sortBy: 'fullName', sortingOrder: null })
+const makeSortingRef = () => ref<Sorting>({ sortBy: 'fullname', sortingOrder: null })
 const makeFiltersRef = () => ref<Partial<Filters>>({ isActive: true, search: '' })
 
 export const useUsers = (options?: {

src/pages/users/types.ts

@@ -1,15 +1,16 @@
-export type UserRole = 'ADMIN' | 'USER' | 'OWNER'
+import { Project } from '../projects/types'
 
-export type UUID = `${string}-${string}-${string}-${string}-${string}`
+export type UserRole = 'admin' | 'user' | 'owner'
 
-export type User = {
-  id: UUID
-  fullName: string
+export type BaseUser = {
+  id: number
+  fullname: string
   email: string
   username: string
   role: UserRole
   avatar: string
-  projects: string[]
   notes: string
-  isActive: boolean
+  active: boolean
 }
+
+export type User = BaseUser & { projects: Project[] }

src/pages/users/widgets/EditUserForm.vue

@@ -17,28 +17,27 @@ const props = defineProps({
   },
 })
 
-const defaultNewUser: Omit<User, 'id'> = {
+const defaultNewUser: User = {
+  id: -1,
   avatar: '',
-  fullName: '',
-  role: 'USER',
+  fullname: '',
+  role: 'user',
   username: '',
   notes: '',
   email: '',
-  isActive: true,
+  active: true,
   projects: [],
 }
 
-const newUser = ref<User>({ ...defaultNewUser } as User)
+const newUser = ref<User>({ ...defaultNewUser })
 
 const isFormHasUnsavedChanges = computed(() => {
   return Object.keys(newUser.value).some((key) => {
     if (key === 'avatar' || key === 'projects') {
       return false
     }
 
-    return (
-      newUser.value[key as keyof Omit<User, 'id'>] !== (props.user ?? defaultNewUser)?.[key as keyof Omit<User, 'id'>]
-    )
+    return newUser.value[key as keyof User] !== (props.user ?? defaultNewUser)?.[key as keyof User]
   })
 })
 
@@ -81,10 +80,10 @@ const onSave = () => {
   }
 }
 
-const roleSelectOptions: { text: Capitalize<Lowercase<UserRole>>; value: UserRole }[] = [
-  { text: 'Admin', value: 'ADMIN' },
-  { text: 'User', value: 'USER' },
-  { text: 'Owner', value: 'OWNER' },
+const roleSelectOptions: { text: Capitalize<UserRole>; value: UserRole }[] = [
+  { text: 'Admin', value: 'admin' },
+  { text: 'User', value: 'user' },
+  { text: 'Owner', value: 'owner' },
 ]
 
 const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, total: 10 }) })
@@ -113,11 +112,11 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
     <div class="self-stretch flex-col justify-start items-start gap-4 flex">
       <div class="flex gap-4 flex-col sm:flex-row w-full">
         <VaInput
-          v-model="newUser.fullName"
+          v-model="newUser.fullname"
           label="Full name"
           class="w-full sm:w-1/2"
           :rules="[validators.required]"
-          name="fullName"
+          name="fullname"
         />
         <VaInput
           v-model="newUser.username"
@@ -139,9 +138,11 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
           v-model="newUser.projects"
           label="Projects"
           class="w-full sm:w-1/2"
-          :options="projects.map((p) => p.project_name)"
+          :options="projects"
           :rules="[validators.required]"
           name="projects"
+          text-by="project_name"
+          track-by="id"
           multiple
           :max-visible-options="2"
         />
@@ -161,7 +162,7 @@ const { projects } = useProjects({ pagination: ref({ page: 1, perPage: 9999, tot
         </div>
 
         <div class="flex items-center w-1/2 mt-4">
-          <VaCheckbox v-model="newUser.isActive" label="Active" class="w-full" name="active" />
+          <VaCheckbox v-model="newUser.active" label="Active" class="w-full" name="active" />
         </div>
       </div>
 

src/pages/users/widgets/UserAvatar.vue

@@ -28,7 +28,7 @@ const isUrl = (avatar: string) => {
   <VaAvatar
     :size="size"
     :src="isUrl(user.avatar) ? user.avatar : ''"
-    :fallback-text="user.avatar || user.fullName[0]"
-    :color="avatarColor(user.fullName)"
+    :fallback-text="user.avatar || user.fullname[0]"
+    :color="avatarColor(user.fullname)"
   />
 </template>

src/pages/users/widgets/UsersTable.vue

@@ -8,7 +8,7 @@ import { useVModel } from '@vueuse/core'
 import { Project } from '../../projects/types'
 
 const columns = defineVaDataTableColumns([
-  { label: 'Full Name', key: 'fullName', sortable: true },
+  { label: 'Full Name', key: 'fullname', sortable: true },
   { label: 'Email', key: 'email', sortable: true },
   { label: 'Username', key: 'username', sortable: true },
   { label: 'Role', key: 'role', sortable: true },
@@ -24,7 +24,7 @@ const props = defineProps({
   loading: { type: Boolean, default: false },
   pagination: { type: Object as PropType<Pagination>, required: true },
   sortBy: { type: String as PropType<Sorting['sortBy']>, required: true },
-  sortingOrder: { type: String as PropType<Sorting['sortingOrder']>, default: null },
+  sortingOrder: { type: String as PropType<Sorting['sortingOrder']>, required: true },
 })
 
 const emit = defineEmits<{
@@ -39,9 +39,9 @@ const sortByVModel = useVModel(props, 'sortBy', emit)
 const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)
 
 const roleColors: Record<UserRole, string> = {
-  ADMIN: 'danger',
-  USER: 'background-element',
-  OWNER: 'warning',
+  admin: 'danger',
+  user: 'background-element',
+  owner: 'warning',
 }
 
 const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagination.perPage))
@@ -51,7 +51,7 @@ const { confirm } = useModal()
 const onUserDelete = async (user: User) => {
   const agreed = await confirm({
     title: 'Delete user',
-    message: `Are you sure you want to delete ${user.fullName}?`,
+    message: `Are you sure you want to delete ${user.fullname}?`,
     okText: 'Delete',
     cancelText: 'Cancel',
     size: 'small',
@@ -66,13 +66,13 @@ const onUserDelete = async (user: User) => {
 const formatProjectNames = (projects: Project[]) => {
   if (projects.length === 0) return 'No projects'
   if (projects.length <= 2) {
-    return projects.map((project) => project).join(', ')
+    return projects.map((project) => project.project_name).join(', ')
   }
 
   return (
     projects
       .slice(0, 2)
-      .map((project) => project)
+      .map((project) => project.project_name)
       .join(', ') +
     ' + ' +
     (projects.length - 2) +
@@ -89,10 +89,10 @@ const formatProjectNames = (projects: Project[]) => {
     :items="users"
     :loading="$props.loading"
   >
-    <template #cell(fullName)="{ rowData }">
+    <template #cell(fullname)="{ rowData }">
       <div class="flex items-center gap-2 max-w-[230px] ellipsis">
         <UserAvatar :user="rowData as User" size="small" />
-        {{ rowData.fullName }}
+        {{ rowData.fullname }}
       </div>
     </template>
 

vite.config.ts

@@ -20,13 +20,4 @@ export default defineConfig({
       include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
     }),
   ],
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3000',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
-      },
-    },
-  },
 })