moved times/index

2025-06-01 18:23:14 +02:00
parent 03231ab3f3
commit 4346fbffe5
2 changed files with 67 additions and 73 deletions
--- a/pages/employees/timetracking.vue
+++ b/pages/employees/timetracking.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>