From dea3e41cd5ca6624ee09050da8d96b3324adf3bd Mon Sep 17 00:00:00 2001 From: Sockenklaus Date: Sun, 14 Nov 2021 16:24:05 +0100 Subject: [PATCH] generalized settings store --- package-lock.json | 20 ++++----- package.json | 2 +- src/stores/settings/employees-index.ts | 62 -------------------------- src/views/Employees/Index.vue | 33 +++++++++----- 4 files changed, 34 insertions(+), 83 deletions(-) delete mode 100644 src/stores/settings/employees-index.ts diff --git a/package-lock.json b/package-lock.json index 2061045..d44f6d8 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.2.tgz", - "integrity": "sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.3.tgz", + "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", - "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.2.tgz", - "integrity": "sha512-ljN+9p9XHE8YrMBgxLbpo5rdVPj7Fri4Bl9qswz5dJPeoK6ra66YOLrGpBoCsHjAqu9jOBC3oJeErocicf51oA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.3.tgz", + "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": { diff --git a/package.json b/package.json index 0f5549a..51471a8 100644 --- a/package.json +++ b/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", diff --git a/src/stores/settings/employees-index.ts b/src/stores/settings/employees-index.ts deleted file mode 100644 index 66b0e79..0000000 --- a/src/stores/settings/employees-index.ts +++ /dev/null @@ -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(), - columnsNotSelected: Array() - } - }, - - 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) - } - } -}) \ No newline at end of file diff --git a/src/views/Employees/Index.vue b/src/views/Employees/Index.vue index f01efc7..51767ce 100644 --- a/src/views/Employees/Index.vue +++ b/src/views/Employees/Index.vue @@ -2,14 +2,14 @@
@@ -17,7 +17,7 @@
@@ -28,7 +28,7 @@ {{ col }}
-
@@ -38,7 +38,7 @@ - + {{ employee[col] }} @@ -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