fixed EmployeesIndexSettingsModal: Handle empty right->left action and empty leftList... #24

2021-11-15 22:04:24 +01:00
parent 174cb17b04
commit bcbfa09edd
6 changed files with 72 additions and 63 deletions
--- a/src/components/Employees/IndexSettingsModal.vue
+++ b/src/components/Employees/IndexSettingsModal.vue
@@ -39,9 +39,16 @@
                    </div>
                </div>
            </div>
-            <div class="modal-footer"></div>
+            <div class="modal-footer">
+                Clicked Right:<br>
+    {{clickedRight}}<br>
+    <br>
+    Clicke left:<br>
+    {{clickedLeft}}
+            </div>
        </div>
    </div>
+    
 </div>


@@ -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[]){
--- 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" 
--- 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)
    }

--- 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<any>())
-    const columns = reactive(Array<string>())
+    const state = reactive({
+        rows: Array<any>(),
+        columns: Array<string>(),

-    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,
--- 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";
--- a/src/views/Employees/Index.vue
+++ b/src/views/Employees/Index.vue
@@ -1,5 +1,6 @@
 <template>
 <div>
+
 <IndexSettingsModal 
    id="indexSettingsModal"
    :left-column="settings.employeesIndexColumnsSelected"
@@ -20,38 +21,34 @@
                v-for="(col, index) in settings.employeesIndexColumnsSelected"
                @click="onSortBy(col)"
            >
-                <div class="row">
-                    <div class="col" >
-
-                    </div>
-                    <div class="col d-flex">
-                        {{ 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.employeesIndexColumnsSelected.length" class="btn my-0 py-0 btn-sm">
-                            <i class="bi bi-gear-fill"></i>
-                        </button> 
-                    </div>
-                </div>
+                {{ col }} <i :style="styleColSelected(col)" class="bi" :class="iconSort"></i>
+            </th>
+            <th>
+                <button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" class="btn m-0 p-0 btn-sm">
+                    <i class="bi bi-gear-fill"></i>
+                </button> 
            </th>
        </tr>
    </thead>
    <transition-group name="list" tag="tbody" mode="out-in">
-        <tr v-for="employee in store.rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
+        <tr v-for="employee in store.state.rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
            <td v-for="col in settings.employeesIndexColumnsSelected">
                {{ employee[col] }}       
            </td>
+            <td>
+
+            </td>
        </tr>
    </transition-group>
 </table>

-<h5 v-show="store.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
+<h5 v-show="store.state.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>

 <VPaginator 
    :radius="1" 
-    :page="store.page" 
-    :first-page="store.meta.first_page" 
-    :last-page="store.meta.last_page"
+    :page="store.state.page" 
+    :first-page="store.state.meta.first_page" 
+    :last-page="store.state.meta.last_page"
    @set-page="paginatorSetPage" 
 />
 </div>
@@ -85,10 +82,10 @@ onMounted(async () =>{
 })

 const columnsNotSelected = computed(() => {
-    return _difference(store.columns, settings.value.employeesIndexColumnsSelected)
+    return _difference(store.state.columns, settings.value.employeesIndexColumnsSelected)
 })

-function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
+function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {    
    return {
        visibility: sort_by.column === col ? 'visible' : 'hidden'
    }
@@ -97,7 +94,6 @@ function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
 function updateColumnsSelected(arr: string[]) {
    settings.value.employeesIndexColumnsSelected = arr
    settingsStore.persist()
-
 }

 function onSortBy(col : string) {
@@ -105,7 +101,7 @@ function onSortBy(col : string) {
    else sort_by.asc = !sort_by.asc

    sort_by.column = col
-    store.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
+    store.state.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
 }

 const iconSort = computed(() => {