Build Profile View with Times View and some Profile Editing

Some Changes in timetracking.vue

spaces/pages/employees/timetracking.vue

@@ -49,6 +49,11 @@ const itemInfo = ref({
 
 
 const columns = [
+  {
+    key:"state",
+    label: "Status",
+    sortable:true
+  },
   {
     key: "user",
     label: "Benutzer",
@@ -180,6 +185,24 @@ const format = (date) => {
 
   return `${dateFormat}`;
 }
+
+const getDuration = (time) => {
+  const dez = dayjs(time.end).diff(time.start,'hour',true).toFixed(2)
+  const hours = Math.floor(dez)
+  const minutes = Math.floor((dez - hours) * 60)
+  return {
+    dezimal: dez,
+    hours: hours,
+    minutes: minutes,
+    composed: `${hours}:${minutes}`
+  }
+}
+
+const setState = async (newState) => {
+  itemInfo.value.state = newState
+  await updateTime()
+}
+
 </script>
 
 <template>
@@ -356,18 +379,26 @@ const format = (date) => {
 
 
       <template #footer>
-        <UButton
-            @click="createTime"
-            v-if="configTimeMode === 'create'"
-        >
-          Erstellen
-        </UButton>
-        <UButton
-            @click="updateTime"
-            v-else-if="configTimeMode === 'edit'"
-        >
-          Speichern
-        </UButton>
+        <InputGroup>
+          <UButton
+              @click="createTime"
+              v-if="configTimeMode === 'create'"
+          >
+            Erstellen
+          </UButton>
+          <UButton
+              @click="updateTime"
+              v-else-if="configTimeMode === 'edit'"
+          >
+            Speichern
+          </UButton>
+          <UButton
+              @click="setState('Eingereicht')"
+          >
+            Einreichen
+          </UButton>
+        </InputGroup>
+
       </template>
     </UCard>
   </UModal>
@@ -383,6 +414,20 @@ const format = (date) => {
         itemInfo = row;
         showConfigTimeModal = true}"
   >
+    <template #state-data="{row}">
+                <span
+                    v-if="row.state === 'Entwurf'"
+                    class="text-rose-500"
+                >{{row.state}}</span>
+      <span
+          v-if="row.state === 'Eingereicht'"
+          class="text-cyan-500"
+      >{{row.state}}</span>
+      <span
+          v-if="row.state === 'Bestätigt'"
+          class="text-primary-500"
+      >{{row.state}}</span>
+    </template>
     <template #user-data="{row}">
       {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
     </template>
@@ -394,7 +439,7 @@ const format = (date) => {
       {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
     </template>
     <template #duration-data="{row}">
-      {{`${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h`}}
+      {{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 : ""}}