Restructured Workingtimes without date to start and end

Added Page to Edit Workingtimes

spaces/pages/vendors/[mode]/[[id]].vue

@@ -1,5 +1,4 @@
 <script setup>
-import HistoryDisplay from "~/components/HistoryDisplay.vue";
 
 definePageMeta({
   middleware: "auth"

spaces/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>

spaces/pages/workingtimes/index.vue

@@ -4,8 +4,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat"
 
 dayjs.extend(customParseFormat)
 
-import VueDatePicker from '@vuepic/vue-datepicker'
-import '@vuepic/vue-datepicker/dist/main.css'
+
 
 
 definePageMeta({
@@ -16,6 +15,7 @@ const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const toast = useToast()
+const router = useRouter()
 
 
 const timeInfo = ref({
@@ -95,7 +95,6 @@ const columns = [
 ]
 
 const runningTimeInfo = ref({})
-const showConfigTimeModal = ref(false)
 const configTimeMode = ref("create")
 
 
@@ -175,7 +174,6 @@ const createTime = async () => {
   } else if(data) {
     itemInfo.value = {}
     toast.add({title: "Zeit erfolgreich erstellt"})
-    showConfigTimeModal.value = false
     await dataStore.fetchTimes()
 
   }
@@ -192,7 +190,6 @@ const updateTime = async () => {
   }
 
   toast.add({title: "Zeit erfolgreich gespeichert"})
-  showConfigTimeModal.value = false
   await dataStore.fetchTimes()
 }
 
@@ -203,7 +200,7 @@ const format = (date) => {
 }
 
 const getDuration = (time) => {
-  const minutes = Math.floor(dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes',true))
+  const minutes = Math.floor(dayjs(time.endDate).diff(dayjs(time.startDate),'minutes',true))
   const hours = Math.floor(minutes/60)
   return {
     //dezimal: dez,
@@ -233,7 +230,7 @@ const setState = async (newState) => {
         Start
       </UButton>
       <UButton
-          @click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date(), profile: dataStore.activeProfile.id}; showConfigTimeModal = true"
+          @click="router.push(`/workingtimes/edit`)"
       >
         Erstellen
       </UButton>
@@ -280,153 +277,18 @@ const setState = async (newState) => {
   </div>
 
 
-  <UModal
-      v-model="showConfigTimeModal"
-      fullscreen
-  >
-    <UCard>
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Zeiteintrag {{configTimeMode === 'create' ?  "erstellen" : "bearbeiten"}}
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showConfigTimeModal = false" />
-        </div>
-      </template>
-      <UFormGroup label="Start:" >
-        <UPopover :popper="{ placement: 'bottom-start' }">
-          <UButton
-              variant="outline"
-              icon="i-heroicons-calendar-days-20-solid"
-              :label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
-          />
 
-          <template #panel="{ close }">
-            <LazyDatePicker
-                v-model="itemInfo.start"
-                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.end ? dayjs(itemInfo.end).format('HH:mm') : 'Datum auswählen'"
-          />
-
-          <template #panel="{ close }">
-            <LazyDatePicker
-                v-model="itemInfo.end"
-                mode="time"
-            />
-          </template>
-        </UPopover>
-      </UFormGroup>
-<!--      <UFormGroup
-          label="Start:"
-          :help="itemInfo.state !== 'Entwurf' ? 'Bearbeiten der Startzeit nicht möglich' : ''"
-      >
-        <VueDatePicker
-            v-model="itemInfo.start"
-            locale="de"
-            cancel-text="Abbrechen"
-            select-text="Auswählen"
-            now-button-label="Jetzt"
-            text-input="MM.dd.yyyy HH:mm"
-            :dark="useColorMode().value !== 'light'"
-            :format="format"
-            :preview-format="format"
-            :disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
-        />
-      </UFormGroup>
-      <UFormGroup
-          label="Ende:"
-          :help="itemInfo.state !== 'Entwurf' ? 'Bearbeiten der Endzeit nicht möglich' : ''"
-      >
-        <VueDatePicker
-            v-model="itemInfo.end"
-            locale="de"
-            cancel-text="Abbrechen"
-            select-text="Auswählen"
-            now-button-label="Jetzt"
-            text-input="MM.dd.yyyy HH:mm"
-            :dark="useColorMode().value !== 'light'"
-            :format="format"
-            :preview-format="format"
-            :disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
-        />
-      </UFormGroup>-->
-      <UFormGroup
-          label="Benutzer:"
-          :help="false ? 'Bearbeiten des Benutzers nicht möglich' : ''"
-      >
-        <USelectMenu
-            :options="dataStore.profiles"
-            v-model="itemInfo.profile"
-            option-attribute="fullName"
-            value-attribute="id"
-            :disabled="(configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf') || (!dataStore.hasRight('createTime') || !dataStore.hasRight('createOwnTime'))"
-        >
-          <template #label>
-            {{dataStore.profiles.find(profile => profile.id === itemInfo.profile) ? dataStore.profiles.find(profile => profile.id === itemInfo.profile).fullName : "Benutzer auswählen"}}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
-
-      <UFormGroup
-          label="Notizen:"
-      >
-        <UTextarea
-            v-model="itemInfo.notes"
-        />
-      </UFormGroup>
-
-
-      <template #footer v-if="configTimeMode === 'create' || itemInfo.state === 'Entwurf'">
-        <InputGroup>
-          <UButton
-              @click="createTime"
-              v-if="configTimeMode === 'create'"
-              variant="outline"
-          >
-            Erstellen
-          </UButton>
-          <UButton
-              @click="updateTime"
-              v-else-if="configTimeMode === 'edit'"
-              v-if="itemInfo.state === 'Entwurf'"
-          >
-            Speichern
-          </UButton>
-          <UTooltip
-            text="Eingereichte Zeiten können nur noch durch Manager bearbeitet werden"
-            v-if="itemInfo.state === 'Entwurf'"
-          >
-            <UButton
-                @click="setState('Eingereicht')"
-
-            >
-              Einreichen
-            </UButton>
-          </UTooltip>
-
-        </InputGroup>
-
-      </template>
-    </UCard>
-  </UModal>
   
   <UTable
       class="mt-3"
       :columns="columns"
       :rows="filteredRows"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-      @select="(row) => {configTimeMode = 'edit';
+      @select="(row) => {
+        router.push(`/workingtimes/edit/${row.id}`)
+        /*configTimeMode = 'edit';
         itemInfo = row;
-        showConfigTimeModal = true}"
+        showConfigTimeModal = true*/}"
   >
 <!--    <template #state-data="{row}">
                 <span
@@ -446,17 +308,17 @@ const setState = async (newState) => {
       {{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
     </template>
     <template #date-data="{row}">
-      {{dayjs(row.date).format("DD.MM.YYYY")}}
+      {{dayjs(row.startDate).format("DD.MM.YYYY")}}
     </template>
 
     <template #start-data="{row}">
-      {{dayjs(row.start, "HH:mm:ss").format("HH:mm")}} Uhr
+      {{dayjs(row.startDate).format("HH:mm")}} Uhr
     </template>
     <template #end-data="{row}">
-      {{row.end ? dayjs(row.end, "HH:mm:ss").format("HH:mm") + " Uhr" : ""}}
+      {{row.endDate ? dayjs(row.endDate).format("HH:mm") + " Uhr" : ""}}
     </template>
     <template #duration-data="{row}">
-      {{row.end ? getDuration(row).composed : ""}}
+      {{row.endDate ? getDuration(row).composed : ""}}
     </template>
   </UTable>
 </template>

spaces/stores/data.js

@@ -106,6 +106,10 @@ export const useDataStore = defineStore('data', () => {
             label: "Mitarbeiter",
             labelSingle: "Mitarbeiter",
             redirect: true
+        },
+        workingtimes: {
+            label: "Anwesenheiten",
+            labelSingle: "Anwesenheit"
         }
     }
 
@@ -1127,6 +1131,10 @@ export const useDataStore = defineStore('data', () => {
         return events.value.find(item => item.id === itemId)
     })
 
+    const getWorkingTimeById = computed(() => (itemId) => {
+        return workingtimes.value.find(item => item.id === itemId)
+    })
+
     const getProjectById = computed(() => (itemId) => {
         if(projects.value.find(i => i.id === itemId)) {
             let project = projects.value.find(project => project.id === itemId)
@@ -1295,7 +1303,8 @@ export const useDataStore = defineStore('data', () => {
         getCreatedDocumentById,
         getInventoryItemById,
         getBankAccountById,
-        getEventById
+        getEventById,
+        getWorkingTimeById
     }