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

wearable

Browse source
This commit is contained in:
Julian Krauser 2025-04-01 16:11:39 +02:00
parent 716823f536
commit 553eeb7bfb
21 changed files with 1318 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/admin/unit/wearable/WearableListItem.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<RouterLink
:to="{ name: 'admin-unit-wearable-overview', params: { wearableId: wearable.id } }"
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>
{{ wearable.name }}
</p>
</div>
<div class="p-2">
<p v-if="wearable.code">Code: {{ wearable.code }}</p>
</div>
</RouterLink>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearable: { type: Object as PropType<WearableViewModel>, default: {} },
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
});
</script>

82
src/components/admin/unit/wearableType/CreateWearableTypeModal.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Typ erstellen</p>
</div>
<br />
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
<div>
<label for="type">Typ</label>
<input type="text" id="type" required />
</div>
<div>
<label for="description">Beschreibung (optional)</label>
<textarea id="description" class="h-18"></textarea>
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
abbrechen
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
import type { CreateWearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useWearableTypeStore, ["createWearableType"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createWearableType: CreateWearableTypeViewModel = {
type: formData.type.value,
description: formData.description.value,
};
this.status = "loading";
this.createWearableType(createWearableType)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});
</script>

84
src/components/admin/unit/wearableType/DeleteWearableTypeModal.vue Normal file
View file

@ -0,0 +1,84 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Ausrüstung-Type löschen</p>
</div>
<br />
<p class="text-center">Type {{ wearableType?.type }} löschen?</p>
<br />
<div class="flex flex-row gap-2">
<button
primary
type="submit"
:disabled="status == 'loading' || status?.status == 'success'"
@click="triggerDelete"
>
löschen
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
abbrechen
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
import type { CreateWearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useWearableTypeStore, ["wearableTypes"]),
wearableType() {
return this.wearableTypes.find((m) => m.id == this.data);
},
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useWearableTypeStore, ["deleteWearableType"]),
triggerDelete() {
this.status = "loading";
this.deleteWearableType(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.$router.push({ name: "admin-unit-wearable_type" });
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});
</script>

27
src/components/admin/unit/wearableType/WearableTypeListItem.vue Normal file
View file

@ -0,0 +1,27 @@
<template>
<div 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>
{{ wearableType.type }}
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearableType: { type: Object as PropType<WearableTypeViewModel>, default: {} },
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
});
</script>

22
src/demodata/wearable.ts Normal file
View file

@ -0,0 +1,22 @@
import type { WearableViewModel } from "../viewmodels/admin/unit/wearable/wearable.models";
import { wearableTypeDemoData } from "./wearableType";
export const wearableDemoData: Array<WearableViewModel> = [
{
id: "abc",
code: "0456984224498",
name: "B-Schlauch",
wearerId: "9469991d-fa22-4899-82ce-b1ba5de990dc",
wearer: {
id: "9469991d-fa22-4899-82ce-b1ba5de990dc",
salutation: { id: 3, salutation: "Herr" },
firstname: "Julian",
lastname: "Krauser",
nameaffix: "",
birthdate: new Date("2003-09-20"),
internalId: "1312",
},
wearableTypeId: wearableTypeDemoData[0].id,
wearableType: wearableTypeDemoData[0],
},
];

9
src/demodata/wearableType.ts Normal file
View file

@ -0,0 +1,9 @@
import type { WearableTypeViewModel } from "../viewmodels/admin/unit/wearableType/wearableType.models";
export const wearableTypeDemoData: Array<WearableTypeViewModel> = [
{
id: "xyz",
type: "B-Schlauch",
description: "Shläuche vom Typ B",
},
];

74
src/router/index.ts
View file

@ -17,6 +17,7 @@ import { resetVehicleStores, setVehicleId } from "./unit/vehicle";
import { resetRespiratoryGearStores, setRespiratoryGearId } from "./unit/respiratoryGear";
import { resetRespiratoryWearerStores, setRespiratoryWearerId } from "./unit/respiratoryWearer";
import { resetRespiratoryMissionStores, setRespiratoryMissionId } from "./unit/respiratoryMission";
import { resetWearableStores, setWearableId } from "./unit/wearable";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -450,6 +451,57 @@ const router = createRouter({
},
],
},
{
path: "wearable",
name: "admin-unit-wearable-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "wearable" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-unit-wearable",
component: () => import("@/views/admin/unit/wearable/Wearable.vue"),
beforeEnter: [resetWearableStores],
},
{
path: "create",
name: "admin-unit-wearable-create",
component: () => import("@/views/admin/unit/wearable/CreateWearable.vue"),
meta: { type: "create", section: "unit", module: "wearable" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: ":wearableId",
name: "admin-unit-wearable-routing",
component: () => import("@/views/admin/unit/wearable/WearableRouting.vue"),
beforeEnter: [setWearableId],
props: true,
children: [
{
path: "overview",
name: "admin-unit-wearable-overview",
component: () => import("@/views/admin/unit/wearable/Overview.vue"),
props: true,
},
{
path: "report",
name: "admin-unit-wearable-damage_report",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-wearable-edit",
component: () => import("@/views/admin/unit/wearable/UpdateWearable.vue"),
meta: { type: "update", section: "unit", module: "wearable" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
path: "respiratory-gear",
name: "admin-unit-respiratory_gear-route",
@ -687,6 +739,28 @@ const router = createRouter({
},
],
},
{
path: "wearable-type",
name: "admin-unit-wearable_type-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "wearable_type" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-unit-wearable_type",
component: () => import("@/views/admin/unit/wearableType/WearableType.vue"),
},
{
path: ":wearableTypeId/edit",
name: "admin-unit-wearable_type-edit",
component: () => import("@/views/admin/unit/wearableType/UpdateWearableType.vue"),
meta: { type: "update", section: "unit", module: "wearable_type" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{

20
src/router/unit/wearable.ts Normal file
View file

@ -0,0 +1,20 @@
import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
export async function setWearableId(to: any, from: any, next: any) {
const WearableStore = useWearableStore();
WearableStore.activeWearable = to.params?.wearableId ?? null;
//useXYStore().$reset();
next();
}
export async function resetWearableStores(to: any, from: any, next: any) {
const WearableStore = useWearableStore();
WearableStore.activeWearable = null;
WearableStore.activeWearableObj = null;
//useXYStore().$reset();
next();
}

4
src/stores/admin/navigation.ts
View file

@ -109,6 +109,7 @@ export const useNavigationStore = defineStore("navigation", {
main: [
...(abilityStore.can("read", "unit", "equipment") ? [{ key: "equipment", title: "Gerätschaften" }] : []),
...(abilityStore.can("read", "unit", "vehicle") ? [{ key: "vehicle", title: "Fahrzeuge" }] : []),
...(abilityStore.can("read", "unit", "wearable") ? [{ key: "wearable", title: "Kleidung" }] : []),
...(abilityStore.can("read", "unit", "respiratory_gear")
? [{ key: "respiratory_gear", title: "Atemschutz-Geräte" }]
: []),
@ -125,6 +126,9 @@ export const useNavigationStore = defineStore("navigation", {
...(abilityStore.can("read", "unit", "equipment_type")
? [{ key: "equipment_type", title: "Geräte-Typen" }]
: []),
...(abilityStore.can("read", "unit", "wearable_type")
? [{ key: "wearable_type", title: "Kleidungs-Arten" }]
: []),
],
},
configuration: {

108
src/stores/admin/unit/wearable/wearable.ts Normal file
View file

@ -0,0 +1,108 @@
import { defineStore } from "pinia";
import type {
WearableViewModel,
CreateWearableViewModel,
UpdateWearableViewModel,
} from "@/viewmodels/admin/unit/wearable/wearable.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import { wearableDemoData } from "../../../../demodata/wearable";
export const useWearableStore = defineStore("wearable", {
state: () => {
return {
wearables: [] as Array<WearableViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
activeWearable: null as string | null,
activeWearableObj: null as WearableViewModel | null,
loadingActive: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchWearables(offset = 0, count = 25, search = "", clear = false) {
this.wearables = wearableDemoData.map((e, i) => ({ ...e, tab_pos: i }));
this.totalCount = this.wearables.length;
this.loading = "fetched";
return;
if (clear) this.wearables = [];
this.loading = "loading";
http
.get(`/admin/wearable?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.then((result) => {
this.totalCount = result.data.total;
result.data.wearables
.filter((elem: WearableViewModel) => this.wearables.findIndex((m) => m.id == elem.id) == -1)
.map((elem: WearableViewModel, index: number): WearableViewModel & { tab_pos: number } => {
return {
...elem,
tab_pos: index + offset,
};
})
.forEach((elem: WearableViewModel & { tab_pos: number }) => {
this.wearables.push(elem);
});
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
async getAllWearables(): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/wearable?noLimit=true`).then((res) => {
return { ...res, data: res.data.wearables };
});
},
async getWearablesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
return await http
.post(`/admin/wearable/ids`, {
ids,
})
.then((res) => {
return { ...res, data: res.data.wearables };
});
},
async searchWearables(search: string): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/wearable?search=${search}&noLimit=true`).then((res) => {
return { ...res, data: res.data.wearables };
});
},
fetchWearableByActiveId() {
this.activeWearableObj = wearableDemoData.find((e) => e.id == this.activeWearable) as WearableViewModel;
this.loading = "fetched";
return;
this.loadingActive = "loading";
http
.get(`/admin/wearable/${this.activeWearable}`)
.then((res) => {
this.activeWearableObj = res.data;
this.loadingActive = "fetched";
})
.catch((err) => {
this.loadingActive = "failed";
});
},
fetchWearableById(id: string) {
return http.get(`/admin/wearable/${id}`);
},
async createWearable(wearable: CreateWearableViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/wearable`, {
// TODO: data
});
this.fetchWearables();
return result;
},
async updateActiveWearable(wearable: UpdateWearableViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/wearable/${wearable.id}`, {
// TODO: data
});
this.fetchWearables();
return result;
},
async deleteWearable(wearable: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/wearable/${wearable}`);
this.fetchWearables();
return result;
},
},
});

81
src/stores/admin/unit/wearableType/wearableType.ts Normal file
View file

@ -0,0 +1,81 @@
import { defineStore } from "pinia";
import type {
WearableTypeViewModel,
CreateWearableTypeViewModel,
UpdateWearableTypeViewModel,
} from "@/viewmodels/admin/unit/wearableType/wearableType.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import { wearableTypeDemoData } from "../../../../demodata/wearableType";
export const useWearableTypeStore = defineStore("wearableType", {
state: () => {
return {
wearableTypes: [] as Array<WearableTypeViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchWearableTypes(offset = 0, count = 25, search = "", clear = false) {
this.wearableTypes = wearableTypeDemoData.map((e, i) => ({ ...e, tab_pos: i }));
this.totalCount = this.wearableTypes.length;
this.loading = "fetched";
return;
if (clear) this.wearableTypes = [];
this.loading = "loading";
http
.get(`/admin/wearableType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.then((result) => {
this.totalCount = result.data.total;
result.data.wearables
.filter((elem: WearableTypeViewModel) => this.wearableTypes.findIndex((m) => m.id == elem.id) == -1)
.map((elem: WearableTypeViewModel, index: number): WearableTypeViewModel & { tab_pos: number } => {
return {
...elem,
tab_pos: index + offset,
};
})
.forEach((elem: WearableTypeViewModel & { tab_pos: number }) => {
this.wearableTypes.push(elem);
});
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
async getAllWearableTypes(): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/wearableType?noLimit=true`).then((res) => {
return { ...res, data: res.data.wearables };
});
},
async searchWearableTypes(search: string): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/wearableType?search=${search}&noLimit=true`).then((res) => {
return { ...res, data: res.data.wearables };
});
},
fetchWearableTypeById(id: string) {
return http.get(`/admin/wearableType/${id}`);
},
async createWearableType(wearableType: CreateWearableTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/wearableType`, {
// TODO: data
});
this.fetchWearableTypes();
return result;
},
async updateWearableType(wearableType: UpdateWearableTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/wearableType/${wearableType.id}`, {
// TODO: data
});
this.fetchWearableTypes();
return result;
},
async deleteWearableType(wearableType: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/wearableType/${wearableType}`);
this.fetchWearableTypes();
return result;
},
},
});

6
src/types/permissionTypes.ts
View file

@ -16,6 +16,8 @@ export type PermissionModule =
| "respiratory_wearer"
| "respiratory_mission"
| "damage_report"
| "wearable"
| "wearable_type"
// configuration
| "qualification"
| "award"
@ -72,6 +74,8 @@ export const permissionModules: Array<PermissionModule> = [
"respiratory_wearer",
"respiratory_mission",
"damage_report",
"wearable",
"wearable_type",
// configuration
"qualification",
"award",
@ -101,6 +105,8 @@ export const sectionsAndModules: SectionsAndModulesObject = {
"respiratory_wearer",
"respiratory_mission",
"damage_report",
"wearable",
"wearable_type",
],
configuration: [
"qualification",

29
src/viewmodels/admin/unit/wearable/wearable.models.ts Normal file
View file

@ -0,0 +1,29 @@
import type { MemberViewModel } from "../../club/member/member.models";
import type { WearableTypeViewModel } from "../wearableType/wearableType.models";
export interface WearableViewModel {
id: string;
code: string;
name: string;
location?: string;
wearerId?: string;
wearer: MemberViewModel;
wearableTypeId: string;
wearableType: WearableTypeViewModel;
}
export interface CreateWearableViewModel {
code: string;
name: string;
wearerId?: string;
location?: string;
wearableTypeId: string;
}
export interface UpdateWearableViewModel {
id: string;
code: string;
name: string;
location?: string;
wearerId?: string;
}

16
src/viewmodels/admin/unit/wearableType/wearableType.models.ts Normal file
View file

@ -0,0 +1,16 @@
export interface WearableTypeViewModel {
id: string;
type: string;
description: string;
}
export interface CreateWearableTypeViewModel {
type: string;
description: string;
}
export interface UpdateWearableTypeViewModel {
id: string;
type: string;
description: string;
}

214
src/views/admin/unit/wearable/CreateWearable.vue Normal file
View file

@ -0,0 +1,214 @@
<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">Kleidung 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">
<div>
<Combobox v-model="selectedType">
<ComboboxLabel>Typ</ComboboxLabel>
<div class="relative mt-1">
<ComboboxInput
class="rounded-md shadow-sm 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-none 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-none 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>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" required />
</div>
<ScanInput name="code" label="Code" :required="false" />
<div>
<label for="location">Verortung (optional)</label>
<input type="text" id="location" />
</div>
<MemberSearchSelect title="Träger (optional)" />
<div class="flex flex-row justify-end gap-2">
<RouterLink
:to="{ name: 'admin-unit-wearable' }"
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 { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
import type { CreateWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
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";
</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>,
};
},
computed: {
...mapState(useWearableTypeStore, ["wearableTypes"]),
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
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;
let createWearable: CreateWearableViewModel = {
code: formData.code.value || null,
name: formData.name.value,
location: formData.location.value,
wearerId: "",
wearableTypeId: this.selectedType,
};
this.status = "loading";
this.createWearable(createWearable)
.then((res) => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.$router.push({
name: "admin-unit-wearable-overview",
params: {
wearableId: res.data,
},
});
}, 1500);
})
.catch((err) => {
this.status = { status: "failed" };
});
},
},
});
</script>

51
src/views/admin/unit/wearable/Overview.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<div v-if="activeWearableObj != null" class="flex flex-col gap-2 w-full">
<div>
<label for="type">Typ</label>
<input type="text" id="type" :value="activeWearableObj.wearableType.type" readonly />
</div>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" :value="activeWearableObj.name" readonly />
</div>
<div>
<label for="code">Code</label>
<input type="text" id="code" :value="activeWearableObj.code" readonly />
</div>
<div>
<label for="location">Verortung</label>
<input type="text" id="location" :value="activeWearableObj.location" readonly />
</div>
</div>
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
<p v-else-if="loadingActive == 'failed'" @click="fetchWearableByActiveId" class="cursor-pointer">
&#8634; laden fehlgeschlagen
</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearableId: String,
},
computed: {
...mapState(useWearableStore, ["activeWearableObj", "loadingActive"]),
},
mounted() {
this.fetchWearableByActiveId();
},
methods: {
...mapActions(useWearableStore, ["fetchWearableByActiveId"]),
},
});
</script>

121
src/views/admin/unit/wearable/UpdateWearable.vue Normal file
View file

@ -0,0 +1,121 @@
<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="wearable != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<p class="mx-auto">Kleidung bearbeiten</p>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" required v-model="wearable.name" />
</div>
<ScanInput name="code" label="Code" :required="false" v-model="wearable.code" />
<div>
<label for="location">Verortung (optional)</label>
<input type="text" id="location" v-model="wearable.location" />
</div>
<MemberSearchSelect 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
</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 { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
import type {
CreateWearableViewModel,
WearableViewModel,
UpdateWearableViewModel,
} from "@/viewmodels/admin/unit/wearable/wearable.models";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import ScanInput from "@/components/ScanInput.vue";
import isEqual from "lodash.isequal";
import cloneDeep from "lodash.clonedeep";
import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearableId: String,
},
watch: {
loadingActive() {
if (this.loading == "loading") {
this.loading = this.loadingActive;
}
if (this.loadingActive == "fetched") this.wearable = cloneDeep(this.activeWearableObj);
},
},
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
wearable: null as null | WearableViewModel,
timeout: null as any,
};
},
computed: {
canSaveOrReset(): boolean {
return isEqual(this.activeWearableObj, this.wearable);
},
...mapState(useWearableStore, ["activeWearableObj", "loadingActive"]),
},
mounted() {
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useWearableStore, ["updateActiveWearable", "fetchWearableByActiveId"]),
resetForm() {
this.wearable = cloneDeep(this.activeWearableObj);
},
fetchItem() {
this.fetchWearableByActiveId();
},
triggerUpdate(e: any) {
if (this.wearable == null) return;
let formData = e.target.elements;
let updateWearable: UpdateWearableViewModel = {
id: this.wearable.id,
code: formData.code.value || null,
name: formData.name.value,
location: formData.location.value,
};
this.status = "loading";
this.updateActiveWearable(updateWearable)
.then((res) => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});
</script>

70
src/views/admin/unit/wearable/Wearable.vue Normal file
View file

@ -0,0 +1,70 @@
<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">Kleidungen</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination
:items="wearables"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
useSearch
useScanner
@load-data="(offset, count, search) => fetchWearables(offset, count, search)"
@search="(search) => fetchWearables(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: WearableViewModel }">
<WearableListItem :wearable="row" />
</template>
</Pagination>
<div class="flex flex-row gap-4">
<RouterLink
v-if="can('create', 'unit', 'wearable')"
:to="{ name: 'admin-unit-wearable-create' }"
primary
button
class="!w-fit"
>
Kleidung erfassen
</RouterLink>
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
import type { WearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
import WearableListItem from "@/components/admin/unit/wearable/WearableListItem.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
currentPage: 0,
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useWearableStore, ["wearables", "totalCount", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchWearables(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useWearableStore, ["fetchWearables"]),
},
});
</script>

79
src/views/admin/unit/wearable/WearableRouting.vue Normal file
View file

@ -0,0 +1,79 @@
<template>
<MainTemplate>
<template #headerInsert>
<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">
<h1 class="font-bold text-xl h-8 min-h-fit grow">
{{ activeWearableObj?.name }}
</h1>
<RouterLink v-if="can('update', 'unit', 'wearable')" :to="{ name: 'admin-unit-wearable-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
</div>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
<div class="flex flex-col grow gap-2 overflow-hidden">
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
v-slot="{ isActive }"
:to="{ name: tab.route }"
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
]"
>
{{ tab.title }}
</p>
</RouterLink>
</div>
<RouterView />
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { RouterLink, RouterView } from "vue-router";
import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { useAbilityStore } from "@/stores/ability";
import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearableId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-wearable-overview", title: "Übersicht" },
{ route: "admin-unit-wearable-damage_report", title: "Schadensmeldungen" },
],
};
},
computed: {
...mapState(useWearableStore, ["activeWearableObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchWearableByActiveId();
},
methods: {
...mapActions(useWearableStore, ["fetchWearableByActiveId"]),
},
});
</script>

118
src/views/admin/unit/wearableType/UpdateWearableType.vue Normal file
View file

@ -0,0 +1,118 @@
<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="wearableType != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<p class="mx-auto">Kleidung bearbeiten</p>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" required v-model="wearableType.type" />
</div>
<div>
<label for="description">Beschreibung (optional)</label>
<input type="text" id="description" v-model="wearableType.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 { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
import type {
CreateWearableTypeViewModel,
WearableTypeViewModel,
UpdateWearableTypeViewModel,
} from "@/viewmodels/admin/unit/wearableType/wearableType.models";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import ScanInput from "@/components/ScanInput.vue";
import isEqual from "lodash.isequal";
import cloneDeep from "lodash.clonedeep";
import MemberSearchSelect from "../../../../components/admin/MemberSearchSelect.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearableTypeId: String,
},
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | WearableTypeViewModel,
wearableType: null as null | WearableTypeViewModel,
timeout: null as any,
};
},
computed: {
canSaveOrReset(): boolean {
return isEqual(this.origin, this.wearableType);
},
},
mounted() {
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useWearableTypeStore, ["updateWearableType", "fetchWearableTypeById"]),
resetForm() {
this.wearableType = cloneDeep(this.origin);
},
fetchItem() {
this.fetchWearableTypeById(this.wearableTypeId ?? "")
.then((result) => {
this.wearableType = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.wearableType == null) return;
let formData = e.target.elements;
let updateWearableType: UpdateWearableTypeViewModel = {
id: this.wearableType.id,
type: formData.name.value,
description: formData.description.value,
};
this.status = "loading";
this.updateWearableType(updateWearableType)
.then((res) => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});
</script>

70
src/views/admin/unit/wearableType/WearableType.vue Normal file
View file

@ -0,0 +1,70 @@
<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">Kleidungs-Typen</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination
:items="wearableTypes"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
useSearch
@load-data="(offset, count, search) => fetchWearableTypes(offset, count, search)"
@search="(search) => fetchWearableTypes(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: WearableTypeViewModel }">
<WearableTypeListItem :wearableType="row" />
</template>
</Pagination>
<div class="flex flex-row gap-4">
<button v-if="can('create', 'unit', 'wearable_type')" primary class="!w-fit" @click="openCreateModal">
Geräte-Typ erstellen
</button>
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useWearableTypeStore } from "@/stores/admin/unit/wearableType/wearableType";
import { useModalStore } from "@/stores/modal";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
import type { WearableTypeViewModel } from "@/viewmodels/admin/unit/wearableType/wearableType.models";
import WearableTypeListItem from "@/components/admin/unit/wearableType/WearableTypeListItem.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
currentPage: 0,
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useWearableTypeStore, ["wearableTypes", "totalCount", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchWearableTypes(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useWearableTypeStore, ["fetchWearableTypes"]),
...mapActions(useModalStore, ["openModal"]),
openCreateModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/unit/wearableType/CreateWearableTypeModal.vue")))
);
},
},
});
</script>