some refactoring, started working on employee-view-settings

src/stores/employees.ts

@@ -1,9 +1,11 @@
 import { defineStore } from 'pinia'
 import { useUser } from '@/stores/user'
+import { settingsEmployeesIndex } from './settings/employees-index'
 import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
 
 const user = useUser()
+const settings = settingsEmployeesIndex()
 
 export const useEmployees = defineStore('employees', {
     state: () => {
@@ -57,6 +59,7 @@ 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

@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+import { useEmployees } from "../employees";
+import _clone from "lodash/clone";
+import _difference from "lodash/difference";
+import _pull from "lodash/pull";
+
+
+
+export const settingsEmployeesIndex = defineStore({
+
+    id: "settings/employees-index",
+
+    state: () => {
+        return {
+            columnsSelected: Array<string>(),
+            columnsNotSelected: Array<string>()
+        }
+    },
+
+    actions: {
+        async fetchFromApi() {
+            const employees = useEmployees()
+
+            if (true){ //check, if api response contains any columns
+                this.columnsSelected = ['id', 'first_name']
+            }
+            else { // if api response does not contain any columns, set default columns
+                this.columnsSelected = _clone(employees.columns);
+            }
+            this.columnsNotSelected = _difference(employees.columns, this.columnsSelected);
+        },
+
+        async save() {
+
+        },
+
+        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);
+        }
+    }
+})