Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 12 Pull requests Projects Releases 18 Packages Wiki Activity Actions

data creation forms and centralization

Browse source
This commit is contained in:
Julian Krauser 2025-04-28 12:29:44 +02:00
parent 835e6ef8db
commit 6ad2da1c16
26 changed files with 1077 additions and 348 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue
View file

@ -4,12 +4,10 @@
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>
{{ inspectionPlan.title }}
</p>
<p>{{ inspectionPlan.title }} - {{ inspectionPlan.equipmentType.type }}</p>
</div>
<div class="p-2">
<p v-if="inspectionPlan">Code: {{ inspectionPlan }}</p>
<p>Interval: {{ inspectionPlan.inspectionInterval }}</p>
</div>
</RouterLink>
</template>

174
src/components/search/EquipmentTypeSearchSelect.vue Normal file
View file

@ -0,0 +1,174 @@
<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?.type ?? ''"
@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-10"
>
<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="equipmentType in filtered"
as="template"
:key="equipmentType.id"
:value="equipmentType.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 }">
{{ equipmentType.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>
</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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
import type { EquipmentTypeViewModel } from "@/viewmodels/admin/unit/equipmentType/equipmentType.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
modelValue: {
type: String,
default: "",
},
title: String,
disabled: {
type: Boolean,
default: false,
},
},
emits: ["update:model-value"],
watch: {
modelValue() {
if (this.initialLoaded) return;
this.initialLoaded = true;
this.loadEquipmentTypeInitial();
},
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,
filtered: [] as Array<EquipmentTypeViewModel>,
chosen: undefined as undefined | EquipmentTypeViewModel,
};
},
computed: {
selected: {
get() {
return this.modelValue;
},
set(val: string) {
this.chosen = this.getEquipmentTypeFromSearch(val);
this.$emit("update:model-value", val);
},
},
},
mounted() {
this.loadEquipmentTypeInitial();
},
methods: {
...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes", "fetchEquipmentTypeById"]),
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;
});
},
getEquipmentTypeFromSearch(id: string) {
return this.filtered.find((f) => f.id == id);
},
loadEquipmentTypeInitial() {
if (this.modelValue == "") return;
this.fetchEquipmentTypeById(this.modelValue)
.then((res) => {
this.chosen = res.data;
})
.catch(() => {});
},
},
});
</script>

2
src/components/admin/MemberSearchSelect.vue → src/components/search/MemberSearchSelectMultiple.vue
View file

@ -17,7 +17,7 @@
@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"
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-10"
>
<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">

174
src/components/search/MemberSearchSelectSingle.vue Normal file
View file

@ -0,0 +1,174 @@
<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"
:display-value="() => (chosen?.firstname ?? '') + ' ' + (chosen?.lastname ?? '')"
@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-10"
>
<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="member in filtered"
as="template"
:key="member.id"
:value="member.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 }">
{{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
</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 { useMemberStore } from "@/stores/admin/club/member/member";
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import Spinner from "../Spinner.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
modelValue: {
type: String,
default: "",
},
title: String,
disabled: {
type: Boolean,
default: false,
},
},
emits: ["update:model-value"],
watch: {
modelValue() {
if (this.initialLoaded) return;
this.initialLoaded = true;
this.loadMemberInitial();
},
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,
filtered: [] as Array<MemberViewModel>,
chosen: undefined as undefined | MemberViewModel,
};
},
computed: {
selected: {
get() {
return this.modelValue;
},
set(val: string) {
this.chosen = this.getMemberFromSearch(val);
this.$emit("update:model-value", val);
},
},
},
mounted() {
this.loadMemberInitial();
},
methods: {
...mapActions(useMemberStore, ["searchMembers", "fetchMemberById"]),
search() {
this.filtered = [];
if (this.query == "") return;
this.loading = true;
this.searchMembers(this.query)
.then((res) => {
this.filtered = res.data;
})
.catch((err) => {})
.finally(() => {
this.loading = false;
});
},
getMemberFromSearch(id: string) {
return this.filtered.find((f) => f.id == id);
},
loadMemberInitial() {
if (this.modelValue == "") return;
this.fetchMemberById(this.modelValue)
.then((res) => {
this.chosen = res.data;
})
.catch(() => {});
},
},
});
</script>

174
src/components/search/VehicleTypeSearchSelect.vue Normal file
View file

@ -0,0 +1,174 @@
<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?.type ?? ''"
@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-10"
>
<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="vehicleType in filtered"
as="template"
:key="vehicleType.id"
:value="vehicleType.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 }">
{{ vehicleType.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>
</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 { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
modelValue: {
type: String,
default: "",
},
title: String,
disabled: {
type: Boolean,
default: false,
},
},
emits: ["update:model-value"],
watch: {
modelValue() {
if (this.initialLoaded) return;
this.initialLoaded = true;
this.loadVehicleTypeInitial();
},
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,
filtered: [] as Array<VehicleTypeViewModel>,
chosen: undefined as undefined | VehicleTypeViewModel,
};
},
computed: {
selected: {
get() {
return this.modelValue;
},
set(val: string) {
this.chosen = this.getVehicleTypeFromSearch(val);
this.$emit("update:model-value", val);
},
},
},
mounted() {
this.loadVehicleTypeInitial();
},
methods: {
...mapActions(useVehicleTypeStore, ["searchVehicleTypes", "fetchVehicleTypeById"]),
search() {
this.filtered = [];
if (this.query == "") return;
this.loading = true;
this.searchVehicleTypes(this.query)
.then((res) => {
this.filtered = res.data;
})
.catch((err) => {})
.finally(() => {
this.loading = false;
});
},
getVehicleTypeFromSearch(id: string) {
return this.filtered.find((f) => f.id == id);
},
loadVehicleTypeInitial() {
if (this.modelValue == "") return;
this.fetchVehicleTypeById(this.modelValue)
.then((res) => {
this.chosen = res.data;
})
.catch(() => {});
},
},
});
</script>

174
src/components/search/WearableTypeSearchSelect.vue Normal file
View file

@ -0,0 +1,174 @@
<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?.type ?? ''"
@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-10"
>
<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="wearableType in filtered"
as="template"
:key="wearableType.id"
:value="wearableType.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 }">
{{ wearableType.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>
</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 { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
modelValue: {
type: String,
default: "",
},
title: String,
disabled: {
type: Boolean,
default: false,
},
},
emits: ["update:model-value"],
watch: {
modelValue() {
if (this.initialLoaded) return;
this.initialLoaded = true;
this.loadWearableTypeInitial();
},
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,
filtered: [] as Array<WearableTypeViewModel>,
chosen: undefined as undefined | WearableTypeViewModel,
};
},
computed: {
selected: {
get() {
return this.modelValue;
},
set(val: string) {
this.chosen = this.getWearableTypeFromSearch(val);
this.$emit("update:model-value", val);
},
},
},
mounted() {
this.loadWearableTypeInitial();
},
methods: {
...mapActions(useWearableTypeStore, ["searchWearableTypes", "fetchWearableTypeById"]),
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;
});
},
getWearableTypeFromSearch(id: string) {
return this.filtered.find((f) => f.id == id);
},
loadWearableTypeInitial() {
if (this.modelValue == "") return;
this.fetchWearableTypeById(this.modelValue)
.then((res) => {
this.chosen = res.data;
})
.catch(() => {});
},
},
});
</script>

39
src/demodata/inspectionPlan.ts
View file

@ -5,7 +5,46 @@ export const inspectionPlanDemoData: Array<InspectionPlanViewModel> = [
{
id: "abc",
title: "Sichtprüfung",
version: 1,
inspectionInterval: "1-m",
remindTime: "1-m",
inspectionPoints: [
{
id: "edf",
title: "vorhandene Spritzstellen ausgebessert",
description: "",
type: "number",
},
{
id: "ghi",
title: "Einband der Kupplung sitzt fest",
description: "",
type: "iO-niO",
},
{
id: "lmn",
title: "Das überstehende Drahtende des Knaggenteiles sitzt versenkt",
description: "",
type: "iO-niO",
},
],
equipmentTypeId: equipmentTypeDemoData[0].id,
equipmentType: equipmentTypeDemoData[0],
},
{
id: "cba",
title: "Druckprüfung",
version: 1,
inspectionInterval: "1-m",
remindTime: "22/10",
inspectionPoints: [
{
id: "edf",
title: "Gebrauchsprüfdruck 12bar",
description: "",
type: "iO-niO",
},
],
equipmentTypeId: equipmentTypeDemoData[0].id,
equipmentType: equipmentTypeDemoData[0],
},

3
src/demodata/wearable.ts
View file

@ -5,7 +5,8 @@ export const wearableDemoData: Array<WearableViewModel> = [
{
id: "abc",
code: "0456984224498",
name: "B-Schlauch",
name: "Jacke",
location: "Spint",
wearerId: "9469991d-fa22-4899-82ce-b1ba5de990dc",
wearer: {
id: "9469991d-fa22-4899-82ce-b1ba5de990dc",

7
src/router/index.ts
View file

@ -19,6 +19,7 @@ import { resetRespiratoryWearerStores, setRespiratoryWearerId } from "./unit/res
import { resetRespiratoryMissionStores, setRespiratoryMissionId } from "./unit/respiratoryMission";
import { resetWearableStores, setWearableId } from "./unit/wearable";
import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectionPlan";
import { setVehicleTypeId } from "./unit/vehicleType";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -405,7 +406,7 @@ const router = createRouter({
{
path: "create",
name: "admin-unit-vehicle-create",
component: () => import("@/views/admin/ViewSelect.vue"),
component: () => import("@/views/admin/unit/vehicle/CreateVehicle.vue"),
meta: { type: "create", section: "unit", module: "vehicle" },
beforeEnter: [abilityAndNavUpdate],
},
@ -731,7 +732,7 @@ const router = createRouter({
{
path: "edit",
name: "admin-unit-equipment_type-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
component: () => import("@/views/admin/unit/equipmentType/UpdateEquipmentType.vue"),
meta: { type: "update", section: "unit", module: "equipment_type" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -756,7 +757,7 @@ const router = createRouter({
path: ":vehicleTypeId",
name: "admin-unit-vehicle_type-routing",
component: () => import("@/views/admin/unit/vehicleType/VehicleTypeRouting.vue"),
beforeEnter: [setEquipmentTypeId],
beforeEnter: [setVehicleTypeId],
props: true,
children: [
{

18
src/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models.ts
View file

@ -3,19 +3,31 @@ import type { EquipmentTypeViewModel } from "../equipmentType/equipmentType.mode
export interface InspectionPlanViewModel {
id: string;
title: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
inspectionInterval: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
remindTime: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
version: number;
inspectionPoints: InspectionPointViewModel[];
equipmentTypeId: string;
equipmentType: EquipmentTypeViewModel;
}
export interface CreateInspectionPlanViewModel {
title: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
inspectionInterval: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
remindTime: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
equipmentTypeId: string;
}
export interface UpdateInspectionPlanViewModel {
id: string;
title: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
inspectionInterval: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
remindTime: `${number}-${"d" | "m" | "y"}` | `${number}/${number}` | `${number}/*`;
}
export interface InspectionPointViewModel {
id: string;
title: string;
description: string;
type: "iO-niO" | "text" | "number";
}

9
src/viewmodels/admin/unit/vehicle/vehicle.models.ts
View file

@ -1,16 +1,19 @@
export interface VehicleViewModel {
id: string;
name: string;
type: string;
location: string;
vehicleTypeId: string;
}
export interface CreateVehicleViewModel {
name: string;
type: string;
location: string;
vehicleTypeId: string;
}
export interface UpdateVehicleViewModel {
id: string;
name: string;
type: string;
location: string;
vehicleTypeId: string;
}

2
src/viewmodels/admin/unit/wearable/wearable.models.ts
View file

@ -7,7 +7,7 @@ export interface WearableViewModel {
name: string;
location?: string;
wearerId?: string;
wearer: MemberViewModel;
wearer?: MemberViewModel;
wearableTypeId: string;
wearableType: WearableTypeViewModel;
}

4
src/views/admin/club/newsletter/NewsletterRecipients.vue
View file

@ -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">

4
src/views/admin/club/protocol/ProtocolPresence.vue
View file

@ -5,7 +5,7 @@
&#8634; 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>

112
src/views/admin/unit/equipment/CreateEquipment.vue
View file

@ -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
View 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>

163
src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue
View file

@ -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)

2
src/views/admin/unit/inspectionPlan/InspectionPlan.vue
View file

@ -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)"
>

2
src/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue
View file

@ -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">

5
src/views/admin/unit/inspectionPlan/Overview.vue
View file

@ -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
View 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>

3
src/views/admin/unit/vehicle/Vehicle.vue
View file

@ -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>

116
src/views/admin/unit/wearable/CreateWearable.vue
View file

@ -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;

9
src/views/admin/unit/wearable/Overview.vue
View file

@ -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" />

4
src/views/admin/unit/wearable/UpdateWearable.vue
View file

@ -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">

2
src/views/admin/unit/wearableType/UpdateWearableType.vue
View file

@ -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">