Employees-Index: Create new User.

src/stores/employee.ts

@@ -2,6 +2,7 @@ import { defineStore, acceptHMRUpdate } from 'pinia'
 import axios from '@/axios'
 import { useUser } from './user'
 import { useNotifications } from './notifications'
+import Axios from 'axios'
 
 const user = useUser()
 const notifications = useNotifications()
@@ -12,7 +13,7 @@ export const useEmployee = defineStore({
     state: () => {
         return {
             clean: {
-                /** @type Employee */
+                /** @type { Employee } */
                 employee: {
                     id: NaN,
                     firstName: '',
@@ -25,7 +26,8 @@ export const useEmployee = defineStore({
                     isActive: false,
                     username: '',
                     password: '',
-                    passwordConfirm: ''
+                    passwordConfirm: '',
+                    role: ''
                 },
             },
 
@@ -42,8 +44,12 @@ export const useEmployee = defineStore({
                 isActive: false,
                 username: '',
                 password: '',
-                passwordConfirm: ''
+                passwordConfirm: '',
+                role: ''
             },
+
+            /** @type { EmployeeApiValidationError[] } */
+            apiValidationErrors: Array<EmployeeApiValidationError>(),
         }
     },
 
@@ -77,8 +83,17 @@ export const useEmployee = defineStore({
             Object.assign(this.employee, this.clean.employee)
         },
 
-        /** TODO: #23 Persist user if password is changed */
         async persist() {
+
+            if(this.employee.id){
+                this.patchEmployee()
+            }
+            else {
+                this.postEmployee()
+            }
+        },
+
+        async patchEmployee() {
             try {
                 let result
                 let payload = Object.assign({}, this.employee)
@@ -109,7 +124,35 @@ export const useEmployee = defineStore({
                 }
                 else console.log(error)
             }
-        }
+        },
+
+        async postEmployee() {
+            let result
+            try {
+                result = await axios.post<Employee>(
+                    'employees',
+                    this.employee,
+                    {
+                        headers: user.header
+                    }
+                )
+
+                this.assignTruthyValues(this.employee, result.data)
+                this.assignTruthyValues(this.clean.employee, result.data)
+                notifications.add('success', result.statusText)
+
+                console.log(result)
+            }
+            catch(error){
+                console.log("enter catch")
+                if(Axios.isAxiosError(error)) {
+                    console.log("enter axios error")
+                    let data = error.response?.data as { errors: EmployeeApiValidationError[] }
+                    console.log(data)
+                    this.apiValidationErrors = [...data.errors]
+                }
+            }
+        },
     },
 
     getters: {

src/stores/employees.ts

@@ -9,7 +9,7 @@ export default defineStore('employees', () => {
     const user = useUser()
 
     const state = reactive({
-        rows: Array<any>(),
+        rows: Array<Employee>(),
         columns: Array<string>(),
 
         meta : {
@@ -91,89 +91,4 @@ export default defineStore('employees', () => {
         setPage
     }
 
-})
-
-/* 
-export const useEmployees = defineStore('employees', {
-    state: () => {
-        return { 
-            /**
-            *   @type any[]
-             
-            rows: Array<any>(),
-
-            meta: {
-                current_page: NaN,
-                first_page: NaN,
-                last_page: NaN,
-                per_page: NaN,
-                total: NaN
-            },
-
-            columns: Array<string>(),
-
-            limit: 10,
-            page: 1,
-            sort_by: '',
-            simple_search: ''
-        }
-    },
-
-    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() {
-            try {
-                
-                const data : any = (await axios.get(
-                    '/employees',
-                    {
-                        params: {
-                            limit: this.limit,
-                            page: this.page,
-                            sort_by: this.sort_by,
-                            simple_search: this.simple_search
-                        },
-                        headers: user.header
-                    }
-                )).data
-
-                Object.assign(this.meta, data.meta)
-                this.rows = _cloneDeep(data.data)
-
-                this.columns = this.fetchColumns()
-            }
-            catch(err) {
-                console.log(err)
-            }
-        },
-
-        fetchColumns() : string[] {
-            if(this.rows[0]){
-                return Object.keys(this.rows[0])
-            }
-            return []
-        },
-
-        setLimit(limit : number) {
-            this.limit = limit
-            this.fetchFromApi()
-        },
-        setSortBy(sortBy : string) {
-            this.sort_by = sortBy
-            this.fetchFromApi()
-        },
-        setSimpleSearch(simpleSearch : string) {
-            this.simple_search = simpleSearch
-            this.fetchFromApi()
-        },
-        setPage(page : number) {
-            this.page = page
-            this.fetchFromApi()
-        }
-    }
-}) */
+})