updated dependencies

Sockenklaus/issue26

README.md

@@ -1,11 +1,25 @@
-# Vue 3 + Typescript + Vite
+# About Duty-Schedule-FE
+
+Duty-Schedule-FE is the web frontend for Duty-Schedule, a software to create and distribute team based duty schedules für employees working in a shift system that consists of one daily shift and one daily on-call duty.
+
+This software is, as of today, in a ***very, very early development stage***.
+
+## Planned features
+
+* [ ] 🧑‍⚕️ Create and manage employees with standing data, working hours and individual user logins
+* [ ] 🤴 Create and manage customers with default workload, shift lengths and core teams
+* [ ] 📋 Create and manage duty schedules for any customer with core team members and additional team members.
+* [ ] 🗄️ Version duty schedules and retrace the change process of any schedule
+* [ ] 📧 Distribute new schedule versions to customer, core team and additional team members.
+
+## Vue 3 + Typescript + Vite
 
 This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-## Recommended IDE Setup
+### Recommended IDE Setup
 
 - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 
-## Type Support For `.vue` Imports in TS
+### Type Support For `.vue` Imports in TS
 
 Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

package.json

@@ -8,32 +8,31 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@oruga-ui/oruga-next": "^0.4.5",
+    "@popperjs/core": "^2.11.0",
-    "@popperjs/core": "^2.10.2",
     "@vuelidate/core": "^2.0.0-alpha.32",
     "@vuelidate/validators": "^2.0.0-alpha.25",
-    "axios": "^0.23.0",
+    "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.6.0",
+    "bootstrap-icons": "^1.7.2",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.27.0",
     "lodash": "^4.17.21",
-    "pinia": "^2.0.3",
+    "pinia": "^2.0.6",
     "pinia-plugin-persist": "^0.0.92",
     "uuid": "^8.3.2",
-    "vue": "^3.2.21",
+    "vue": "^3.2.23",
     "vue-imask": "^6.2.2",
     "vue-request": "^1.2.3",
     "vue-router": "^4.0.12",
-    "vue-tsc": "^0.3.0"
+    "vue-tsc": "^0.29.8"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.1.6",
-    "@types/lodash": "^4.14.176",
+    "@types/lodash": "^4.14.178",
-    "@types/node": "^16.11.1",
+    "@types/node": "^17.0.0",
-    "@types/uuid": "^8.3.1",
+    "@types/uuid": "^8.3.3",
-    "@vitejs/plugin-vue": "^1.9.3",
+    "@vitejs/plugin-vue": "^2.0.1",
-    "sass": "^1.43.2",
+    "sass": "^1.45.0",
-    "typescript": "^4.4.4",
+    "typescript": "^4.5.4",
-    "vite": "^2.6.7"
+    "vite": "^2.7.3"
   }
 }

src/components/Employees/SimpleSearch.vue

@@ -51,9 +51,12 @@ const unionColumns = computed(() => {
     return union(props.columns, columnsChecked.value)
 })
 
-const search = _debounce(() => { 
+function search() {
     emit('search', queryString.value)
-}, 150)
+}
+/* const search = _debounce(() => { 
+    emit('search', queryString.value)
+}, 150) */
 
 </script>
 

src/components/Schedule/AddEmployeeModal.vue

@@ -31,7 +31,7 @@ div.modal.fade(
                             :key="i"
                             @click="setResult(sugg)"
                             :class="{'active' : selected === i}"
-                        ) {{sugg.last_name}}, {{sugg.first_name}}
+                        ) {{sugg.lastName}}, {{sugg.firstName}}
 </template>
 
 <script setup lang="ts">
@@ -79,7 +79,7 @@ div.modal.fade(
 
     function setResult(pResult : Employee) {
         result.value = pResult
-        query.value = pResult.last_name+', '+pResult.first_name
+        query.value = pResult.lastName+', '+pResult.firstName
         isOpenSuggestions.value = false
         selected.value = 0
         suggestions.value = []

src/stores/employee.ts

@@ -54,8 +54,8 @@ export const useEmployee = defineStore({
     },
 
     actions: {
-        assignTruthyValues(target: Object, source: Object) {
+        assignTruthyValues(target: Employee, source: Employee) {
-            for (const key in source) {
+            for (let key in source) {
                 if (source[key]) {
                     target[key] = source[key]
                 }

src/stores/employees.ts

@@ -3,6 +3,7 @@ import { useUser } from '@/stores/user'
 import axios from '@/axios'
 import _cloneDeep from 'lodash/cloneDeep'
 import _assign from 'lodash/assign'
+import _debounce from 'lodash/debounce'
 import { reactive, watch, onMounted } from 'vue'
 
 export default defineStore('employees', () => {
@@ -74,9 +75,9 @@ export default defineStore('employees', () => {
         state.page = pPage
     }
 
-    watch(() => [state.limit, state.sort_by, state.simple_search, state.page], () => {
+    watch(() => [state.limit, state.sort_by, state.simple_search, state.page], _debounce(() => {
         fetchFromApi()
-    })
+    }, 300))
 
     onMounted(() => {
         fetchFromApi()

src/types/employees.d.ts

@@ -13,7 +13,8 @@ type Employee = {
     passwordConfirm?: string,
     isActive: boolean,
     createdAt?: Date,
-    updatedAt?: Date
+    updatedAt?: Date,
+    [key: string]: any
 }
 
 type EmployeeApiValidationError = {