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>

src/stores/employees.ts

@@ -5,7 +5,6 @@ import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
 
 const user = useUser()
-const settings = settingsEmployeesIndex()
 
 export const useEmployees = defineStore('employees', {
     state: () => {
@@ -59,7 +58,6 @@ 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

@@ -22,7 +22,7 @@ export const settingsEmployeesIndex = defineStore({
             const employees = useEmployees()
 
             if (true){ //check, if api response contains any columns
-                this.columnsSelected = ['id', 'first_name']
+                this.columnsSelected = ['last_name', 'first_name', 'email', 'phone', 'mobile', 'role']
             }
             else { // if api response does not contain any columns, set default columns
                 this.columnsSelected = _clone(employees.columns);
@@ -30,18 +30,18 @@ export const settingsEmployeesIndex = defineStore({
             this.columnsNotSelected = _difference(employees.columns, this.columnsSelected);
         },
 
-        async save() {
-
+        updateColumnsSelected(data : string[]) {
+            this.columnsSelected = data;
+            this.columnsNotSelected = _difference(this.columnsNotSelected, data);
+            this.persist()
         },
 
-        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);
+        /**
+        *   Persist columnsSelected to API
+         */
+        async persist() {
+            console.log("persist")
+            console.log(this.columnsSelected)
         }
     }
 })

src/views/Employees/Index.vue

@@ -1,17 +1,24 @@
 <template>
 
 <IndexSettingsModal 
-    :id="'indexSettingsModal'"
+    id="indexSettingsModal"
+    :left-column="settings.columnsSelected"
+    :right-column="settings.columnsNotSelected"
+
+    @update-columns-selected="settings.updateColumnsSelected($event)"
 />
 
-<SimpleSearch />
+<SimpleSearch 
+    :columns="settings.columnsSelected"
+    @search="store.setSimpleSearch($event)"
+/>
 
 
-<table class="table table-hover mt-3 ">
+<table class="table table-hover table-bordered mt-3 ">
     <thead>
         <tr>
             <th 
-                v-for="(col, index) in columns"
+                v-for="(col, index) in settings.columnsSelected"
                 @click="onSortBy(col)"
             >
                 <div class="row">
@@ -22,20 +29,17 @@
                         {{ 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">
+                        <button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" v-if="index + 1 === settings.columnsSelected.length" class="btn my-0 py-0 btn-sm">
                             <i class="bi bi-gear-fill"></i>
                         </button> 
                     </div>
                 </div>
-                
-                
-                
             </th>
         </tr>
     </thead>
     <tbody>
         <tr v-for="employee in rows" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
-            <td v-for="col in columns">
+            <td v-for="col in settings.columnsSelected">
                 {{ employee[col] }}
             </td>
         </tr>
@@ -56,7 +60,6 @@
 </template>
 
 <script setup lang="ts">
-
 import SimpleSearch from '@/components/Employees/SimpleSearch.vue';
 import IndexSettingsModal from '@/components/Employees/IndexSettingsModal.vue';
 import VPaginator from '@/components/VPaginator.vue';
@@ -64,9 +67,12 @@ import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useEmployees } from '@/stores/employees'
+import { settingsEmployeesIndex } from '@/stores/settings/employees-index';
 
 const store = useEmployees()
 const router = useRouter()
+const settings = settingsEmployeesIndex()
+
 const { rows, columns } = storeToRefs(store)
 
 const sort_by = reactive({
@@ -74,8 +80,9 @@ const sort_by = reactive({
     column: 'id'
 })
 
-onMounted(() => {
-    store.fetchFromApi()
+onMounted(async () =>{
+    await store.fetchFromApi()
+    await settings.fetchFromApi()
 })
 
 function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {