some refactoring, started working on employee-view-settings

src/views/Employees/Index.vue

@@ -1,16 +1,35 @@
 <template>
 
-<EmployeesSimpleSearch />
+<IndexSettingsModal 
+    :id="'indexSettingsModal'"
+/>
 
-<table class="table table-hover mt-3">
+<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}}
-                <i :style="{visibility: colIsSelected(col) ? 'visible' : 'hidden'}" class="bi" :class="iconSort"></i>
+                <div class="row">
+                    <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) {
-    return col === sort_by.column
+function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
+    return {
+        visibility: sort_by.column === col ? 'visible' : 'hidden'
+    }
 }
 
 function onSortBy(col : string) {