Fix#968/users page

src/components/sidebar/NavigationRoutes.ts

@@ -229,6 +229,10 @@ export default {
           name: 'pricing-plans',
           displayName: 'menu.pricing-plans',
         },
+        {
+          name: 'users',
+          displayName: 'menu.users',
+        },
         {
           name: 'billing',
           displayName: 'menu.billing',

src/components/va-charts/VaChart.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- @vue-ignore -->
-  <component :is="chartComponent" ref="chart" :chart-data="data" :chart-options="chartOptions" class="va-chart" />
+  <Component :is="chartComponent" ref="chart" :chart-data="data" :chart-options="chartOptions" class="va-chart" />
 </template>
 
 <script lang="ts" setup>

src/data/pages/users.ts

@@ -0,0 +1,190 @@
+import { sleep } from '../../services/utils'
+import { repeatArray } from '../../services/utils'
+import { User } from './../../pages/users/types'
+
+export const users = repeatArray<User>(50, [
+  {
+    id: 1,
+    fullname: 'Patrik Radkow',
+    email: '[email protected]',
+    username: 'magicpan',
+    role: 'user',
+    projects: 3,
+    avatar: '',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 2,
+    fullname: 'Martin Hoff',
+    email: '[email protected]',
+    username: 'admin',
+    role: 'admin',
+    projects: 5,
+    avatar: '😍',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 3,
+    fullname: 'Liz Macintosh',
+    email: '[email protected]',
+    username: 'ebrown',
+    role: 'user',
+    projects: 2,
+    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 4,
+    fullname: 'M2',
+    email: '[email protected]',
+    username: 'mrm',
+    role: 'owner',
+    projects: 1,
+    avatar: '',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 5,
+    fullname: 'Kevin Smith',
+    email: '[email protected]',
+    username: 'kevin13',
+    role: 'user',
+    projects: 13,
+    avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 6,
+    fullname: 'Martin Hoff',
+    email: '[email protected]',
+    username: 'martin3',
+    role: 'user',
+    projects: 2,
+    avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 7,
+    fullname: 'John Doe',
+    email: '[email protected]',
+    username: 'john',
+    role: 'user',
+    projects: 1,
+    avatar: '',
+    active: true,
+    notes: '',
+  },
+  {
+    id: 8,
+    fullname: 'Maksim Nedo',
+    email: '[email protected]',
+    username: 'maksim',
+    role: 'admin',
+    projects: 1,
+    avatar: 'https://avatars.githubusercontent.com/u/23530004?v=4',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 9,
+    fullname: 'Dmitry Kuzmenko',
+    email: '[email protected]',
+    username: 'dd',
+    role: 'user',
+    projects: 1,
+    avatar: '',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 10,
+    fullname: 'Rayan Gosling',
+    email: '[email protected]',
+    username: 'rayan',
+    role: 'user',
+    projects: 1,
+    avatar: '',
+    active: true,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 11,
+    fullname: 'Laura Smith',
+    email: '[email protected]',
+    username: 'bbb',
+    role: 'user',
+    projects: 3,
+    avatar: '',
+    active: false,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+  {
+    id: 12,
+    fullname: 'Ted Mosby',
+    email: '[email protected]',
+    username: 'gamer777',
+    role: 'user',
+    projects: 5,
+    avatar: '😭',
+    active: false,
+    notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.',
+  },
+]).map((u, index) => ({ ...u, id: index }))
+
+// Simulate API calls
+export type Filters = {
+  isActive: boolean
+  search: string
+  pagination: {
+    page: number
+    perPage: number
+    total: number
+  }
+}
+
+export const getUsers = async (filters: Partial<Filters>) => {
+  await sleep(1000)
+  const { isActive, search } = filters
+  let filteredUsers = users
+
+  filteredUsers = users.filter((user) => user.active === isActive)
+
+  if (search) {
+    filteredUsers = users.filter((user) => user.fullname.toLowerCase().includes(search.toLowerCase()))
+  }
+
+  const { page = 1, perPage = 10 } = filters.pagination || {}
+  return {
+    data: filteredUsers.slice((page - 1) * perPage, page * perPage),
+    pagination: {
+      page,
+      perPage,
+      total: filteredUsers.length,
+    },
+  }
+}
+
+export const addUser = async (user: User) => {
+  await sleep(1000)
+  users.unshift(user)
+}
+
+export const updateUser = async (user: User) => {
+  await sleep(1000)
+  const index = users.findIndex((u) => u.id === user.id)
+  users[index] = user
+}
+
+export const removeUser = async (user: User) => {
+  await sleep(1000)
+  users.splice(
+    users.findIndex((u) => u.id === user.id),
+    1,
+  )
+}

src/i18n/locales/gb.json

@@ -341,7 +341,8 @@
     "line-maps": "Line Maps",
     "login-singup": "Login/Signup",
     "404-pages": "404 Pages",
-    "faq": "Faq"
+    "faq": "Faq",
+    "users": "Users"
   },
   "messages": {
     "all": "See all messages",

src/pages/admin/dashboard/DashboardTabs.vue

@@ -18,7 +18,7 @@
         </template>
       </VaTabs>
       <VaSeparator />
-      <component :is="tabs[activeTabName]" @submit="submit" />
+      <Component :is="tabs[activeTabName]" @submit="submit" />
     </VaCardContent>
   </VaCard>
 </template>

src/pages/admin/ui/spinners/Spinners.vue

@@ -36,7 +36,7 @@
       <div v-for="(group, i) in groups" :key="i" class="grid grid-cols-12 gap-6">
         <div v-for="item in group" :key="item" class="sm:col-span-6 col-span-12 lg:col-span-3 flex flex-col">
           <div class="h-[140px] flex justify-center items-center">
-            <component
+            <Component
               :is="getComponent(item)"
               :animation-duration="config.duration"
               :color="computedSpinnersColor"

src/pages/payments/payment-system/PaymentSystem.vue

@@ -5,8 +5,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { defineProps } from 'vue'
+<script setup lang="ts">
 import { PaymentSystemType } from '../types'
 
 const props = defineProps<{

src/pages/payments/widgets/my-cards/PaymentCardListItem.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, computed, defineEmits } from 'vue'
+import { computed } from 'vue'
 import PaymentSystem from '../../payment-system/PaymentSystem.vue'
 import { PaymentCard } from '../../types'
 

src/pages/users/UsersPage.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import UsersTable from './widgets/UsersTable.vue'
+import EditUserForm from './widgets/EditUserForm.vue'
+import { User } from './types'
+import { useUsers } from './composables/useUsers'
+import { Filters } from '../../data/pages/users'
+import { useToast } from 'vuestic-ui'
+
+const filters = ref<Filters>({
+  isActive: true,
+  search: '',
+  pagination: {
+    page: 1,
+    perPage: 10,
+    total: 250,
+  },
+})
+
+const doShowEditUserModal = ref(false)
+
+const { users, isLoading, ...usersApi } = useUsers(filters)
+
+const userToEdit = ref<User | null>(null)
+
+const showEditUserModal = (user: User) => {
+  userToEdit.value = user
+  doShowEditUserModal.value = true
+}
+
+const showAddUserModal = () => {
+  userToEdit.value = null
+  doShowEditUserModal.value = true
+}
+
+const { init: notify } = useToast()
+
+const onUserSaved = async (user: User) => {
+  if (userToEdit.value) {
+    await usersApi.update(user)
+    notify({
+      message: `${user.fullname} has been updated`,
+      color: 'success',
+    })
+  } else {
+    usersApi.add(user)
+    notify({
+      message: `${user.fullname} has been updated`,
+      color: 'success',
+    })
+  }
+}
+
+const onUserDelete = async (user: User) => {
+  await usersApi.remove(user)
+  notify({
+    message: `${user.fullname} has been deleted`,
+    color: 'success',
+  })
+}
+</script>
+
+<template>
+  <h1 class="page-title">Users</h1>
+
+  <VaCard>
+    <VaCardContent>
+      <div class="flex flex-col md:flex-row gap-2 mb-2">
+        <div class="flex flex-col md:flex-row gap-2 justify-start">
+          <VaButtonToggle
+            v-model="filters.isActive"
+            color="background-element"
+            border-color="background-element"
+            :options="[
+              { label: 'Active', value: true },
+              { label: 'Inactive', value: false },
+            ]"
+          />
+          <VaInput v-model="filters.search" placeholder="Search">
+            <template #prependInner>
+              <VaIcon name="search" color="secondary" size="small" />
+            </template>
+          </VaInput>
+        </div>
+        <VaSpacer />
+        <VaButton @click="showAddUserModal">Add User</VaButton>
+      </div>
+
+      <UsersTable
+        :users="users"
+        :loading="isLoading"
+        :pagination="filters.pagination"
+        @editUser="showEditUserModal"
+        @deleteUser="onUserDelete"
+      />
+    </VaCardContent>
+  </VaCard>
+
+  <VaModal v-slot="{ hide }" v-model="doShowEditUserModal" hide-default-actions>
+    <EditUserForm :user="userToEdit" @close="hide" @save="onUserSaved" />
+  </VaModal>
+</template>