save inspectionPoints

src/components/admin/unit/inspectionPlan/InspectionPointListItem.vue

@@ -6,7 +6,7 @@
       <BoldIcon v-else-if="modelValue.type == InspectionPointEnum.text" class="w-6 h-6" />
       <DocumentIcon v-else-if="modelValue.type == InspectionPointEnum.file" class="w-6 h-6" />
 
-      <input type="text" placeholder="Titel" v-model="title" />
+      <input type="text" placeholder="Titel" class="grow !w-fit" v-model="title" />
 
       <div class="flex flex-col">
         <ChevronUpIcon v-if="index != 0" class="text-white w-4 h-4 stroke-2 cursor-pointer" @click="$emit('up')" />
@@ -28,6 +28,13 @@
         <label for="max">Maximal</label>
         <input type="number" v-model="max" min="0" />
       </div>
+      <div v-if="modelValue.type == InspectionPointEnum.file">
+        <p>Dateiart</p>
+        <div class="flex flex-row gap-2">
+          <button :primary="others == 'img'" :primary-outline="others != 'img'" @click="others = 'img'">Bild</button>
+          <button :primary="others == 'pdf'" :primary-outline="others != 'pdf'" @click="others = 'pdf'">PDF</button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -63,7 +70,7 @@ export default defineComponent({
       get() {
         return this.modelValue.title;
       },
-      set(val: InspectionPointViewModel) {
+      set(val: string) {
         this.$emit("update:model-value", { ...this.modelValue, title: val });
       },
     },
@@ -71,7 +78,7 @@ export default defineComponent({
       get() {
         return this.modelValue.description;
       },
-      set(val: InspectionPointViewModel) {
+      set(val: string) {
         this.$emit("update:model-value", { ...this.modelValue, description: val });
       },
     },
@@ -79,16 +86,24 @@ export default defineComponent({
       get() {
         return this.modelValue.min;
       },
-      set(val: InspectionPointViewModel) {
+      set(val: string) {
-        this.$emit("update:model-value", { ...this.modelValue, min: val });
+        this.$emit("update:model-value", { ...this.modelValue, min: val == "" ? null : val });
       },
     },
     max: {
       get() {
         return this.modelValue.max;
       },
-      set(val: InspectionPointViewModel) {
+      set(val: string) {
-        this.$emit("update:model-value", { ...this.modelValue, max: val });
+        this.$emit("update:model-value", { ...this.modelValue, max: val == "" ? null : val });
+      },
+    },
+    others: {
+      get() {
+        return this.modelValue.others;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", { ...this.modelValue, others: val == "" ? null : val });
       },
     },
   },

src/components/search/EquipmentSearchSelect.vue

@@ -188,7 +188,7 @@ export default defineComponent({
         });
     },
     getEquipmentFromSearch(id: string) {
-      return this.filtered.find((f) => f.id == id);
+      return this.available.find((f) => f.id == id);
     },
     loadEquipmentInitial() {
       if (this.modelValue == "") return;

src/components/search/EquipmentTypeSearchSelect.vue

@@ -175,7 +175,7 @@ export default defineComponent({
         });
     },
     getEquipmentTypeFromSearch(id: string) {
-      return this.filtered.find((f) => f.id == id);
+      return this.available.find((f) => f.id == id);
     },
     loadEquipmentTypeInitial() {
       if (this.modelValue == "") return;

src/components/search/InspectionPlanSearchSelect.vue

@@ -101,10 +101,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    type: {
-      type: String as PropType<"vehicle" | "equipment" | "wearable">,
-      default: "equipment",
-    },
   },
   emits: ["update:model-value"],
   watch: {
@@ -183,7 +179,7 @@ export default defineComponent({
         });
     },
     getInspectionPlanFromSearch(id: string) {
-      return this.filtered.find((f) => f.id == id);
+      return this.available.find((f) => f.id == id);
     },
     loadInspectionPlanInitial() {
       if (this.modelValue == "") return;

src/components/search/InspectionPlanSearchSelectWithRelated.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="w-full">
+    <Combobox v-model="selected" :disabled="disabled">
+      <ComboboxLabel>{{ title }}</ComboboxLabel>
+      <div class="relative mt-1">
+        <ComboboxInput
+          class="rounded-md shadow-xs relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-hidden focus:ring-0 focus:z-10 sm:text-sm resize-none"
+          :displayValue="() => chosen?.title ?? ''"
+          @input="query = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+        <TransitionRoot
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          @after-leave="query = ''"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-hidden sm:text-sm z-20"
+          >
+            <ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
+              <li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <Spinner />
+                <span class="font-normal block truncate">suche</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">tippe, um zu suchen...</span>
+              </li>
+            </ComboboxOption>
+            <ComboboxOption v-else-if="available.length === 0 && query != ''" as="template" disabled>
+              <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
+                <span class="font-normal block truncate">Keine Auswahl gefunden.</span>
+              </li>
+            </ComboboxOption>
+
+            <ComboboxOption
+              v-if="!(loading || deferingSearch)"
+              v-for="inspectionPlan in available"
+              as="template"
+              :key="inspectionPlan.id"
+              :value="inspectionPlan.id"
+              v-slot="{ selected, active }"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-primary text-white': active,
+                  'text-gray-900': !active,
+                }"
+              >
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ inspectionPlan.title }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-primary': !active }"
+                >
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import {
+  Combobox,
+  ComboboxLabel,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import Spinner from "../Spinner.vue";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String,
+      default: "",
+    },
+    title: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    relatedType: {
+      type: String as PropType<"vehicle" | "equipment" | "wearable">,
+      default: "equipment",
+    },
+    relatedTypeId: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ["update:model-value"],
+  watch: {
+    modelValue() {
+      if (this.initialLoaded) return;
+      this.initialLoaded = true;
+      this.loadInspectionPlanInitial();
+    },
+    relatedType() {
+      this.reload();
+    },
+    relatedTypeId() {
+      this.reload();
+    },
+    query() {
+      this.deferingSearch = true;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.deferingSearch = false;
+        this.search();
+      }, 600);
+    },
+  },
+  data() {
+    return {
+      initialLoaded: false as boolean,
+      loading: false as boolean,
+      deferingSearch: false as boolean,
+      timer: undefined as any,
+      query: "" as string,
+      all: [] as Array<InspectionPlanViewModel>,
+      filtered: [] as Array<InspectionPlanViewModel>,
+      chosen: undefined as undefined | InspectionPlanViewModel,
+    };
+  },
+  computed: {
+    available() {
+      return this.query == "" ? this.all : this.filtered;
+    },
+    selected: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.chosen = this.getInspectionPlanFromSearch(val);
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+  mounted() {
+    this.reload();
+  },
+  methods: {
+    ...mapActions(useInspectionPlanStore, [
+      "fetchInspectionPlanById",
+      "getAllInspectionPlansWithRelated",
+      "searchInspectionPlansWithRelated",
+    ]),
+    reload() {
+      this.chosen = undefined;
+      this.filtered = [];
+      this.preloadAll();
+      this.loadInspectionPlanInitial();
+    },
+    preloadAll() {
+      this.all = [];
+      if (this.relatedTypeId == "") return;
+      this.loading = true;
+      this.getAllInspectionPlansWithRelated(this.relatedType, this.relatedTypeId)
+        .then((res) => {
+          this.all = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    search() {
+      this.filtered = [];
+      if (this.query == "" || this.relatedTypeId == "") return;
+      this.loading = true;
+      this.searchInspectionPlansWithRelated(this.relatedType, this.relatedTypeId, this.query)
+        .then((res) => {
+          this.filtered = res.data;
+        })
+        .catch((err) => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    getInspectionPlanFromSearch(id: string) {
+      return this.available.find((f) => f.id == id);
+    },
+    loadInspectionPlanInitial() {
+      if (this.modelValue == "") return;
+      this.fetchInspectionPlanById(this.modelValue)
+        .then((res) => {
+          this.chosen = res.data;
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/components/search/VehicleSearchSelect.vue

@@ -188,7 +188,7 @@ export default defineComponent({
         });
     },
     getVehicleFromSearch(id: string) {
-      return this.filtered.find((f) => f.id == id);
+      return this.available.find((f) => f.id == id);
     },
     loadVehicleInitial() {
       if (this.modelValue == "") return;

src/components/search/VehicleTypeSearchSelect.vue

@@ -175,7 +175,7 @@ export default defineComponent({
         });
     },
     getVehicleTypeFromSearch(id: string) {
-      return this.filtered.find((f) => f.id == id);
+      return this.available.find((f) => f.id == id);
     },
     loadVehicleTypeInitial() {
       if (this.modelValue == "") return;

src/router/unit/inspectionPlan.ts

@@ -1,10 +1,11 @@
 import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import { useInspectionPointStore } from "../../stores/admin/unit/inspectionPlan/inspectionPoint";
 
 export async function setInspectionPlanId(to: any, from: any, next: any) {
   const InspectionPlanStore = useInspectionPlanStore();
   InspectionPlanStore.activeInspectionPlan = to.params?.inspectionPlanId ?? null;
 
-  //useXYStore().$reset();
+  useInspectionPointStore().$reset();
 
   next();
 }
@@ -14,7 +15,7 @@ export async function resetInspectionPlanStores(to: any, from: any, next: any) {
   InspectionPlanStore.activeInspectionPlan = null;
   InspectionPlanStore.activeInspectionPlanObj = null;
 
-  //useXYStore().$reset();
+  useInspectionPointStore().$reset();
 
   next();
 }

src/stores/admin/unit/inspectionPlan/inspectionPlan.ts

@@ -53,6 +53,25 @@ export const useInspectionPlanStore = defineStore("inspectionPlan", {
         return { ...res, data: res.data.inspectionPlans };
       });
     },
+    async getAllInspectionPlansWithRelated(
+      related: "vehicle" | "equipment" | "wearable",
+      relatedId: string
+    ): Promise<AxiosResponse<any, any>> {
+      return await http.get(`/admin/inspectionPlan/${related}/${relatedId}?noLimit=true`).then((res) => {
+        return { ...res, data: res.data.inspectionPlans };
+      });
+    },
+    async searchInspectionPlansWithRelated(
+      related: "vehicle" | "equipment" | "wearable",
+      relatedId: string,
+      search: string
+    ): Promise<AxiosResponse<any, any>> {
+      return await http
+        .get(`/admin/inspectionPlan/${related}/${relatedId}?search=${search}&noLimit=true`)
+        .then((res) => {
+          return { ...res, data: res.data.inspectionPlans };
+        });
+    },
     fetchInspectionPlanByActiveId() {
       this.loadingActive = "loading";
       http

src/stores/admin/unit/inspectionPlan/inspectionPoint.ts

@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import { useInspectionPlanStore } from "./inspectionPlan";
+
+export const useInspectionPointStore = defineStore("inspectionPoint", {
+  state: () => {
+    return {
+      inspectionPoints: [] as Array<InspectionPointViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchInspectionPoints() {
+      const inspectionPlanId = useInspectionPlanStore().activeInspectionPlan;
+      this.loading = "loading";
+      http
+        .get(`/admin/inspectionPlan/${inspectionPlanId}/points`)
+        .then((result) => {
+          this.inspectionPoints = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    async updateActiveInspectionPoints(
+      inspectionPoints: Array<InspectionPointViewModel>
+    ): Promise<AxiosResponse<any, any>> {
+      const inspectionPlanId = useInspectionPlanStore().activeInspectionPlan;
+      const result = await http.patch(`/admin/inspectionPlan/${inspectionPlanId}/points`, inspectionPoints);
+      this.fetchInspectionPoints();
+      return result;
+    },
+  },
+});

src/viewmodels/admin/unit/inspection/inspectionPlan.models.ts

@@ -45,6 +45,7 @@ export interface InspectionPointViewModel {
   type: InspectionPointEnum;
   min?: number;
   max?: number;
+  others?: string;
   sort: number;
 }
 

src/views/admin/unit/inspection/InspectionStart.vue

@@ -30,10 +30,17 @@
         <VehicleSearchSelect v-else-if="active == 'vehicle'" title="Fahrzeug" useScanner v-model="related" />
         <WearableSearchSelect v-else title="Kleidung" useScanner v-model="related" />
 
-        <InspectionPlanSearchSelect title="Prüfplan" :type="active" v-model="inspectionPlan" />
+        <InspectionPlanSearchSelectWithRelated
+          title="Prüfplan"
+          :relatedType="active"
+          :relatedTypeId="relatedType"
+          v-model="inspectionPlan"
+        />
 
         <div>
-          <label for="nextInspection">Nächste Prüfung (optional) {{ " - Intervall: xx-x" }}</label>
+          <label for="nextInspection">
+            Nächste Prüfung (optional) - Intervall: {{ selectedInspectionPlan?.inspectionInterval }}
+          </label>
           <input id="nextInspection" type="date" />
         </div>
 
@@ -64,10 +71,15 @@ import MainTemplate from "@/templates/Main.vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import InspectionPlanSearchSelect from "@/components/search/InspectionPlanSearchSelect.vue";
 import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
 import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
 import WearableSearchSelect from "@/components/search/WearableSearchSelect.vue";
+import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import InspectionPlanSearchSelectWithRelated from "@/components/search/InspectionPlanSearchSelectWithRelated.vue";
+import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
+import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
+import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
 </script>
 
 <script lang="ts">
@@ -80,11 +92,20 @@ export default defineComponent({
     relatedId: String,
     inspectionPlanId: String,
   },
+  watch: {
+    inspectionPlan() {
+      if (this.inspectionPlan != "") this.getInspectionPlanData();
+    },
+    related() {
+      this.getTypeIdToRelated();
+    },
+  },
   data() {
     return {
       status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: null as any,
       related: "",
+      relatedType: "",
       inspectionPlan: "",
       active: "equipment" as "equipment" | "vehicle" | "wearable",
       tabs: [
@@ -101,6 +122,7 @@ export default defineComponent({
           title: "Kleidung",
         },
       ] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
+      selectedInspectionPlan: undefined as undefined | InspectionPlanViewModel,
     };
   },
   mounted() {
@@ -110,5 +132,49 @@ export default defineComponent({
       this.related = this.relatedId ?? "";
     }
   },
+  methods: {
+    ...mapActions(useInspectionPlanStore, ["fetchInspectionPlanById"]),
+    ...mapActions(useEquipmentStore, ["fetchEquipmentById"]),
+    ...mapActions(useVehicleStore, ["fetchVehicleById"]),
+    ...mapActions(useWearableStore, ["fetchWearableById"]),
+    getInspectionPlanData() {
+      this.fetchInspectionPlanById(this.inspectionPlan)
+        .then((res) => {
+          this.selectedInspectionPlan = res.data;
+        })
+        .catch((err) => {});
+    },
+    getTypeIdToRelated() {
+      if (this.related == "") {
+        this.relatedType = "";
+        return;
+      }
+      if (this.active == "equipment") {
+        this.fetchEquipmentById(this.related)
+          .then((res) => {
+            this.relatedType = res.data.equipmentTypeId;
+          })
+          .catch(() => {
+            this.relatedType = "";
+          });
+      } else if (this.active == "vehicle") {
+        this.fetchVehicleById(this.related)
+          .then((res) => {
+            this.relatedType = res.data.vehicleTypeId;
+          })
+          .catch(() => {
+            this.relatedType = "";
+          });
+      } else if (this.active == "wearable") {
+        this.fetchWearableById(this.related)
+          .then((res) => {
+            this.relatedType = res.data.wearableTypeId;
+          })
+          .catch(() => {
+            this.relatedType = "";
+          });
+      }
+    },
+  },
 });
 </script>

src/views/admin/unit/inspectionPlan/UpdateInspectionPlanPoints.vue

@@ -3,34 +3,35 @@
     <RouterLink to="./" class="text-primary">zurück zur Übersicht</RouterLink>
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-    <div
+    <div v-else-if="localPoints != null" class="flex flex-col grow gap-4 py-2 w-full max-w-xl mx-auto overflow-hidden">
-      v-else-if="inspectionPlan != null"
-      class="flex flex-col grow gap-4 py-2 w-full max-w-xl mx-auto overflow-hidden"
-    >
       <p class="mx-auto">Prüfplan-Punkte bearbeiten</p>
 
       <div class="flex flex-row justify-center gap-4">
         <div
           class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
           @click="addItemToArray(InspectionPointEnum.oknok)"
+          title="OK Nicht OK"
         >
           <ClipboardDocumentCheckIcon class="w-7 h-7" />
         </div>
         <div
-          class="p-3 border border-gray-300 rounded-md shadow cursor-pointer pointer-events-none opacity-50"
+          class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
           @click="addItemToArray(InspectionPointEnum.file)"
+          title="Datei-Upload"
         >
           <DocumentIcon class="w-7 h-7" />
         </div>
         <div
           class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
           @click="addItemToArray(InspectionPointEnum.number)"
+          title="Zahl-Eingabe"
         >
           <CalculatorIcon class="w-7 h-7" />
         </div>
         <div
           class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
           @click="addItemToArray(InspectionPointEnum.text)"
+          title="Text-Eingabe"
         >
           <BoldIcon class="w-7 h-7" />
         </div>
@@ -42,7 +43,7 @@
           :key="index"
           :model-value="point"
           :index="index"
-          :total-count="inspectionPoints.length"
+          :total-count="localPoints.length"
           @update:model-value="updateItemFromArray"
           @up="changeSort('up', point.id, index)"
           @down="changeSort('down', point.id, index)"
@@ -54,7 +55,13 @@
         <button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
           abbrechen
         </button>
-        <button primary type="submit" class="w-fit!" :disabled="status == 'loading'" @click="triggerUpdate">
+        <button
+          primary
+          type="submit"
+          class="w-fit!"
+          :disabled="status == 'loading' || canSaveOrReset"
+          @click="triggerUpdate"
+        >
           speichern
         </button>
         <Spinner v-if="status == 'loading'" class="my-auto" />
@@ -68,13 +75,7 @@
 <script setup lang="ts">
 import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
-import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
-import type {
-  CreateInspectionPlanViewModel,
-  InspectionPlanViewModel,
-  InspectionPointViewModel,
-  UpdateInspectionPlanViewModel,
-} from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
@@ -84,6 +85,7 @@ import { BoldIcon, CalculatorIcon, ClipboardDocumentCheckIcon, DocumentIcon } fr
 import { InspectionPointEnum } from "@/enums/inspectionEnum";
 import { v4 as uuid } from "uuid";
 import InspectionPointListItem from "@/components/admin/unit/inspectionPlan/InspectionPointListItem.vue";
+import { useInspectionPointStore } from "@/stores/admin/unit/inspectionPlan/inspectionPoint";
 </script>
 
 <script lang="ts">
@@ -92,33 +94,28 @@ export default defineComponent({
     inspectionPlanId: String,
   },
   watch: {
-    loadingActive() {
+    loading() {
-      if (this.loading == "loading") {
+      if (this.loading == "fetched") this.localPoints = cloneDeep(this.inspectionPoints);
-        this.loading = this.loadingActive;
-      }
-      if (this.loadingActive == "fetched") this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
     },
   },
   data() {
     return {
-      loading: "loading" as "loading" | "fetched" | "failed",
       status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      inspectionPlan: null as null | InspectionPlanViewModel,
       timeout: null as any,
-      inspectionPoints: [] as Array<InspectionPointViewModel>,
+      localPoints: [] as Array<InspectionPointViewModel>,
     };
   },
   computed: {
     canSaveOrReset(): boolean {
-      return isEqual(this.activeInspectionPlanObj, this.inspectionPlan);
+      return isEqual(this.inspectionPoints, this.localPoints);
     },
-    ...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
+    ...mapState(useInspectionPointStore, ["inspectionPoints", "loading"]),
     sortedPoints() {
-      return this.inspectionPoints.slice().sort((a, b) => a.sort - b.sort);
+      return this.localPoints.slice().sort((a, b) => a.sort - b.sort);
     },
   },
   mounted() {
-    this.fetchItem();
+    this.fetchInspectionPoints();
   },
   beforeUnmount() {
     try {
@@ -126,63 +123,51 @@ export default defineComponent({
     } catch (error) {}
   },
   methods: {
-    ...mapActions(useInspectionPlanStore, ["updateActiveInspectionPlan", "fetchInspectionPlanByActiveId"]),
+    ...mapActions(useInspectionPointStore, ["fetchInspectionPoints", "updateActiveInspectionPoints"]),
     resetForm() {
-      this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
+      this.localPoints = cloneDeep(this.inspectionPoints);
-    },
-    fetchItem() {
-      this.fetchInspectionPlanByActiveId();
     },
     addItemToArray(type: InspectionPointEnum) {
-      this.inspectionPoints.push({
+      this.localPoints.push({
         id: uuid(),
         title: "",
         description: "",
         type,
-        sort: this.inspectionPoints.length,
+        sort: this.localPoints.length,
       });
     },
     updateItemFromArray(pkg: InspectionPointViewModel) {
-      let index = this.inspectionPoints.findIndex((ip) => ip.id == pkg.id);
+      let index = this.localPoints.findIndex((ip) => ip.id == pkg.id);
-      this.inspectionPoints[index] = pkg;
+      this.localPoints[index] = pkg;
     },
     removeItemFromArray(id: string) {
-      let index = this.inspectionPoints.findIndex((ip) => ip.id == id);
+      let index = this.localPoints.findIndex((ip) => ip.id == id);
       if (index !== -1) {
-        this.inspectionPoints.splice(index, 1);
+        this.localPoints.splice(index, 1);
         this.normalizeSort();
       }
     },
     changeSort(dir: "up" | "down", thisId: string, index: number) {
       let affected = this.sortedPoints[dir == "up" ? index - 1 : index + 1];
       if (affected) {
-        this.inspectionPoints.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
+        this.localPoints.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
-        this.inspectionPoints.find((a) => a.id == affected.id)!.sort =
+        this.localPoints.find((a) => a.id == affected.id)!.sort = dir == "up" ? affected.sort + 1 : affected.sort - 1;
-          dir == "up" ? affected.sort + 1 : affected.sort - 1;
       }
       this.normalizeSort();
     },
     normalizeSort() {
       let rightSort = this.sortedPoints.every((val, index) => val.sort == index);
       if (!rightSort) {
-        this.inspectionPoints.forEach((e, index) => {
+        this.localPoints.forEach((e, index) => {
           e.sort = this.sortedPoints.findIndex((sp) => sp.id == e.id);
         });
       }
     },
     triggerUpdate(e: any) {
-      if (this.inspectionPlan == null) return;
+      if (this.localPoints.length == 0) return;
-      let formData = e.target.elements;
-      let updateInspectionPlan: UpdateInspectionPlanViewModel = {
-        id: this.inspectionPlan.id,
-        title: formData.name.value,
-        inspectionInterval: formData.interval.value,
-        remindTime: formData.remind.value,
-      };
       this.status = "loading";
-      this.updateActiveInspectionPlan(updateInspectionPlan)
+      this.updateActiveInspectionPoints(this.localPoints)
         .then((res) => {
-          this.fetchItem();
           this.status = { status: "success" };
         })
         .catch((err) => {