equipmenttype form

src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue

@@ -1,30 +1,23 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Mitglied erstellen</p>
+      <p class="text-xl font-medium">Typ erstellen</p>
     </div>
     <br />
     <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
       <div>
-        <label for="firstname">Vorname</label>
+        <label for="type">Typ</label>
-        <input type="text" id="firstname" required />
+        <input type="text" id="type" required />
       </div>
       <div>
-        <label for="lastname">Nachname</label>
+        <label for="description">Beschreibung (optional)</label>
-        <input type="text" id="lastname" required />
+        <textarea id="description" class="h-18"></textarea>
       </div>
       <div>
-        <label for="nameaffix">Nameaffix (optional)</label>
+        <label for="interval">Intervall (optional)</label>
-        <input type="text" id="nameaffix" />
+        <input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
-      </div>
-      <div>
-        <label for="birthdate">Geburtsdatum</label>
-        <input type="date" id="birthdate" required />
-      </div>
-      <div>
-        <label for="internalId">Interne ID (optional)</label>
-        <input type="text" id="internalId" />
       </div>
+
       <div class="flex flex-row gap-2">
         <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
         <Spinner v-if="status == 'loading'" class="my-auto" />
@@ -50,12 +43,8 @@ import { useModalStore } from "@/stores/modal";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
+import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import type { CreateEquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
-import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
-import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
-import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
-import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
 </script>
 
 <script lang="ts">
@@ -66,12 +55,6 @@ export default defineComponent({
       timeout: undefined as any,
     };
   },
-  computed: {
-    ...mapState(useSalutationStore, ["salutations"]),
-  },
-  mounted() {
-    this.fetchSalutations();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -79,18 +62,16 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useEquipmentStore, ["createEquipment"]),
+    ...mapActions(useEquipmentTypeStore, ["createEquipmentType"]),
-    ...mapActions(useSalutationStore, ["fetchSalutations"]),
     triggerCreate(e: any) {
       let formData = e.target.elements;
-      let createEquipment: CreateEquipmentViewModel = {
+      let createEquipmentType: CreateEquipmentTypeViewModel = {
-        code: "",
+        type: formData.type.value,
-        name: "",
+        description: formData.description.value,
-        location: "",
+        inspectionInterval: formData.interval.value || null,
-        equipmentTypeId: "",
       };
       this.status = "loading";
-      this.createEquipment(createEquipment)
+      this.createEquipmentType(createEquipmentType)
         .then(() => {
           this.status = { status: "success" };
           this.timeout = setTimeout(() => {

src/demodata/equipmentType.ts

@@ -5,6 +5,6 @@ export const equipmentTypeDemoData: Array<EquipmentTypeViewModel> = [
     id: "xyz",
     type: "B-Schlauch",
     description: "Shläuche vom Typ B",
-    inspectionInterval: "1m",
+    inspectionInterval: "1-m",
   },
 ];

src/router/index.ts

@@ -666,13 +666,13 @@ const router = createRouter({
                     {
                       path: "overview",
                       name: "admin-unit-equipment_type-overview",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipmentType/Overview.vue"),
                       props: true,
                     },
                     {
                       path: "inspection-plan",
                       name: "admin-unit-equipment_type-inspection_plan",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/equipmentType/InspectionPlans.vue"),
                       props: true,
                     },
                     {

src/stores/admin/unit/equipmentType/equipmentType.ts

@@ -62,7 +62,7 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
       this.activeEquipmentTypeObj = equipmentTypeDemoData.find(
         (e) => e.id == this.activeEquipmentType
       ) as EquipmentTypeViewModel;
-      this.loading = "fetched";
+      this.loadingActive = "fetched";
       return;
       this.loadingActive = "loading";
       http

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

@@ -2,19 +2,19 @@ export interface EquipmentTypeViewModel {
   id: string;
   type: string;
   description: string;
-  inspectionInterval: `${number}${"d" | "m" | "y"}`;
+  inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
   // attached inspection plans
 }
 
 export interface CreateEquipmentTypeViewModel {
   type: string;
   description: string;
-  inspectionInterval: `${number}${"d" | "m" | "y"}`;
+  inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
 }
 
 export interface UpdateEquipmentTypeViewModel {
   id: string;
   type: string;
   description: string;
-  inspectionInterval: `${number}${"d" | "m" | "y"}`;
+  inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
 }

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

@@ -22,7 +22,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
 import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport/damageReport.models";
 import Pagination from "@/components/Pagination.vue";
-import DamageReportListItem from "@components/admin/unit/damageReport/DamageReportListItem.vue";
+import DamageReportListItem from "@/components/admin/unit/damageReport/DamageReportListItem.vue";
 </script>
 
 <script lang="ts">

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

@@ -34,11 +34,10 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { RouterLink, RouterView } from "vue-router";
-import { useModalStore } from "@/stores/modal";
 import { useAbilityStore } from "@/stores/ability";
 import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
 </script>
@@ -65,13 +64,6 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useEquipmentStore, ["fetchEquipmentByActiveId"]),
-    ...mapActions(useModalStore, ["openModal"]),
-    openDeleteModal() {
-      this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/admin/unit/member/DeleteMemberModal.vue"))),
-        this.equipmentId ?? ""
-      );
-    },
   },
 });
 </script>

src/views/admin/unit/equipmentType/InspectionPlans.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Pagination
+      :items="[]"
+      :totalCount="0"
+      :indicateLoading="false"
+      @load-data="(offset, count, search) => {}"
+      @search="(search) => {}"
+    >
+      <template #pageRow="{ row }: { row: { id: string } }">
+        <p>{{ row }}</p>
+      </template>
+    </Pagination>
+
+    <div class="flex flex-row gap-4">
+      <button v-if="can('create', 'unit', 'equipment_type')" primary class="!w-fit" @click="">
+        Prüfplan erstellen
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Pagination from "@/components/Pagination.vue";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeEquipmentTypeObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="type">Typ</label>
+        <input type="text" id="type" :value="activeEquipmentTypeObj.type" readonly />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" :value="activeEquipmentTypeObj.description" class="h-18" readonly></textarea>
+      </div>
+      <div>
+        <label for="interval">Intervall</label>
+        <input type="text" id="interval" :value="activeEquipmentTypeObj.inspectionInterval" reaonly />
+      </div>
+    </div>
+
+    <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
+    <p v-else-if="loadingActive == 'failed'" @click="fetchEquipmentTypeByActiveId" 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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    equipmentTypeId: String,
+  },
+  computed: {
+    ...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchEquipmentTypeByActiveId();
+  },
+  methods: {
+    ...mapActions(useEquipmentTypeStore, ["fetchEquipmentTypeByActiveId"]),
+  },
+});
+</script>