added input masks to EmployeeDetails, started implementing Employees/Index. Updated to Vue 3.2.21

src/stores/employee.ts

@@ -11,7 +11,7 @@ type ResultData = {
 	phone: string | undefined,
 	mobile: string | undefined,
 	email: string | undefined,
-	contractHours: number | undefined,
+	contractHours: number,
 	isActive: boolean,
 	username: string | undefined,
     role: string
@@ -34,7 +34,7 @@ export const useEmployee = defineStore({
                     phone: '',
                     mobile: '',
                     email: '',
-                    contractHours: NaN,
+                    contractHours: 0,
                     isActive: false,
                     username: '',
                     password: '',
@@ -50,7 +50,7 @@ export const useEmployee = defineStore({
                 phone: '',
                 mobile: '',
                 email: '',
-                contractHours: NaN,
+                contractHours: 0,
                 isActive: false,
                 username: '',
                 password: '',
@@ -60,15 +60,24 @@ export const useEmployee = defineStore({
     },
 
     actions: {
+        assignTruthyValues(target: Object, source: Object) {
+            for (const key in source) {
+                if (source[key]) {
+                    target[key] = source[key]
+                }
+            }
+        },
+
         async fetchFromApi(id: string | string[]) {
+            this.$reset()
 
             try {
                 const data : ResultData = await <ResultData>(await axios.get('employees/'+id, {
                     headers: user.header
                 })).data
 
-                Object.assign(this.clean.employee, data)
-                Object.assign(this.employee, data)
+                this.assignTruthyValues(this.employee, data)
+                this.assignTruthyValues(this.clean.employee, data)
             }
             catch(err){
                 if(err instanceof Error) notifications.add('danger', err.message, -1)
@@ -99,8 +108,6 @@ export const useEmployee = defineStore({
                     }
                 )
 
-                console.log(result)
-
                 this.employee.password = ''
                 this.employee.passwordConfirm = ''
                 

src/stores/employees.ts

@@ -1,12 +1,68 @@
 import { defineStore } from 'pinia'
+import { useUser } from '@/stores/user'
+import axios from '@/axios'
 
 import emplJSON from '../sample-data/employees.json'
 
+const user = useUser()
+
 export const useEmployees = defineStore('employees', {
     state: () => {
         return { 
-            /** @type {{id: number, name: string, handle: string, contractHours: number }[]} */
-            employees: emplJSON
+            /**
+            *   @type {}[]
+             */
+            rows: Array<Object>(),
+
+            meta: {
+                current_page: NaN,
+                first_page: NaN,
+                last_page: NaN,
+                per_page: NaN,
+                total: NaN
+            },
+
+            columns: Array<string>()
         }
     },
+
+    actions: {
+        /**
+        *   @param: {number} limit          - QueryString: limit=20 etc.
+        *   @param: {number} page           - QueryString: page=1 etc.
+        *   @param: {string} sortBy         - QueryString: sort_by=asc(col1),desc(col2),...
+        *   @param: {string} simpleSearch   - QueryString: simple_search=query(col1,col2,...)
+        **/
+        async fetchFromApi(limit?: number, page?:number, sort_by?: string, simple_search?: string) {
+            try {
+                const data : any= (await axios.get(
+                    '/employees',
+                    {
+                        params: {
+                            limit,
+                            page,
+                            sort_by,
+                            simple_search
+                        },
+                        headers: user.header
+                    }
+                )).data
+
+                Object.assign(this.meta, data?.meta)
+                Object.assign(this.rows, data?.data)
+
+                this.columns = this.fetchColumns()
+            }
+            catch(err) {
+
+            }
+        },
+
+        fetchColumns() : string[] {
+            if(this.rows[0]){
+                return Object.keys(this.rows[0])
+            }
+            return []
+        }
+    }
 })