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'
 
     /*