ff-admin/src/views/admin/unit/inspectionPlan/Overview.vue

<template>
  <div class="flex flex-col gap-2 h-full w-full overflow-hidden">
    <div v-if="activeInspectionPlanObj != null" class="flex flex-col gap-2 w-full">
      <div>
        <label for="type">Typ</label>
        <input type="text" id="type" :value="activeInspectionPlanObj.related.type" readonly />
      </div>
      <div>
        <label for="interval">Intervall</label>
        <input type="text" id="interval" :value="activeInspectionPlanObj.inspectionInterval" reaonly />
      </div>
    </div>
    <p>Prüfungspunkte</p>
    <div v-if="activeInspectionPlanObj?.inspectionPoints" class="flex flex-col gap-2 grow overflow-y-scroll">
      <div
        v-for="point in activeInspectionPlanObj?.inspectionPoints"
        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>{{ point.title }}</p>
        </div>
        <div class="p-2">
          <p>Eingabetyp: {{ point.type }}</p>
          <p>Beschreibung: {{ point.description }}</p>
        </div>
      </div>
    </div>

    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
    <p v-else-if="loadingActive == 'failed'" @click="fetchInspectionPlanByActiveId" class="cursor-pointer">
      &#8634; laden fehlgeschlagen
    </p>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    inspectionPlanId: String,
  },
  computed: {
    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
  },
  mounted() {
    this.fetchInspectionPlanByActiveId();
  },
  methods: {
    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
  },
});
</script>