some refactoring, started working on employee-view-settings

src/components/Employees/IndexSettingsModal.vue

@@ -0,0 +1,104 @@
+<template>
+
+<div class="modal fade" :id="props.id" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h6 class="modal-title">Anzuzeigende Spalten auswählen</h6>
+                <button class="btn-close" data-bs-dismiss="modal" type="button"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row align-items-center">
+                    <div class="col pe-1">
+                        <select class="form-select" size="5" v-model="clickedLeft">
+                            <option v-for="column in settings.columnsSelected">{{ column }}</option>
+                        </select>
+                    </div>
+                    <div class="col-1 ps-0">
+                        <button class="btn btn-sm btn-outline-primary px-1 mb-1" @click="colUp(clickedLeft, settings.columnsSelected)">
+                            <i class="bi bi-caret-up"></i>
+                        </button>
+                        <br>
+                        <button class="btn btn-sm btn-outline-primary px-1" @click="colDown(clickedLeft, settings.columnsSelected)">
+                            <i class="bi bi-caret-down"></i>
+                        </button>
+                    </div>
+                    <div class="col-3">
+                        <button class="btn btn-sm btn-outline-primary mb-1" @click="addColumn">
+                            <i class="bi bi-caret-left"></i>
+                        </button>
+                        <br>
+                        <button class="btn btn-sm btn-outline-primary" @click="removeColumn">
+                            <i class="bi bi-caret-right"></i>
+                        </button>
+                    </div>
+                    <div class="col ps-1">
+                        <select class="form-select" size="5" v-model="clickedRight">
+                            <option v-for="column in settings.columnsNotSelected" :value="column">{{ column }}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-outline-secondary" data-bs-dismiss="modal" type="button">Abbrechen</button>
+                <button class="btn btn-primary" data-bs-dismiss="modal" type="button">Speichern</button>
+                
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+</template>
+
+<script setup lang="ts">
+
+import { settingsEmployeesIndex } from '@/stores/settings/employees-index';
+import { useEmployees } from '@/stores/employees';
+import { ref } from 'vue';
+
+
+const props = defineProps({
+    id: {
+        type: String
+    }
+})
+
+const clickedLeft = ref('')
+const clickedRight = ref('')
+
+const employees = useEmployees()
+const settings = settingsEmployeesIndex()
+
+
+function addColumn() {
+    settings.selectColumn(clickedRight.value)
+}
+
+function removeColumn() {
+    settings.deselectColumn(clickedLeft.value)
+}
+
+function colUp(clicked : string, array : string[]){
+    const index = array.indexOf(clicked)
+    if(index > 0){
+        const temp = array[index]
+        array[index] = array[index - 1]
+        array[index - 1] = temp
+    } 
+}
+
+function colDown(clicked : string, array : string[]){
+    const index = array.indexOf(clicked)
+    if(index < array.length - 1){
+        const temp = array[index]
+        array[index] = array[index + 1]
+        array[index + 1] = temp
+    } 
+}
+
+</script>
+
+<style scoped>
+</style>

src/components/Schedule/Schedule.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 
 AddEmployeeModal(
+        
         :searchData="rows" 
         :searchFields="['first_name', 'last_name']" 
         :searchRow="addEmployeeRow" 
@@ -71,7 +72,7 @@ AddEmployeeModal(
     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/AddEmployeeModal.vue'
+    import AddEmployeeModal from '@/components/Schedule/AddEmployeeModal.vue'
     import Coordinates from '@/types/coordinates'
 
     /*

src/main.ts

@@ -3,8 +3,6 @@ import { createPinia } from 'pinia'
 import piniaPersist from 'pinia-plugin-persist'
 import App from './App.vue'
 import router from './router'
-import Oruga from '@oruga-ui/oruga-next'
-import '@oruga-ui/oruga-next/dist/oruga.css'
 import 'bootstrap'
 import "bootstrap/scss/bootstrap.scss"
 import "bootstrap-icons/font/bootstrap-icons.css"
@@ -14,6 +12,5 @@ pinia.use(piniaPersist)
 
 createApp(App)
 .use(router)
-.use(Oruga)
 .use(pinia)
 .mount('#app')

src/stores/employees.ts

@@ -1,9 +1,11 @@
 import { defineStore } from 'pinia'
 import { useUser } from '@/stores/user'
+import { settingsEmployeesIndex } from './settings/employees-index'
 import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
 
 const user = useUser()
+const settings = settingsEmployeesIndex()
 
 export const useEmployees = defineStore('employees', {
     state: () => {
@@ -57,6 +59,7 @@ export const useEmployees = defineStore('employees', {
                 this.rows = _cloneDeep(data.data)
 
                 this.columns = this.fetchColumns()
+                await settings.fetchFromApi()
             }
             catch(err) {
                 console.log(err)

src/stores/settings/employees-index.ts

@@ -0,0 +1,47 @@
+import { defineStore } from "pinia";
+import { useEmployees } from "../employees";
+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 = ['id', 'first_name']
+            }
+            else { // if api response does not contain any columns, set default columns
+                this.columnsSelected = _clone(employees.columns);
+            }
+            this.columnsNotSelected = _difference(employees.columns, this.columnsSelected);
+        },
+
+        async save() {
+
+        },
+
+        selectColumn(column: string) {
+            this.columnsSelected.push(column);
+            this.columnsNotSelected = _pull(this.columnsNotSelected, column);
+        },
+
+        deselectColumn(column: string) {
+            this.columnsNotSelected.push(column);
+            this.columnsSelected = _pull(this.columnsSelected, column);
+        }
+    }
+})

src/views/Employees/Index.vue

@@ -1,16 +1,35 @@
 <template>
 
-<EmployeesSimpleSearch />
+<IndexSettingsModal 
+    :id="'indexSettingsModal'"
+/>
+
+<SimpleSearch />
+
 
 <table class="table table-hover mt-3 ">
     <thead>
         <tr>
             <th 
-                v-for="col in columns"
+                v-for="(col, index) in columns"
                 @click="onSortBy(col)"
             >
-                {{col}}
+                <div class="row">
-                <i :style="{visibility: colIsSelected(col) ? 'visible' : 'hidden'}" class="bi" :class="iconSort"></i>
+                    <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 === columns.length" class="btn my-0 py-0 btn-sm">
+                            <i class="bi bi-gear-fill"></i>
+                        </button> 
+                    </div>
+                </div>
+                
+                
+                
             </th>
         </tr>
     </thead>
@@ -38,7 +57,8 @@
 
 <script setup lang="ts">
 
-import EmployeesSimpleSearch from '@/components/Employees/EmployeesSimpleSearch.vue';
+import SimpleSearch from '@/components/Employees/SimpleSearch.vue';
+import IndexSettingsModal from '@/components/Employees/IndexSettingsModal.vue';
 import VPaginator from '@/components/VPaginator.vue';
 import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -47,7 +67,7 @@ import { useEmployees } from '@/stores/employees'
 
 const store = useEmployees()
 const router = useRouter()
-const { rows, meta, columns } = storeToRefs(store)
+const { rows, columns } = storeToRefs(store)
 
 const sort_by = reactive({
     asc: true,
@@ -58,8 +78,10 @@ onMounted(() => {
     store.fetchFromApi()
 })
 
-function colIsSelected(col : string) {
+function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
-    return col === sort_by.column
+    return {
+        visibility: sort_by.column === col ? 'visible' : 'hidden'
+    }
 }
 
 function onSortBy(col : string) {

src/views/Home.vue

@@ -12,7 +12,7 @@ Schedule( :startDate="new Date(selectedYear, selectedMonth)")
 <script lang="ts" setup>
   import { ref, computed } from 'vue'
   import { getYear, getMonth, eachMonthOfInterval, getDaysInMonth, getISODay } from 'date-fns'
-  import Schedule from '/src/components/Schedule.vue'
+  import Schedule from '/src/components/Schedule/Schedule.vue'
   import MonthPicker from '/src/components/MonthPicker.vue'
   import { useUser } from '@/stores/user'