added lots of animations, added debounce to search query, fixed faulty refetching when logging out from profile page

src/components/Employees/SimpleSearch.vue

@@ -29,6 +29,7 @@
 import { ref, computed} from 'vue';
 import type { PropType, Ref } from 'vue';
 import { union } from 'lodash';
+import _debounce from 'lodash/debounce'
 
 const props = defineProps({
     columns: {
@@ -50,9 +51,9 @@ const unionColumns = computed(() => {
     return union(props.columns, columnsChecked.value)
 })
 
-async function search() {
+const search = _debounce(() => { 
     emit('search', queryString.value)
-}
+}, 150)
 
 </script>
 

src/components/VNavigation.vue

@@ -1,19 +1,3 @@
-<script setup lang="ts">
-
-import { useRouter } from 'vue-router';
-import { useUser } from '@/stores/user';
-
-const userStore = useUser()
-const router = useRouter()
-
-async function onLogout() {
-	if(await userStore.logout()){
-		router.push({name: 'Login'})
-	}
-}
-
-</script>
-
 <template>
     <nav class="nav justify-content-center border-bottom mb-4 pb-2 d-flex">
 		<router-link class="nav-link" :to="{name: 'Home'}">Home</router-link>
@@ -32,6 +16,20 @@ async function onLogout() {
 	</nav>
 </template>
 
+<script setup lang="ts">
+
+import { useRouter } from 'vue-router';
+import { useUser } from '@/stores/user';
+
+const userStore = useUser()
+const router = useRouter()
+
+function onLogout() {
+	userStore.logout(router)
+}
+
+</script>
+
 <style scoped>
 
 </style>

src/components/VProfileControls.vue

@@ -29,25 +29,50 @@ function onCancel() {
         Zurück
     </router-link>
 
-    <button v-if="!isActive" type="button" @click="onEdit" class="btn btn-primary ms-auto">
-        <i class="bi bi-pen"></i>
-        Mitarbeiter bearbeiten
-    </button>
-
-    <button v-if="isActive" type="submit" @click.prevent="onSave" class="btn btn-success ms-auto">
-        <i class="bi bi-save"></i>
-        Mitarbeiter speichern
-    </button>
-
-    <button v-if="isActive" type="button" @click="onCancel" class="btn btn-outline-secondary ms-3">
-        <i class="bi bi-x-lg"></i>
-        Abbrechen
-</button>
+    <transition name="button-save" mode="out-in">
+        <div class="ms-auto" v-if="isActive">
+            <button v-if="isActive" type="submit" @click.prevent="onSave" class="btn btn-success">
+                <i class="bi bi-save"></i>
+                Mitarbeiter speichern
+            </button>
+            <button v-if="isActive" type="button" @click="onCancel" class="btn btn-outline-secondary ms-3">
+                <i class="bi bi-x-lg"></i>
+                Abbrechen
+            </button>
+        </div>
+        <div v-else class="ms-auto">
+            <button v-if="!isActive" type="button" @click="onEdit" key="button-not-active" class="btn btn-primary">
+                <i class="bi bi-pen"></i>
+                Mitarbeiter bearbeiten
+            </button>
+        </div>
+    </transition> 
+        
 </div>
 
 
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+
+@mixin animation-target($offset) {
+    opacity: 0;
+    transform: translateX($offset);
+}
+.button-save-{
+    &enter-active,
+    &leave-active {
+        transition: all .1s ease-in-out
+    }
+
+    &enter-from,
+    &leave-to {
+        @include animation-target(15px)
+    }
+
+    &leave-to {
+        @include animation-target(-15px)
+    }
+}
 
 </style>