vehicle update and code

src/components/admin/unit/vehicle/CreateVehicleModal.vue

@@ -1,105 +0,0 @@
-<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>
-    </div>
-    <br />
-    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
-      <div>
-        <label for="firstname">Vorname</label>
-        <input type="text" id="firstname" required />
-      </div>
-      <div>
-        <label for="lastname">Nachname</label>
-        <input type="text" id="lastname" required />
-      </div>
-      <div>
-        <label for="nameaffix">Nameaffix (optional)</label>
-        <input type="text" id="nameaffix" />
-      </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" />
-        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <FailureXMark v-else-if="status?.status == 'failed'" />
-      </div>
-    </form>
-
-    <div class="flex flex-row justify-end">
-      <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
-          abbrechen
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { defineComponent } from "vue";
-import { mapState, mapActions } from "pinia";
-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 { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
-import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
-import type { CreateVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
-import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
-import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  data() {
-    return {
-      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      timeout: undefined as any,
-    };
-  },
-  computed: {
-    ...mapState(useSalutationStore, ["salutations"]),
-  },
-  mounted() {
-    this.fetchSalutations();
-  },
-  beforeUnmount() {
-    try {
-      clearTimeout(this.timeout);
-    } catch (error) {}
-  },
-  methods: {
-    ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useVehicleStore, ["createVehicle"]),
-    ...mapActions(useSalutationStore, ["fetchSalutations"]),
-    triggerCreate(e: any) {
-      let formData = e.target.elements;
-      let createVehicle: CreateVehicleViewModel = {
-        name: "",
-        location: "",
-        vehicleTypeId: "",
-      };
-      this.status = "loading";
-      this.createVehicle(createVehicle)
-        .then(() => {
-          this.status = { status: "success" };
-          this.timeout = setTimeout(() => {
-            this.closeModal();
-          }, 1500);
-        })
-        .catch(() => {
-          this.status = { status: "failed" };
-        });
-    },
-  },
-});
-</script>

src/demodata/vehicle.ts

@@ -4,6 +4,7 @@ import { vehicleTypeDemoData } from "./vehicleType";
 export const vehicleDemoData: Array<VehicleViewModel> = [
   {
     id: "kjhb",
+    code: "",
     name: "HLF",
     location: "Tor 1",
     vehicleTypeId: "xyz",
@@ -12,6 +13,7 @@ export const vehicleDemoData: Array<VehicleViewModel> = [
   },
   {
     id: "kjhb",
+    code: "",
     name: "LF",
     location: "Tor 2",
     vehicleTypeId: "abc",

src/router/index.ts

@@ -442,7 +442,7 @@ const router = createRouter({
                     {
                       path: "edit",
                       name: "admin-unit-vehicle-edit",
-                      component: () => import("@/views/admin/ViewSelect.vue"),
+                      component: () => import("@/views/admin/unit/vehicle/UpdateVehicle.vue"),
                       meta: { type: "update", section: "unit", module: "vehicle" },
                       beforeEnter: [abilityAndNavUpdate],
                       props: true,

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

@@ -3,7 +3,7 @@ import type { InspectionViewMoel } from "../inspectionPlan/inspectionPlan.models
 
 export interface EquipmentViewModel {
   id: string;
-  code: string;
+  code?: string;
   name: string;
   location: string;
   equipmentTypeId: string;
@@ -12,7 +12,7 @@ export interface EquipmentViewModel {
 }
 
 export interface CreateEquipmentViewModel {
-  code: string;
+  code?: string;
   name: string;
   location: string;
   equipmentTypeId: string;
@@ -20,7 +20,7 @@ export interface CreateEquipmentViewModel {
 
 export interface UpdateEquipmentViewModel {
   id: string;
-  code: string;
+  code?: string;
   name: string;
   location: string;
 }

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

@@ -3,6 +3,7 @@ import type { VehicleTypeViewModel } from "../vehicleType/vehicleType.models";
 
 export interface VehicleViewModel {
   id: string;
+  code?: string;
   name: string;
   location: string;
   vehicleTypeId: string;
@@ -11,6 +12,7 @@ export interface VehicleViewModel {
 }
 
 export interface CreateVehicleViewModel {
+  code?: string;
   name: string;
   location: string;
   vehicleTypeId: string;
@@ -18,6 +20,7 @@ export interface CreateVehicleViewModel {
 
 export interface UpdateVehicleViewModel {
   id: string;
+  code?: string;
   name: string;
   location: string;
 }

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

@@ -3,7 +3,7 @@ import type { WearableTypeViewModel } from "../wearableType/wearableType.models"
 
 export interface WearableViewModel {
   id: string;
-  code: string;
+  code?: string;
   name: string;
   location?: string;
   wearerId?: string;
@@ -13,7 +13,7 @@ export interface WearableViewModel {
 }
 
 export interface CreateWearableViewModel {
-  code: string;
+  code?: string;
   name: string;
   wearerId?: string;
   location?: string;
@@ -22,7 +22,7 @@ export interface CreateWearableViewModel {
 
 export interface UpdateWearableViewModel {
   id: string;
-  code: string;
+  code?: string;
   name: string;
   location?: string;
   wearerId?: string;

src/views/admin/unit/vehicle/CreateVehicle.vue

@@ -13,6 +13,7 @@
             <label for="name">Bezeichnung</label>
             <input type="text" id="name" required />
           </div>
+          <ScanInput name="code" label="Code" :required="false" />
           <div>
             <label for="location">Verortung (optional)</label>
             <input type="text" id="location" />
@@ -49,6 +50,7 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
 import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
+import ScanInput from "@/components/ScanInput.vue";
 </script>
 
 <script lang="ts">
@@ -75,6 +77,7 @@ export default defineComponent({
       let formData = e.target.elements;
       let createVehicle: CreateVehicleViewModel = {
         name: formData.name.value,
+        code: formData.code.value || null,
         location: formData.location.value,
         vehicleTypeId: this.selectedType,
       };

src/views/admin/unit/vehicle/UpdateVehicle.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+    <form
+      v-else-if="vehicle != null"
+      class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+      @submit.prevent="triggerUpdate"
+    >
+      <p class="mx-auto">Fahrzeug bearbeiten</p>
+      <div>
+        <label for="name">Bezeichnung</label>
+        <input type="text" id="name" required v-model="vehicle.name" />
+      </div>
+      <ScanInput name="code" label="Code" :required="false" />
+      <div>
+        <label for="location">Verortung (optional)</label>
+        <input type="text" id="location" />
+      </div>
+      <div class="flex flex-row justify-end gap-2">
+        <RouterLink
+          :to="{ name: 'admin-unit-vehicle' }"
+          primary-outline
+          button
+          class="w-fit!"
+          :disabled="status == 'loading' || status?.status == 'success'"
+        >
+          abbrechen
+        </RouterLink>
+        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'">speichern</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import type { UpdateVehicleViewModel, VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import ScanInput from "@/components/ScanInput.vue";
+import isEqual from "lodash.isequal";
+import cloneDeep from "lodash.clonedeep";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    vehicleId: String,
+  },
+  watch: {
+    loadingActive() {
+      if (this.loading == "loading") {
+        this.loading = this.loadingActive;
+      }
+      if (this.loadingActive == "fetched") this.vehicle = cloneDeep(this.activeVehicleObj);
+    },
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      vehicle: null as null | VehicleViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.activeVehicleObj, this.vehicle);
+    },
+    ...mapState(useVehicleStore, ["activeVehicleObj", "loadingActive"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useVehicleStore, ["updateActiveVehicle", "fetchVehicleByActiveId"]),
+    resetForm() {
+      this.vehicle = cloneDeep(this.activeVehicleObj);
+    },
+    fetchItem() {
+      this.fetchVehicleByActiveId();
+    },
+    triggerUpdate(e: any) {
+      if (this.vehicle == null) return;
+      let formData = e.target.elements;
+      let updateVehicle: UpdateVehicleViewModel = {
+        id: this.vehicle.id,
+        name: formData.name.value,
+        code: formData.code.value || null,
+        location: formData.location.value,
+      };
+      this.status = "loading";
+      this.updateActiveVehicle(updateVehicle)
+        .then((res) => {
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>