correted Error with new Time Creation

made Times Editable
created field for user filter

spaces/pages/employees/timetracking.vue

@@ -23,19 +23,22 @@ const timeInfo = ref({
   type: null
 })
 
+const filterUser = ref(user.value.id || "")
+
+
 const filteredRows = computed(() => {
 
-  if(user.value && dataStore.times) {
-    return dataStore.times.filter(time => time.user === user.value.id)
+  if(filterUser.value !== "" && dataStore.times) {
+    return dataStore.times.filter(time => time.user === filterUser.value)
   } else {
-    return []
+    return dataStore.times
   }
 
 })
 
 
 
-const createTimeInfo = ref({
+const itemInfo = ref({
   user: "",
   start: new Date(),
   end: "",
@@ -84,7 +87,8 @@ const columns = [
 ]
 
 const runningTimeInfo = ref({})
-const showAddTimeModal = ref(false)
+const showConfigTimeModal = ref(false)
+const configTimeMode = ref("create")
 
 
 
@@ -101,7 +105,7 @@ const startTime = async () => {
   if(error) {
     console.log(error)
   } else if(data) {
-    timeInfo.value = data[0]
+    //timeInfo.value = data[0]
     await dataStore.fetchTimes()
     runningTimeInfo.value = dataStore.times.find(time => time.user === user.value.id && !time.end)
   }
@@ -142,20 +146,35 @@ if(dataStore.times.find(time => time.user == user.value.id && !time.end)) {
 const createTime = async () => {
   const {data,error} = await supabase
       .from("times")
-      .insert([createTimeInfo.value])
+      .insert([itemInfo.value])
       .select()
 
   if(error) {
     console.log(error)
   } else if(data) {
-    createTimeInfo.value = {}
+    itemInfo.value = {}
     toast.add({title: "Zeit erfolgreich erstellt"})
-    showAddTimeModal.value = false
+    showConfigTimeModal.value = false
     await dataStore.fetchTimes()
 
   }
 }
 
+const updateTime = async () => {
+  const {error} = await supabase
+      .from("times")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  }
+
+  toast.add({title: "Zeit erfolgreich gespeichert"})
+  showConfigTimeModal.value = false
+  await dataStore.fetchTimes()
+}
+
 const format = (date) => {
   let dateFormat = dayjs(date).format("DD.MM.YY HH:mm")
 
@@ -164,28 +183,35 @@ const format = (date) => {
 </script>
 
 <template>
-  <div class="flex items-center gap-1">
+  <InputGroup>
     <UButton
-        class="controlButton"
         @click="startTime"
         :disabled="runningTimeInfo.id"
     >
       Start
     </UButton>
     <UButton
-        class="controlButton"
         @click="stopStartedTime"
         :disabled="!runningTimeInfo.id"
     >
       Stop
     </UButton>
     <UButton
-        class="controlButton"
-        @click="showAddTimeModal = true"
+        @click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date()}; showConfigTimeModal = true"
     >
       Erstellen
     </UButton>
-  </div>
+    <USelectMenu
+      :options="dataStore.profiles"
+      option-attribute="fullName"
+      value-attribute="id"
+      v-model="filterUser"
+    >
+      <template #label>
+        {{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
+      </template>
+    </USelectMenu>
+  </InputGroup>
 
   <div v-if="runningTimeInfo.id" class="mt-3">
 
@@ -232,18 +258,17 @@ const format = (date) => {
   </div>
 
   <UModal
-      v-model="showAddTimeModal"
+      v-model="showConfigTimeModal"
   >
     <UCard>
       <template #header>
-        Zeiteintrag erstellen
+        Zeiteintrag {{configTimeMode === 'create' ?  "erstellen" : "bearbeiten"}}
       </template>
-
       <UFormGroup
           label="Start:"
       >
         <VueDatePicker
-            v-model="createTimeInfo.start"
+            v-model="itemInfo.start"
             locale="de"
             cancel-text="Abbrechen"
             select-text="Auswählen"
@@ -258,7 +283,7 @@ const format = (date) => {
           label="Ende:"
       >
         <VueDatePicker
-            v-model="createTimeInfo.end"
+            v-model="itemInfo.end"
             locale="de"
             cancel-text="Abbrechen"
             select-text="Auswählen"
@@ -281,12 +306,12 @@ const format = (date) => {
       >
         <USelectMenu
             :options="dataStore.profiles"
-            v-model="createTimeInfo.user"
-            option-attribute="firstName"
+            v-model="itemInfo.user"
+            option-attribute="fullName"
             value-attribute="id"
         >
           <template #label>
-            {{dataStore.profiles.find(profile => profile.id === createTimeInfo.user) ? dataStore.profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
+            {{dataStore.profiles.find(profile => profile.id === itemInfo.user) ? dataStore.profiles.find(profile => profile.id === itemInfo.user).firstName : "Benutzer auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -295,12 +320,15 @@ const format = (date) => {
       >
         <USelectMenu
             :options="dataStore.projects"
-            v-model="createTimeInfo.projectId"
+            v-model="itemInfo.projectId"
             option-attribute="name"
             value-attribute="id"
+            searchable
+            searchable-placeholder="Suche..."
+            :search-attributes="['name']"
         >
           <template #label>
-            {{dataStore.projects.find(project => project.id === createTimeInfo.projectId) ? dataStore.projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
+            {{dataStore.projects.find(project => project.id === itemInfo.projectId) ? dataStore.projects.find(project => project.id === itemInfo.projectId).name : "Projekt auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -308,13 +336,13 @@ const format = (date) => {
           label="Typ:"
       >
         <USelectMenu
-            v-model="runningTimeInfo.type"
+            v-model="itemInfo.type"
             :options="timeTypes"
             option-attribute="label"
             value-attribute="label"
         >
           <template #label>
-            {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
+            {{itemInfo.type ? itemInfo.type : "Kategorie auswählen"}}
           </template>
         </USelectMenu>
       </UFormGroup>
@@ -322,7 +350,7 @@ const format = (date) => {
           label="Notizen:"
       >
         <UTextarea
-            v-model="createTimeInfo.notes"
+            v-model="itemInfo.notes"
         />
       </UFormGroup>
 
@@ -330,9 +358,16 @@ const format = (date) => {
       <template #footer>
         <UButton
             @click="createTime"
+            v-if="configTimeMode === 'create'"
         >
           Erstellen
         </UButton>
+        <UButton
+            @click="updateTime"
+            v-else-if="configTimeMode === 'edit'"
+        >
+          Speichern
+        </UButton>
       </template>
     </UCard>
   </UModal>
@@ -344,6 +379,9 @@ const format = (date) => {
       :columns="columns"
       :rows="filteredRows"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+      @select="(row) => {configTimeMode = 'edit';
+        itemInfo = row;
+        showConfigTimeModal = true}"
   >
     <template #user-data="{row}">
       {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
@@ -365,7 +403,5 @@ const format = (date) => {
 </template>
 
 <style scoped>
-.controlButton {
-  margin-right: 1em;
-}
+
 </style>