ff-admin/src/components/public/damageReport/InputData.vue

<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="title">Kurzbeschreibung (Titel)</label>
        <input id="title" type="text" required :value="data.title" />
      </div>
      <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;
        title: string;
        description: string;
        location: string;
        note: string;
        reportedBy: string;
        image: undefined | File;
      }>,
      required: true,
    },
  },
  emits: {
    nextStep: (s: string) => true,
    stepBack: () => true,
    data: (d: {
      title: string;
      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", {
        title: formData.title.value,
        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>