@ketvietlab/ketsuite 0.1.25 → 0.1.30

package/dist/modules/product_backend/modal/product-modal-view.js

@@ -1,7 +1,7 @@
 // The product template record modal, client side (KetSuite record-modal contract).
 //
 // The catalogue collection opens a template here, and its create action opens the
-// same modal with an empty record. Only the General and Variants tabs are covered
+// same modal with an empty record. Only the General and Attributes & variants tabs are covered
 // — Media and the description's rich-text controller stay on the server-rendered
 // detail page (`/admin/product/templates/{id}?tab=media`) until a nested-island
 // composition path (`recordIsland`) for them is proven elsewhere first.
@@ -14,9 +14,9 @@
 // busy state, one success notice, even though three calls happen underneath.
 //
 // Bundled by tools/build-backend-client.mjs into product_backend/client/.
-import { ActionMenu, Badge, Button, DataTable, Notice, RecordActions, Section, Stack, } from '@ketvietlab/design-system';
+import { ActionMenu, Badge, Button, Notice, RecordActions, Section, Stack } from '@ketvietlab/design-system';
 import { createRecordModal, recordIsland } from '../../../ui/client/record-modal.js';
-import { RecordActionForm, RecordCloseTrigger, RecordCommandForm, RecordDialogTrigger, RecordModalForm, recordStateSelectControl, } from '../../../ui/client/record-modal-form.js';
+import { RecordCloseTrigger, RecordCommandForm, RecordFormWithImage, RecordImageField, RecordModalForm, } from '../../../ui/client/record-modal-form.js';
 const COMMAND_FIELD = '__command';
 const TRACKING = ['none', 'lot', 'serial'];
 const uuid = () => typeof crypto !== 'undefined' && 'randomUUID' in crypto
@@ -30,11 +30,32 @@ const decimal = (form, name, fallback = '0') => {
     const raw = text(form, name);
     return raw === '' ? fallback : raw;
 };
-const money = (value) => {
-    const amount = Number(value);
-    return Number.isFinite(amount) ? amount.toLocaleString('vi-VN') : String(value);
-};
 const canSave = (c) => c.data.permissions.save === true;
+/**
+ * `backend.relation-select`'s own labels, read straight off this modal's context —
+ * the shared `relationLabels` in `backend/relation-select.ts` takes a full
+ * `Translator`, which `c.t` (a plain `(key, params?) => string`) does not satisfy.
+ */
+const relationLabels = (c, dialogTitle) => ({
+    choose: c.t('backend.relation.choose'),
+    search: c.t('backend.relation.search'),
+    more: c.t('backend.relation.more'),
+    noRecords: c.t('backend.relation.noRecords'),
+    loading: c.t('backend.relation.loading'),
+    loadError: c.t('backend.relation.loadError'),
+    dialogTitle,
+    close: c.t('backend.relation.close'),
+    select: c.t('backend.relation.select'),
+    create: c.t('backend.relation.create'),
+    edit: c.t('backend.relation.edit'),
+    save: c.t('backend.relation.save'),
+    cancel: c.t('backend.relation.cancel'),
+    remove: c.t('backend.relation.remove'),
+    confirmRemove: c.t('backend.relation.confirmRemove'),
+    retry: c.t('backend.relation.retry'),
+    clear: c.t('backend.relation.clear'),
+    chosen: c.t('backend.relation.chosen'),
+});
 const fieldId = (name) => `product-template-${name}`;
 /** A field of the record form: typed input survives a refusal, the refusal shows on it. */
 const field = (c, props) => ({
@@ -54,35 +75,73 @@ const field = (c, props) => ({
     error: c.fieldError(props.name),
     disabled: props.disabled === true || !canSave(c),
 });
-const stateSelect = (c, props) => {
-    const base = field(c, { name: props.name, label: props.label, type: 'select', required: props.required });
-    return {
-        ...base,
+/**
+ * A relational field, as a search-and-create picker rather than a bare select —
+ * the same `backend.relation-select` island the server-rendered detail page used
+ * before General moved into this modal. Cold-mounted via `recordIsland`: nothing
+ * here needs a route, only the JSON config the island reads on the client.
+ */
+const relationField = (c, props) => {
+    const base = field(c, {
+        name: props.name,
+        label: props.label,
+        type: 'select',
+        required: props.required,
+        value: props.value ?? '',
+    });
+    const config = {
+        name: props.name,
+        ariaLabel: props.label,
+        value: base.value || null,
+        required: props.required,
+        disabled: base.disabled === true,
         options: props.options,
-        control: recordStateSelectControl({
-            id: base.id,
-            name: props.name,
-            state: props.name,
-            value: props.value,
-            options: props.options,
-            required: props.required,
-            disabled: base.disabled === true,
-            invalid: !!base.error,
-        }),
+        labels: relationLabels(c, props.dialogTitle),
+        manager: props.manager,
     };
+    return { ...base, control: recordIsland('backend.relation-select', { id: base.id, config }) };
 };
-const submitButton = (c, command, label, variant = 'primary') => Button({ type: 'submit', name: COMMAND_FIELD, value: command, label, variant, loading: c.busy });
-/**
- * A bare form for an action that names no field of its own — generate, remove.
- * `data-layout="actions"` opts the form out of the record-form grid (built for a
- * field/label pair), which would otherwise stretch this lone button to fill it.
- */
-const actionForm = (c, command, hidden, label) => RecordActionForm({
-    kind: c.kind,
-    command,
-    hidden,
-    children: Button({ type: 'submit', label, variant: 'secondary', size: 'compact', loading: c.busy }),
+const categoryField = (c) => relationField(c, {
+    name: 'categoryId',
+    label: t(c, 'field.category'),
+    value: c.data.record.categoryId,
+    options: [{ value: '', label: '—' }, ...c.data.categories],
+    dialogTitle: t(c, 'relation.categories'),
+    manager: {
+        listFunction: 'product.listCategories',
+        descriptionField: 'path',
+        saveFunction: 'product.saveCategory',
+        fields: [{ name: 'name', label: t(c, 'field.category'), required: true }],
+    },
+});
+const brandField = (c) => relationField(c, {
+    name: 'brandId',
+    label: t(c, 'field.brand'),
+    value: c.data.record.brandId,
+    options: [{ value: '', label: '—' }, ...c.data.brands],
+    dialogTitle: t(c, 'relation.brands'),
+    manager: {
+        listFunction: 'product.listBrands',
+        saveFunction: 'product.saveBrand',
+        fields: [{ name: 'name', label: t(c, 'field.brand'), required: true }],
+    },
+});
+const uomField = (c) => relationField(c, {
+    name: 'uomId',
+    label: t(c, 'field.uom'),
+    value: c.data.record.uomId,
+    options: [{ value: '', label: '—' }, ...c.data.uoms],
+    dialogTitle: t(c, 'relation.units'),
+    manager: {
+        listFunction: 'uom.listUnits',
+        saveFunction: 'uom.saveUnit',
+        fields: [
+            { name: 'name', label: t(c, 'field.uom'), required: true },
+            { name: 'relativeFactor', label: t(c, 'relation.unitFactor'), required: true },
+        ],
+    },
 });
+const submitButton = (c, command, label, variant = 'primary') => Button({ type: 'submit', name: COMMAND_FIELD, value: command, label, variant, loading: c.busy });
 const MORE_FORM_ID = 'product-template-more-form';
 const GENERAL_FORM_ID = 'product-template-general-form';
 /**
@@ -122,21 +181,9 @@ const generalFields = (c) => {
             options: typeOptions(c),
         }),
         field(c, { name: 'name', label: t(c, 'field.name'), value: record.name, required: true, span: 'full' }),
-        field(c, {
-            name: 'uomId',
-            label: t(c, 'field.uom'),
-            type: 'select',
-            value: record.uomId ?? '',
-            options: [{ value: '', label: '—' }, ...c.data.uoms],
-        }),
+        uomField(c),
         field(c, { name: 'listPrice', label: t(c, 'field.listPrice'), type: 'decimal', value: record.listPrice }),
-        field(c, {
-            name: 'categoryId',
-            label: t(c, 'field.category'),
-            type: 'select',
-            value: record.categoryId ?? '',
-            options: [{ value: '', label: '—' }, ...c.data.categories],
-        }),
+        categoryField(c),
         field(c, {
             name: 'description',
             label: t(c, 'field.description'),
@@ -150,13 +197,7 @@ const generalFields = (c) => {
                 field(c, { name: 'defaultCode', label: t(c, 'field.defaultCode'), value: record.defaultCode }),
                 field(c, { name: 'barcode', label: t(c, 'field.barcode'), value: record.barcode }),
             ]),
-        field(c, {
-            name: 'brandId',
-            label: t(c, 'field.brand'),
-            type: 'select',
-            value: record.brandId ?? '',
-            options: [{ value: '', label: '—' }, ...c.data.brands],
-        }),
+        brandField(c),
         field(c, { name: 'origin', label: t(c, 'field.origin'), value: record.origin, span: 'full' }),
     ];
 };
@@ -184,6 +225,64 @@ const taxFields = (c) => [
         options: [{ value: '', label: '—' }, ...c.data.taxes],
     }),
 ];
+// ── Main image ───────────────────────────────────────────────────────────────
+/** The stored file at a rendition size; the file route serves the original until the job made one. */
+export const imageUrl = (attachmentId, size) => `/files/${encodeURIComponent(attachmentId)}?size=${size}`;
+/** `backend.lightbox`'s labels, off this modal's own messages. */
+export const lightboxLabels = (c) => ({
+    open: t(c, 'image.open'),
+    close: t(c, 'image.close'),
+    previous: t(c, 'image.previous'),
+    next: t(c, 'image.next'),
+    zoomIn: t(c, 'image.zoomIn'),
+    zoomOut: t(c, 'image.zoomOut'),
+    counter: t(c, 'image.counter'),
+    empty: t(c, 'image.empty'),
+});
+const IMAGE_FORM_ID = 'product-template-image';
+/**
+ * The template's main image, at the right of its name and kind. Clicking it opens
+ * every template image in the viewer; dropping or choosing a file replaces it.
+ */
+const imageField = (c) => {
+    const images = c.data.images;
+    const name = c.data.record.name;
+    return RecordImageField({
+        kind: c.kind,
+        id: IMAGE_FORM_ID,
+        busy: c.busy,
+        // Keyed by the image set: a new upload is a different viewer, not a prop update.
+        viewer: images.length
+            ? recordIsland('backend.lightbox', {
+                id: `product-template-lightbox-${images.map((image) => image.mediaId).join('-')}`,
+                config: {
+                    thumbnails: 'first',
+                    size: 'large',
+                    labels: lightboxLabels(c),
+                    items: images.map((image) => ({
+                        src: imageUrl(image.attachmentId, 'large'),
+                        thumbnail: imageUrl(image.attachmentId, 'thumb'),
+                        alt: image.alt || name,
+                        caption: image.alt || null,
+                    })),
+                },
+            })
+            : null,
+        // Replacing runs attach and then remove, so it needs both permissions: offering
+        // it with only the first would attach the new image and leave the old one behind.
+        uploadCommand: c.data.permissions.uploadImage && (!images.length || c.data.permissions.removeImage)
+            ? 'uploadImage'
+            : null,
+        removeCommand: c.data.permissions.removeImage && images.length ? 'removeImage' : null,
+        labels: {
+            empty: t(c, 'image.empty'),
+            upload: t(c, 'image.upload'),
+            replace: t(c, 'image.replace'),
+            remove: t(c, 'image.remove'),
+            drop: t(c, 'image.drop'),
+        },
+    });
+};
 const generalTab = (c) => {
     const editable = canSave(c);
     return Section({
@@ -192,160 +291,134 @@ const generalTab = (c) => {
             gap: 'compact',
             items: [
                 editable ? '' : Notice({ title: t(c, 'readOnly.title'), message: t(c, 'readOnly.message') }),
-                RecordModalForm({
-                    // No button of its own: the header's "Lưu" button submits this form by
-                    // id (see `GENERAL_FORM_ID`), so it reads as one save action next to
-                    // Close and More rather than a fourth button buried in the tab body.
-                    id: GENERAL_FORM_ID,
-                    kind: c.kind,
-                    fields: [
-                        ...generalFields(c),
-                        ...(c.data.stockEnabled ? trackingFields(c) : []),
-                        ...(c.data.taxEnabled ? taxFields(c) : []),
-                    ],
+                RecordFormWithImage({
+                    form: RecordModalForm({
+                        // No button of its own: the header's "Lưu" button submits this form by
+                        // id (see `GENERAL_FORM_ID`), so it reads as one save action next to
+                        // Close and More rather than a fourth button buried in the tab body.
+                        id: GENERAL_FORM_ID,
+                        kind: c.kind,
+                        fields: [
+                            ...generalFields(c),
+                            ...(c.data.stockEnabled ? trackingFields(c) : []),
+                            ...(c.data.taxEnabled ? taxFields(c) : []),
+                        ],
+                    }),
+                    image: imageField(c),
                 }),
             ],
         }),
     });
 };
-// ── Variants tab ─────────────────────────────────────────────────────────────
-const attributeLineRows = (c) => c.data.attributeLines.length
-    ? DataTable({
-        rows: c.data.attributeLines,
-        id: (row) => String(row.id),
-        columns: [
-            {
-                key: 'attribute',
-                label: t(c, 'attributes.nameColumn'),
-                priority: 'primary',
-                cell: (row) => String(row.attribute ?? row.attributeId),
-            },
-            {
-                key: 'values',
-                label: t(c, 'attributes.values'),
-                cell: (row) => (Array.isArray(row.values) ? row.values : [])
-                    .map((value) => String(value.name))
-                    .join(' · '),
-            },
-            {
-                key: 'actions',
-                label: t(c, 'attributes.actions'),
-                cell: (row) => c.data.permissions.removeAttributeLine
-                    ? actionForm(c, 'removeAttributeLine', { id: String(row.id) }, t(c, 'attributes.removeLine'))
-                    : '',
-            },
-        ],
-    })
-    : Notice({ title: t(c, 'attributes.linesEmpty'), message: t(c, 'attributes.linesEmptyHint') });
-const addAttributeLineForm = (c) => {
-    if (!c.data.permissions.saveAttributeLine || !c.data.attributes.length)
-        return '';
-    const attributeId = c.state('attributeId', String(c.data.attributes[0]?.value ?? ''));
-    const values = c.data.attributeValuesByAttribute[attributeId] ?? [];
-    return RecordModalForm({
+// ── Attributes & variants tab ────────────────────────────────────────────────
+/** Every label the editor island shows, read off this modal's own messages. */
+const VARIANT_EDITOR_LABELS = [
+    'stepAttributes',
+    'stepVariants',
+    'attributesTitle',
+    'attributesHint',
+    'attributesEmpty',
+    'attributesEmptyHint',
+    'addAttribute',
+    'removeAttributeNamed',
+    'selectAll',
+    'valuesSelected',
+    'valuesNone',
+    'noVariantHint',
+    'priceExtrasSet',
+    'priceExtrasNone',
+    'invalidNumber',
+    'rowInvalid',
+    'appliesTo',
+    'noVariant',
+    'variantsTitle',
+    'variantsCount',
+    'variantsEmpty',
+    'variantsEmptyHint',
+    'variantsNeedAttributes',
+    'generate',
+    'missingMore',
+    'defaultVariant',
+    'details',
+    'saving',
+    'summaryInvalid',
+    'addVariant',
+    'activateAll',
+    'archiveAll',
+    'missing',
+    'choose',
+    'archived',
+    'duplicate',
+    'incomplete',
+    'new',
+    'edit',
+    'collapse',
+    'remove',
+    'archive',
+    'restore',
+    'defaultCode',
+    'barcode',
+    'weight',
+    'volume',
+    'listPrice',
+    'summaryCreate',
+    'summaryArchive',
+    'summaryChanged',
+    'summaryDuplicate',
+    'reset',
+    'save',
+    'saved',
+    'saveFailed',
+    'readOnly',
+    'image',
+    'uploadImage',
+    'replaceImage',
+    'removeImage',
+    'dropImage',
+    'imageSaveFirst',
+    'imageFailed',
+    'imageRemoveConfirm',
+    'createAttribute',
+    'createAttributeHint',
+    'attributeName',
+    'attributeNameExample',
+    'attributeValues',
+    'attributeValuesHint',
+    'attributeValuesExample',
+    'createAndAddAttribute',
+    'cancelAttribute',
+    'attributeNameRequired',
+    'attributeNameDuplicate',
+    'attributeValuesRequired',
+    'attributeValuesDuplicate',
+    'attributeValuesInvalid',
+    'attributeCreateFailed',
+    'attributeRetryHint',
+];
+/**
+ * The whole tab is one island: attribute lines with their value checkboxes on top, the
+ * variant rows below, saved together through `product.saveVariantSetup`. The
+ * setup is read by the modal's own context, so opening the tab costs no second
+ * request; the island keeps its edits until its own Save or Reset.
+ */
+const variantEditorId = (c) => `product-variant-editor-${c.id}`;
+const variantsTab = (c) => c.data.variantSetup
+    ? recordIsland('product.variant-editor', {
+        id: variantEditorId(c),
         kind: c.kind,
-        fields: [
-            stateSelect(c, {
-                name: 'attributeId',
-                label: t(c, 'attributes.attribute'),
-                value: attributeId,
-                required: true,
-                options: c.data.attributes.map((row) => ({ value: String(row.value), label: String(row.label) })),
-            }),
-            field(c, {
-                name: 'valueIds',
-                label: t(c, 'attributes.values'),
-                type: 'checkbox-group',
-                span: 'full',
-                required: true,
-                options: values.map((value) => ({
-                    name: `value_${value.value}`,
-                    value: '1',
-                    label: value.label,
-                })),
-            }),
-        ],
-        actions: [submitButton(c, 'saveAttributeLine', t(c, 'attributes.addLine'), 'secondary')],
-    });
-};
-const variantRows = (c) => c.data.variants.length
-    ? DataTable({
-        rows: c.data.variants,
-        id: (row) => String(row.id),
-        // No dedicated actions column — narrower than General, it was the one
-        // that clipped at a normal modal width. The code cell itself opens the
-        // edit dialog, a tertiary button rather than a bordered secondary one so
-        // it reads as the row's own identity, not a fifth column competing for
-        // the same cramped space.
-        columns: [
-            {
-                key: 'code',
-                label: t(c, 'variants.code'),
-                priority: 'primary',
-                cell: (row) => RecordDialogTrigger({
-                    dialog: 'variant',
-                    id: String(row.id),
-                    children: Button({
-                        label: String(row.defaultCode || row.name || row.id),
-                        variant: 'tertiary',
-                        size: 'compact',
-                    }),
-                }),
-            },
-            {
-                key: 'values',
-                label: t(c, 'variants.values'),
-                cell: (row) => (Array.isArray(row.values) ? row.values : [])
-                    .map((value) => String(value.value))
-                    .join(' · '),
-            },
-            { key: 'price', label: t(c, 'field.listPrice'), cell: () => money(c.data.record.listPrice) },
-            {
-                key: 'state',
-                label: t(c, 'col.state'),
-                cell: (row) => Badge({
-                    label: row.active === false ? t(c, 'state.archived') : t(c, 'variants.selling'),
-                    tone: row.active === false ? 'neutral' : 'positive',
-                }),
-            },
-        ],
+        setup: c.data.variantSetup,
+        editable: c.data.permissions.saveVariantSetup === true,
+        createAttribute: c.data.permissions.createAttribute === true,
+        saveFunction: 'product.saveVariantSetup',
+        labels: Object.fromEntries(VARIANT_EDITOR_LABELS.map((key) => [key, t(c, `variantEditor.${key}`)])),
+        relationLabels: relationLabels(c, t(c, 'variantEditor.attributesTitle')),
+        lightboxLabels: lightboxLabels(c),
+        media: {
+            upload: c.data.permissions.uploadImage === true,
+            remove: c.data.permissions.removeImage === true,
+        },
     })
     : Notice({ title: t(c, 'variants.empty'), message: t(c, 'variants.panelHint') });
-const variantsTab = (c) => Stack({
-    gap: 'loose',
-    items: [
-        Section({
-            title: t(c, 'attributes.panelTitle'),
-            description: t(c, 'attributes.panelHint'),
-            body: Stack({ gap: 'compact', items: [attributeLineRows(c), addAttributeLineForm(c)] }),
-        }),
-        Section({
-            title: t(c, 'variants.title'),
-            description: t(c, 'variants.panelHint'),
-            actions: c.data.permissions.generateVariants
-                ? actionForm(c, 'generateVariants', {}, t(c, 'variants.generate'))
-                : undefined,
-            body: variantRows(c),
-        }),
-    ],
-});
-// ── Variant dialog ───────────────────────────────────────────────────────────
-const editedVariant = (c) => c.data.variants.find((variant) => String(variant.id) === c.dialog?.params.id);
-const variantDialogView = (c) => {
-    const variant = editedVariant(c);
-    if (!variant)
-        return Notice({ title: t(c, 'variants.empty'), message: '' });
-    return RecordModalForm({
-        kind: c.kind,
-        fields: [
-            field(c, { name: 'defaultCode', label: t(c, 'field.defaultCode'), value: variant.defaultCode }),
-            field(c, { name: 'barcode', label: t(c, 'field.barcode'), value: variant.barcode }),
-            field(c, { name: 'weight', label: t(c, 'field.weight'), type: 'decimal', value: variant.weight ?? 0 }),
-            field(c, { name: 'volume', label: t(c, 'field.volume'), type: 'decimal', value: variant.volume ?? 0 }),
-        ],
-        actions: c.data.permissions.saveVariant ? [submitButton(c, 'variantSave', t(c, 'action.save'))] : [],
-    });
-};
 // ── Header / create ──────────────────────────────────────────────────────────
 /**
  * Archive and delete share one "More" menu instead of sitting in the header as
@@ -403,21 +476,34 @@ const actions = (c) => {
             RecordActions({
                 label: t(c, 'action.more'),
                 actions: [
-                    editable
-                        ? Button({
-                            type: 'submit',
-                            name: COMMAND_FIELD,
-                            value: 'save',
-                            label: t(c, 'action.save'),
-                            variant: 'primary',
-                            loading: c.busy,
-                            form: GENERAL_FORM_ID,
-                            // The General tab's form only exists in the DOM while that tab is
-                            // active (the other tab's content isn't mounted) — disabled rather
-                            // than silently doing nothing when there is no form to submit.
-                            disabled: c.tab !== 'general',
-                        })
-                        : '',
+                    c.tab === 'variants'
+                        ? c.data.variantSetup && c.data.permissions.saveVariantSetup === true
+                            ? // The variant editor island owns this save: the button submits the
+                                // island's own form, and the island enables it once there is a
+                                // valid change to send.
+                                Button({
+                                    type: 'submit',
+                                    label: t(c, 'action.save'),
+                                    variant: 'primary',
+                                    // Same id as `variantEditorSaveForm` in the island, not imported so this bundle
+                                    // does not pull in the whole editor.
+                                    form: `${variantEditorId(c)}-save`,
+                                    disabled: true,
+                                })
+                            : ''
+                        : editable
+                            ? Button({
+                                type: 'submit',
+                                name: COMMAND_FIELD,
+                                value: 'save',
+                                label: t(c, 'action.save'),
+                                variant: 'primary',
+                                loading: c.busy,
+                                form: GENERAL_FORM_ID,
+                                // The General tab's form only exists in the DOM while that tab is active.
+                                disabled: c.tab !== 'general',
+                            })
+                            : '',
                     closeButton(c),
                     menuItems.length
                         ? ActionMenu({
@@ -496,9 +582,6 @@ export const templateModalDefinition = {
             label: () => tab.label,
             view: (context) => recordIsland(tab.island, { templateId: context.id, locale: context.data.lang }),
         })),
-    dialogs: {
-        variant: { title: (c) => t(c, 'variants.edit'), view: variantDialogView },
-    },
     commands: {
         create: {
             fn: 'product.saveTemplate',
@@ -558,6 +641,40 @@ export const templateModalDefinition = {
             ],
             after: 'refresh',
         },
+        // A new main image: store the file, link it as primary, then drop the image it
+        // replaces — one action, so the thumbnail never shows two or none in between.
+        uploadImage: {
+            fn: 'product_media.attachMedia',
+            upload: {
+                file: (_form, c) => ({
+                    resModel: 'product.Template',
+                    resId: c.id,
+                    resField: 'media',
+                    public: 'false',
+                }),
+            },
+            input: (_form, c, uploads) => ({
+                id: uploads.file?.id ?? '',
+                attachmentId: uploads.file?.id ?? '',
+                templateId: c.id,
+                alt: uploads.file?.name ?? null,
+                primary: true,
+            }),
+            also: [
+                {
+                    fn: 'product_media.removeMedia',
+                    when: (c) => c.data.images.some((image) => image.primary),
+                    input: (_form, c) => ({ id: c.data.images.find((image) => image.primary)?.mediaId ?? '' }),
+                },
+            ],
+            after: 'refresh',
+        },
+        removeImage: {
+            fn: 'product_media.removeMedia',
+            input: (_form, c) => ({ id: c.data.images[0]?.mediaId ?? '' }),
+            confirm: (c) => t(c, 'image.removeConfirm'),
+            after: 'refresh',
+        },
         archive: {
             fn: 'product.archiveTemplate',
             input: (_form, c) => ({ id: c.id, active: !c.data.record.active }),
@@ -569,40 +686,6 @@ export const templateModalDefinition = {
             confirm: (c) => t(c, 'archive.deleteConfirm', { name: c.data.record.name }),
             after: 'close',
         },
-        generateVariants: {
-            fn: 'product.generateVariants',
-            input: (_form, c) => ({ templateId: c.id }),
-            after: 'refresh',
-        },
-        saveAttributeLine: {
-            fn: 'product.saveAttributeLine',
-            input: (form, c) => {
-                const attributeId = text(form, 'attributeId');
-                const values = c.data.attributeValuesByAttribute[attributeId] ?? [];
-                const valueIds = values
-                    .map((value) => String(value.value))
-                    .filter((id) => checked(form, `value_${id}`));
-                return { id: uuid(), templateId: c.id, attributeId, valueIds };
-            },
-            after: 'refresh',
-        },
-        removeAttributeLine: {
-            fn: 'product.removeAttributeLine',
-            input: (form) => ({ id: text(form, 'id') }),
-            after: 'refresh',
-        },
-        variantSave: {
-            fn: 'product.saveVariant',
-            input: (form, c) => ({
-                id: c.dialog?.params.id ?? '',
-                templateId: c.id,
-                defaultCode: text(form, 'defaultCode') || null,
-                barcode: text(form, 'barcode') || null,
-                weight: decimal(form, 'weight'),
-                volume: decimal(form, 'volume'),
-            }),
-            after: 'reload',
-        },
     },
 };
 export const templateModal = createRecordModal(templateModalDefinition);