mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
ec5b6bb8ff
* chore: get front end tests passing * chore: add @vue/runtime-core to fix types for $t * chore: sort lockfile * Discard changes to frontend/pnpm-lock.yaml * chore: sort lockfile * chore: fix some type errors * chore: switch from nuxi typecheck to vue-tsc to force a known good version * chore: linting * chore: update pnpm version in frontend test * feat: add proper pagination type (need to sort why it still doesn't work) * chore: format imports and initialize totalPrice in label page to null when no label is present * chore: update pnpm to v9.12.2, merge ItemSummaryPaginationResult with PaginationResult, and handle error in label generator more gracefully * chore: lint --------- Co-authored-by: Matt Kilgore <matthew@kilgore.dev>
106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<template>
|
|
<BaseModal v-model="modal">
|
|
<template #title>{{ $t("components.label.create_modal.title") }}</template>
|
|
<form @submit.prevent="create()">
|
|
<FormTextField
|
|
ref="locationNameRef"
|
|
v-model="form.name"
|
|
:trigger-focus="focused"
|
|
:autofocus="true"
|
|
:label="$t('components.label.create_modal.label_name')"
|
|
:max-length="255"
|
|
:min-length="1"
|
|
/>
|
|
<FormTextArea
|
|
v-model="form.description"
|
|
:label="$t('components.label.create_modal.label_description')"
|
|
:max-length="255"
|
|
/>
|
|
<div class="modal-action">
|
|
<div class="flex justify-center">
|
|
<BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>
|
|
<div class="dropdown dropdown-top">
|
|
<label tabindex="0" class="btn rounded-l-none rounded-r-xl">
|
|
<MdiChevronDown class="size-5" />
|
|
</label>
|
|
<ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
|
|
<li>
|
|
<button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<p class="mt-4 text-center text-sm">
|
|
use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
|
|
</p>
|
|
</BaseModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MdiChevronDown from "~icons/mdi/chevron-down";
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const modal = useVModel(props, "modelValue");
|
|
const loading = ref(false);
|
|
const focused = ref(false);
|
|
const form = reactive({
|
|
name: "",
|
|
description: "",
|
|
color: "", // Future!
|
|
});
|
|
|
|
function reset() {
|
|
form.name = "";
|
|
form.description = "";
|
|
form.color = "";
|
|
focused.value = false;
|
|
loading.value = false;
|
|
}
|
|
|
|
whenever(
|
|
() => modal.value,
|
|
() => {
|
|
focused.value = true;
|
|
}
|
|
);
|
|
|
|
const api = useUserApi();
|
|
const toast = useNotifier();
|
|
|
|
const { shift } = useMagicKeys();
|
|
|
|
async function create(close = true) {
|
|
if (loading.value) {
|
|
toast.error("Already creating a label");
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
|
|
if (shift.value) {
|
|
close = false;
|
|
}
|
|
|
|
const { error, data } = await api.labels.create(form);
|
|
if (error) {
|
|
toast.error("Couldn't create label");
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
|
|
toast.success("Label created");
|
|
reset();
|
|
|
|
if (close) {
|
|
modal.value = false;
|
|
navigateTo(`/label/${data.id}`);
|
|
}
|
|
}
|
|
</script>
|