trying setup store

src/components/Schedule/Schedule.vue

@@ -2,7 +2,7 @@
 
 AddEmployeeModal(
         
-        :searchData="rows" 
+        :searchData="store.rows" 
         :searchFields="['first_name', 'last_name']" 
         :searchRow="addEmployeeRow" 
         :modalId="modalId" 
@@ -69,7 +69,7 @@ AddEmployeeModal(
     import { watch, computed, ref } from 'vue'
     import type { Ref, ComputedRef } from 'vue'
     import { storeToRefs } from 'pinia'
-    import { useEmployees } from '@/stores/employees'
+    import useEmployees from '@/stores/employees'
     import { addMonths, eachMonthOfInterval, subDays, addDays, format, getISODay, getYear, getMonth, getDaysInMonth } from 'date-fns'
     import { de } from 'date-fns/locale'
     import AddEmployeeModal from '@/components/Schedule/AddEmployeeModal.vue'
@@ -145,7 +145,7 @@ AddEmployeeModal(
     const addEmployeeRow : Ref<number> = ref(-1)
     const addEmployeeMonth : Ref<number> = ref(-1)
     const scheduleData : Ref<ScheduleData> = ref(getScheduleData())
-    const { rows } = storeToRefs(store)
+    // const { rows } = storeToRefs(store)
 
     const selected : Ref<string[]> = ref([])
     const shiftAnchor : Ref<Coordinates | undefined> = ref(undefined)

src/components/VPaginator.vue

@@ -61,12 +61,9 @@
 
 <script setup lang="ts">
 
-import { useEmployees } from '@/stores/employees'
 import { computed } from 'vue'
 import _inRange from 'lodash/inRange'
 
-const store = useEmployees()
-
 const props = defineProps({
     radius: {
         type: Number,
@@ -101,7 +98,7 @@ const hasOnlyOnePage = computed(() => props.lastPage === props.firstPage)
 const displayedPages = computed(() => {
     const pages = []
     const firstPage = props.page - props.radius > props.firstPage ? props.page - props.radius : props.firstPage
-    const lastPage = store.page + props.radius < props.lastPage ? props.page + props.radius : props.lastPage
+    const lastPage = props.page + props.radius < props.lastPage ? props.page + props.radius : props.lastPage
 
     for (let i = firstPage; i <= lastPage; i++) {
         pages.push(i)

src/stores/employees.ts

@@ -1,17 +1,104 @@
 import { defineStore } from 'pinia'
 import { useUser } from '@/stores/user'
-import { settingsEmployeesIndex } from './settings/employees-index'
 import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
+import _assign from 'lodash/assign'
+import { reactive, watch, ref, onMounted } from 'vue'
 
-const user = useUser()
+export default defineStore('employees', () => {
+    const user = useUser()
 
+    const rows = reactive(Array<any>())
+    const columns = reactive(Array<string>())
+
+    const meta = reactive({
+        current_page: NaN,
+        first_page: NaN,
+        last_page: NaN,
+        per_page: NaN,
+        total: NaN
+    })
+
+    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
+                    },
+                    headers: user.header
+                }
+            )).data
+
+            _assign(meta, data.meta)
+            _assign(rows, data.data)
+            _assign(columns, fetchColumns())
+            console.log("Employees: Fetched from api")
+        }
+        catch(err) {
+            console.log(err)
+        }
+    }
+
+    function fetchColumns() : string[] {
+        if(rows[0]){
+            return Object.keys(rows[0])
+        }
+        return []
+    }
+
+    function setLimit(pLimit : number) {
+        limit.value = pLimit
+    }
+
+    function setSortBy(pSortBy : string) {
+        sort_by.value = pSortBy
+    }
+
+    function setSimpleSearch(pSimpleSearch : string) {
+        simple_search.value = pSimpleSearch
+    }
+
+    function setPage(pPage : number) {
+        page.value = pPage
+    }
+
+    watch([limit, sort_by, simple_search, page], () => {
+        fetchFromApi()
+    })
+
+    onMounted(() => {
+        fetchFromApi()
+    })
+
+    return {
+        rows, columns, meta,
+        limit, page, sort_by, simple_search,
+        fetchFromApi,
+        setLimit,
+        setSortBy,
+        setSimpleSearch,
+        setPage
+    }
+
+})
+
+/* 
 export const useEmployees = defineStore('employees', {
     state: () => {
         return { 
             /**
             *   @type any[]
-             */
+             
             rows: Array<any>(),
 
             meta: {
@@ -37,7 +124,7 @@ export const useEmployees = defineStore('employees', {
         *   @param: {number} page           - QueryString: page=1 etc.
         *   @param: {string} sortBy         - QueryString: sort_by=asc(col1),desc(col2),...
         *   @param: {string} simpleSearch   - QueryString: simple_search=query(col1,col2,...)
-        **/
+        **
         async fetchFromApi() {
             try {
                 
@@ -88,4 +175,4 @@ export const useEmployees = defineStore('employees', {
             this.fetchFromApi()
         }
     }
-})
+}) */

src/views/Employees/Details.vue

@@ -92,7 +92,7 @@
                 id="contract-hours" 
                 class="form-control" 
                 :class="classIsInvalid(v$.contractHours)" 
-                :disabled="!editEmployee"
+                :disabled="!editEmployee || !user.isAdmin"
             /> 
 
             <div v-for="(error) in v$.contractHours.$errors" class="invalid-feedback" id="contractHoursFeedback">
@@ -164,6 +164,7 @@
 import VProfileControls from '@/components/VProfileControls.vue';
 import { onMounted, computed, ref, watch } from 'vue'
 import { useEmployee } from '@/stores/employee'
+import { useUser } from '@/stores/user'
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import useVuelidate from '@vuelidate/core'
@@ -172,6 +173,7 @@ import { IMaskComponent as MaskInput } from 'vue-imask'
 
 const route = useRoute()
 const state = useEmployee()
+const user = useUser()
 
 const { employee } = storeToRefs(state)
 

src/views/Employees/Index.vue

@@ -36,8 +36,8 @@
             </th>
         </tr>
     </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}})">
+    <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}})">
             <td v-for="col in settings.employeesIndexColumnsSelected">
                 {{ employee[col] }}       
             </td>
@@ -45,7 +45,7 @@
     </transition-group>
 </table>
 
-<h5 v-show="rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
+<h5 v-show="store.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
 
 <VPaginator 
     :radius="1" 
@@ -64,7 +64,7 @@ import VPaginator from '@/components/VPaginator.vue';
 import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useEmployees } from '@/stores/employees'
+import useEmployees from '@/stores/employees'
 import { useSettings } from '@/stores/settings';
 import _difference from 'lodash/difference'
 
@@ -72,8 +72,6 @@ const store = useEmployees()
 const router = useRouter()
 const settingsStore = useSettings()
 
-const { rows, columns } = storeToRefs(store)
-
 const { settings } = storeToRefs(settingsStore)
 
 const sort_by = reactive({
@@ -108,7 +106,6 @@ function onSortBy(col : string) {
 
     sort_by.column = col
     store.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
-    store.fetchFromApi() 
 }
 
 const iconSort = computed(() => {