generalized settings store

package-lock.json

@@ -17,7 +17,7 @@
         "bootstrap-icons": "^1.6.0",
         "date-fns": "^2.25.0",
         "lodash": "^4.17.21",
-        "pinia": "^2.0.0-rc.13",
+        "pinia": "^2.0.3",
         "pinia-plugin-persist": "^0.0.92",
         "uuid": "^8.3.2",
         "vue": "^3.2.21",
@@ -1201,18 +1201,18 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.3.tgz",
-      "integrity": "sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==",
+      "integrity": "sha512-jNq+eVCAbFQS/uOiqskSRsKsFzLcQpgegcpjI8eAzU3QOwmsdLLHZBE1dvy802jecRC3FPPJSlj1MISF/sRV2w==",
       "dependencies": {
-        "@vue/devtools-api": "^6.0.0-beta.19",
+        "@vue/devtools-api": "^6.0.0-beta.20",
         "vue-demi": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.3.0",
+        "@vue/composition-api": "^1.3.3",
         "typescript": "^4.4.4",
         "vue": "^2.6.14 || ^3.2.0"
       },
@@ -2717,11 +2717,11 @@
       "dev": true
     },
     "pinia": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.3.tgz",
-      "integrity": "sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==",
+      "integrity": "sha512-jNq+eVCAbFQS/uOiqskSRsKsFzLcQpgegcpjI8eAzU3QOwmsdLLHZBE1dvy802jecRC3FPPJSlj1MISF/sRV2w==",
       "requires": {
-        "@vue/devtools-api": "^6.0.0-beta.19",
+        "@vue/devtools-api": "^6.0.0-beta.20",
         "vue-demi": "*"
       },
       "dependencies": {

package.json

@@ -17,7 +17,7 @@
     "bootstrap-icons": "^1.6.0",
     "date-fns": "^2.25.0",
     "lodash": "^4.17.21",
-    "pinia": "^2.0.0-rc.13",
+    "pinia": "^2.0.3",
     "pinia-plugin-persist": "^0.0.92",
     "uuid": "^8.3.2",
     "vue": "^3.2.21",

src/stores/settings/employees-index.ts

@@ -1,62 +0,0 @@
-import { defineStore } from "pinia";
-import { useEmployees } from "../employees";
-import { useUser } from "../user";
-import axios from '@/axios'
-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 = ['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);
-            }
-            this.columnsNotSelected = _difference(employees.columns, this.columnsSelected);
-        },
-
-        updateColumnsSelected(data : string[]) {
-            this.columnsSelected = data;
-            this.columnsNotSelected = _difference(this.columnsNotSelected, data);
-            this.persist()
-        },
-
-        /**
-        *   Persist columnsSelected to API
-         */
-        async persist() {
-            const user = useUser()
-
-            const result = await axios.post('settings',
-            {
-                settings: [
-                    {
-                        key: "employees-index-columns-selected",
-                        value: this.columnsSelected
-                    }
-                ]
-            },
-            {
-                headers: user.header
-            })
-            console.log(result)
-        }
-    }
-})

src/views/Employees/Index.vue

@@ -2,14 +2,14 @@
 <div>
 <IndexSettingsModal 
     id="indexSettingsModal"
-    :left-column="settings.columnsSelected"
+    :left-column="settings.employeesIndexColumnsSelected"
-    :right-column="settings.columnsNotSelected"
+    :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