mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-25 23:03:41 +01:00
* feat: Add item templates feature (#435) Add ability to create and manage item templates for quick item creation. Templates store default values and custom fields that can be applied when creating new items. Backend changes: - New ItemTemplate and TemplateField Ent schemas - Template CRUD API endpoints - Create item from template endpoint Frontend changes: - Templates management page with create/edit/delete - Template selector in item creation modal - 'Use as Template' action on item detail page - Templates link in navigation menu * refactor: Improve template item creation with a single query - Add `CreateFromTemplate` method to ItemsRepository that creates items with all template data (including custom fields) in a single atomic transaction, replacing the previous two-phase create-then-update pattern - Fix `GetOne` to require group ID parameter so templates can only be accessed by users in the owning group (security fix) - Simplify `HandleItemTemplatesCreateItem` handler using the new transactional method * Refactor item template types and formatting Updated type annotations in CreateModal.vue to use specific ItemTemplate types instead of 'any'. Improved code formatting for template fields and manufacturer display. Also refactored warranty field logic in item details page for better readability. This resolves the linter issues as well that the bot in github keeps nagging at. * Add 'id' property to template fields Introduces an 'id' property to each field object in CreateModal.vue and item details page to support unique identification of fields. This change prepares the codebase for future enhancements that may require field-level identification. * Removed redundant SQL migrations. Removed redundant SQL migrations per @tankerkiller125's findings. * Updates to PR #1099. Regarding pull #1099. Fixed an issue causing some conflict with GUIDs and old rows in the migration files. * Add new fields and location edge to ItemTemplate Addresses recommendations from @tonyaellie. * Relocated add template button * Added more default fields to the template * Added translation of all strings (think so?) * Make oval buttons round * Added duplicate button to the template (this required a rewrite of the migration files, I made sure only 1 exists per DB type) * Added a Save as template button to a item detail view (this creates a template with all the current data of that item) * Changed all occurrences of space to gap and flex where applicable. * Made template selection persistent after item created. * Collapsible template info on creation view. * Updates to translation and fix for labels/locations I also added a test in here because I keep missing small function tests. That should prevent that from happening again. * Linted * Bring up to date with main, fix some lint/type check issues * In theory fix playwright tests * Fix defaults being unable to be nullable/empty (and thus limiting flexibility) * Last few fixes I think * Forgot to fix the golang tests --------- Co-authored-by: Matthew Kilgore <matthew@kilgore.dev>
This commit is contained in:
Logan Miller
@@ -1,8 +1,18 @@
|
||||
<template>
|
||||
<BaseModal :dialog-id="DialogID.CreateItem" :title="$t('components.item.create_modal.title')">
|
||||
<template #header-actions>
|
||||
<div class="flex">
|
||||
<div class="flex gap-2">
|
||||
<TooltipProvider :delay-duration="0">
|
||||
<!-- Template selector button -->
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<TemplateSelector v-model="selectedTemplate" compact @template-selected="handleTemplateSelected" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{{ $t("components.template.apply_template") }}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<ButtonGroup>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
@@ -31,6 +41,92 @@
|
||||
|
||||
<form class="flex flex-col gap-2" @submit.prevent="create()">
|
||||
<LocationSelector v-model="form.location" />
|
||||
|
||||
<!-- Template Info Display - Collapsible banner with distinct styling -->
|
||||
<div v-if="templateData" class="rounded-lg border-l-4 border-l-primary bg-primary/5 p-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex flex-1 items-start gap-2">
|
||||
<MdiFileDocumentOutline class="mt-0.5 size-4 shrink-0 text-primary" />
|
||||
<div class="flex-1">
|
||||
<h4 class="text-sm font-medium text-foreground">
|
||||
{{ $t("components.template.using_template", { name: templateData.name }) }}
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-1 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
|
||||
@click="showTemplateDetails = !showTemplateDetails"
|
||||
>
|
||||
<span v-if="!showTemplateDetails">{{ $t("components.template.show_defaults") }}</span>
|
||||
<span v-else>{{ $t("components.template.hide_defaults") }}</span>
|
||||
<MdiChevronDown class="size-4 transition-transform" :class="{ 'rotate-180': showTemplateDetails }" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-7 shrink-0"
|
||||
:aria-label="$t('components.item.create_modal.clear_template')"
|
||||
@click="clearTemplate"
|
||||
>
|
||||
<MdiClose class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible details section -->
|
||||
<div v-if="showTemplateDetails" class="mt-3 border-t border-primary/20 pt-3">
|
||||
<div class="flex flex-col gap-2 text-xs text-muted-foreground">
|
||||
<p v-if="templateData.description" class="text-foreground/80">{{ templateData.description }}</p>
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<div v-if="templateData.defaultName">
|
||||
<span class="font-medium">{{ $t("global.name") }}:</span> {{ templateData.defaultName }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">{{ $t("global.quantity") }}:</span> {{ templateData.defaultQuantity }}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">{{ $t("global.insured") }}:</span>
|
||||
{{ templateData.defaultInsured ? $t("global.yes") : $t("global.no") }}
|
||||
</div>
|
||||
<div v-if="templateData.defaultManufacturer">
|
||||
<span class="font-medium">{{ $t("components.template.form.manufacturer") }}:</span>
|
||||
{{ templateData.defaultManufacturer }}
|
||||
</div>
|
||||
<div v-if="templateData.defaultModelNumber">
|
||||
<span class="font-medium">{{ $t("components.template.form.model_number") }}:</span>
|
||||
{{ templateData.defaultModelNumber }}
|
||||
</div>
|
||||
<div v-if="templateData.defaultLifetimeWarranty">
|
||||
<span class="font-medium">{{ $t("components.template.form.lifetime_warranty") }}:</span>
|
||||
{{ $t("global.yes") }}
|
||||
</div>
|
||||
<div v-if="templateData.defaultLocation">
|
||||
<span class="font-medium">{{ $t("components.template.form.location") }}:</span>
|
||||
{{ templateData.defaultLocation.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="templateData.defaultLabels && templateData.defaultLabels.length > 0" class="mt-1">
|
||||
<span class="font-medium">{{ $t("global.labels") }}:</span>
|
||||
{{ templateData.defaultLabels.map((l: any) => l.name).join(", ") }}
|
||||
</div>
|
||||
<div v-if="templateData.defaultDescription" class="mt-1">
|
||||
<p class="font-medium">{{ $t("components.template.form.item_description") }}:</p>
|
||||
<p class="ml-2">{{ templateData.defaultDescription }}</p>
|
||||
</div>
|
||||
<div v-if="templateData.fields && templateData.fields.length > 0" class="mt-1">
|
||||
<p class="font-medium">{{ $t("components.template.form.custom_fields") }}:</p>
|
||||
<ul class="ml-4 flex list-none flex-col gap-1">
|
||||
<li v-for="field in templateData.fields" :key="field.id">
|
||||
<span class="font-medium">{{ field.name }}:</span>
|
||||
<span> {{ field.textValue || $t("components.template.empty_value") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ItemSelector
|
||||
v-if="subItemCreate"
|
||||
v-model="parent"
|
||||
@@ -177,7 +273,7 @@
|
||||
import BaseModal from "@/components/App/CreateModal.vue";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { ItemCreate, LocationOut } from "~~/lib/api/types/data-contracts";
|
||||
import type { ItemCreate, ItemTemplateOut, ItemTemplateSummary, LocationOut } from "~~/lib/api/types/data-contracts";
|
||||
import { useLabelStore } from "~~/stores/labels";
|
||||
import { useLocationStore } from "~~/stores/locations";
|
||||
import MdiBarcode from "~icons/mdi/barcode";
|
||||
@@ -188,10 +284,14 @@
|
||||
import MdiRotateClockwise from "~icons/mdi/rotate-clockwise";
|
||||
import MdiStarOutline from "~icons/mdi/star-outline";
|
||||
import MdiStar from "~icons/mdi/star";
|
||||
import MdiFileDocumentOutline from "~icons/mdi/file-document-outline";
|
||||
import MdiChevronDown from "~icons/mdi/chevron-down";
|
||||
import MdiClose from "~icons/mdi/close";
|
||||
import { AttachmentTypes } from "~~/lib/api/types/non-generated";
|
||||
import { useDialog, useDialogHotkey } from "~/components/ui/dialog-provider";
|
||||
import LabelSelector from "~/components/Label/Selector.vue";
|
||||
import ItemSelector from "~/components/Item/Selector.vue";
|
||||
import TemplateSelector from "~/components/Template/Selector.vue";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
|
||||
import LocationSelector from "~/components/Location/Selector.vue";
|
||||
import FormTextField from "~/components/Form/TextField.vue";
|
||||
@@ -248,8 +348,13 @@
|
||||
|
||||
const nameInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
const LAST_TEMPLATE_KEY = "homebox:lastUsedTemplate";
|
||||
|
||||
const loading = ref(false);
|
||||
const focused = ref(false);
|
||||
const selectedTemplate = ref<ItemTemplateSummary | null>(null);
|
||||
const templateData = ref<ItemTemplateOut | null>(null);
|
||||
const showTemplateDetails = ref(false);
|
||||
const form = reactive({
|
||||
location: locations.value && locations.value.length > 0 ? locations.value[0] : ({} as LocationOut),
|
||||
parentId: null,
|
||||
@@ -261,6 +366,94 @@
|
||||
photos: [] as PhotoPreview[],
|
||||
});
|
||||
|
||||
async function handleTemplateSelected(template: ItemTemplateSummary | null) {
|
||||
if (!template) {
|
||||
// Template was deselected, clear template data and remove from storage
|
||||
templateData.value = null;
|
||||
form.quantity = 1;
|
||||
localStorage.removeItem(LAST_TEMPLATE_KEY);
|
||||
return;
|
||||
}
|
||||
|
||||
// Load full template details
|
||||
const { data, error } = await api.templates.get(template.id);
|
||||
if (error || !data) {
|
||||
toast.error(t("components.template.toast.load_failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Store template data for display and item creation
|
||||
templateData.value = data;
|
||||
|
||||
// Pre-fill form with template defaults
|
||||
form.quantity = data.defaultQuantity;
|
||||
if (data.defaultName) {
|
||||
form.name = data.defaultName;
|
||||
}
|
||||
if (data.defaultDescription) {
|
||||
form.description = data.defaultDescription;
|
||||
}
|
||||
// Pre-fill location if template has one and current form doesn't
|
||||
if (data.defaultLocation && !form.location?.id) {
|
||||
const found = locations.value.find(l => l.id === data.defaultLocation!.id);
|
||||
if (found) {
|
||||
form.location = found;
|
||||
}
|
||||
}
|
||||
// Pre-fill labels from template
|
||||
if (data.defaultLabels && data.defaultLabels.length > 0) {
|
||||
form.labels = data.defaultLabels.map(l => l.id);
|
||||
}
|
||||
|
||||
// Save template ID to localStorage for persistence
|
||||
localStorage.setItem(LAST_TEMPLATE_KEY, template.id);
|
||||
|
||||
toast.success(t("components.template.toast.applied", { name: data.name }));
|
||||
}
|
||||
|
||||
async function restoreLastTemplate() {
|
||||
const lastTemplateId = localStorage.getItem(LAST_TEMPLATE_KEY);
|
||||
if (!lastTemplateId) return;
|
||||
|
||||
// Load the template details
|
||||
const { data, error } = await api.templates.get(lastTemplateId);
|
||||
if (error || !data) {
|
||||
// Template might have been deleted, clear the stored ID
|
||||
localStorage.removeItem(LAST_TEMPLATE_KEY);
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the template
|
||||
selectedTemplate.value = { id: data.id, name: data.name, description: data.description } as ItemTemplateSummary;
|
||||
templateData.value = data;
|
||||
form.quantity = data.defaultQuantity;
|
||||
if (data.defaultName) {
|
||||
form.name = data.defaultName;
|
||||
}
|
||||
if (data.defaultDescription) {
|
||||
form.description = data.defaultDescription;
|
||||
}
|
||||
// Pre-fill location if template has one
|
||||
if (data.defaultLocation) {
|
||||
const found = locations.value.find(l => l.id === data.defaultLocation!.id);
|
||||
if (found) {
|
||||
form.location = found;
|
||||
}
|
||||
}
|
||||
// Pre-fill labels from template
|
||||
if (data.defaultLabels && data.defaultLabels.length > 0) {
|
||||
form.labels = data.defaultLabels.map(l => l.id);
|
||||
}
|
||||
}
|
||||
|
||||
function clearTemplate() {
|
||||
selectedTemplate.value = null;
|
||||
templateData.value = null;
|
||||
showTemplateDetails.value = false;
|
||||
form.quantity = 1;
|
||||
localStorage.removeItem(LAST_TEMPLATE_KEY);
|
||||
}
|
||||
|
||||
watch(
|
||||
parent,
|
||||
newParent => {
|
||||
@@ -364,6 +557,9 @@
|
||||
if (labelId.value) {
|
||||
form.labels = labels.value.filter(l => l.id === labelId.value).map(l => l.id);
|
||||
}
|
||||
|
||||
// Restore last used template if available
|
||||
await restoreLastTemplate();
|
||||
});
|
||||
|
||||
onUnmounted(cleanup);
|
||||
@@ -384,16 +580,36 @@
|
||||
|
||||
if (shift?.value) close = false;
|
||||
|
||||
const out: ItemCreate = {
|
||||
parentId: form.parentId,
|
||||
name: form.name,
|
||||
quantity: form.quantity,
|
||||
description: form.description,
|
||||
locationId: form.location.id as string,
|
||||
labelIds: form.labels,
|
||||
};
|
||||
let error, data;
|
||||
|
||||
const { error, data } = await api.items.create(out);
|
||||
// If a template is selected, use the template creation endpoint
|
||||
if (templateData.value) {
|
||||
const templateRequest = {
|
||||
name: form.name,
|
||||
description: form.description,
|
||||
locationId: form.location.id as string,
|
||||
labelIds: form.labels,
|
||||
quantity: form.quantity,
|
||||
};
|
||||
|
||||
const result = await api.templates.createItem(templateData.value.id, templateRequest);
|
||||
error = result.error;
|
||||
data = result.data;
|
||||
} else {
|
||||
// Normal item creation without template
|
||||
const out: ItemCreate = {
|
||||
parentId: form.parentId,
|
||||
name: form.name,
|
||||
quantity: form.quantity,
|
||||
description: form.description,
|
||||
locationId: form.location.id as string,
|
||||
labelIds: form.labels,
|
||||
};
|
||||
|
||||
const result = await api.items.create(out);
|
||||
error = result.error;
|
||||
data = result.data;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
loading.value = false;
|
||||
@@ -434,6 +650,9 @@
|
||||
form.color = "";
|
||||
form.photos = [];
|
||||
form.labels = [];
|
||||
selectedTemplate.value = null;
|
||||
templateData.value = null;
|
||||
showTemplateDetails.value = false;
|
||||
focused.value = false;
|
||||
loading.value = false;
|
||||
|
||||
|
||||
119
frontend/components/Template/Card.vue
Normal file
119
frontend/components/Template/Card.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { toast } from "@/components/ui/sonner";
|
||||
import MdiPencil from "~icons/mdi/pencil";
|
||||
import MdiDelete from "~icons/mdi/delete";
|
||||
import MdiContentCopy from "~icons/mdi/content-copy";
|
||||
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { ItemTemplateSummary, ItemTemplateCreate } from "~/lib/api/types/data-contracts";
|
||||
|
||||
const props = defineProps<{
|
||||
template: ItemTemplateSummary;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
deleted: [];
|
||||
duplicated: [id: string];
|
||||
}>();
|
||||
|
||||
const api = useUserApi();
|
||||
const confirm = useConfirm();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function handleDelete() {
|
||||
const { isCanceled } = await confirm.open(t("components.template.confirm_delete"));
|
||||
if (isCanceled) return;
|
||||
|
||||
const { error } = await api.templates.delete(props.template.id);
|
||||
if (error) {
|
||||
toast.error(t("components.template.toast.delete_failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(t("components.template.toast.deleted"));
|
||||
emit("deleted");
|
||||
}
|
||||
|
||||
async function handleDuplicate() {
|
||||
// First, get the full template details
|
||||
const { data: fullTemplate, error: getError } = await api.templates.get(props.template.id);
|
||||
if (getError || !fullTemplate) {
|
||||
toast.error(t("components.template.toast.load_failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
const NIL_UUID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
// Create a duplicate with "(Copy)" suffix
|
||||
const duplicateData: ItemTemplateCreate = {
|
||||
name: `${fullTemplate.name} (Copy)`,
|
||||
description: fullTemplate.description,
|
||||
notes: fullTemplate.notes,
|
||||
defaultName: fullTemplate.defaultName,
|
||||
defaultDescription: fullTemplate.defaultDescription,
|
||||
defaultQuantity: fullTemplate.defaultQuantity,
|
||||
defaultInsured: fullTemplate.defaultInsured,
|
||||
defaultManufacturer: fullTemplate.defaultManufacturer,
|
||||
defaultModelNumber: fullTemplate.defaultModelNumber,
|
||||
defaultLifetimeWarranty: fullTemplate.defaultLifetimeWarranty,
|
||||
defaultWarrantyDetails: fullTemplate.defaultWarrantyDetails,
|
||||
defaultLocationId: fullTemplate.defaultLocation?.id ?? "",
|
||||
defaultLabelIds: fullTemplate.defaultLabels?.map(l => l.id) || [],
|
||||
includeWarrantyFields: fullTemplate.includeWarrantyFields,
|
||||
includePurchaseFields: fullTemplate.includePurchaseFields,
|
||||
includeSoldFields: fullTemplate.includeSoldFields,
|
||||
fields: fullTemplate.fields.map(field => ({
|
||||
id: NIL_UUID,
|
||||
name: field.name,
|
||||
type: field.type,
|
||||
textValue: field.textValue,
|
||||
})),
|
||||
};
|
||||
|
||||
const { data, error } = await api.templates.create(duplicateData);
|
||||
if (error) {
|
||||
toast.error(t("components.template.toast.duplicate_failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(t("components.template.toast.duplicated", { name: duplicateData.name }));
|
||||
emit("duplicated", data.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="truncate">{{ template.name }}</CardTitle>
|
||||
<CardDescription v-if="template.description" class="line-clamp-2">
|
||||
{{ template.description }}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter class="flex justify-end gap-1">
|
||||
<Button size="icon" variant="outline" class="size-8" as-child :title="$t('components.template.card.edit')">
|
||||
<NuxtLink :to="`/template/${template.id}`">
|
||||
<MdiPencil class="size-4" />
|
||||
</NuxtLink>
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
class="size-8"
|
||||
:title="$t('components.template.card.duplicate')"
|
||||
@click="handleDuplicate"
|
||||
>
|
||||
<MdiContentCopy class="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="destructive"
|
||||
class="size-8"
|
||||
:title="$t('components.template.card.delete')"
|
||||
@click="handleDelete"
|
||||
>
|
||||
<MdiDelete class="size-4" />
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
211
frontend/components/Template/CreateModal.vue
Normal file
211
frontend/components/Template/CreateModal.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<BaseModal :dialog-id="DialogID.CreateTemplate" :title="$t('components.template.create_modal.title')">
|
||||
<form class="flex flex-col gap-2" @submit.prevent="create()">
|
||||
<FormTextField
|
||||
v-model="form.name"
|
||||
:autofocus="true"
|
||||
:label="$t('components.template.form.template_name')"
|
||||
:max-length="255"
|
||||
:min-length="1"
|
||||
/>
|
||||
<FormTextArea
|
||||
v-model="form.description"
|
||||
:label="$t('components.template.form.template_description')"
|
||||
:max-length="1000"
|
||||
/>
|
||||
|
||||
<Separator class="my-2" />
|
||||
<h3 class="text-sm font-medium">{{ $t("components.template.form.default_item_values") }}</h3>
|
||||
<div class="grid gap-2">
|
||||
<FormTextField v-model="form.defaultName" :label="$t('components.template.form.item_name')" :max-length="255" />
|
||||
<FormTextArea
|
||||
v-model="form.defaultDescription"
|
||||
:label="$t('components.template.form.item_description')"
|
||||
:max-length="1000"
|
||||
/>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<FormTextField v-model.number="form.defaultQuantity" :label="$t('global.quantity')" type="number" :min="1" />
|
||||
<FormTextField
|
||||
v-model="form.defaultModelNumber"
|
||||
:label="$t('components.template.form.model_number')"
|
||||
:max-length="255"
|
||||
/>
|
||||
</div>
|
||||
<FormTextField
|
||||
v-model="form.defaultManufacturer"
|
||||
:label="$t('components.template.form.manufacturer')"
|
||||
:max-length="255"
|
||||
/>
|
||||
<LocationSelector
|
||||
v-model="form.defaultLocationObject"
|
||||
:label="$t('components.template.form.default_location')"
|
||||
/>
|
||||
<LabelSelector v-model="form.defaultLabelIds" :labels="labels ?? []" />
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<Switch id="defaultInsured" v-model:checked="form.defaultInsured" />
|
||||
<Label for="defaultInsured" class="text-sm">{{ $t("global.insured") }}</Label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Switch id="defaultLifetimeWarranty" v-model:checked="form.defaultLifetimeWarranty" />
|
||||
<Label for="defaultLifetimeWarranty" class="text-sm">{{
|
||||
$t("components.template.form.lifetime_warranty")
|
||||
}}</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator class="my-2" />
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium">{{ $t("components.template.form.custom_fields") }}</h3>
|
||||
<Button type="button" size="sm" variant="outline" @click="addField">
|
||||
<MdiPlus class="mr-1 size-4" />
|
||||
{{ $t("global.add") }}
|
||||
</Button>
|
||||
</div>
|
||||
<div v-if="form.fields.length > 0" class="flex flex-col gap-2">
|
||||
<div v-for="(field, idx) in form.fields" :key="idx" class="flex items-end gap-2">
|
||||
<FormTextField
|
||||
v-model="field.name"
|
||||
:label="$t('components.template.form.field_name')"
|
||||
:max-length="255"
|
||||
class="flex-1"
|
||||
/>
|
||||
<FormTextField
|
||||
v-model="field.textValue"
|
||||
:label="$t('components.template.form.default_value')"
|
||||
class="flex-1"
|
||||
/>
|
||||
<Button type="button" size="icon" variant="ghost" @click="form.fields.splice(idx, 1)">
|
||||
<MdiDelete class="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="text-sm text-muted-foreground">{{ $t("components.template.form.no_custom_fields") }}</p>
|
||||
|
||||
<div class="mt-4 flex justify-end">
|
||||
<Button type="submit" :loading="loading">{{ $t("global.create") }}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { toast } from "@/components/ui/sonner";
|
||||
import MdiPlus from "~icons/mdi/plus";
|
||||
import MdiDelete from "~icons/mdi/delete";
|
||||
import { DialogID } from "@/components/ui/dialog-provider/utils";
|
||||
import BaseModal from "@/components/App/CreateModal.vue";
|
||||
import { useDialog } from "~/components/ui/dialog-provider";
|
||||
import FormTextField from "~/components/Form/TextField.vue";
|
||||
import FormTextArea from "~/components/Form/TextArea.vue";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import LocationSelector from "~/components/Location/Selector.vue";
|
||||
import LabelSelector from "~/components/Label/Selector.vue";
|
||||
import { useLabelStore } from "~~/stores/labels";
|
||||
import type { LocationSummary } from "~~/lib/api/types/data-contracts";
|
||||
|
||||
const emit = defineEmits<{ created: [] }>();
|
||||
const { closeDialog } = useDialog();
|
||||
|
||||
const labelStore = useLabelStore();
|
||||
const labels = computed(() => labelStore.labels);
|
||||
|
||||
const loading = ref(false);
|
||||
const form = reactive({
|
||||
name: "",
|
||||
description: "",
|
||||
notes: "",
|
||||
defaultName: "",
|
||||
defaultDescription: "",
|
||||
defaultQuantity: 1,
|
||||
defaultInsured: false,
|
||||
defaultManufacturer: "",
|
||||
defaultModelNumber: "",
|
||||
defaultLifetimeWarranty: false,
|
||||
defaultWarrantyDetails: "",
|
||||
defaultLocationId: null as string | null,
|
||||
defaultLocationObject: null as LocationSummary | null,
|
||||
defaultLabelIds: [] as string[],
|
||||
includeWarrantyFields: false,
|
||||
includePurchaseFields: false,
|
||||
includeSoldFields: false,
|
||||
fields: [] as Array<{ id: string; name: string; type: "text"; textValue: string }>,
|
||||
});
|
||||
|
||||
const NIL_UUID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
function addField() {
|
||||
form.fields.push({ id: NIL_UUID, name: "", type: "text", textValue: "" });
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(form, {
|
||||
name: "",
|
||||
description: "",
|
||||
notes: "",
|
||||
defaultName: "",
|
||||
defaultDescription: "",
|
||||
defaultQuantity: 1,
|
||||
defaultInsured: false,
|
||||
defaultManufacturer: "",
|
||||
defaultModelNumber: "",
|
||||
defaultLifetimeWarranty: false,
|
||||
defaultWarrantyDetails: "",
|
||||
defaultLocationId: null,
|
||||
defaultLocationObject: null,
|
||||
defaultLabelIds: [],
|
||||
includeWarrantyFields: false,
|
||||
includePurchaseFields: false,
|
||||
includeSoldFields: false,
|
||||
fields: [],
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
async function create() {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
|
||||
// Prepare the data with proper format for API
|
||||
const createData = {
|
||||
name: form.name,
|
||||
description: form.description,
|
||||
notes: form.notes,
|
||||
defaultName: form.defaultName || null,
|
||||
defaultDescription: form.defaultDescription || null,
|
||||
defaultQuantity: form.defaultQuantity,
|
||||
defaultInsured: form.defaultInsured,
|
||||
defaultManufacturer: form.defaultManufacturer || null,
|
||||
defaultModelNumber: form.defaultModelNumber || null,
|
||||
defaultLifetimeWarranty: form.defaultLifetimeWarranty,
|
||||
defaultWarrantyDetails: form.defaultWarrantyDetails || null,
|
||||
defaultLocationId: form.defaultLocationObject?.id ?? null,
|
||||
defaultLabelIds: form.defaultLabelIds,
|
||||
includeWarrantyFields: form.includeWarrantyFields,
|
||||
includePurchaseFields: form.includePurchaseFields,
|
||||
includeSoldFields: form.includeSoldFields,
|
||||
fields: form.fields,
|
||||
};
|
||||
|
||||
const { error } = await api.templates.create(createData);
|
||||
if (error) {
|
||||
toast.error(t("components.template.toast.create_failed"));
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(t("components.template.toast.created"));
|
||||
reset();
|
||||
closeDialog(DialogID.CreateTemplate);
|
||||
emit("created");
|
||||
}
|
||||
</script>
|
||||
149
frontend/components/Template/Selector.vue
Normal file
149
frontend/components/Template/Selector.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<!-- Compact mode: icon button only -->
|
||||
<Popover v-if="compact" v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
:id="id"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
role="combobox"
|
||||
:aria-expanded="open"
|
||||
:class="value ? 'border-primary text-primary' : ''"
|
||||
>
|
||||
<MdiFileDocumentOutline class="size-5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-72 p-0" align="end">
|
||||
<Command :ignore-filter="true">
|
||||
<CommandInput
|
||||
v-model="search"
|
||||
:placeholder="$t('components.template.selector.search')"
|
||||
:display-value="_ => ''"
|
||||
/>
|
||||
<CommandEmpty>{{ $t("components.template.selector.not_found") }}</CommandEmpty>
|
||||
<CommandList>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="template in filteredTemplates"
|
||||
:key="template.id"
|
||||
:value="template.id"
|
||||
@select="selectTemplate(template)"
|
||||
>
|
||||
<Check :class="cn('mr-2 h-4 w-4', value?.id === template.id ? 'opacity-100' : 'opacity-0')" />
|
||||
<div class="flex w-full flex-col">
|
||||
<div>{{ template.name }}</div>
|
||||
<div v-if="template.description" class="mt-1 line-clamp-1 text-xs text-muted-foreground">
|
||||
{{ template.description }}
|
||||
</div>
|
||||
</div>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<!-- Full mode: label + full-width button -->
|
||||
<div v-else class="flex flex-col gap-1">
|
||||
<Label :for="id" class="px-1">{{ $t("components.template.selector.label") }}</Label>
|
||||
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<Button :id="id" variant="outline" role="combobox" :aria-expanded="open" class="w-full justify-between">
|
||||
{{ value && value.name ? value.name : $t("components.template.selector.select") }}
|
||||
<ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[--reka-popper-anchor-width] p-0">
|
||||
<Command :ignore-filter="true">
|
||||
<CommandInput
|
||||
v-model="search"
|
||||
:placeholder="$t('components.template.selector.search')"
|
||||
:display-value="_ => ''"
|
||||
/>
|
||||
<CommandEmpty>{{ $t("components.template.selector.not_found") }}</CommandEmpty>
|
||||
<CommandList>
|
||||
<CommandGroup>
|
||||
<CommandItem
|
||||
v-for="template in filteredTemplates"
|
||||
:key="template.id"
|
||||
:value="template.id"
|
||||
@select="selectTemplate(template)"
|
||||
>
|
||||
<Check :class="cn('mr-2 h-4 w-4', value?.id === template.id ? 'opacity-100' : 'opacity-0')" />
|
||||
<div class="flex w-full flex-col">
|
||||
<div>{{ template.name }}</div>
|
||||
<div v-if="template.description" class="mt-1 line-clamp-1 text-xs text-muted-foreground">
|
||||
{{ template.description }}
|
||||
</div>
|
||||
</div>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Check, ChevronsUpDown } from "lucide-vue-next";
|
||||
import fuzzysort from "fuzzysort";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "~/components/ui/command";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
|
||||
import { cn } from "~/lib/utils";
|
||||
import type { ItemTemplateSummary } from "~~/lib/api/types/data-contracts";
|
||||
import MdiFileDocumentOutline from "~icons/mdi/file-document-outline";
|
||||
|
||||
type Props = {
|
||||
modelValue?: ItemTemplateSummary | null;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits(["update:modelValue", "template-selected"]);
|
||||
|
||||
const { compact } = toRefs(props);
|
||||
const open = ref(false);
|
||||
const search = ref("");
|
||||
const id = useId();
|
||||
const value = useVModel(props, "modelValue", emit);
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const { data: templates } = useAsyncData("templates-selector", async () => {
|
||||
const { data, error } = await api.templates.getAll();
|
||||
if (error) {
|
||||
return [];
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
function selectTemplate(template: ItemTemplateSummary) {
|
||||
if (value.value?.id !== template.id) {
|
||||
value.value = template;
|
||||
emit("template-selected", template);
|
||||
} else {
|
||||
value.value = null;
|
||||
emit("template-selected", null);
|
||||
}
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
const filteredTemplates = computed(() => {
|
||||
if (!templates.value) return [];
|
||||
const filtered = fuzzysort.go(search.value, templates.value, { key: "name", all: true }).map(i => i.obj);
|
||||
return filtered;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => value.value,
|
||||
() => {
|
||||
if (!value.value) {
|
||||
search.value = "";
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@@ -10,6 +10,7 @@ export enum DialogID {
|
||||
CreateLocation = "create-location",
|
||||
CreateLabel = "create-label",
|
||||
CreateNotifier = "create-notifier",
|
||||
CreateTemplate = "create-template",
|
||||
DuplicateSettings = "duplicate-settings",
|
||||
DuplicateTemporarySettings = "duplicate-temporary-settings",
|
||||
EditMaintenance = "edit-maintenance",
|
||||
@@ -23,6 +24,7 @@ export enum DialogID {
|
||||
PageQRCode = "page-qr-code",
|
||||
UpdateLabel = "update-label",
|
||||
UpdateLocation = "update-location",
|
||||
UpdateTemplate = "update-template",
|
||||
ItemChangeDetails = "item-table-updater",
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user