src/components/admin/management/setting/AppSetting.vue

@@ -18,7 +18,23 @@
         <CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
       </div>
       <input v-else id="show_link_to_calendar" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
-      <label for="show_link_to_calendar">Kalender-Link anzeigen</label>
+      <label for="show_link_to_calendar"><i>Kalender</i> Link anzeigen</label>
+    </div>
+    <div class="w-full flex flex-row items-center gap-2">
+      <div
+        v-if="!enableEdit"
+        class="border-2 border-gray-500 rounded-sm"
+        :class="appSettings['app.show_link_to_damagereport'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
+      >
+        <CheckIcon v-if="appSettings['app.show_link_to_damagereport']" class="h-2.5 w-2.5 stroke-4 text-white" />
+      </div>
+      <input
+        v-else
+        id="show_link_to_damagereport"
+        type="checkbox"
+        :checked="appSettings['app.show_link_to_damagereport']"
+      />
+      <label for="show_link_to_damagereport"><i>Schaden melden</i> Link anzeigen</label>
     </div>
   </BaseSetting>
 </template>
@@ -60,6 +76,10 @@ export default defineComponent({
           key: "app.show_link_to_calendar",
           value: formData.show_link_to_calendar.checked,
         },
+        {
+          key: "app.show_link_to_damagereport",
+          value: formData.show_link_to_damagereport.checked,
+        },
       ]);
     },
   },

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

@@ -1,15 +1,34 @@
 <template>
-  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+  <RouterLink
+    :to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: damageReport.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 justify-between items-center">
       <p>
-        {{ damageReport.related.name }}
+        {{ damageReport?.related?.name ?? "Ohne Zuordnung" }}
+        <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">
+          <PhotoIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.location" class="cursor-pointer">
+          <MapPinIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.reportedBy" class="cursor-pointer">
+          <UserIcon class="w-5 h-5" />
+        </div>
+        <div v-if="damageReport.maintenance" class="cursor-pointer">
+          <WrenchScrewdriverIcon class="w-5 h-5" />
+        </div>
+      </div>
     </div>
     <div class="p-2">
-      <p v-if="damageReport.related">Code: {{ damageReport.related.code }}</p>
+      <p>gemeldet: {{ new Date(damageReport.reportedAt).toLocaleString("de") }}</p>
+      <p>Status: {{ damageReport.status }}</p>
       <p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
     </div>
-  </div>
+  </RouterLink>
 </template>
 
 <script setup lang="ts">
@@ -17,6 +36,7 @@ import { defineComponent, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
 import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import { MapPinIcon, PhotoIcon, UserIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">

src/components/public/damageReport/CheckEntry.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+    <div class="flex flex-col gap-2">
+      <p class="mx-auto">Eingaben prüfen</p>
+      <div v-if="check.gear" class="rounded-md p-2 box-border border-2 font-medium border-primary text-black">
+        <p>
+          {{ check.gear.name }} <small>({{ check.gear.code }})</small>
+        </p>
+        <p>Typ: {{ check.gear.type }}</p>
+      </div>
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="check.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort (optional)</label>
+        <textarea id="location" readonly :value="check.location"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter (optional)</label>
+        <textarea id="note" readonly :value="check.note"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von (optional)</label>
+        <input id="reportedBy" type="text" readonly :value="check.reportedBy" />
+      </div>
+      <div>
+        <label for="image">Bild (optional)</label>
+        <img ref="vis" class="mt-2 max-h-36 mx-auto" />
+      </div>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status == 'success'" @click="submit">
+        Schadensmeldung absenden
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status == 'success'" />
+      <FailureXMark v-else-if="status == 'failed'" />
+    </div>
+    <p v-if="message" class="text-center">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    check: {
+      type: Object as PropType<{
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+  },
+  data() {
+    return {
+      status: undefined as undefined | "loading" | "success" | "failed",
+      message: "" as string,
+    };
+  },
+  mounted() {
+    if (this.check.image) {
+      this.setImage(this.check.image);
+    }
+  },
+  methods: {
+    setImage(img: File) {
+      let image = this.$refs.vis as HTMLImageElement;
+
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        image.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(img);
+    },
+    submit() {
+      this.status = "loading";
+      this.message = "";
+      const formData = new FormData();
+      if (this.check.gear) formData.append("related", JSON.stringify(this.check.gear));
+      formData.append("description", this.check.description);
+      formData.append("location", this.check.location);
+      formData.append("note", this.check.note);
+      formData.append("reportedBy", this.check.reportedBy);
+      if (this.check.image) formData.append("images", this.check.image);
+
+      this.$http
+        .post("/public/reportdamage", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((res) => {
+          this.status = "success";
+          setTimeout(() => {
+            this.$emit("nextStep", "result");
+          }, 2000);
+        })
+        .catch((err) => {
+          this.status = "failed";
+          this.message = err.message;
+        });
+    },
+  },
+});
+</script>

src/components/public/damageReport/InputData.vue

@@ -0,0 +1,90 @@
+<template>
+  <form class="flex flex-col gap-2" @submit.prevent="setup">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+    <div class="flex flex-col gap-2">
+      <div>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" required :value="data.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort (optional)</label>
+        <textarea id="location" :value="data.location"></textarea>
+      </div>
+      <div>
+        <label for="note">Anmerkung für Bearbeiter (optional)</label>
+        <textarea id="note" :value="data.note"></textarea>
+      </div>
+      <div>
+        <label for="reportedBy">Gemeldet von (optional)</label>
+        <input id="reportedBy" type="text" placeholder="dein Name" :value="data.reportedBy" />
+      </div>
+      <div>
+        <label for="image">Bild (optional)</label>
+        <input id="image" type="file" accept="image/*" @change="(e: any) => setImage(e.target.files[0])" />
+        <img ref="vis" class="mt-2 max-h-36 mx-auto" />
+      </div>
+    </div>
+    <button type="submit" primary>weiter</button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    data: {
+      type: Object as PropType<{
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      }>,
+      required: true,
+    },
+  },
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+    data: (d: { description: string; location: string; note: string; reportedBy: string; image?: File }) => true,
+  },
+  mounted() {
+    if (this.data.image) {
+      this.setImage(this.data.image);
+    }
+  },
+  methods: {
+    setup(e: any) {
+      let formData = e.target.elements;
+      this.$emit("data", {
+        description: formData.description.value,
+        location: formData.location.value,
+        note: formData.note.value,
+        reportedBy: formData.reportedBy.value,
+        image: formData.image.files[0],
+      });
+      this.$emit("nextStep", "check");
+    },
+    setImage(img: File) {
+      let image = this.$refs.vis as HTMLImageElement;
+
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        image.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(img);
+    },
+  },
+});
+</script>

src/components/public/damageReport/Result.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <h1 class="font-medium text-center">Schadensmeldung eingereicht</h1>
+    <br />
+    <p>
+      Deine Schadensmeldung wurde erfolgreich übermittelt.
+      <br />
+      Die Verwantwortlichen werden benachtichtigt.
+      <br />
+      Du kannst diese Seite jetzt schließen.
+    </p>
+    <br />
+
+    <p class="text-primary cursor-pointer self-end" @click="$emit('start')">neue Meldung einreichen</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    start: () => true,
+  },
+});
+</script>

src/components/public/damageReport/SelectGear.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
+
+    <Scanner v-if="!scanned" useInput @code="checkCode" />
+
+    <div v-if="scanned" class="contents">
+      <div class="flex flex-col gap-2 h-80 overflow-y-scroll pr-2">
+        <div v-if="status != undefined" class="flex flex-row gap-2 h-7 w-7 mx-auto">
+          <p>Suche</p>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status == 'success'" />
+          <FailureXMark v-else-if="status == 'failed'" />
+        </div>
+        <p v-else-if="available.length == 0" class="mx-auto">nichts gefunden</p>
+        <div
+          v-for="item in available"
+          :key="item.id"
+          class="rounded-md p-2 cursor-pointer box-border border-2 font-medium"
+          :class="
+            item.type == selected?.type && item.id == selected.id
+              ? 'bg-primary text-white border-transparent hover:bg-accent'
+              : 'border-primary text-black hover:bg-primary hover:text-white'
+          "
+          @click="selected = item"
+        >
+          <p>
+            {{ item.name }} <small>({{ item.code }})</small>
+          </p>
+          <p>Typ: {{ item.type }}</p>
+        </div>
+      </div>
+      <button
+        v-if="selected != undefined"
+        primary
+        :disabled="status == 'loading'"
+        @click="
+          $emit('data', selected);
+          $emit('nextStep', 'input');
+        "
+      >
+        mit ausgewähltem fortfahren
+      </button>
+      <button
+        primary-outline
+        :disabled="status == 'loading'"
+        @click="
+          scanned = false;
+          code = '';
+        "
+      >
+        neu Scannen
+      </button>
+    </div>
+    <p v-if="message" class="text-center">{{ message }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import ScanInput from "@/components/scanner/ScanInput.vue";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import Scanner from "@/components/scanner/Scanner.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    nextStep: (s: string) => true,
+    stepBack: () => true,
+    data: (gear: MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel) => true,
+  },
+  data() {
+    return {
+      code: "" as string,
+      status: undefined as undefined | "loading" | "success" | "failed",
+      message: "" as string,
+      available: [] as Array<MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel>,
+      selected: undefined as
+        | undefined
+        | MinifiedEquipmentViewModel
+        | MinifiedVehicleViewModel
+        | MinifiedWearableViewModel,
+      scanned: false as boolean,
+    };
+  },
+  methods: {
+    checkCode(c: string) {
+      this.available = [];
+      this.selected = undefined;
+      this.scanned = true;
+      this.status = "loading";
+      this.code = c;
+      this.$http
+        .get(`/public/reportdamage?code=${this.code}`)
+        .then((res) => {
+          this.available = res.data;
+          this.status = "success";
+        })
+        .catch((err) => {
+          this.status = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.status = undefined;
+          }, 1500);
+        });
+    },
+  },
+});
+</script>

src/components/public/damageReport/Start.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <br />
+    <button primary @click="$emit('nextStep', 'select')">Barcode verwenden</button>
+    <button primary-outline @click="$emit('nextStep', 'input')">ohne Barcode fortfahren</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  emits: {
+    nextStep: (s: string) => true,
+  },
+});
+</script>

src/components/scanner/Scanner.vue

@@ -10,13 +10,16 @@
       @detect="onDetect"
       @camera-on="onCameraReady"
     />
-    <br />
     <select v-model="selectedCamera">
       <option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
     </select>
+    <div>
+      <label for="manual">Code eingeben</label>
+      <input v-if="useInput" id="manual" type="text" v-model="detected" />
+    </div>
     <div class="flex flex-row justify-end gap-4 py-2">
       <button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
-      <button primary-outline @click="commit">bestätigen</button>
+      <button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
     </div>
   </div>
 </template>
@@ -36,7 +39,13 @@ import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
 
 <script lang="ts">
 export default defineComponent({
-  emits: ["code"],
+  props: {
+    useInput: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["code", "ready"],
   data() {
     return {
       selecteableCameras: defaultConstraintOptions,
@@ -51,6 +60,7 @@ export default defineComponent({
       if (!this.selectedCamera) {
         this.selectedCamera = this.selecteableCameras[0];
       }
+      this.$emit("ready");
     },
     onDetect(result: Array<DetectedBarcode>) {
       this.paused = true;

src/global.ts

@@ -0,0 +1,4 @@
+declare global {
+  //type Optional<T> = T | { [K in keyof T]?: never };
+  type Optional<T> = T | never;
+}

src/main.css

@@ -74,12 +74,12 @@ button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
 
 button[primary]:not([primary="false"]),
 [button][primary]:not([primary="false"]) {
-  @apply border-2 border-transparent text-white bg-primary hover:bg-primary;
+  @apply border-2 border-transparent text-white bg-primary hover:bg-accent;
 }
 
 button[primary-outline]:not([primary-outline="false"]),
 [button][primary-outline]:not([primary-outline="false"]) {
-  @apply border-2 border-primary text-black hover:bg-primary;
+  @apply border-2 border-primary text-black hover:bg-primary hover:text-white;
 }
 
 button:disabled,

src/router/index.ts

@@ -20,6 +20,7 @@ import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectio
 import { setVehicleTypeId } from "./unit/vehicleType";
 import { resetInspectionStores, setInspectionId } from "./unit/inspection";
 import { setWearableTypeId } from "./unit/wearableType";
+import { resetDamageReportStores, setDamageReportId } from "./unit/damageReport";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -697,19 +698,47 @@ const router = createRouter({
             {
               path: "damage-report",
               name: "admin-unit-damage_report-route",
-              component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
+              component: () => import("@/views/RouterView.vue"),
               meta: { type: "read", section: "unit", module: "damage_report" },
               beforeEnter: [abilityAndNavUpdate],
               children: [
                 {
                   path: "",
                   name: "admin-unit-damage_report",
+                  redirect: { name: "admin-unit-damage_report-open" },
+                },
+                {
+                  path: "status",
+                  name: "admin-unit-damage_report-statusrouting",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReportStatusRouting.vue"),
+                  beforeEnter: [resetDamageReportStores],
+                  children: [
+                    {
+                      path: "open",
+                      name: "admin-unit-damage_report-open",
                       component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
                     },
                     {
                       path: "done",
                       name: "admin-unit-damage_report-done",
-                  component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
+                      component: () => import("@/views/admin/unit/damageReport/DamageReportClosed.vue"),
+                    },
+                  ],
+                },
+                {
+                  path: ":damageReportId",
+                  name: "admin-unit-damage_report-routing",
+                  component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
+                  beforeEnter: [setDamageReportId],
+                  props: true,
+                  children: [
+                    {
+                      path: "",
+                      name: "admin-unit-damage_report-overview",
+                      component: () => import("@/views/admin/unit/damageReport/Overview.vue"),
+                      props: true,
+                    },
+                  ],
                 },
               ],
             },
@@ -1444,6 +1473,11 @@ const router = createRouter({
             },
           ],
         },
+        {
+          path: "damagereport",
+          name: "public-damage_report",
+          component: () => import("@/views/public/damageReport/Report.vue"),
+        },
       ],
     },
     {

src/router/unit/damageReport.ts

@@ -0,0 +1,20 @@
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+
+export async function setDamageReportId(to: any, from: any, next: any) {
+  const damageReportStore = useDamageReportStore();
+  damageReportStore.activeDamageReport = to.params?.damageReportId ?? null;
+
+  //xystore().$reset();
+
+  next();
+}
+
+export async function resetDamageReportStores(to: any, from: any, next: any) {
+  const damageReportStore = useDamageReportStore();
+  damageReportStore.activeDamageReport = null;
+  damageReportStore.activeDamageReportObj = null;
+
+  //xystore().$reset();
+
+  next();
+}

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

@@ -1,9 +1,5 @@
 import { defineStore } from "pinia";
-import type {
+import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
-  DamageReportViewModel,
-  CreateDamageReportViewModel,
-  UpdateDamageReportViewModel,
-} from "@/viewmodels/admin/unit/damageReport.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 
@@ -13,16 +9,13 @@ export const useDamageReportStore = defineStore("damageReport", {
       damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
       totalCount: 0 as number,
       loading: "loading" as "loading" | "fetched" | "failed",
+      activeDamageReport: null as string | null,
+      activeDamageReportObj: null as DamageReportViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
     };
   },
   actions: {
-    fetchDamageReports(offset = 0, count = 25, search = "", clear = false) {
+    formatQueryReturnToPagination(result: AxiosResponse<any, any>, offset: number) {
-      if (clear) this.damageReports = [];
-      this.loading = "loading";
-      //TODO enable fetch of done reports
-      http
-        .get(`/admin/damageReport?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
-        .then((result) => {
       this.totalCount = result.data.total;
       result.data.damageReports
         .filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
@@ -35,6 +28,27 @@ export const useDamageReportStore = defineStore("damageReport", {
         .forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
           this.damageReports.push(elem);
         });
+    },
+    fetchOpenDamageReports(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/damageReport?done=false&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.formatQueryReturnToPagination(result, offset);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchDoneDamageReports(offset = 0, count = 25, search = "", clear = false) {
+      if (clear) this.damageReports = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/damageReport?done=true&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
+        .then((result) => {
+          this.formatQueryReturnToPagination(result, offset);
           this.loading = "fetched";
         })
         .catch((err) => {
@@ -60,14 +74,32 @@ export const useDamageReportStore = defineStore("damageReport", {
         return { ...res, data: res.data.damageReports };
       });
     },
+    fetchDamageReportByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/damageReport/${this.activeDamageReport}`)
+        .then((res) => {
+          this.activeDamageReportObj = res.data;
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
     fetchDamageReportById(id: string) {
       return http.get(`/admin/damageReport/${id}`);
     },
+    loadDamageReportImage(url: string) {
+      return http.get(`/admin/damageReport/${this.activeDamageReportObj?.id}/${url}`, {
+        responseType: "blob",
+      });
+    },
     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,
       });
-      this.fetchDamageReports();
       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/stores/configuration.ts

@@ -10,6 +10,7 @@ export const useConfigurationStore = defineStore("configuration", {
       clubWebsite: "",
       appCustom_login_message: "",
       appShow_link_to_calendar: false as boolean,
+      appShow_link_to_damagereport: false as boolean,
 
       serverOffline: false as boolean,
     };
@@ -25,6 +26,7 @@ export const useConfigurationStore = defineStore("configuration", {
           this.clubWebsite = res.data["club.website"];
           this.appCustom_login_message = res.data["app.custom_login_message"];
           this.appShow_link_to_calendar = res.data["app.show_link_to_calendar"];
+          this.appShow_link_to_damagereport = res.data["app.show_link_to_damagereport"];
         })
         .catch(() => {
           this.serverOffline = true;

src/types/settingTypes.ts

@@ -8,6 +8,7 @@ export type SettingString =
   | "club.website"
   | "app.custom_login_message"
   | "app.show_link_to_calendar"
+  | "app.show_link_to_damagereport"
   | "session.jwt_expiration"
   | "session.refresh_expiration"
   | "session.pwa_refresh_expiration"
@@ -32,6 +33,7 @@ export type SettingValueMapping = {
   "club.website": string;
   "app.custom_login_message": string;
   "app.show_link_to_calendar": boolean;
+  "app.show_link_to_damagereport": boolean;
   "session.jwt_expiration": string;
   "session.refresh_expiration": string;
   "session.pwa_refresh_expiration": string;
@@ -66,6 +68,7 @@ export const settingsType: SettingsSchema = {
   "club.website": { type: "url", optional: true },
   "app.custom_login_message": { type: "string", optional: true },
   "app.show_link_to_calendar": { type: "boolean", default: true },
+  "app.show_link_to_damagereport": { type: "boolean", default: false },
   "session.jwt_expiration": { type: "ms", default: "15m" },
   "session.refresh_expiration": { type: "ms", default: "1d" },
   "session.pwa_refresh_expiration": { type: "ms", default: "5d" },

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

@@ -26,10 +26,13 @@ export type DamageReportViewModel = {
   status: string;
   done: boolean;
   description: string;
-  imageCount: number;
+  location: string;
+  noteByReporter: string;
+  noteByWorker: string;
+  images: string[];
   reportedBy: string;
   maintenance?: MaintenanceViewModel;
-} & DamageReportAssigned;
+} & Optional<DamageReportAssigned>;
 
 export interface CreateDamageReportViewModel {
   description: string;
@@ -41,5 +44,6 @@ export interface CreateDamageReportViewModel {
 export interface UpdateDamageReportViewModel {
   id: string;
   status: string;
+  noteByWorker: string;
   done: boolean;
 }

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

@@ -11,6 +11,14 @@ export interface EquipmentViewModel {
   equipmentType: EquipmentTypeViewModel;
 }
 
+export interface MinifiedEquipmentViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "equipment";
+}
+
 export interface CreateEquipmentViewModel {
   code?: string;
   name: string;

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

@@ -11,6 +11,14 @@ export interface VehicleViewModel {
   vehicleType: VehicleTypeViewModel;
 }
 
+export interface MinifiedVehicleViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "vehicle";
+}
+
 export interface CreateVehicleViewModel {
   code?: string;
   name: string;

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

@@ -14,6 +14,14 @@ export interface WearableViewModel {
   wearableType: WearableTypeViewModel;
 }
 
+export interface MinifiedWearableViewModel {
+  id: string;
+  code?: string;
+  name: string;
+  type: string;
+  assigned: "wearable";
+}
+
 export interface CreateWearableViewModel {
   code?: string;
   name: string;

src/views/Login.vue

@@ -69,6 +69,9 @@
         <RouterLink v-if="appShow_link_to_calendar" :to="{ name: 'public-calendar' }" button primary-outline>
           zum Kalender
         </RouterLink>
+        <RouterLink v-if="appShow_link_to_damagereport" :to="{ name: 'public-damage_report' }" button primary-outline>
+          Schaden melden
+        </RouterLink>
       </div>
 
       <FormBottomBar />
@@ -100,7 +103,7 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar"]),
+    ...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar", "appShow_link_to_damagereport"]),
   },
   mounted() {
     this.username = localStorage.getItem("username") ?? "";

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

@@ -4,8 +4,8 @@
       :items="damageReports"
       :totalCount="totalCount"
       :indicateLoading="loading == 'loading'"
-      @load-data="(offset, count, search) => fetchDamageReports(offset, count, search)"
+      @load-data="(offset, count, search) => fetchOpenDamageReports(offset, count, search)"
-      @search="(search) => fetchDamageReports(0, maxEntriesPerPage, search, true)"
+      @search="(search) => fetchOpenDamageReports(0, maxEntriesPerPage, search, true)"
     >
       <template #pageRow="{ row }: { row: DamageReportViewModel }">
         <DamageReportListItem :damageReport="row" />
@@ -37,10 +37,10 @@ export default defineComponent({
     ...mapState(useAbilityStore, ["can"]),
   },
   mounted() {
-    this.fetchDamageReports(0, this.maxEntriesPerPage, "", true);
+    this.fetchOpenDamageReports(0, this.maxEntriesPerPage, "", true);
   },
   methods: {
-    ...mapActions(useDamageReportStore, ["fetchDamageReports"]),
+    ...mapActions(useDamageReportStore, ["fetchOpenDamageReports"]),
   },
 });
 </script>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2 justify-center">
+    <Pagination
+      :items="damageReports"
+      :totalCount="totalCount"
+      :indicateLoading="loading == 'loading'"
+      @load-data="(offset, count, search) => fetchDoneDamageReports(offset, count, search)"
+      @search="(search) => fetchDoneDamageReports(0, maxEntriesPerPage, search, true)"
+    >
+      <template #pageRow="{ row }: { row: DamageReportViewModel }">
+        <DamageReportListItem :damageReport="row" />
+      </template>
+    </Pagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
+import Pagination from "@/components/Pagination.vue";
+import DamageReportListItem from "@/components/admin/unit/damageReport/DamageReportListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useDamageReportStore, ["damageReports", "totalCount", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchDoneDamageReports(0, this.maxEntriesPerPage, "", true);
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["fetchDoneDamageReports"]),
+  },
+});
+</script>

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

@@ -1,9 +1,29 @@
 <template>
-  <MainTemplate title="Schadensmeldungen">
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink :to="{ name: 'admin-unit-damage_report-open' }" class="text-primary">zurück zur Liste</RouterLink>
+    </template>
+    <template #topBar>
+      <h1 class="font-bold text-xl h-8 min-h-fit">
+        Schadensmeldung:
+        {{ activeDamageReportObj?.related?.name ?? "Ohne Zuordnung" }}
+        <small v-if="activeDamageReportObj?.related">({{ activeDamageReportObj.related.code }})</small>
+      </h1>
+
+      <RouterLink
+        v-if="activeDamageReportObj?.related && can('read', 'unit', 'equipment')"
+        :to="{
+          name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
+          params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
+        }"
+      >
+        <ArrowTopRightOnSquareIcon class="w-5 h-5" />
+      </RouterLink>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
         <div class="flex flex-col grow gap-2 overflow-hidden">
-          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+          <div hidden class="w-full flex flex-row max-lg:flex-wrap justify-center">
             <RouterLink
               v-for="tab in tabs"
               :key="tab.route"
@@ -34,21 +54,29 @@ import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { RouterLink, RouterView } from "vue-router";
 import { useAbilityStore } from "@/stores/ability";
-import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
 export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
   data() {
     return {
-      tabs: [
+      tabs: [{ route: "admin-unit-damage_report-overview", title: "Übersicht" }],
-        { route: "admin-unit-damage_report", title: "offen" },
-        { route: "admin-unit-damage_report-done", title: "bearbeitet" },
-      ],
     };
   },
   computed: {
+    ...mapState(useDamageReportStore, ["activeDamageReportObj"]),
     ...mapState(useAbilityStore, ["can"]),
   },
+  mounted() {
+    this.fetchDamageReportByActiveId();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["fetchDamageReportByActiveId"]),
+  },
 });
 </script>

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

@@ -0,0 +1,54 @@
+<template>
+  <MainTemplate title="Schadensmeldungen">
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
+        <div class="flex flex-col grow gap-2 overflow-hidden">
+          <div class="w-full flex flex-row max-lg:flex-wrap justify-center">
+            <RouterLink
+              v-for="tab in tabs"
+              :key="tab.route"
+              v-slot="{ isExactActive }"
+              :to="{ name: tab.route }"
+              class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
+            >
+              <p
+                :class="[
+                  'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
+                  isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
+                ]"
+              >
+                {{ tab.title }}
+              </p>
+            </RouterLink>
+          </div>
+          <RouterView />
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { RouterLink, RouterView } from "vue-router";
+import { useAbilityStore } from "@/stores/ability";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      tabs: [
+        { route: "admin-unit-damage_report-open", title: "offen" },
+        { route: "admin-unit-damage_report-done", title: "bearbeitet" },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="status">Status</label>
+        <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>
+        <label for="description">Beschreibung des Schadens</label>
+        <textarea id="description" readonly :value="activeDamageReportObj.description"></textarea>
+      </div>
+      <div>
+        <label for="location">Fundort</label>
+        <textarea id="location" readonly placeholder="---" :value="activeDamageReportObj.location"></textarea>
+      </div>
+      <div>
+        <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 placeholder="---" :value="activeDamageReportObj.reportedBy" />
+      </div>
+      <div>
+        <label>Bild</label>
+        <div ref="imgs">
+          <small v-if="activeDamageReportObj.images.length == 0">Keine Bilder hochgeladen</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+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">
+export default defineComponent({
+  props: {
+    damageReportId: String,
+  },
+  watch: {
+    activeDamageReportObj(val: DamageReportViewModel, oldVal: DamageReportViewModel | null) {
+      if (val && oldVal == null) this.loadImages();
+    },
+  },
+  data() {
+    return {
+      editStatus: false as boolean,
+      loading: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  computed: {
+    ...mapWritableState(useDamageReportStore, ["activeDamageReportObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.loadImages();
+  },
+  methods: {
+    ...mapActions(useDamageReportStore, ["loadDamageReportImage", "updateDamageReport"]),
+    loadImages() {
+      for (const i of this.activeDamageReportObj?.images ?? []) {
+        this.loadDamageReportImage(i)
+          .then((response) => {
+            const contentType =
+              response.headers && response.headers["content-type"] ? response.headers["content-type"] : "image/*";
+            const blob = new Blob([response.data], { type: contentType });
+            const img = document.createElement("img");
+            img.src = window.URL.createObjectURL(blob);
+            img.alt = "Schadensbild";
+            img.classList = "h-35 w-auto";
+            (this.$refs.imgs as HTMLElement).appendChild(img);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
+    },
+    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">{{ new Date(row.reportedAt).toLocaleString("de") }} - {{ 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">{{ new Date(row.reportedAt).toLocaleString("de") }} - {{ 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">{{ new Date(row.reportedAt).toLocaleString("de") }} - {{ 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>

src/views/public/damageReport/Report.vue

@@ -0,0 +1,114 @@
+<template>
+  <MainTemplate title="Schaden melden" :showBack="false">
+    <template #main>
+      <RouterLink :to="{ name: 'login' }" class="w-fit! text-primary">
+        {{ dictionary[step] == "result" ? "zurück zu Startseite" : "abbrechen" }}
+      </RouterLink>
+      <div class="max-w-md w-full flex flex-col gap-4 mx-auto">
+        <CheckProgressBar :total="dictionary.length" :step="step" :successfull="successfull" />
+        <Start v-if="dictionary[step] == 'start'" @nextStep="selectNextStep" @stepBack="stepBack" />
+        <SelectGear
+          v-else-if="dictionary[step] == 'select'"
+          @nextStep="selectNextStep"
+          @stepBack="stepBack"
+          @data="(gear) => (content.gear = gear)"
+        />
+        <InputData
+          v-else-if="dictionary[step] == 'input'"
+          :data="content"
+          @nextStep="selectNextStep"
+          @stepBack="stepBack"
+          @data="updateContent"
+        />
+        <CheckEntry
+          v-else-if="dictionary[step] == 'check'"
+          :check="content"
+          @nextStep="selectNextStep"
+          @stepBack="stepBack"
+        />
+        <Result v-else-if="dictionary[step] == 'result'" @start="reset" />
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import MainTemplate from "@/templates/Main.vue";
+import CheckProgressBar from "@/components/CheckProgressBar.vue";
+import Start from "@/components/public/damageReport/Start.vue";
+import SelectGear from "@/components/public/damageReport/SelectGear.vue";
+import InputData from "@/components/public/damageReport/InputData.vue";
+import CheckEntry from "@/components/public/damageReport/CheckEntry.vue";
+import Result from "@/components/public/damageReport/Result.vue";
+import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
+import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      dictionary: ["start", "select", "input", "check", "result"],
+      step: 0 as number,
+      successfull: 0 as number,
+      usingBarcode: false,
+      content: {
+        gear: undefined,
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      } as {
+        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
+        description: string;
+        location: string;
+        note: string;
+        reportedBy: string;
+        image: undefined | File;
+      },
+    };
+  },
+  computed: {
+    stepIndex() {
+      return (dict: string) => this.dictionary.findIndex((d) => d == dict);
+    },
+  },
+  methods: {
+    selectNextStep(s: string) {
+      let index = this.dictionary.findIndex((d) => d == s);
+      if (this.step == 0 && index == 2) this.usingBarcode = true;
+      this.step = index;
+      this.successfull = index - 1;
+    },
+    updateContent(d: { description: string; location: string; note: string; reportedBy: string; image?: File }) {
+      this.content.description = d.description;
+      this.content.location = d.location;
+      this.content.note = d.note;
+      this.content.reportedBy = d.reportedBy;
+      if (d.image) this.content.image = d.image;
+    },
+    stepBack() {
+      console.log("hi");
+      if (this.step == 2 && this.usingBarcode) this.step = 0;
+      else this.step--;
+      this.successfull = Math.max(0, this.step - 1);
+    },
+    reset() {
+      this.step = 0;
+      this.successfull = 0;
+      this.usingBarcode = false;
+      this.content = {
+        gear: undefined,
+        description: "",
+        location: "",
+        note: "",
+        reportedBy: "",
+        image: undefined,
+      };
+    },
+  },
+});
+</script>