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

src/components/Employees/IndexSettingsModal.vue

@@ -39,11 +39,18 @@
                     </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>
+
 
 
 </template>
@@ -77,13 +84,21 @@ const clickedLeft = ref('')
 const clickedRight = ref('')
 
 function moveLeft() {
+    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() {
+    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[]){

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" 

src/components/VProfileControls.vue

@@ -65,8 +65,7 @@ function onCancel() {
         transition: all .1s ease-in-out
     }
 
-    &enter-from,
+    &enter-from {
-    &leave-to {
         @include animation-target(15px)
     }
 

src/stores/employees.ts

@@ -3,26 +3,28 @@ 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 state = reactive({
-    const columns = reactive(Array<string>())
+        rows: Array<any>(),
+        columns: Array<string>(),
 
-    const meta = reactive({
+        meta : {
             current_page: NaN,
             first_page: NaN,
             last_page: NaN,
             per_page: NaN,
             total: NaN
-    })
+        },
 
-    const limit = ref(10)
+        limit: 10,
-    const page = ref(1)
+        page: 1,
-    const sort_by = ref('')
+        sort_by: '',
-    const simple_search = ref('')
+        simple_search: ''
+    })
 
     async function fetchFromApi() {
         try { 
@@ -30,19 +32,19 @@ export default defineStore('employees', () => {
                 '/employees',
                 {
                     params: {
-                        limit: limit.value,
+                        limit: state.limit,
-                        page: page.value,
+                        page: state.page,
-                        sort_by: sort_by.value,
+                        sort_by: state.sort_by,
-                        simple_search: simple_search.value
+                        simple_search: state.simple_search
                     },
                     headers: user.header
                 }
             )).data
 
-            _assign(meta, data.meta)
+            Object.assign(state.meta, data.meta)            
-            _assign(rows, data.data)
+            state.rows = _cloneDeep(data.data)
-            _assign(columns, fetchColumns())
+            
-            console.log("Employees: Fetched from api")
+            _assign(state.columns, fetchColumns())
         }
         catch(err) {
             console.log(err)
@@ -50,29 +52,29 @@ export default defineStore('employees', () => {
     }
 
     function fetchColumns() : string[] {
-        if(rows[0]){
+        if(state.rows[0]){
-            return Object.keys(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,
+        state,
-        limit, page, sort_by, simple_search,
         fetchFromApi,
         setLimit,
         setSortBy,

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";

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>
+            </th>
-                    <div class="col" >
+            <th>
-                        <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">
+                <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> 
-                    </div>
-                </div>
             </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" 
+    :page="store.state.page" 
-    :first-page="store.meta.first_page" 
+    :first-page="store.state.meta.first_page" 
-    :last-page="store.meta.last_page"
+    :last-page="store.state.meta.last_page"
     @set-page="paginatorSetPage" 
 />
 </div>
@@ -85,7 +82,7 @@ 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'} {    
@@ -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(() => {