ff-admin/src/views/public/damageReport/Report.vue

<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,
        title: "",
        description: "",
        location: "",
        note: "",
        reportedBy: "",
        image: undefined,
      } as {
        gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
        title: string;
        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: {
      title: string;
      description: string;
      location: string;
      note: string;
      reportedBy: string;
      image?: File;
    }) {
      this.content.title = d.title;
      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,
        title: "",
        description: "",
        location: "",
        note: "",
        reportedBy: "",
        image: undefined,
      };
    },
  },
});
</script>