data creation forms and centralization
This commit is contained in:
parent
835e6ef8db
commit
6ad2da1c16
26 changed files with 1077 additions and 348 deletions
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 h-1/2">
|
||||
<MemberSearchSelect
|
||||
<MemberSearchSelectMultiple
|
||||
title="weitere Empfänger suchen"
|
||||
v-model="recipients"
|
||||
:disabled="!can('create', 'club', 'newsletter')"
|
||||
|
|
@ -76,7 +76,7 @@ import { useAbilityStore } from "@/stores/ability";
|
|||
import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
|
||||
import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
↺ laden fehlgeschlagen
|
||||
</p>
|
||||
|
||||
<MemberSearchSelect
|
||||
<MemberSearchSelectMultiple
|
||||
title="Anwesende suchen"
|
||||
:model-value="presence.map((p) => p.memberId)"
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
|
|
@ -59,7 +59,7 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
|
||||
import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,75 +8,7 @@
|
|||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<Combobox v-model="selectedType">
|
||||
<ComboboxLabel>Typ</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"
|
||||
@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="z-20 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"
|
||||
>
|
||||
<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="filtered.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">tippe, um zu suchen...</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption v-else-if="filtered.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">Keine Auswahl gefunden.</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
|
||||
<ComboboxOption
|
||||
v-if="!(loading || deferingSearch)"
|
||||
v-for="type in filtered"
|
||||
as="template"
|
||||
:key="type.id"
|
||||
:value="type.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 }">
|
||||
{{ type.type }}
|
||||
</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>
|
||||
<EquipmentTypeSearchSelect title="Typ" v-model="selectedType" />
|
||||
<div>
|
||||
<label for="name">Bezeichnung</label>
|
||||
<input type="text" id="name" required />
|
||||
|
|
@ -116,43 +48,18 @@ import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment
|
|||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxLabel,
|
||||
ComboboxInput,
|
||||
ComboboxButton,
|
||||
ComboboxOptions,
|
||||
ComboboxOption,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
|
||||
import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
|
||||
import ScanInput from "@/components/ScanInput.vue";
|
||||
import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
watch: {
|
||||
query() {
|
||||
this.deferingSearch = true;
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.deferingSearch = false;
|
||||
this.search();
|
||||
}, 600);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: null as any,
|
||||
selectedType: null as null | string,
|
||||
loading: false as boolean,
|
||||
deferingSearch: false as boolean,
|
||||
timer: undefined as any,
|
||||
query: "" as string,
|
||||
filtered: [] as Array<EquipmentTypeViewModel>,
|
||||
selectedType: "" as string,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -166,19 +73,6 @@ export default defineComponent({
|
|||
methods: {
|
||||
...mapActions(useEquipmentStore, ["createEquipment"]),
|
||||
...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes"]),
|
||||
search() {
|
||||
this.filtered = [];
|
||||
if (this.query == "") return;
|
||||
this.loading = true;
|
||||
this.searchEquipmentTypes(this.query)
|
||||
.then((res) => {
|
||||
this.filtered = res.data;
|
||||
})
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
triggerCreate(e: any) {
|
||||
if (this.selectedType == null) return;
|
||||
let formData = e.target.elements;
|
||||
|
|
|
|||
116
src/views/admin/unit/equipmentType/UpdateEquipmentType.vue
Normal file
116
src/views/admin/unit/equipmentType/UpdateEquipmentType.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<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="equipmentType != null"
|
||||
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
|
||||
@submit.prevent="triggerUpdate"
|
||||
>
|
||||
<p class="mx-auto">Geräte-Typ bearbeiten</p>
|
||||
<div>
|
||||
<label for="name">Typ</label>
|
||||
<input type="text" id="name" required v-model="equipmentType.type" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="location">Beschreibung</label>
|
||||
<input type="text" id="location" v-model="equipmentType.description" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
|
||||
abbrechen
|
||||
</button>
|
||||
<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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
|
||||
import type {
|
||||
CreateEquipmentTypeViewModel,
|
||||
EquipmentTypeViewModel,
|
||||
UpdateEquipmentTypeViewModel,
|
||||
} from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import isEqual from "lodash.isequal";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
equipmentTypeId: String,
|
||||
},
|
||||
watch: {
|
||||
loadingActive() {
|
||||
if (this.loading == "loading") {
|
||||
this.loading = this.loadingActive;
|
||||
}
|
||||
if (this.loadingActive == "fetched") this.equipmentType = cloneDeep(this.activeEquipmentTypeObj);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
equipmentType: null as null | EquipmentTypeViewModel,
|
||||
timeout: null as any,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canSaveOrReset(): boolean {
|
||||
return isEqual(this.activeEquipmentTypeObj, this.equipmentType);
|
||||
},
|
||||
...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj", "loadingActive"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useEquipmentTypeStore, ["updateActiveEquipmentType", "fetchEquipmentTypeByActiveId"]),
|
||||
resetForm() {
|
||||
this.equipmentType = cloneDeep(this.activeEquipmentTypeObj);
|
||||
},
|
||||
fetchItem() {
|
||||
this.fetchEquipmentTypeByActiveId();
|
||||
},
|
||||
triggerUpdate(e: any) {
|
||||
if (this.equipmentType == null) return;
|
||||
let formData = e.target.elements;
|
||||
let updateEquipmentType: UpdateEquipmentTypeViewModel = {
|
||||
id: this.equipmentType.id,
|
||||
type: formData.type.value,
|
||||
description: formData.description.value,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.updateActiveEquipmentType(updateEquipmentType)
|
||||
.then((res) => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -8,86 +8,61 @@
|
|||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<Combobox v-model="selectedType">
|
||||
<ComboboxLabel>Typ</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"
|
||||
@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="z-20 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"
|
||||
>
|
||||
<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="filtered.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">tippe, um zu suchen...</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption v-else-if="filtered.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">Keine Auswahl gefunden.</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
|
||||
<ComboboxOption
|
||||
v-if="!(loading || deferingSearch)"
|
||||
v-for="type in filtered"
|
||||
as="template"
|
||||
:key="type.id"
|
||||
:value="type.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 }">
|
||||
{{ type.type }}
|
||||
</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 class="flex flex-row">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="w-1/2 p-0.5 first:pl-0 last:pr-0"
|
||||
@click="
|
||||
active = tab.key;
|
||||
selectedType = '';
|
||||
"
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
|
||||
tab.key == active
|
||||
? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
|
||||
: ' hover:bg-red-200',
|
||||
]"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EquipmentTypeSearchSelect v-if="active == 'gear'" title="Typ" v-model="selectedType" />
|
||||
<VehicleTypeSearchSelect v-else title="Typ" v-model="selectedType" />
|
||||
|
||||
<div>
|
||||
<label for="name">Bezeichnung</label>
|
||||
<input type="text" id="name" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="interval">Intervall (optional)</label>
|
||||
<input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
|
||||
<label for="interval">Intervall</label>
|
||||
<input
|
||||
type="text"
|
||||
id="interval"
|
||||
placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
|
||||
required
|
||||
pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
|
||||
title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="remind">Erinnerung vor Fälligkeit</label>
|
||||
<input
|
||||
type="text"
|
||||
id="remind"
|
||||
placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
|
||||
required
|
||||
pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
|
||||
title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink
|
||||
:to="{ name: 'admin-unit-inspectionPlan' }"
|
||||
:to="{ name: 'admin-unit-inspection_plan' }"
|
||||
primary-outline
|
||||
button
|
||||
class="w-fit!"
|
||||
|
|
@ -128,30 +103,28 @@ import type { CreateInspectionPlanViewModel } from "@/viewmodels/admin/unit/insp
|
|||
import ScanInput from "@/components/ScanInput.vue";
|
||||
import type { EquipmentTypeViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipmentType.models";
|
||||
import { useEquipmentTypeStore } from "../../../../stores/admin/unit/equipmentType/equipmentType";
|
||||
import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
|
||||
import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
watch: {
|
||||
query() {
|
||||
this.deferingSearch = true;
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.deferingSearch = false;
|
||||
this.search();
|
||||
}, 600);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: null as any,
|
||||
selectedType: null as null | string,
|
||||
loading: false as boolean,
|
||||
deferingSearch: false as boolean,
|
||||
timer: undefined as any,
|
||||
query: "" as string,
|
||||
filtered: [] as Array<EquipmentTypeViewModel>,
|
||||
selectedType: "" as string,
|
||||
active: "gear" as string,
|
||||
tabs: [
|
||||
{
|
||||
key: "gear",
|
||||
title: "Gerät",
|
||||
},
|
||||
{
|
||||
key: "vehicle",
|
||||
title: "Fahrzeug",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -165,26 +138,14 @@ export default defineComponent({
|
|||
methods: {
|
||||
...mapActions(useInspectionPlanStore, ["createInspectionPlan"]),
|
||||
...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes"]),
|
||||
search() {
|
||||
this.filtered = [];
|
||||
if (this.query == "") return;
|
||||
this.loading = true;
|
||||
this.searchEquipmentTypes(this.query)
|
||||
.then((res) => {
|
||||
this.filtered = res.data;
|
||||
})
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
triggerCreate(e: any) {
|
||||
if (this.selectedType == null) return;
|
||||
let formData = e.target.elements;
|
||||
let createInspectionPlan: CreateInspectionPlanViewModel = {
|
||||
title: formData.name.value,
|
||||
equipmentTypeId: "",
|
||||
inspectionInterval: formData.name.value || null,
|
||||
inspectionInterval: formData.name.value,
|
||||
remindTime: formData.name.value,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.createInspectionPlan(createInspectionPlan)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:totalCount="totalCount"
|
||||
:indicateLoading="loading == 'loading'"
|
||||
useSearch
|
||||
useScanner
|
||||
:useScanner="false"
|
||||
@load-data="(offset, count, search) => fetchInspectionPlans(offset, count, search)"
|
||||
@search="(search) => fetchInspectionPlans(0, maxEntriesPerPage, search, true)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
|
||||
<RouterLink to="./" class="text-primary">zurück zur Liste</RouterLink>
|
||||
</template>
|
||||
<template #topBar>
|
||||
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@
|
|||
<input type="text" id="interval" :value="activeInspectionPlanObj.inspectionInterval" reaonly />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeInspectionPlanObj?.inspectionPoints">
|
||||
<div v-for="point in activeInspectionPlanObj?.inspectionPoints">
|
||||
{{ point }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingActive == 'failed'" @click="fetchInspectionPlanByActiveId" class="cursor-pointer">
|
||||
|
|
|
|||
101
src/views/admin/unit/vehicle/CreateVehicle.vue
Normal file
101
src/views/admin/unit/vehicle/CreateVehicle.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #topBar>
|
||||
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||||
<h1 class="font-bold text-xl h-8">Fahrzeug erfassen</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
|
||||
<VehicleTypeSearchSelect title="Typ" v-model="selectedType" />
|
||||
<div>
|
||||
<label for="name">Bezeichnung</label>
|
||||
<input type="text" id="name" required />
|
||||
</div>
|
||||
<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>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
|
||||
import type { CreateVehicleViewModel } 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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
|
||||
import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: null as any,
|
||||
selectedType: "" as string,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useVehicleTypeStore, ["vehicleTypes"]),
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useVehicleStore, ["createVehicle"]),
|
||||
triggerCreate(e: any) {
|
||||
if (this.selectedType == null) return;
|
||||
let formData = e.target.elements;
|
||||
let createVehicle: CreateVehicleViewModel = {
|
||||
name: formData.name.value,
|
||||
location: formData.location.value,
|
||||
vehicleTypeId: this.selectedType,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.createVehicle(createVehicle)
|
||||
.then((res) => {
|
||||
this.status = { status: "success" };
|
||||
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$router.push({
|
||||
name: "admin-unit-vehicle-overview",
|
||||
params: {
|
||||
vehicleId: res.data,
|
||||
},
|
||||
});
|
||||
}, 1500);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -25,9 +25,10 @@
|
|||
v-if="can('create', 'unit', 'equipment')"
|
||||
:to="{ name: 'admin-unit-vehicle-create' }"
|
||||
primary
|
||||
button
|
||||
class="w-fit!"
|
||||
>
|
||||
Fahrzeug erstellen
|
||||
Fahrzeug erfassen
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,75 +8,7 @@
|
|||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<Combobox v-model="selectedType">
|
||||
<ComboboxLabel>Typ</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"
|
||||
@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="z-20 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"
|
||||
>
|
||||
<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="filtered.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">tippe, um zu suchen...</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
<ComboboxOption v-else-if="filtered.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">Keine Auswahl gefunden.</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
|
||||
<ComboboxOption
|
||||
v-if="!(loading || deferingSearch)"
|
||||
v-for="type in filtered"
|
||||
as="template"
|
||||
:key="type.id"
|
||||
:value="type.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 }">
|
||||
{{ type.type }}
|
||||
</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>
|
||||
<WearableTypeSearchSelect title="Typ" v-model="selectedType" />
|
||||
<div>
|
||||
<label for="name">Bezeichnung</label>
|
||||
<input type="text" id="name" required />
|
||||
|
|
@ -86,7 +18,7 @@
|
|||
<label for="location">Verortung (optional)</label>
|
||||
<input type="text" id="location" />
|
||||
</div>
|
||||
<MemberSearchSelect title="Träger (optional)" />
|
||||
<MemberSearchSelectSingle title="Träger (optional)" />
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink
|
||||
:to="{ name: 'admin-unit-wearable' }"
|
||||
|
|
@ -117,44 +49,19 @@ import type { CreateWearableViewModel } from "@/viewmodels/admin/unit/wearable/w
|
|||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxLabel,
|
||||
ComboboxInput,
|
||||
ComboboxButton,
|
||||
ComboboxOptions,
|
||||
ComboboxOption,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
|
||||
import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
|
||||
import ScanInput from "@/components/ScanInput.vue";
|
||||
import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
|
||||
import MemberSearchSelectSingle from "@/components/search/MemberSearchSelectSingle.vue";
|
||||
import WearableTypeSearchSelect from "@/components/search/WearableTypeSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
watch: {
|
||||
query() {
|
||||
this.deferingSearch = true;
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.deferingSearch = false;
|
||||
this.search();
|
||||
}, 600);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: null as any,
|
||||
selectedType: null as null | string,
|
||||
loading: false as boolean,
|
||||
deferingSearch: false as boolean,
|
||||
timer: undefined as any,
|
||||
query: "" as string,
|
||||
filtered: [] as Array<WearableTypeViewModel>,
|
||||
selectedType: "" as string,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -168,19 +75,6 @@ export default defineComponent({
|
|||
methods: {
|
||||
...mapActions(useWearableStore, ["createWearable"]),
|
||||
...mapActions(useWearableTypeStore, ["searchWearableTypes"]),
|
||||
search() {
|
||||
this.filtered = [];
|
||||
if (this.query == "") return;
|
||||
this.loading = true;
|
||||
this.searchWearableTypes(this.query)
|
||||
.then((res) => {
|
||||
this.filtered = res.data;
|
||||
})
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
triggerCreate(e: any) {
|
||||
if (this.selectedType == null) return;
|
||||
let formData = e.target.elements;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,15 @@
|
|||
<label for="location">Verortung</label>
|
||||
<input type="text" id="location" :value="activeWearableObj.location" readonly />
|
||||
</div>
|
||||
<div>
|
||||
<label for="wearer">Träger</label>
|
||||
<input
|
||||
type="text"
|
||||
id="wearer"
|
||||
:value="(activeWearableObj.wearer?.firstname ?? '') + ' ' + (activeWearableObj.wearer?.lastname ?? '')"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<label for="location">Verortung (optional)</label>
|
||||
<input type="text" id="location" v-model="wearable.location" />
|
||||
</div>
|
||||
<MemberSearchSelect title="Träger (optional)" />
|
||||
<MemberSearchSelectMultiple title="Träger (optional)" />
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
|
||||
abbrechen
|
||||
|
|
@ -46,7 +46,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
|
|||
import ScanInput from "@/components/ScanInput.vue";
|
||||
import isEqual from "lodash.isequal";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
|
||||
import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
|
|
@ -41,10 +41,8 @@ import type {
|
|||
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";
|
||||
import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue