Added Editing for Automatic Working Hour Corrections

pages/profiles/show/[id].vue

@@ -7,6 +7,7 @@ import isoWeek from "dayjs/plugin/isoWeek"
 import isBetween from "dayjs/plugin/isBetween"
 import DocumentList from "~/components/DocumentList.vue";
 import DocumentUpload from "~/components/DocumentUpload.vue";
+import { v4 as uuidv4 } from 'uuid';
 dayjs.extend(customParseFormat)
 dayjs.extend(isoWeek)
 dayjs.extend(isBetween)
@@ -131,6 +132,10 @@ const saveProfile = async () => {
   await dataStore.updateItem('profiles',data,oldItemInfo.value)
 }
 
+const addAutomaticHourCorrection = async () => {
+  itemInfo.value.automaticHourCorrections.push({mode: 'correct', id: uuidv4(), weekday: 1, bookingTimeUTC: {hour: 0, minute: 0}, rangeStartUTC: {hour: 0, minute: 0}, rangeEndUTC: {hour: 0, minute: 0}})
+}
+
 </script>
 
 <template>
@@ -161,9 +166,9 @@ const saveProfile = async () => {
           label: 'Informationen'
         },{
           label: 'Logbuch'
-        },/*{
+        },{
           label: 'Zeiterfassung'
-        },*/{
+        },{
           label: 'Vertragsdaten'
         },{
           label: 'Dokumente'
@@ -326,9 +331,9 @@ const saveProfile = async () => {
               :preloadedContent="emailSignature"
           />
 
-          <UDivider>Newsletter</UDivider>
+          <!--<UDivider>Newsletter</UDivider>
 
-<!--          <UButton
+          <UButton
             @click="addToNewsletter"
             variant="outline"
           >
@@ -501,6 +506,127 @@ const saveProfile = async () => {
             </template>
           </UTable>
         </div>
+        <div v-else-if="item.label === 'Zeiterfassung'">
+          <UButton
+            @click="addAutomaticHourCorrection"
+          >
+            + Korrektur
+          </UButton>
+          <UButton
+            @click="saveProfile"
+            class="ml-3"
+          >
+            Speichern
+          </UButton>
+
+          <UDivider class="my-3" />
+
+          <InputGroup class="w-full" v-for="item in itemInfo.automaticHourCorrections">
+            <UFormGroup
+              label="Modus"
+            >
+              <USelectMenu
+                v-model="item.mode"
+                :options="[{key: 'correct', label: 'Korrigieren'},{key: 'automatic-checkout', label: 'Automatisches ausbuchen'}]"
+                option-attribute="label"
+                value-attribute="key"
+                class="w-80"
+              />
+            </UFormGroup>
+            <UFormGroup
+              label="Wochentag"
+            >
+              <USelectMenu
+                  v-model="item.weekday"
+                  :options="[{key: 1, label: 'Montag'},{key: 2, label: 'Dienstag'},{key: 3, label: 'Mittwoch'},{key: 4, label: 'Donnerstag'},{key: 5, label: 'Freitag'},{key: 6, label: 'Samstag'},{key: 7, label: 'Sonntag'},]"
+                  option-attribute="label"
+                  value-attribute="key"
+                  class="w-40"
+              />
+            </UFormGroup>
+            <UFormGroup
+              label="Zeitraum Start"
+              v-if="item.mode === 'correct'"
+            >
+              <InputGroup>
+                <UInput
+                    v-model="item.rangeStartUTC.hour"
+                    placeholder="Stunde UTC"
+                    class="w-20"
+                />
+                <UInput
+                    v-model="item.rangeStartUTC.minute"
+                    placeholder="Minute UTC"
+                    class="w-20"
+                />
+              </InputGroup>
+
+            </UFormGroup>
+            <UFormGroup
+              label="Zeitraum Ende"
+              v-if="item.mode === 'correct'"
+            >
+              <InputGroup>
+                <UInput
+                    v-model="item.rangeEndUTC.hour"
+                    placeholder="Stunde UTC"
+                    class="w-20"
+                />
+                <UInput
+                    v-model="item.rangeEndUTC.minute"
+                    placeholder="Minute UTC"
+                    class="w-20"
+                />
+              </InputGroup>
+            </UFormGroup>
+            <UFormGroup
+              label="Korrigieren zu"
+              v-if="item.mode === 'correct'"
+            >
+              <InputGroup>
+                <UInput
+                    v-model="item.bookingTimeUTC.hour"
+                    placeholder="Stunde UTC"
+                    class="w-20"
+                />
+                <UInput
+                    v-model="item.bookingTimeUTC.minute"
+                    placeholder="Minute UTC"
+                    class="w-20"
+                />
+              </InputGroup>
+            </UFormGroup>
+            <UFormGroup
+              label="Ausbuchen"
+              v-if="item.mode === 'automatic-checkout'"
+            >
+              <InputGroup>
+                <UInput
+                    v-model="item.bookingTimeUTC.hour"
+                    placeholder="Stunde UTC"
+                    class="w-20"
+                />
+                <UInput
+                    v-model="item.bookingTimeUTC.minute"
+                    placeholder="Minute UTC"
+                    class="w-20"
+                />
+              </InputGroup>
+            </UFormGroup>
+            <UFormGroup
+              label="Entfernen"
+            >
+              <UButton
+                  icon="i-heroicons-x-mark"
+                  variant="outline"
+                  color="red"
+                  @click="itemInfo.automaticHourCorrections = itemInfo.automaticHourCorrections.filter(i => i.id !== item.id)"
+              />
+            </UFormGroup>
+
+          </InputGroup>
+
+        </div>
       </UCard>
     </template>
   </UTabs>