made IndexSettingsModal more modular.

src/components/Employees/IndexSettingsModal.vue

@@ -11,39 +11,35 @@
                 <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>
+                            <option v-for="column in leftColumn">{{ 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)">
+                        <button class="btn btn-sm btn-outline-primary px-1 mb-1" @click="colUp(clickedLeft, leftColumn)">
                             <i class="bi bi-caret-up"></i>
                         </button>
                         <br>
-                        <button class="btn btn-sm btn-outline-primary px-1" @click="colDown(clickedLeft, settings.columnsSelected)">
+                        <button class="btn btn-sm btn-outline-primary px-1" @click="colDown(clickedLeft, leftColumn)">
                             <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">
+                        <button class="btn btn-sm btn-outline-primary mb-1" @click="moveLeft">
                             <i class="bi bi-caret-left"></i>
                         </button>
                         <br>
-                        <button class="btn btn-sm btn-outline-primary" @click="removeColumn">
+                        <button class="btn btn-sm btn-outline-primary" @click="moveRight">
                             <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>
+                            <option v-for="column in rightColumn" :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 class="modal-footer"></div>
         </div>
     </div>
 </div>
@@ -53,31 +49,41 @@
 </template>
 
 <script setup lang="ts">
-
-import { settingsEmployeesIndex } from '@/stores/settings/employees-index';
-import { useEmployees } from '@/stores/employees';
-import { ref } from 'vue';
+import { ref, toRefs, onMounted } from 'vue';
+import type { PropType } from 'vue';
+import _pull from 'lodash/pull'
 
 
 const props = defineProps({
     id: {
-        type: String
+        type: String,
+        required: true
+    },
+    leftColumn: {
+        type: Array as PropType<string[]>,
+        required: true
+    },
+    rightColumn: {
+        type: Array as PropType<string[]>,
+        required: true
     }
 })
 
+const emit = defineEmits(['updateColumnsSelected'])
+
+const { leftColumn, rightColumn } = toRefs(props)
+
 const clickedLeft = ref('')
 const clickedRight = ref('')
 
-const employees = useEmployees()
-const settings = settingsEmployeesIndex()
-
-
-function addColumn() {
-    settings.selectColumn(clickedRight.value)
+function moveLeft() {
+    leftColumn.value.push(clickedRight.value)
+    _pull(rightColumn.value, clickedRight.value)
 }
 
-function removeColumn() {
-    settings.deselectColumn(clickedLeft.value)
+function moveRight() {
+    rightColumn.value.push(clickedLeft.value)
+    _pull(leftColumn.value, clickedLeft.value)
 }
 
 function colUp(clicked : string, array : string[]){
@@ -98,6 +104,12 @@ function colDown(clicked : string, array : string[]){
     } 
 }
 
+onMounted(() => {
+    const modal = document.getElementById(props.id)
+
+    modal?.addEventListener('hide.bs.modal', () => emit('updateColumnsSelected', leftColumn.value))
+})
+
 </script>
 
 <style scoped>

src/components/Employees/SimpleSearch.vue

@@ -11,9 +11,9 @@
         Suche in...
     </button>
     <ul class="dropdown-menu">
-        <li v-for="(item, index) in unionColumns" :key="item">
+        <li v-for="(item) in unionColumns" :key="item">
             <label class="dropdown-item form-check">
-                <input type="checkbox" :value="item" :id="'checkBox'+item" v-model="checkedColumns" class="form-check-input">
+                <input type="checkbox" :value="item" :id="'checkBox'+item" v-model="columnsChecked" class="form-check-input">
                 {{item}}
             </label>
         </li>
@@ -22,32 +22,36 @@
         </li>
     </ul>
 </div>
-
 </template>
 
 <script setup lang="ts">
 
 import { ref, computed} from 'vue';
-import { storeToRefs } from 'pinia'
-import { useEmployees } from '@/stores/employees';
+import type { PropType, Ref } from 'vue';
 import { union } from 'lodash';
 
-const searchQuery = ref('')
-const checkedColumns = ref([])
-const store = useEmployees()
-const { columns, simple_search } = storeToRefs(store)
+const props = defineProps({
+    columns: {
+        type: Array as PropType<string[]>,
+        required: true
+    }
+})
+
+const emit = defineEmits(['search'])
+
+const searchQuery : Ref<string> = ref('')
+const columnsChecked : Ref<string[]> = ref([])
 
 const queryString = computed(() => {
-    return searchQuery.value + '(' + checkedColumns.value.join(',') + ')'
+    return searchQuery.value + '(' + columnsChecked.value.join(',') + ')'
 })
 
 const unionColumns = computed(() => {
-    return union(columns.value, checkedColumns.value)
+    return union(props.columns, columnsChecked.value)
 })
 
 async function search() {
-    simple_search.value = queryString.value
-    await store.fetchFromApi()
+    emit('search', queryString.value)
 }
 
 </script>