generalized settings store
This commit is contained in:
Sockenklaus
20
package-lock.json
generated
20
package-lock.json
generated
@@ -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": {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user