Some Changes in TimeTracking and boosting Mobile View

spaces/pages/timetracking.vue

@@ -9,14 +9,15 @@ const toast = useToast()
 console.log(user)
 
 const {times, projects} = storeToRefs(useDataStore())
-const {fetchTimes} = useDataStore()
-
+const {fetchTimes, getTimeTypes} = useDataStore()
+const timeTypes = getTimeTypes
 const timeInfo = ref({
   user: "",
   start: "",
   end: null,
   notes: null,
-  projectId: null
+  projectId: null,
+  type: null
 })
 
 const runningTimeInfo = ref({
@@ -87,6 +88,7 @@ const selectStartedTime = () => {
       <UButton
           class="controlButton"
           @click="stopStartedTime"
+          :disabled="!runningTimeInfo.id"
       >
         Stop
       </UButton>
@@ -99,38 +101,65 @@ const selectStartedTime = () => {
 
 
       <div>
-        Aktuelle gestarteter Eintrag:
-        {{runningTimeInfo}}
 
-        <UFormGroup
-          label="Notizen:"
-        >
-          <UTextarea
-            v-model="runningTimeInfo.notes"
-          />
-        </UFormGroup>
+        <div class="mt-3">
+          Aktuelle gestarteter Eintrag:
+          {{runningTimeInfo.id ? runningTimeInfo : "Keine Zeit gewählt"}}
 
-        <UFormGroup
-          label="Projekt:"
-        >
-          <USelectMenu
-            :options="projects"
-            option-attribute="name"
-            value-attribute="id"
-            v-model="runningTimeInfo.projectId"
+
+
+        </div>
+
+        <div v-if="runningTimeInfo.id">
+          <UFormGroup
+              label="Notizen:"
           >
-            <template #label>
-              <span>{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "" }}</span>
-            </template>
-          </USelectMenu>
-        </UFormGroup>
+            <UTextarea
+                v-model="runningTimeInfo.notes"
+            />
+          </UFormGroup>
+
+          <UFormGroup
+              label="Projekt:"
+          >
+            <USelectMenu
+                :options="projects"
+                option-attribute="name"
+                value-attribute="id"
+                v-model="runningTimeInfo.projectId"
+            >
+              <template #label>
+                <span v-if="runningTimeInfo.projectId">{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "" }}</span>
+                <span v-else>Projekt auswählen</span>
+              </template>
+            </USelectMenu>
+          </UFormGroup>
+
+          <UFormGroup
+              label="Kategorie:"
+          >
+            <USelectMenu
+                v-model="runningTimeInfo.type"
+                :options="timeTypes"
+                option-attribute="label"
+                value-attribute="label"
+            />
+          </UFormGroup>
+        </div>
+
+
+
+
 
       </div>
 
+      <UDivider class="mt-3"/>
 
-      <UTable :rows="times"/>
-
-      {{timeInfo}}
+      <UTable
+          class="mt-3"
+          v-if="times && user"
+          :rows="times.filter(time => time.user === user.id)"
+      />
 
     </div>
 </template>

spaces/stores/data.ts

@@ -11,6 +11,9 @@ export const useDataStore = defineStore('data', {
         ownTenant: {
             calendarConfig: {
                 eventTypes: [] as any[]
+            },
+            timeConfig: {
+                timeTypes: [] as any[]
             }
         },
         profiles: [] as any[],
@@ -150,6 +153,7 @@ export const useDataStore = defineStore('data', {
                 }),
             ]
         },
-        getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes
+        getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes,
+        getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes
     }
 })