Restructured Project Rep

pages/workingtimes/[mode]/[[id]].vue

@@ -0,0 +1,122 @@
+<script setup>
+import dayjs from "dayjs";
+
+
+const dataStore = useDataStore()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  startDate: new Date(),
+  endDate: new Date(),
+  profile: dataStore.activeProfile.id
+})
+const oldItemInfo = ref({})
+
+const setupPage = () => {
+  if(route.params.id && mode.value === 'edit') {
+    itemInfo.value = dataStore.getWorkingTimeById(Number(route.params.id))
+    //setStartEnd()
+  }
+  oldItemInfo.value = itemInfo.value
+}
+
+/*const setStartEnd = () => {
+  console.log("test")
+  console.log(String(itemInfo.value.date).split("T")[0])
+  itemInfo.value.date = String(itemInfo.value.date).split("T")[0]
+  itemInfo.value.start = new Date(itemInfo.value.date + "T" + itemInfo.value.start)
+  itemInfo.value.end = new Date(itemInfo.value.date + "T" + itemInfo.value.end)
+}*/
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar
+    :title="mode === 'show' ? `Anwesenheit: ${itemInfo.profile}` : (itemInfo.id ? 'Anwesenheit bearbeiten' :'Anwesenheit erstellen')"
+  >
+    <template #right>
+      <UButton
+        color="rose"
+        v-if="mode === 'edit'"
+        @click="router.push('/workingtimes')"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+        v-if="mode === 'edit' && itemInfo.id"
+        @click="dataStore.updateItem('workingtimes',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+        v-else-if="mode === 'edit' && !itemInfo.id"
+      >
+        Erstellen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UForm class="p-5">
+    <UFormGroup
+      label="Mitarbeiter:"
+    >
+      <USelectMenu
+        :options="dataStore.profiles"
+        v-model="itemInfo.profile"
+        option-attribute="fullName"
+        value-attribute="id"
+      />
+    </UFormGroup>
+    <UFormGroup label="Start:">
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('HH:mm') : 'Datum auswählen'"
+            variant="outline"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.startDate" @close="itemInfo.endDate = itemInfo.startDate" mode="dateTime"/>
+        </template>
+      </UPopover>
+    </UFormGroup>
+
+    <UFormGroup label="Ende:">
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton
+            variant="outline"
+            icon="i-heroicons-calendar-days-20-solid"
+            :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('HH:mm') : 'Datum auswählen'"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.endDate" @close="close" mode="time"/>
+        </template>
+      </UPopover>
+    </UFormGroup>
+    <UFormGroup
+      label="Genehmigt:"
+    >
+      <UCheckbox
+        v-model="itemInfo.approved"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Notizen:"
+    >
+      <UTextarea
+        v-model="itemInfo.notes"
+      />
+    </UFormGroup>
+  </UForm>
+
+</template>
+
+<style scoped>
+
+</style>