Enable Edit and View of Reports

src/views/admin/unit/damageReport/Overview.vue

@@ -3,7 +3,29 @@
     <div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
       <div>
         <label for="status">Status</label>
-        <input id="status" type="text" readonly :value="activeDamageReportObj.status" />
+        <input id="status" ref="status" type="text" :readonly="!editStatus" :value="activeDamageReportObj.status" />
+      </div>
+      <div>
+        <label for="noteByWorker">Anmerkung durch Bearbeiter</label>
+        <textarea
+          id="noteByWorker"
+          ref="noteByWorker"
+          :readonly="!editStatus"
+          placeholder="---"
+          :value="activeDamageReportObj.noteByWorker"
+        ></textarea>
+      </div>
+      <button
+        v-if="!editStatus && !activeDamageReportObj.done"
+        primary
+        class="w-fit! self-end"
+        @click="editStatus = true"
+      >
+        Status ändern
+      </button>
+      <div v-else-if="!activeDamageReportObj.done" class="flex flex-row gap-2 justify-end">
+        <button primary-outline class="w-fit!" @click="saveStatus(true)">speichern und abschließen</button>
+        <button primary class="w-fit!" @click="saveStatus(false)">Status speichern</button>
       </div>
       <br />
       <div>
@@ -12,19 +34,26 @@
       </div>
       <div>
         <label for="location">Fundort</label>
-        <textarea id="location" readonly :value="activeDamageReportObj.location || '---'"></textarea>
+        <textarea id="location" readonly placeholder="---" :value="activeDamageReportObj.location"></textarea>
       </div>
       <div>
-        <label for="note">Anmerkung für Bearbeiter</label>
-        <textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
+        <label for="noteByReporter">Anmerkung für Bearbeiter</label>
+        <textarea
+          id="noteByReporter"
+          readonly
+          placeholder="---"
+          :value="activeDamageReportObj.noteByReporter"
+        ></textarea>
       </div>
       <div>
         <label for="reportedBy">Gemeldet von</label>
-        <input id="reportedBy" type="text" readonly :value="activeDamageReportObj.reportedBy || '---'" />
+        <input id="reportedBy" type="text" readonly placeholder="---" :value="activeDamageReportObj.reportedBy" />
       </div>
       <div>
         <label>Bild</label>
-        <div ref="imgs"></div>
+        <div ref="imgs">
+          <small v-if="activeDamageReportObj.images.length == 0">Keine Bilder hochgeladen</small>
+        </div>
       </div>
     </div>
   </div>
@@ -32,9 +61,10 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
 import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
 </script>
 
 <script lang="ts">
@@ -42,18 +72,26 @@ export default defineComponent({
   props: {
     damageReportId: String,
   },
+  watch: {
+    activeDamageReportObj(val: DamageReportViewModel, oldVal: DamageReportViewModel | null) {
+      if (val && oldVal == null) this.loadImages();
+    },
+  },
   data() {
-    return {};
+    return {
+      editStatus: false as boolean,
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
   },
   computed: {
-    ...mapState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapWritableState(useDamageReportStore, ["activeDamageReportObj"]),
     ...mapState(useAbilityStore, ["can"]),
   },
   mounted() {
     this.loadImages();
   },
   methods: {
-    ...mapActions(useDamageReportStore, ["loadDamageReportImage"]),
+    ...mapActions(useDamageReportStore, ["loadDamageReportImage", "updateDamageReport"]),
     loadImages() {
       for (const i of this.activeDamageReportObj?.images ?? []) {
         this.loadDamageReportImage(i)
@@ -72,6 +110,32 @@ export default defineComponent({
           });
       }
     },
+    saveStatus(finish: boolean) {
+      if (this.activeDamageReportObj == null) return;
+      this.loading = "loading";
+      let update: UpdateDamageReportViewModel = {
+        id: this.activeDamageReportObj.id,
+        status: (this.$refs.status as HTMLInputElement).value,
+        noteByWorker: (this.$refs.noteByWorker as HTMLInputElement).value,
+        done: finish,
+      };
+      this.updateDamageReport(update)
+        .then((res) => {
+          this.activeDamageReportObj!.done = update.done;
+          this.activeDamageReportObj!.status = update.status;
+          this.activeDamageReportObj!.noteByWorker = update.noteByWorker;
+          this.loading = "success";
+          this.editStatus = false;
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.loading = undefined;
+          }, 2000);
+        });
+    },
   },
 });
 </script>