From bcbfa09edd597882ca2001ebeb40188a1ac1d542 Mon Sep 17 00:00:00 2001 From: Sockenklaus Date: Mon, 15 Nov 2021 22:04:24 +0100 Subject: [PATCH] fixed EmployeesIndexSettingsModal: Handle empty right->left action and empty leftList... #24 --- .../Employees/IndexSettingsModal.vue | 25 ++++++-- src/components/Schedule/Schedule.vue | 2 +- src/components/VProfileControls.vue | 3 +- src/stores/employees.ts | 63 ++++++++++--------- src/stores/settings.ts | 2 - src/views/Employees/Index.vue | 40 ++++++------ 6 files changed, 72 insertions(+), 63 deletions(-) diff --git a/src/components/Employees/IndexSettingsModal.vue b/src/components/Employees/IndexSettingsModal.vue index b86dc77..81682ea 100644 --- a/src/components/Employees/IndexSettingsModal.vue +++ b/src/components/Employees/IndexSettingsModal.vue @@ -39,9 +39,16 @@ -
+
+ Clicked Right:
+ {{clickedRight}}
+
+ Clicke left:
+ {{clickedLeft}} +
+ @@ -77,13 +84,21 @@ const clickedLeft = ref('') const clickedRight = ref('') function moveLeft() { - leftColumn.value.push(clickedRight.value) - _pull(rightColumn.value, clickedRight.value) + if(clickedRight.value){ + let index = rightColumn.value.indexOf(clickedRight.value) + leftColumn.value.push(clickedRight.value) + _pull(rightColumn.value, clickedRight.value) + clickedRight.value = rightColumn.value[index <= rightColumn.value.length ? index : rightColumn.value.length] + } } function moveRight() { - rightColumn.value.push(clickedLeft.value) - _pull(leftColumn.value, clickedLeft.value) + if(clickedLeft.value){ + let index = leftColumn.value.indexOf(clickedLeft.value) + rightColumn.value.push(clickedLeft.value) + _pull(leftColumn.value, clickedLeft.value) + clickedLeft.value = leftColumn.value[index <= leftColumn.value.length ? index : leftColumn.value.length] + } } function colUp(clicked : string, array : string[]){ diff --git a/src/components/Schedule/Schedule.vue b/src/components/Schedule/Schedule.vue index afc89e7..c45ed80 100644 --- a/src/components/Schedule/Schedule.vue +++ b/src/components/Schedule/Schedule.vue @@ -2,7 +2,7 @@ AddEmployeeModal( - :searchData="store.rows" + :searchData="store.state.rows" :searchFields="['first_name', 'last_name']" :searchRow="addEmployeeRow" :modalId="modalId" diff --git a/src/components/VProfileControls.vue b/src/components/VProfileControls.vue index 7bc6a51..2a69927 100644 --- a/src/components/VProfileControls.vue +++ b/src/components/VProfileControls.vue @@ -65,8 +65,7 @@ function onCancel() { transition: all .1s ease-in-out } - &enter-from, - &leave-to { + &enter-from { @include animation-target(15px) } diff --git a/src/stores/employees.ts b/src/stores/employees.ts index 8f25376..7722543 100644 --- a/src/stores/employees.ts +++ b/src/stores/employees.ts @@ -3,46 +3,48 @@ import { useUser } from '@/stores/user' import axios from '@/axios' import _cloneDeep from 'lodash/cloneDeep' import _assign from 'lodash/assign' -import { reactive, watch, ref, onMounted } from 'vue' +import { reactive, watch, onMounted } from 'vue' export default defineStore('employees', () => { const user = useUser() - const rows = reactive(Array()) - const columns = reactive(Array()) + const state = reactive({ + rows: Array(), + columns: Array(), - const meta = reactive({ - current_page: NaN, - first_page: NaN, - last_page: NaN, - per_page: NaN, - total: NaN + meta : { + current_page: NaN, + first_page: NaN, + last_page: NaN, + per_page: NaN, + total: NaN + }, + + limit: 10, + page: 1, + sort_by: '', + simple_search: '' }) - const limit = ref(10) - const page = ref(1) - const sort_by = ref('') - const simple_search = ref('') - async function fetchFromApi() { try { const data : any = (await axios.get( '/employees', { params: { - limit: limit.value, - page: page.value, - sort_by: sort_by.value, - simple_search: simple_search.value + limit: state.limit, + page: state.page, + sort_by: state.sort_by, + simple_search: state.simple_search }, headers: user.header } )).data - _assign(meta, data.meta) - _assign(rows, data.data) - _assign(columns, fetchColumns()) - console.log("Employees: Fetched from api") + Object.assign(state.meta, data.meta) + state.rows = _cloneDeep(data.data) + + _assign(state.columns, fetchColumns()) } catch(err) { console.log(err) @@ -50,29 +52,29 @@ export default defineStore('employees', () => { } function fetchColumns() : string[] { - if(rows[0]){ - return Object.keys(rows[0]) + if(state.rows[0]){ + return Object.keys(state.rows[0]) } return [] } function setLimit(pLimit : number) { - limit.value = pLimit + state.limit = pLimit } function setSortBy(pSortBy : string) { - sort_by.value = pSortBy + state.sort_by = pSortBy } function setSimpleSearch(pSimpleSearch : string) { - simple_search.value = pSimpleSearch + state.simple_search = pSimpleSearch } function setPage(pPage : number) { - page.value = pPage + state.page = pPage } - watch([limit, sort_by, simple_search, page], () => { + watch(() => [state.limit, state.sort_by, state.simple_search, state.page], () => { fetchFromApi() }) @@ -81,8 +83,7 @@ export default defineStore('employees', () => { }) return { - rows, columns, meta, - limit, page, sort_by, simple_search, + state, fetchFromApi, setLimit, setSortBy, diff --git a/src/stores/settings.ts b/src/stores/settings.ts index 129ccc9..605d61c 100644 --- a/src/stores/settings.ts +++ b/src/stores/settings.ts @@ -1,6 +1,4 @@ import { defineStore } from "pinia"; -import type { StateTree } from 'pinia' -import { useEmployees } from "./employees"; import { useUser } from "./user"; import axios from '@/axios' import _clone from "lodash/clone"; diff --git a/src/views/Employees/Index.vue b/src/views/Employees/Index.vue index e5153c9..b99b762 100644 --- a/src/views/Employees/Index.vue +++ b/src/views/Employees/Index.vue @@ -1,5 +1,6 @@