enable public report

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>