From 4346fbffe50bf52f655b863d29bfabd9867ef5b4 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Sun, 1 Jun 2025 18:23:14 +0200
Subject: [PATCH] moved times/index

---
 components/MainNav.vue                        |   6 +-
 .../timetracking.vue => times/index.vue}      | 134 ++++++++----------
 2 files changed, 67 insertions(+), 73 deletions(-)
 rename pages/{employees/timetracking.vue => times/index.vue} (73%)

diff --git a/components/MainNav.vue b/components/MainNav.vue
index 0910382..75586b3 100644
--- a/components/MainNav.vue
+++ b/components/MainNav.vue
@@ -126,7 +126,7 @@ const links = computed(() => {
       children: [
           ... profileStore.ownTenant.features.timeTracking ? [{
           label: "Zeiterfassung",
-          to: "/employees/timetracking",
+          to: "/times",
           icon: "i-heroicons-clock"
         }] : [],
         ... profileStore.ownTenant.features.workingTimeTracking ? [{
@@ -319,6 +319,10 @@ const links = computed(() => {
           label: "Projekttypen",
           to: "/projecttypes",
           icon: "i-heroicons-clipboard-document-list"
+        },{
+          label: "Export",
+          to: "/export",
+          icon: "i-heroicons-clipboard-document-list"
         }
       ]
     }
diff --git a/pages/employees/timetracking.vue b/pages/times/index.vue
similarity index 73%
rename from pages/employees/timetracking.vue
rename to pages/times/index.vue
index 3bbd807..5e56d29 100644
--- a/pages/employees/timetracking.vue
+++ b/pages/times/index.vue
@@ -15,7 +15,7 @@ const user = useSupabaseUser()
 const toast = useToast()
 
 
-const timeTypes = dataStore.getTimeTypes
+const timeTypes = profileStore.ownTenant.timeConfig.timeTypes
 const timeInfo = ref({
   profile: "",
   startDate: "",
@@ -28,9 +28,21 @@ const timeInfo = ref({
 const filterUser = ref(profileStore.activeProfile.id || "")
 
 const times = ref([])
+const runningTimeInfo = ref({})
+const showConfigTimeModal = ref(false)
+const configTimeMode = ref("create")
 
 const setup = async () => {
-  times.value = await useSupabaseSelect("times","*, profile(*)")
+  times.value = await useSupabaseSelect("times","*, profile(*), project(id, name)")
+
+  runningTimeInfo.value = (await supabase
+      .from("times")
+      .select()
+      .eq("tenant", profileStore.currentTenant)
+      .eq("profile", profileStore.activeProfile.id)
+      .is("endDate",null)
+      .single()).data
+
 }
 
 setup()
@@ -60,7 +72,7 @@ const itemInfo = ref({
   start: new Date(),
   end: "",
   notes: null,
-  projectId: null,
+  project: null,
   type: null,
   state: "Entwurf"
 })
@@ -87,10 +99,6 @@ const columns = [
     key:"type",
     label:"Typ",
   },
-  {
-    key: "duration",
-    label: "Dauer",
-  },
   {
     key: "project",
     label: "Projekt",
@@ -101,16 +109,14 @@ const columns = [
   }
 ]
 
-const runningTimeInfo = ref({})
-const showConfigTimeModal = ref(false)
-const configTimeMode = ref("create")
+
 
 
 
 const startTime = async () => {
   console.log("started")
   timeInfo.value.profile = profileStore.activeProfile.id
-  timeInfo.value.start = new Date().toISOString()
+  timeInfo.value.startDate = dayjs()
   timeInfo.value.tenant = profileStore.currentTenant
 
   const {data,error} = await supabase
@@ -120,45 +126,34 @@ const startTime = async () => {
 
   if(error) {
     console.log(error)
+    toast.add({title: "Fehler beim starten der Zeit",color:"rose"})
   } else if(data) {
-    //timeInfo.value = data[0]
-    await dataStore.fetchTimes()
-    runningTimeInfo.value = dataStore.times.find(time => time.profile === profileStore.activeProfile.id && !time.end)
+    toast.add({title: "Zeit erfolgreich gestartet"})
+    runningTimeInfo.value = data[0]
   }
 
 }
 
 const stopStartedTime = async () => {
-  console.log(runningTimeInfo.value)
+  runningTimeInfo.value.endDate = dayjs()
+  runningTimeInfo.value.state = "Im Web gestoppt"
 
-  runningTimeInfo.value.end = new Date().toISOString()
-
-  const mapNumRange = (num, inMin, inMax, outMin, outMax) =>
-      ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-
-  runningTimeInfo.value.duration = Math.round(mapNumRange(Math.abs(new Date(runningTimeInfo.value.end) - new Date(runningTimeInfo.value.start))/1000/60,0,60,0,1)*100)/100
 
   const {data,error} = await supabase
       .from("times")
       .update(runningTimeInfo.value)
       .eq('id',runningTimeInfo.value.id)
       .select()
-  console.log(data)
 
   if(error) {
     console.log(error)
   } else {
     toast.add({title: "Zeit erfolgreich gestoppt"})
-    runningTimeInfo.value = {}
-    dataStore.fetchTimes()
+    runningTimeInfo.value = null
+    setup()
   }
 }
 
-if(times.value.find(time => time.profile == profileStore.activeProfile.id && !time.end)) {
-  runningTimeInfo.value = times.value.find(time => time.profile == profileStore.activeProfile.id && !time.end)
-}
-
-
 const createTime = async () => {
   const {data,error} = await supabase
       .from("times")
@@ -224,13 +219,13 @@ const setState = async (newState) => {
     <template #left>
       <UButton
           @click="startTime"
-          :disabled="runningTimeInfo.id "
+          :disabled="runningTimeInfo "
       >
         Start
       </UButton>
       <UButton
           @click="stopStartedTime"
-          :disabled="!runningTimeInfo.id"
+          :disabled="!runningTimeInfo"
       >
         Stop
       </UButton>
@@ -251,9 +246,9 @@ const setState = async (newState) => {
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-  <div v-if="runningTimeInfo.id" class="m-3">
+  <div v-if="runningTimeInfo" class="m-3">
 
-    Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
+    Start: {{dayjs(runningTimeInfo.startDate).format("DD.MM.YY HH:mm")}}
 
     <UFormGroup
         label="Notizen:"
@@ -270,10 +265,10 @@ const setState = async (newState) => {
           :options="dataStore.projects"
           option-attribute="name"
           value-attribute="id"
-          v-model="runningTimeInfo.projectId"
+          v-model="runningTimeInfo.project"
       >
         <template #label>
-          {{ dataStore.projects.find(project => project.id === runningTimeInfo.projectId) ? dataStore.projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
+          {{ dataStore.projects.find(project => project.id === runningTimeInfo.project) ? dataStore.projects.find(project => project.id === runningTimeInfo.project).name : "Projekt auswählen" }}
         </template>
       </USelectMenu>
     </UFormGroup>
@@ -305,34 +300,32 @@ const setState = async (newState) => {
       <UFormGroup
           label="Start:"
       >
-        <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'"
-        />
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton
+              icon="i-heroicons-calendar-days-20-solid"
+              :label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+              variant="outline"
+          />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="itemInfo.startDate" @close="close" mode="dateTime" />
+          </template>
+        </UPopover>
       </UFormGroup>
       <UFormGroup
           label="Ende:"
       >
-        <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'"
-        />
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton
+              icon="i-heroicons-calendar-days-20-solid"
+              :label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
+              variant="outline"
+          />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="itemInfo.endDate" @close="close" mode="dateTime" />
+          </template>
+        </UPopover>
       </UFormGroup>
       <UFormGroup
           label="Benutzer:"
@@ -342,7 +335,7 @@ const setState = async (newState) => {
             v-model="itemInfo.user"
             option-attribute="fullName"
             value-attribute="id"
-            :disabled="(configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf') || (!dataStore.hasRight('createTime') || !dataStore.hasRight('createOwnTime'))"
+            :disabled="(configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf') || (!dataStore.hasRight('createTime') || !useRole().hasRight('createOwnTime'))"
         >
           <template #label>
             {{profileStore.profiles.find(profile => profile.id === itemInfo.user) ? profileStore.profiles.find(profile => profile.id === itemInfo.user).fullName : "Benutzer auswählen"}}
@@ -354,7 +347,7 @@ const setState = async (newState) => {
       >
         <USelectMenu
             :options="dataStore.projects"
-            v-model="itemInfo.projectId"
+            v-model="itemInfo.project"
             option-attribute="name"
             value-attribute="id"
             searchable
@@ -363,7 +356,7 @@ const setState = async (newState) => {
             :disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
         >
           <template #label>
-            {{dataStore.projects.find(project => project.id === itemInfo.projectId) ? dataStore.projects.find(project => project.id === itemInfo.projectId).name : "Projekt auswählen"}}
+            {{dataStore.projects.find(project => project.id === itemInfo.project) ? dataStore.projects.find(project => project.id === itemInfo.project).name : "Projekt auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -443,20 +436,17 @@ const setState = async (newState) => {
       >{{row.state}}</span>
     </template>
     <template #user-data="{row}">
-      {{profileStore.profiles.find(profile => profile.id === row.user) ? profileStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
+      {{row.profile ? row.profile.fullName : "" }}
     </template>
 
-    <template #start-data="{row}">
-      {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+    <template #startDate-data="{row}">
+      {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
     </template>
-    <template #end-data="{row}">
-      {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+    <template #endDate-data="{row}">
+      {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
     </template>
-    <template #duration-data="{row}">
-      {{getDuration(row).composed}}
-    </template>
-    <template #projectId-data="{row}">
-      {{dataStore.projects.find(project => project.id === row.projectId) ? dataStore.projects.find(project => project.id === row.projectId).name : ""}}
+    <template #project-data="{row}">
+      {{row.project ? row.project.name : "" }}
     </template>
   </UTable>
 </template>