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

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 []
+        }
+    }
 })