Projects page (#985)

* fix: show vuestic-ui types

* raw: init users page

* chore: update vuestic-ui and remove hotfixes

* fix: satiesfies eslint error

* fix: statiesfies prettier warning

* chore: apply prettier fixes

* feat(users): finish users page

* chore: small refactoring

* chore: fix vue warning

* chore(users): remove extra stores and components

* feat(users): add confirmation window and toasts.

* fix(users): add active checkbox to edit form

* fix(users): blob avatar rendering

* chore: remove todo

* chore: eslint fixes

* chore: improve users page

* init projects page

* feat(projects): finish projects page

* fix: typo

* chore(users): more meaningful projects column

* chore: fix ts issues

* fix: date format in project creation

* chore: add ProjectStatusBadge component and update
UsersPage and ProjectsTable

* chore: refactor projects. allow to select project in user edit form.

* fix: correct track-by for selects

* chore: eslint fix

---------

Co-authored-by: Yauheni Prakopchyk <[email protected]>

Author: m0ksem

package.json

@@ -26,6 +26,7 @@
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@gtm-support/vue-gtm": "^2.0.0",
     "@vuestic/tailwind": "^0.1.3",
+    "@vueuse/core": "^10.6.1",
     "axios": "^1.6.1",
     "chart.js": "^3.8.0",
     "epic-spinners": "^2.0.0",

src/components/sidebar/NavigationRoutes.ts

@@ -229,6 +229,14 @@ export default {
           name: 'pricing-plans',
           displayName: 'menu.pricing-plans',
         },
+        {
+          name: 'users',
+          displayName: 'menu.users',
+        },
+        {
+          name: 'projects',
+          displayName: 'menu.projects',
+        },
         {
           name: 'settings',
           displayName: 'menu.settings',

src/data/pages/projects-db.json

@@ -0,0 +1,82 @@
+[
+  {
+    "id": 0,
+    "project_name": "A Vuestic",
+    "project_owner": 13,
+    "team": [13, 5, 28, 14, 17, 28, 23, 11, 16, 19, 12, 28, 11],
+    "status": "in progress",
+    "creation_date": "20 Nov 2023"
+  },
+  {
+    "id": 1,
+    "project_name": "Mood board",
+    "project_owner": 28,
+    "team": [28, 10, 12, 28, 14, 27, 5, 4, 8, 23, 19, 18, 24, 11, 18, 12, 28],
+    "status": "important",
+    "creation_date": "16 Oct 2023"
+  },
+  {
+    "id": 2,
+    "project_name": "J Jenkins",
+    "project_owner": 3,
+    "team": [3, 21, 7, 19, 4, 4, 7, 24],
+    "status": "important",
+    "creation_date": "1 Oct 2023"
+  },
+  {
+    "id": 3,
+    "project_name": "S Springfield media",
+    "project_owner": 17,
+    "team": [17, 25, 21, 9, 18, 12, 15, 0, 7, 2, 7],
+    "status": "important",
+    "creation_date": "19 Sept 2023"
+  },
+  {
+    "id": 4,
+    "project_name": "G Galileo",
+    "project_owner": 7,
+    "team": [7, 1, 28, 19, 3],
+    "status": "completed",
+    "creation_date": "23 Sept 2023"
+  },
+  {
+    "id": 5,
+    "project_name": "O Website Redesign",
+    "project_owner": 24,
+    "team": [24, 19, 1, 8, 9],
+    "status": "completed",
+    "creation_date": "9 Sept 2023"
+  },
+  {
+    "id": 6,
+    "project_name": "U Website Redesign",
+    "project_owner": 15,
+    "team": [15, 16, 8, 6, 11, 21, 3, 20],
+    "status": "archived",
+    "creation_date": "17 Aug 2023"
+  },
+  {
+    "id": 7,
+    "project_name": "L Complete Product Redesign",
+    "project_owner": 25,
+    "team": [25, 18, 24, 13, 5, 3, 4, 16, 25, 12, 18, 9, 22],
+    "status": "completed",
+    "creation_date": "11 Aug 2023"
+  },
+  {
+    "id": 8,
+    "project_name": "Design Team Project",
+    "project_owner": 17,
+    "team": [17, 6, 21, 17, 7, 6, 14, 13, 27, 7, 20],
+    "status": "archived",
+    "creation_date": "9 Aug 2023"
+  },
+  {
+    "id": 9,
+    "project_name": "R Regular logistics",
+    "project_owner": 3,
+    "team": [3, 26, 8, 15, 21, 23, 18, 11, 22, 6, 20, 9],
+    "status": "archived",
+    "creation_date": "2 Aug 2023"
+  }
+]

src/data/pages/projects.ts

@@ -0,0 +1,82 @@
+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: keyof (typeof projectsDb)[number] | undefined
+  sortingOrder: 'asc' | 'desc' | null
+}
+
+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) => {
+      if (a[options.sortBy!] < b[options.sortBy!]) {
+        return options.sortingOrder === 'asc' ? -1 : 1
+      }
+      if (a[options.sortBy!] > b[options.sortBy!]) {
+        return options.sortingOrder === 'asc' ? 1 : -1
+      }
+      return 0
+    })
+  }
+
+  return {
+    data: projects,
+    pagination: {
+      page: options.page,
+      perPage: options.perPage,
+      total: projectsDb.length,
+    },
+  }
+}
+
+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' }),
+  }
+
+  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: (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: (typeof projectsDb)[number]) => {
+  await sleep(1000)
+
+  const index = projectsDb.findIndex((p) => p.id === project.id)
+  projectsDb.splice(index, 1)
+
+  return project
+}