forked from mirrors/homebox
90813abf76
implenmented a store for each global item and tied it to an event bus and used the listener on the requests object to intercept responses from the API and run the appripriate get call when updates were detected.
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<BaseModal v-model="modal">
|
|
<template #title> Create Item </template>
|
|
<form @submit.prevent="create">
|
|
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" select-first />
|
|
<FormTextField
|
|
ref="locationNameRef"
|
|
v-model="form.name"
|
|
:trigger-focus="focused"
|
|
:autofocus="true"
|
|
label="Item Name"
|
|
/>
|
|
<FormTextField v-model="form.description" label="Item Description" />
|
|
<FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
|
|
<div class="modal-action">
|
|
<BaseButton ref="submitBtn" type="submit" :loading="loading">
|
|
<template #icon>
|
|
<Icon name="mdi-package-variant" class="swap-off" />
|
|
<Icon name="mdi-package-variant-closed" class="swap-on" />
|
|
</template>
|
|
Create
|
|
</BaseButton>
|
|
</div>
|
|
</form>
|
|
</BaseModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ItemCreate, LocationOut } from "~~/lib/api/types/data-contracts";
|
|
import { useLabelStore } from "~~/stores/labels";
|
|
import { useLocationStore } from "~~/stores/locations";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const submitBtn = ref(null);
|
|
|
|
const modal = useVModel(props, "modelValue");
|
|
const loading = ref(false);
|
|
const focused = ref(false);
|
|
const form = reactive({
|
|
location: {} as LocationOut,
|
|
name: "",
|
|
description: "",
|
|
color: "", // Future!
|
|
labels: [],
|
|
});
|
|
|
|
function reset() {
|
|
form.name = "";
|
|
form.description = "";
|
|
form.color = "";
|
|
focused.value = false;
|
|
modal.value = false;
|
|
loading.value = false;
|
|
}
|
|
|
|
whenever(
|
|
() => modal.value,
|
|
() => {
|
|
focused.value = true;
|
|
}
|
|
);
|
|
const api = useUserApi();
|
|
const toast = useNotifier();
|
|
|
|
const locationsStore = useLocationStore();
|
|
const locations = computed(() => locationsStore.locations);
|
|
|
|
const labelStore = useLabelStore();
|
|
const labels = computed(() => labelStore.labels);
|
|
|
|
async function create() {
|
|
if (!form.location) {
|
|
return;
|
|
}
|
|
|
|
const out: ItemCreate = {
|
|
name: form.name,
|
|
description: form.description,
|
|
locationId: form.location.id as string,
|
|
labelIds: form.labels.map(l => l.id) as string[],
|
|
};
|
|
|
|
const { error } = await api.items.create(out);
|
|
if (error) {
|
|
toast.error("Couldn't create label");
|
|
return;
|
|
}
|
|
|
|
toast.success("Item created");
|
|
reset();
|
|
}
|
|
</script>
|