generalized settings store

src/views/Employees/Index.vue

@@ -2,14 +2,14 @@
 <div>
 <IndexSettingsModal 
     id="indexSettingsModal"
-    :left-column="settings.columnsSelected"
-    :right-column="settings.columnsNotSelected"
+    :left-column="settings.employeesIndexColumnsSelected"
+    :right-column="columnsNotSelected"
 
-    @update-columns-selected="settings.updateColumnsSelected($event)"
+    @update-columns-selected="updateColumnsSelected"
 />
 
 <SimpleSearch 
-    :columns="settings.columnsSelected"
+    :columns="settings.employeesIndexColumnsSelected"
     @search="store.setSimpleSearch($event)"
 />
 
@@ -17,7 +17,7 @@
     <thead>
         <tr>
             <th 
-                v-for="(col, index) in settings.columnsSelected"
+                v-for="(col, index) in settings.employeesIndexColumnsSelected"
                 @click="onSortBy(col)"
             >
                 <div class="row">
@@ -28,7 +28,7 @@
                         {{ col }} <i :style="styleColSelected(col)" class="bi" :class="iconSort"></i>
                     </div>
                     <div class="col" >
-                        <button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" v-if="index + 1 === settings.columnsSelected.length" class="btn my-0 py-0 btn-sm">
+                        <button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" v-if="index + 1 === settings.employeesIndexColumnsSelected.length" class="btn my-0 py-0 btn-sm">
                             <i class="bi bi-gear-fill"></i>
                         </button> 
                     </div>
@@ -38,7 +38,7 @@
     </thead>
     <transition-group name="list" tag="tbody">
         <tr v-for="employee in rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
-            <td v-for="col in settings.columnsSelected">
+            <td v-for="col in settings.employeesIndexColumnsSelected">
                 {{ employee[col] }}       
             </td>
         </tr>
@@ -65,14 +65,17 @@ import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmployees } from '@/stores/employees'
-import { settingsEmployeesIndex } from '@/stores/settings/employees-index';
+import { useSettings } from '@/stores/settings';
+import _difference from 'lodash/difference'
 
 const store = useEmployees()
 const router = useRouter()
-const settings = settingsEmployeesIndex()
+const settingsStore = useSettings()
 
 const { rows, columns } = storeToRefs(store)
 
+const { settings } = storeToRefs(settingsStore)
+
 const sort_by = reactive({
     asc: true,
     column: 'id'
@@ -80,7 +83,11 @@ const sort_by = reactive({
 
 onMounted(async () =>{
     await store.fetchFromApi()
-    await settings.fetchFromApi()
+    await settingsStore.fetchFromApi()
+})
+
+const columnsNotSelected = computed(() => {
+    return _difference(store.columns, settings.value.employeesIndexColumnsSelected)
 })
 
 function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
@@ -89,6 +96,12 @@ function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
     }
 }
 
+function updateColumnsSelected(arr: string[]) {
+    settings.value.employeesIndexColumnsSelected = arr
+    settingsStore.persist()
+
+}
+
 function onSortBy(col : string) {
     if(col !== sort_by.column) sort_by.asc = true
     else sort_by.asc = !sort_by.asc