some refactoring, fixed addEmployeeModal, played with scss

src/components/Employees/SimpleSearch.vue

@@ -56,14 +56,15 @@ async function search() {
 
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 .form-check {
     padding-left: 20px;
-}
+
-.form-check input {
+    input {
-    margin-left: -0.5rem;
         margin-right: 0.5rem;
+        margin-left: -0.5rem;
+    }
 }
 
 </style>

src/components/Schedule/AddEmployeeModal.vue

@@ -31,11 +31,11 @@ div.modal.fade(
                             :key="i"
                             @click="setResult(sugg)"
                             :class="{'active' : selected === i}"
-                        ) {{sugg.name}}
+                        ) {{sugg.last_name}}, {{sugg.first_name}}
 </template>
 
 <script setup lang="ts">
-    import { computed, ref, watch, onMounted } from 'vue'
+    import { ref, onMounted } from 'vue'
     import type { Ref } from 'vue'
 
     /**
@@ -67,8 +67,10 @@ div.modal.fade(
      * Begin functions
      */
     function filterResults(query : string) {
-        suggestions.value = props.searchData.filter((el: { name: string }) => {
+        console.log(props.searchData)
-            return el.name.toLowerCase().search(query.toLowerCase()) > -1
+        console.log(query)
+        suggestions.value = props.searchData.filter((el: { first_name: string, last_name: string }) => {
+            return (el.last_name+', '+el.first_name).toLowerCase().search(query.toLowerCase()) > -1
         })
         if(selected.value >= suggestions.value.length){
             selected.value = suggestions.value.length - 1
@@ -77,7 +79,7 @@ div.modal.fade(
 
     function setResult(pResult : Employee) {
         result.value = pResult
-        query.value = pResult.name
+        query.value = pResult.last_name+', '+pResult.first_name
         isOpenSuggestions.value = false
         selected.value = 0
         suggestions.value = []
@@ -139,16 +141,16 @@ div.modal.fade(
     })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
-li.dropdown-item:active,
-li.dropdown-item.active {
-    background-color: #e9ecef;
-    color: #1e2125;
-}
 
 li.dropdown-item {
     cursor: pointer;
+
+    &.active, &:active {
+        background-color: #007bff;
+        color: #fff;
+    }
 }
 
+
 </style>

src/components/Schedule/Schedule.vue

@@ -24,7 +24,7 @@ AddEmployeeModal(
             tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
                 td()
                     .row.justify-content-between.align-items-center.employee-wrapper
-                        .col.text-start.ps-3 {{employee.handle}}
+                        .col.text-start.ps-3 {{employee.shorthand}}
                         .col.text-end
                             button.btn.btn-sm(
                                 @click="removeEmployee(mIndex, rIndex, employee)"
@@ -66,7 +66,7 @@ AddEmployeeModal(
 
 
 <script setup lang="ts">
-    import { watch, computed, ref, onMounted } from 'vue'
+    import { watch, computed, ref } from 'vue'
     import type { Ref, ComputedRef } from 'vue'
     import { storeToRefs } from 'pinia'
     import { useEmployees } from '@/stores/employees'
@@ -339,7 +339,7 @@ AddEmployeeModal(
 
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     table {
         table-layout: fixed;
         -ms-user-select: none;
@@ -348,10 +348,11 @@ AddEmployeeModal(
         -webkit-touch-callout: none;
         -khtml-user-select: none;
         user-select: none;
-    }
+
-    table td {
+        td {
             cursor: pointer;
         }
+    }
 
     .o-acp__item.list-group-item:hover {
         background-color: aliceblue !important;
@@ -368,9 +369,6 @@ AddEmployeeModal(
     }
 
     .selected {
-        /* border: 1px solid var(--bs-body-color) !important; */
-    
-        /* border: var(--bs-primary); */
         background-color: var(--bs-secondary);
         opacity: 0.1;
     }

src/stores/employee.ts

@@ -3,20 +3,6 @@ import axios from '@/axios'
 import { useUser } from './user'
 import { useNotifications } from './notifications'
 
-type ResultData = {
-	id: number,
-	firstName: string,
-	lastName: string | undefined,
-	shorthand: string,
-	phone: string | undefined,
-	mobile: string | undefined,
-	email: string | undefined,
-	contractHours: number,
-	isActive: boolean,
-	username: string | undefined,
-    role: string
-}
-
 const user = useUser()
 const notifications = useNotifications()
 
@@ -26,6 +12,7 @@ export const useEmployee = defineStore({
     state: () => {
         return {
             clean: {
+                /** @type Employee */
                 employee: {
                     id: NaN,
                     firstName: '',
@@ -42,6 +29,7 @@ export const useEmployee = defineStore({
                 },
             },
 
+            /** @type Employee */
             employee: {
                 id: NaN,
                 firstName: '',
@@ -72,7 +60,7 @@ export const useEmployee = defineStore({
             this.$reset()
 
             try {
-                const data : ResultData = await <ResultData>(await axios.get('employees/'+id, {
+                const data : Employee = await <Employee>(await axios.get('employees/'+id, {
                     headers: user.header
                 })).data
 

src/types/schedule-data.d.ts

@@ -4,9 +4,15 @@ type ScheduleData = [
 
 type Employee = {
     id: number,
-    name: string,
+    first_name: string,
-    handle: string
+    last_name: string,
+    email: string,
+    phone: string,
+    mobile: string,
+    role: string,
+    shorthand: string,
     contractHours?: number
+    username?: string
 }
 
 type ScheduleRow = {

tsconfig.json

@@ -18,5 +18,5 @@
       "node"
     ]
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/stores/employees.js"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }