Started implementation of profile / employee-form

src/App.vue

@@ -2,13 +2,8 @@
 	<v-app>
     	<v-main>
           	<Notification />
-      		<div class="container shadow p-3 text-center">
-				<nav class="nav justify-content-center border-bottom mb-4 pb-2">
-					<router-link class="nav-link" to="/">Home</router-link>
-
-					<a v-if="userStore.isLoggedIn" href="#" @click="onLogout()" class="nav-link">Logout</a>
-					<router-link v-else to="Login" class="nav-link">Login</router-link>
-				</nav>
+      		<div class="container shadow px-4 pt-3 pb-5 text-center">
+				<VNavigation />				
         		<router-view></router-view>
       		</div>
 
@@ -19,18 +14,7 @@
 <script setup lang="ts">
 
 import Notification from '@/components/Notification.vue';
-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'})
-	}
-}
-
+import VNavigation from './components/VNavigation.vue';
 
 </script>
 

src/components/VNavigation.vue

@@ -0,0 +1,36 @@
+<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="/">Home</router-link>
+        <div class="ms-auto"></div>
+        <router-link 
+            v-if="userStore.isLoggedIn" 
+            class="nav-link" 
+            :to="{name: 'Profile'}"
+        >
+            Profile
+        </router-link>
+
+		<a v-if="userStore.isLoggedIn" href="#" @click="onLogout()" class="nav-link">Logout</a>
+		<router-link v-else to="Login" class="nav-link">Login</router-link>
+	</nav>
+</template>
+
+<style scoped>
+
+</style>

src/components/VProfileControls.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+
+const isActive : Ref<boolean> = ref(false)
+
+function onEdit() {
+    isActive.value = true
+}
+
+function onSave() {
+
+}
+
+function onCancel() {
+    isActive.value = false
+}
+
+</script>
+
+<template>
+<div class="d-flex">
+    <router-link type="button" :to="{name: 'Home'}" class="btn btn-outline-secondary">
+        <i class="bi bi-chevron-left"></i>
+        Zurück
+    </router-link>
+
+    <button v-if="!isActive" type="button" @click="onEdit" class="btn btn-primary ms-auto">
+        <i class="bi bi-pen"></i>
+        Bearbeiten
+    </button>
+
+    <button v-if="isActive" type="button" @click="onSave" class="btn btn-success ms-auto">
+        <i class="bi bi-save"></i>
+        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>
+
+
+</template>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -21,6 +21,15 @@ const routes: Array<RouteRecordRaw> = [
       requiresAdmin: false
     }
   },
+  {
+    path: '/employees/me',
+    name: 'Profile',
+    component: () => import('@/views/Profile.vue'),
+    meta: { 
+      requiresAuth: true,
+      requiresAdmin: false
+    }
+  },
   {
     path: '/:pathMatch(.*)*/',
     name: 'not-found',

src/views/Login.vue

@@ -45,7 +45,6 @@
 
 <script setup lang="ts">
 import { useUser } from '@/stores/user'
-import { truncate } from 'fs/promises'
 import { reactive, watch } from 'vue'
 import { useRouter } from 'vue-router'
 

src/views/Profile.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+
+type ResultData = {
+	employee: {
+		id: number,
+		firstName: string,
+		lastName: string,
+		shorthand: string,
+		phone: string,
+		mobile: string,
+		email: string,
+		contractHours: number,
+		hasUser: Boolean,
+	},
+	user: {
+		id?: number,
+		username?: string
+	}
+}
+
+import VProfileControls from '@/components/VProfileControls.vue';
+import { reactive, onMounted } from 'vue'
+import { useUser } from '@/stores/user';
+import axios from 'axios'
+import { useNotifications } from '@/stores/notifications';
+
+const userStore = useUser()
+const useNotification = useNotifications()
+
+const employee = reactive({
+    id: NaN,
+    firstName: '',
+    lastName: '',
+    shorthand: '',
+    phone: '',
+    mobile: '',
+    email: '',
+    contractHours: '',
+    hasUser: false
+})
+
+const user = reactive({
+    id: NaN,
+    username: '',
+    password: '',
+    passwordRepeat: ''
+})
+
+
+
+function onEnter() {
+    console.log("hi")
+}
+
+onMounted(async () => {
+    const ai = axios.create({
+        baseURL: 'http://localhost:3333/api/v1/',
+        headers: { 
+            'Authorization': 'Bearer '+userStore.token
+        }
+    })
+
+    try {
+        const data : ResultData = await <ResultData>(await ai.get('employees/me')).data
+
+        Object.assign(employee, data.employee)
+        Object.assign(user, data.user)        
+    }
+    catch(err){
+        if(err instanceof Error) useNotification.add('danger', err.message, -1)
+    }
+    
+})
+
+</script>
+
+<template>
+
+<VProfileControls class="mb-5" />
+
+{{employee}}
+
+{{user}}
+
+<form @keydown.enter="onEnter" class="text-start">
+    <div class="row mb-5">
+        <div class="col pe-5">
+            <h4 class="">Persönliche Informationen</h4>
+
+            <label for="first-name" class="form-label">Vorname:</label>
+            <input type="text" v-model="employee.firstName" id="first-name" class="form-control">
+
+            <label for="last-name" class="form-label">Nachname:</label>
+            <input type="text" v-model="employee.lastName" id="last-name" class="form-control">
+
+            <label for="shorthand" class="form-label">Kürzel:</label>
+            <input type="text" v-model="employee.shorthand" id="shorthand" class="form-control">
+        </div>
+        <div class="col ps-5 border-start">
+            <h4 class="">Kontaktdaten</h4>
+            <label for="phone" class="form-label">Telefonnummer:</label>
+            <input type="phone" v-model="employee.phone" id="phone" class="form-control">
+            <label for="mobile" class="form-label">Handynummer:</label>
+            <input type="mobile" v-model="employee.mobile" id="mobile" class="form-control">
+            <label for="email" class="form-label">E-Mail-Adresse:</label>
+            <input type="email" v-model="employee.email" id="email" class="form-control">
+        </div>
+    </div>
+    
+    <div class="row">
+        <div class="col pe-5">
+            <h4 class="">Vertragsinformationen:</h4>
+            <label for="contract-hours" class="form-label">Wochenstunden:</label>
+            <input type="number" v-model="employee.contractHours" id="contract-hours" class="form-control">
+        </div>
+        <div class="col ps-5 border-start">
+            <template v-if="employee.hasUser">
+                <h4>Benutzerinformationen:</h4>
+                <label for="username" class="form-label">Benutzername:</label>
+                <input type="text" v-model="user.username" id="username" class="form-control" disabled>
+                <label for="password" class="form-label">Passwort:</label>
+                <input type="password" v-model="user.password" id="password" class="form-control">
+                <label for="password-repeat" class="form-label">Passwort wiederholen:</label>
+                <input type="password" v-model="user.passwordRepeat" id="password-repeat" class="form-control">
+            </template>
+        </div>
+    </div>
+    
+</form>
+
+
+
+</template>
+
+<style scoped>
+
+.form-label {
+    margin-top: 0.75rem
+}
+
+</style>