add form for new sessions

packages/frontend/package.json

@@ -21,11 +21,13 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "date-fns": "^2.29.3",
     "pinia": "^2.0.32",
+    "rest-client": "file:./generated-sources/client",
     "simplebar": "^2.4.3",
     "swiper": "^9.1.1",
+    "vee-validate": "^4.8.4",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
-    "rest-client": "file:./generated-sources/client"
+    "yup": "^1.0.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.31.1",

packages/frontend/src/components/ButtonComponent.vue

@@ -0,0 +1,11 @@
+<template>
+  <button class="bg-orange-600 hover:bg-orange-700 border-b-orange-700 border-b-2 text-white font-medium text-sm py-2 px-6 rounded-sm">
+    {{ text }}
+  </button>
+</template>
+
+<script setup lang="ts">
+
+defineProps(['text'])
+
+</script>

packages/frontend/src/components/CheckboxComponent.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="w-full md:w-1/2 px-3 pb-4 md:mt-[23px]">
+    <div class="flex items-center pl-2 border border-neutral-600 hover:cursor-pointer">
+      <Field
+        v-slot="{ field }"
+        :name="fieldName"
+        type="checkbox"
+        :value="true"
+        :unchecked-value="false"
+      >
+        <label
+          :for="fieldName"
+          class="w-full flex items-center py-3 ml-2 text-sm text-neutral-200 hover:cursor-pointer"
+        >
+          <input
+            :id="fieldName"
+            type="checkbox"
+            v-bind="field"
+            :value="true"
+            :checked="false"
+            class="w-4 h-4 mr-2 bg-neutral-100 border-gray-300 rounded accent-orange-600 hover:cursor-pointer"
+          />
+          <span>
+            {{ labelText }}
+          </span>
+        </label>
+      </Field>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Field } from 'vee-validate'
+
+defineProps(['labelText', 'fieldName'])
+</script>

packages/frontend/src/components/InputfieldComponent.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full md:w-1/2 px-3 pb-6 md:mb-0">
+    <label class="block uppercase tracking-wide text-neutral-200 text-xs font-bold mb-2">
+      {{ labelText }}
+    </label>
+    <Field :name="fieldName" v-slot="{ field, errors }">
+      <input
+        v-if="inputType !== 'textarea'"
+        v-bind="field"
+        :type="inputType"
+        class="appearance-none block w-full bg-neutral-900 text-neutral-200 border-t-neutral-900 border-t-[1px] border-b-neutral-600 border-b-[1px] py-3 px-4 leading-tight focus:border-b-2 focus:border-t-0 focus:outline-none"
+        :class="{ 'border-b-red-700': !!errors.length }"
+      />
+      <textarea
+        v-if="inputType === 'textarea'"
+        rows="4"
+        v-bind="field"
+        class="appearance-none block w-full bg-neutral-900 text-neutral-200 border-t-neutral-900 border-t-[1px] border-b-neutral-600 border-b-[1px] py-3 px-4 leading-tight focus:border-b-2 focus:border-t-0 focus:outline-none"
+        :class="{ 'border-b-red-700': !!errors.length }"
+      />
+    </Field>
+    <ErrorMessage :name="fieldName" class="text-red-500 text-xs" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Field, ErrorMessage } from 'vee-validate'
+
+defineProps(['labelText', 'fieldName', 'inputType'])
+</script>

packages/frontend/src/components/NavbarComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative bg-neutral-800 border-b-1 border-neutral-600 z-20">
+  <div v-click-outside="closeNav" class="relative bg-neutral-800 border-b-1 border-neutral-600 z-20">
     <nav class="h-16">
       <div class="container mx-auto px-6 pt-4 flex items-center justify-between pb-4">
         <router-link
@@ -16,22 +16,25 @@
         </a>
       </div>
       <!-- Change max-height when adding new menu points -->
-      <div class=" bg-neutral-800">
-        <ul
-        :class="showMenu ? 'max-h-40 pb-1' : 'max-h-0'"
-        class="container mx-auto px-6 flex flex-col items-center transition-max-height duration-300 overflow-hidden"
+      <div
+        class="bg-neutral-800"
+        :class="showMenu ? ' border-b-2 border-neutral-600' : ''"
       >
-        <router-link
-          active-class="font-bold text-orange-400"
-          :to="`${item.route}`"
-          @click="toggleNav"
-          class="text-neutral-100 hover:text-orange-400 py-2.5 cursor-pointer text-center block w-full border-t border-neutral-700 transition duration-0 hover:duration-300"
-          v-for="item in menuItems"
-          :key="item.name"
+        <ul
+          :class="showMenu ? 'max-h-40 pb-1' : 'max-h-0'"
+          class="container mx-auto px-6 flex flex-col items-center transition-max-height duration-300 overflow-hidden"
         >
-          {{ item.name }}
-        </router-link>
-      </ul>
+          <router-link
+            active-class="font-bold text-orange-400"
+            :to="`${item.route}`"
+            @click="toggleNav"
+            class="text-neutral-100 hover:text-orange-400 py-2.5 cursor-pointer text-center block w-full border-t border-neutral-700 transition duration-0 hover:duration-300"
+            v-for="item in menuItems"
+            :key="item.name"
+          >
+            {{ item.name }}
+          </router-link>
+        </ul>
       </div>
     </nav>
   </div>
@@ -49,12 +52,10 @@ let menuItems = [
   {
     route: 'addSession',
     name: 'Neue Session hinzufügen'
-  },
-  {
-    route: 'addSession',
-    name: 'Adminbereich'
   }
 ]
 let showMenu = ref(false)
 const toggleNav = () => (showMenu.value = !showMenu.value)
+const closeNav = () => (showMenu.value = false)
+
 </script>

packages/frontend/src/components/SelectComponent.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="w-full md:w-1/2 px-3 pb-6 md:mb-0">
+    <Field :name="fieldName" v-slot="{ field }">
+      <label
+        :for="fieldName"
+        class="block uppercase tracking-wide text-neutral-200 text-xs font-bold mb-2"
+      >
+        {{ labelText }}
+      </label>
+      <select
+        :id="fieldName"
+        v-bind="field"
+        class="bg-neutral-900 border-b-[1px] border-b-neutral-600 text-neutral-200 text-sm block w-full p-3 focus-visible:outline-none hover:cursor-pointer"
+      >
+        <option
+          v-for="option in options"
+          :key="option.key"
+          :value="option.key"
+        >
+          {{ option.name }}
+        </option>
+      </select>
+    </Field>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Field } from 'vee-validate'
+
+defineProps(['labelText', 'fieldName', 'options'])
+</script>

packages/frontend/src/main.ts

@@ -8,7 +8,7 @@ import App from './App.vue'
 import router from './router'
 
 import './assets/main.css'
-import 'swiper/css';
+import 'swiper/css'
 import { initializeIcons } from './icons'
 
 const app = createApp(App)
@@ -24,6 +24,20 @@ app.directive('resize', {
   }
 })
 
+app.directive('click-outside', {
+  beforeMount: (el, binding) => {
+    el.clickOutsideEvent = (event: any) => {
+      if (!(el == event.target || el.contains(event.target))) {
+        binding.value()
+      }
+    }
+    document.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted: (el) => {
+    document.removeEventListener('click', el.clickOutsideEvent)
+  }
+})
+
 register()
 
 app.use(createPinia())