1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-22 23:06:31 +00:00
homebox/frontend/components/Location/CreateModal.vue

104 lines
2.6 KiB
Vue
Raw Normal View History

2022-09-02 01:52:40 +00:00
<template>
<BaseModal v-model="modal">
<template #title> Create Location </template>
<form @submit.prevent="create()">
2022-09-02 01:52:40 +00:00
<FormTextField
ref="locationNameRef"
v-model="form.name"
:trigger-focus="focused"
2022-09-02 01:52:40 +00:00
:autofocus="true"
label="Location Name"
/>
<FormTextArea v-model="form.description" label="Location Description" />
<LocationSelector v-model="form.parent" />
2022-09-02 01:52:40 +00:00
<div class="modal-action">
<div class="flex justify-center">
<BaseButton class="rounded-r-none" type="submit" :loading="loading"> Create </BaseButton>
<div class="dropdown dropdown-top">
<label tabindex="0" class="btn rounded-l-none rounded-r-xl">
<MdiChevronDown class="h-5 w-5" />
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64 right-0">
<li>
<button type="button" @click="create(false)">Create and Add Another</button>
</li>
</ul>
</div>
</div>
2022-09-02 01:52:40 +00:00
</div>
</form>
<p class="text-sm text-center mt-4">
use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
</p>
2022-09-02 01:52:40 +00:00
</BaseModal>
</template>
<script setup lang="ts">
import type { LocationSummary } from "~~/lib/api/types/data-contracts";
import MdiChevronDown from "~icons/mdi/chevron-down";
2022-09-02 01:52:40 +00:00
const props = defineProps({
modelValue: {
type: Boolean,
required: true,
},
});
const modal = useVModel(props, "modelValue");
2022-09-02 01:52:40 +00:00
const loading = ref(false);
const focused = ref(false);
const form = reactive({
name: "",
description: "",
parent: null as LocationSummary | null,
2022-09-02 01:52:40 +00:00
});
whenever(
() => modal.value,
() => {
focused.value = true;
}
);
function reset() {
form.name = "";
form.description = "";
form.parent = null;
2022-09-02 01:52:40 +00:00
focused.value = false;
loading.value = false;
}
const api = useUserApi();
const toast = useNotifier();
const { shift } = useMagicKeys();
async function create(close = true) {
2022-09-02 01:52:40 +00:00
loading.value = true;
if (shift.value) {
close = false;
}
const { data, error } = await api.locations.create({
name: form.name,
description: form.description,
parentId: form.parent ? form.parent.id : null,
});
2022-09-02 01:52:40 +00:00
if (error) {
loading.value = false;
2022-09-02 01:52:40 +00:00
toast.error("Couldn't create location");
}
if (data) {
toast.success("Location created");
2022-09-02 01:52:40 +00:00
}
reset();
if (close) {
modal.value = false;
navigateTo(`/location/${data.id}`);
}
}
2022-09-02 01:52:40 +00:00
</script>