Enable Edit and View of Reports

src/components/admin/unit/damageReport/DamageReportListItem.vue

@@ -9,21 +9,23 @@
         <small v-if="damageReport?.related">({{ damageReport.related.code }})</small>
       </p>
       <div class="flex flex-row gap-2">
-        <div v-if="damageReport.images.length != 0" class="cursor-pointer" title="hi">
+        <div v-if="damageReport.images.length != 0" class="cursor-pointer">
           <PhotoIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.location" class="cursor-pointer" title="hi">
+        <div v-if="damageReport.location" class="cursor-pointer">
           <MapPinIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.reportedBy" class="cursor-pointer" title="hi">
+        <div v-if="damageReport.reportedBy" class="cursor-pointer">
           <UserIcon class="w-5 h-5" />
         </div>
-        <div v-if="damageReport.maintenance" class="cursor-pointer" title="hi">
+        <div v-if="damageReport.maintenance" class="cursor-pointer">
           <WrenchScrewdriverIcon class="w-5 h-5" />
         </div>
       </div>
     </div>
     <div class="p-2">
+      <p>gemeldet: {{ damageReport.reportedAt }}</p>
+      <p>Status: {{ damageReport.status }}</p>
       <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
     </div>
   </RouterLink>

src/stores/admin/unit/damageReport/damageReport.ts

@@ -96,7 +96,9 @@ export const useDamageReportStore = defineStore("damageReport", {
     },
     async updateDamageReport(damageReport: UpdateDamageReportViewModel): Promise<AxiosResponse<any, any>> {
       const result = await http.patch(`/admin/damageReport/${damageReport.id}`, {
-        // TODO: data
+        status: damageReport.status,
+        noteByWorker: damageReport.noteByWorker,
+        done: damageReport.done,
       });
       return result;
     },

src/stores/admin/unit/equipment/damageReport.ts

@@ -22,7 +22,7 @@ export const useEquipmentDamageReportStore = defineStore("equipmentDamageReport"
         )
         .then((result) => {
           this.totalCount = result.data.total;
-          result.data.reports
+          result.data.damageReports
             .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
             .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
               return {

src/stores/admin/unit/vehicle/damageReport.ts

@@ -22,7 +22,7 @@ export const useVehicleDamageReportStore = defineStore("vehicleDamageReport", {
         )
         .then((result) => {
           this.totalCount = result.data.total;
-          result.data.reports
+          result.data.damageReports
             .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
             .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
               return {

src/stores/admin/unit/wearable/damageReport.ts

@@ -22,7 +22,7 @@ export const useWearableDamageReportStore = defineStore("wearableDamageReport",
         )
         .then((result) => {
           this.totalCount = result.data.total;
-          result.data.reports
+          result.data.damageReports
             .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
             .map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
               return {

src/viewmodels/admin/unit/damageReport.models.ts

@@ -27,7 +27,8 @@ export type DamageReportViewModel = {
   done: boolean;
   description: string;
   location: string;
-  note: string;
+  noteByReporter: string;
+  noteByWorker: string;
   images: string[];
   reportedBy: string;
   maintenance?: MaintenanceViewModel;
@@ -43,5 +44,6 @@ export interface CreateDamageReportViewModel {
 export interface UpdateDamageReportViewModel {
   id: string;
   status: string;
+  noteByWorker: string;
   done: boolean;
 }

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>
+        <label for="noteByReporter">Anmerkung für Bearbeiter</label>
-        <textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
+        <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>

src/views/admin/unit/equipment/DamageReport.vue

@@ -3,22 +3,37 @@
     <Pagination
       :items="damageReports"
       :totalCount="totalCount"
-      :indicateLoading="false"
+      :indicateLoading="loading == 'loading'"
-      @load-data="(offset, count, search) => {}"
+      @load-data="(offset, count, search) => fetchDamageReportForEquipment(offset, count, search)"
-      @search="(search) => {}"
+      @search="(search) => fetchDamageReportForEquipment(0, 25, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: row.id } }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
-            <PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
+            <p class="grow">{{ row.reportedAt }} - {{ row.status }}</p>
-            <p>{{ row.reportedAt }} - {{ row.status }}</p>
+            <div class="flex flex-row gap-2">
+              <div v-if="row.images.length != 0" class="cursor-pointer">
+                <PhotoIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.location" class="cursor-pointer">
+                <MapPinIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.reportedBy" class="cursor-pointer">
+                <UserIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.maintenance" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
           </div>
           <div class="p-2">
-            <p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
             <p>Beschreibung: {{ row.description }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
   </div>
@@ -31,7 +46,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useEquipmentDamageReportStore } from "@/stores/admin/unit/equipment/damageReport";
 import Pagination from "@/components/Pagination.vue";
 import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
-import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -44,13 +59,10 @@ export default defineComponent({
     ...mapState(useEquipmentDamageReportStore, ["damageReports", "loading", "totalCount"]),
   },
   mounted() {
-    this.fetchItem();
+    this.fetchDamageReportForEquipment(0, 25, "", true);
   },
   methods: {
     ...mapActions(useEquipmentDamageReportStore, ["fetchDamageReportForEquipment"]),
-    fetchItem() {
-      this.fetchDamageReportForEquipment();
-    },
   },
 });
 </script>

src/views/admin/unit/vehicle/DamageReport.vue

@@ -4,21 +4,36 @@
       :items="damageReports"
       :totalCount="totalCount"
       :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
+      @load-data="(offset, count, search) => fetchDamageReportForVehicle(offset, count, search)"
-      @search="(search) => {}"
+      @search="(search) => fetchDamageReportForVehicle(0, 25, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: row.id } }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
-            <PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
+            <p class="grow">{{ row.reportedAt }} - {{ row.status }}</p>
-            <p>{{ row.reportedAt }} - {{ row.status }}</p>
+            <div class="flex flex-row gap-2">
+              <div v-if="row.images.length != 0" class="cursor-pointer">
+                <PhotoIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.location" class="cursor-pointer">
+                <MapPinIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.reportedBy" class="cursor-pointer">
+                <UserIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.maintenance" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
           </div>
           <div class="p-2">
-            <p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
             <p>Beschreibung: {{ row.description }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
   </div>
@@ -31,7 +46,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useVehicleDamageReportStore } from "@/stores/admin/unit/vehicle/damageReport";
 import Pagination from "@/components/Pagination.vue";
 import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
-import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -44,13 +59,10 @@ export default defineComponent({
     ...mapState(useVehicleDamageReportStore, ["damageReports", "loading", "totalCount"]),
   },
   mounted() {
-    this.fetchItem();
+    this.fetchDamageReportForVehicle(0, 25, "", true);
   },
   methods: {
     ...mapActions(useVehicleDamageReportStore, ["fetchDamageReportForVehicle"]),
-    fetchItem() {
-      this.fetchDamageReportForVehicle();
-    },
   },
 });
 </script>

src/views/admin/unit/wearable/DamageReport.vue

@@ -4,21 +4,36 @@
       :items="damageReports"
       :totalCount="totalCount"
       :indicateLoading="false"
-      @load-data="(offset, count, search) => {}"
+      @load-data="(offset, count, search) => fetchDamageReportForWearable(offset, count, search)"
-      @search="(search) => {}"
+      @search="(search) => fetchDamageReportForWearable(0, 25, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <RouterLink
+          :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: row.id } }"
+          class="flex flex-col h-fit w-full border border-primary rounded-md"
+        >
           <div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
             <PencilSquareIcon v-if="!row.done" class="w-5 h-5" />
-            <PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
+            <p class="grow">{{ row.reportedAt }} - {{ row.status }}</p>
-            <p>{{ row.reportedAt }} - {{ row.status }}</p>
+            <div class="flex flex-row gap-2">
+              <div v-if="row.images.length != 0" class="cursor-pointer">
+                <PhotoIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.location" class="cursor-pointer">
+                <MapPinIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.reportedBy" class="cursor-pointer">
+                <UserIcon class="w-5 h-5" />
+              </div>
+              <div v-if="row.maintenance" class="cursor-pointer">
+                <WrenchScrewdriverIcon class="w-5 h-5" />
+              </div>
+            </div>
           </div>
           <div class="p-2">
-            <p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
             <p>Beschreibung: {{ row.description }}</p>
           </div>
-        </div>
+        </RouterLink>
       </template>
     </Pagination>
   </div>
@@ -31,7 +46,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useWearableDamageReportStore } from "@/stores/admin/unit/wearable/damageReport";
 import Pagination from "@/components/Pagination.vue";
 import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
-import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -44,13 +59,10 @@ export default defineComponent({
     ...mapState(useWearableDamageReportStore, ["damageReports", "loading", "totalCount"]),
   },
   mounted() {
-    this.fetchItem();
+    this.fetchDamageReportForWearable(0, 25, "", true);
   },
   methods: {
     ...mapActions(useWearableDamageReportStore, ["fetchDamageReportForWearable"]),
-    fetchItem() {
-      this.fetchDamageReportForWearable();
-    },
   },
 });
 </script>