fixed EmployeesIndexSettingsModal: Handle empty right->left action and empty leftList... #24

src/stores/employees.ts

@@ -3,46 +3,48 @@ import { useUser } from '@/stores/user'
 import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
 import _assign from 'lodash/assign'
-import { reactive, watch, ref, onMounted } from 'vue'
+import { reactive, watch, onMounted } from 'vue'
 
 export default defineStore('employees', () => {
     const user = useUser()
 
-    const rows = reactive(Array<any>())
-    const columns = reactive(Array<string>())
+    const state = reactive({
+        rows: Array<any>(),
+        columns: Array<string>(),
 
-    const meta = reactive({
-        current_page: NaN,
-        first_page: NaN,
-        last_page: NaN,
-        per_page: NaN,
-        total: NaN
+        meta : {
+            current_page: NaN,
+            first_page: NaN,
+            last_page: NaN,
+            per_page: NaN,
+            total: NaN
+        },
+
+        limit: 10,
+        page: 1,
+        sort_by: '',
+        simple_search: ''
     })
 
-    const limit = ref(10)
-    const page = ref(1)
-    const sort_by = ref('')
-    const simple_search = ref('')
-
     async function fetchFromApi() {
         try { 
             const data : any = (await axios.get(
                 '/employees',
                 {
                     params: {
-                        limit: limit.value,
-                        page: page.value,
-                        sort_by: sort_by.value,
-                        simple_search: simple_search.value
+                        limit: state.limit,
+                        page: state.page,
+                        sort_by: state.sort_by,
+                        simple_search: state.simple_search
                     },
                     headers: user.header
                 }
             )).data
 
-            _assign(meta, data.meta)
-            _assign(rows, data.data)
-            _assign(columns, fetchColumns())
-            console.log("Employees: Fetched from api")
+            Object.assign(state.meta, data.meta)            
+            state.rows = _cloneDeep(data.data)
+            
+            _assign(state.columns, fetchColumns())
         }
         catch(err) {
             console.log(err)
@@ -50,29 +52,29 @@ export default defineStore('employees', () => {
     }
 
     function fetchColumns() : string[] {
-        if(rows[0]){
-            return Object.keys(rows[0])
+        if(state.rows[0]){
+            return Object.keys(state.rows[0])
         }
         return []
     }
 
     function setLimit(pLimit : number) {
-        limit.value = pLimit
+        state.limit = pLimit
     }
 
     function setSortBy(pSortBy : string) {
-        sort_by.value = pSortBy
+        state.sort_by = pSortBy
     }
 
     function setSimpleSearch(pSimpleSearch : string) {
-        simple_search.value = pSimpleSearch
+        state.simple_search = pSimpleSearch
     }
 
     function setPage(pPage : number) {
-        page.value = pPage
+        state.page = pPage
     }
 
-    watch([limit, sort_by, simple_search, page], () => {
+    watch(() => [state.limit, state.sort_by, state.simple_search, state.page], () => {
         fetchFromApi()
     })
 
@@ -81,8 +83,7 @@ export default defineStore('employees', () => {
     })
 
     return {
-        rows, columns, meta,
-        limit, page, sort_by, simple_search,
+        state,
         fetchFromApi,
         setLimit,
         setSortBy,