made IndexSettingsModal more modular.

src/stores/employees.ts

@@ -5,7 +5,6 @@ import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
 
 const user = useUser()
-const settings = settingsEmployeesIndex()
 
 export const useEmployees = defineStore('employees', {
     state: () => {
@@ -59,7 +58,6 @@ export const useEmployees = defineStore('employees', {
                 this.rows = _cloneDeep(data.data)
 
                 this.columns = this.fetchColumns()
-                await settings.fetchFromApi()
             }
             catch(err) {
                 console.log(err)

src/stores/settings/employees-index.ts

@@ -22,7 +22,7 @@ export const settingsEmployeesIndex = defineStore({
             const employees = useEmployees()
 
             if (true){ //check, if api response contains any columns
-                this.columnsSelected = ['id', 'first_name']
+                this.columnsSelected = ['last_name', 'first_name', 'email', 'phone', 'mobile', 'role']
             }
             else { // if api response does not contain any columns, set default columns
                 this.columnsSelected = _clone(employees.columns);
@@ -30,18 +30,18 @@ export const settingsEmployeesIndex = defineStore({
             this.columnsNotSelected = _difference(employees.columns, this.columnsSelected);
         },
 
-        async save() {
-
+        updateColumnsSelected(data : string[]) {
+            this.columnsSelected = data;
+            this.columnsNotSelected = _difference(this.columnsNotSelected, data);
+            this.persist()
         },
 
-        selectColumn(column: string) {
-            this.columnsSelected.push(column);
-            this.columnsNotSelected = _pull(this.columnsNotSelected, column);
-        },
-
-        deselectColumn(column: string) {
-            this.columnsNotSelected.push(column);
-            this.columnsSelected = _pull(this.columnsSelected, column);
+        /**
+        *   Persist columnsSelected to API
+         */
+        async persist() {
+            console.log("persist")
+            console.log(this.columnsSelected)
         }
     }
 })