1329 lines
41 KiB
Svelte
1329 lines
41 KiB
Svelte
<script lang="ts">
|
||
import { i18n } from "$lib/i18n";
|
||
import { onMount } from "svelte";
|
||
import { goto } from "$app/navigation";
|
||
import { api, ApiError, failureMessage } from "$lib/api";
|
||
import { unwrapList, unwrapTotal } from "$lib/list";
|
||
import { isCompanyAdmin } from "$lib/company-admin";
|
||
import { authSession } from "$lib/auth-session.svelte";
|
||
import { notifyApiError, notifyError } from "$lib/notify";
|
||
import type { Attribute, Category, ListResponse, MeResponse } from "$lib/types";
|
||
import PageShell from "$lib/components/PageShell.svelte";
|
||
import Alert from "$lib/components/Alert.svelte";
|
||
import Spinner from "$lib/components/Spinner.svelte";
|
||
import DataCard from "$lib/components/DataCard.svelte";
|
||
import {
|
||
Badge,
|
||
Button,
|
||
Dialog,
|
||
DropdownMenu,
|
||
DropdownMenuItem,
|
||
Input,
|
||
Label,
|
||
Select,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
Tabs,
|
||
TabsContent,
|
||
TabsList,
|
||
TabsTrigger
|
||
} from "$lib/components/ui";
|
||
import {
|
||
ArrowUpDown,
|
||
ChevronRight,
|
||
Database,
|
||
Download,
|
||
FileText,
|
||
List,
|
||
LoaderCircle,
|
||
MoreVertical,
|
||
Plus,
|
||
Search,
|
||
Upload,
|
||
X
|
||
} from "@lucide/svelte";
|
||
import {
|
||
attributeValueTypes,
|
||
attributeTypeLabel,
|
||
isChoiceAttributeType
|
||
} from "$lib/components/attributes/value-types";
|
||
|
||
type Attr = Attribute & {
|
||
attribute_key?: string;
|
||
value_type?: string;
|
||
parent_key?: string | null;
|
||
unit?: string | null;
|
||
example?: string | null;
|
||
updated_at?: string | null;
|
||
created_at?: string | null;
|
||
};
|
||
|
||
type Cat = Category & { unique_id?: string; name?: string | null };
|
||
|
||
type LinkedAttr = {
|
||
attribute_id: string;
|
||
name?: string;
|
||
attribute_key?: string;
|
||
required?: boolean;
|
||
};
|
||
|
||
const VALUE_TYPES = $derived(attributeValueTypes());
|
||
|
||
let attributes = $state<Attr[]>([]);
|
||
let categories = $state<Cat[]>([]);
|
||
let total = $state(0);
|
||
let error = $state("");
|
||
let success = $state("");
|
||
let loading = $state(true);
|
||
let saving = $state(false);
|
||
let canAdmin = $state(false);
|
||
|
||
let searchInput = $state("");
|
||
let searchQuery = $state("");
|
||
let categoryFilter = $state("");
|
||
let offset = $state(0);
|
||
const limit = 50;
|
||
|
||
let sortColumn = $state<"name" | "attribute_key" | "updated_at" | null>(null);
|
||
let sortDirection = $state<"asc" | "desc">("asc");
|
||
|
||
let expanded = $state<Set<string>>(new Set());
|
||
let loadedChildren = $state<Record<string, Attr[]>>({});
|
||
let loadingChildren = $state<Set<string>>(new Set());
|
||
let categoryNamesByAttr = $state<Record<string, string[]>>({});
|
||
|
||
let showAdd = $state(false);
|
||
let addTab = $state("single");
|
||
let addKey = $state("");
|
||
let addName = $state("");
|
||
let addType = $state("string");
|
||
let addUnit = $state("");
|
||
let addExample = $state("");
|
||
let addCategoryId = $state("");
|
||
let addFile = $state<File | null>(null);
|
||
let uploadError = $state("");
|
||
|
||
let editing = $state<Attr | null>(null);
|
||
let editKey = $state("");
|
||
let editName = $state("");
|
||
let editUnit = $state("");
|
||
let editExample = $state("");
|
||
|
||
let deleting = $state<Attr | null>(null);
|
||
|
||
let manageValuesAttr = $state<Attr | null>(null);
|
||
let listValues = $state<Attr[]>([]);
|
||
let valueKey = $state("");
|
||
let valueName = $state("");
|
||
let editingValue = $state<Attr | null>(null);
|
||
|
||
let showBulkAssign = $state(false);
|
||
let bulkFile = $state<File | null>(null);
|
||
let bulkStatus = $state<"idle" | "uploading" | "success" | "error">("idle");
|
||
let bulkError = $state("");
|
||
|
||
function attrKey(a: Attr): string {
|
||
return String(a.attribute_key ?? a.key ?? "");
|
||
}
|
||
|
||
function isListType(a: Attr): boolean {
|
||
return isChoiceAttributeType(a.value_type);
|
||
}
|
||
|
||
function formatRelative(iso: string | null | undefined): string {
|
||
if (!iso) return i18n.t("status.emDash");
|
||
const date = new Date(iso);
|
||
if (Number.isNaN(date.getTime())) return i18n.t("status.emDash");
|
||
const seconds = Math.round((Date.now() - date.getTime()) / 1000);
|
||
const rtf = new Intl.RelativeTimeFormat(i18n.locale, { numeric: "auto" });
|
||
const divisions: [Intl.RelativeTimeFormatUnit, number][] = [
|
||
["year", 31536000],
|
||
["month", 2592000],
|
||
["week", 604800],
|
||
["day", 86400],
|
||
["hour", 3600],
|
||
["minute", 60],
|
||
["second", 1]
|
||
];
|
||
for (const [unit, size] of divisions) {
|
||
if (Math.abs(seconds) >= size || unit === "second") {
|
||
return rtf.format(-Math.round(seconds / size), unit);
|
||
}
|
||
}
|
||
return i18n.t("status.emDash");
|
||
}
|
||
|
||
function downloadText(filename: string, content: string, mime: string) {
|
||
const blob = new Blob([content], { type: mime });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
|
||
function downloadAttributesTemplate(tsv = false) {
|
||
const headers = ["attribute_key", "name", "value_type", "category_id", "unit", "example", "parent_key"];
|
||
const examples = [
|
||
["width", "Width", "number", "T-SHIRTS", "cm", "15.6", ""],
|
||
["warranty", "Warranty included", "boolean", "T-SHIRTS", "", "", ""],
|
||
["release_date", "Release date", "date", "T-SHIRTS", "", "", ""],
|
||
["color", i18n.t("attributes.color"), "list", "T-SHIRTS", "", "", ""],
|
||
["color-red", "Red", "string", "T-SHIRTS", "", "", "color"],
|
||
["features", i18n.t("catalog.features"), "multiselect", "T-SHIRTS", "", "", ""],
|
||
["feature-waterproof", "Waterproof", "string", "T-SHIRTS", "", "", "features"]
|
||
];
|
||
const sep = tsv ? "\t" : ",";
|
||
const body = [headers.join(sep), ...examples.map((row) => row.join(sep))].join("\n");
|
||
downloadText(
|
||
tsv ? "attributes_template.tsv" : "attributes_template.csv",
|
||
body,
|
||
tsv ? "text/tab-separated-values" : "text/csv"
|
||
);
|
||
}
|
||
|
||
function downloadAssignTemplate() {
|
||
const headers = ["category_id", "attribute_key"];
|
||
const examples = [
|
||
["category-123", "width"],
|
||
["category-123", "color"],
|
||
["category-456", "width"]
|
||
];
|
||
const csv = [headers.join(","), ...examples.map((r) => r.join(","))].join("\n");
|
||
downloadText("category_attribute_assignments_template.csv", csv, "text/csv");
|
||
}
|
||
|
||
async function loadCategories() {
|
||
try {
|
||
const payload = await api<ListResponse<Cat>>("/api/categories?limit=500");
|
||
categories = unwrapList(payload);
|
||
} catch {
|
||
categories = [];
|
||
}
|
||
}
|
||
|
||
async function loadCategoryNames(items: Attr[]) {
|
||
const map: Record<string, string[]> = {};
|
||
const catsToProbe = categoryFilter
|
||
? categories.filter((c) => String(c.unique_id ?? c.id) === categoryFilter)
|
||
: categories.slice(0, 40);
|
||
await Promise.all(
|
||
catsToProbe.map(async (cat) => {
|
||
try {
|
||
const res = await api<{ category_attributes?: LinkedAttr[] }>(
|
||
`/api/categories/${cat.id}/attributes`
|
||
);
|
||
const links = res.category_attributes ?? [];
|
||
const catLabel = String(cat.name ?? cat.unique_id ?? cat.id);
|
||
for (const link of links) {
|
||
const id = String(link.attribute_id);
|
||
if (!map[id]) map[id] = [];
|
||
if (!map[id].includes(catLabel)) map[id].push(catLabel);
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
})
|
||
);
|
||
for (const a of items) {
|
||
const id = String(a.id);
|
||
if (!map[id]) map[id] = categoryNamesByAttr[id] ?? [];
|
||
}
|
||
categoryNamesByAttr = map;
|
||
}
|
||
|
||
async function load() {
|
||
loading = true;
|
||
error = "";
|
||
try {
|
||
if (categoryFilter) {
|
||
const cat = categories.find((c) => String(c.unique_id ?? c.id) === categoryFilter);
|
||
if (!cat) {
|
||
attributes = [];
|
||
total = 0;
|
||
return;
|
||
}
|
||
const links = await api<{ category_attributes?: LinkedAttr[] }>(
|
||
`/api/categories/${cat.id}/attributes`
|
||
);
|
||
const linked = links.category_attributes ?? [];
|
||
const ids = new Set(linked.map((l) => String(l.attribute_id)));
|
||
const payload = await api<ListResponse<Attr> & { total?: number }>(
|
||
`/api/attributes?limit=2000&offset=0&roots=1${searchQuery ? `&q=${encodeURIComponent(searchQuery)}` : ""}`
|
||
);
|
||
let items = unwrapList(payload).filter((a) => ids.has(String(a.id)) && !a.parent_key);
|
||
if (searchQuery.trim()) {
|
||
const q = searchQuery.trim().toLowerCase();
|
||
items = items.filter(
|
||
(a) =>
|
||
String(a.name ?? "")
|
||
.toLowerCase()
|
||
.includes(q) || attrKey(a).toLowerCase().includes(q)
|
||
);
|
||
}
|
||
attributes = sortItems(items);
|
||
total = attributes.length;
|
||
await loadCategoryNames(attributes);
|
||
return;
|
||
}
|
||
|
||
const params = new URLSearchParams({ limit: String(limit), offset: String(offset), roots: "1" });
|
||
if (searchQuery.trim()) params.set("q", searchQuery.trim());
|
||
const payload = await api<ListResponse<Attr> & { total?: number }>(`/api/attributes?${params}`);
|
||
const items = unwrapList(payload);
|
||
attributes = sortItems(items);
|
||
total = unwrapTotal(payload) ?? attributes.length;
|
||
await loadCategoryNames(attributes);
|
||
} catch (err) {
|
||
if (err instanceof ApiError && (err.status === 401 || err.status === 403)) {
|
||
await goto("/login");
|
||
return;
|
||
}
|
||
error = failureMessage(err, i18n.t("attributes.loadFailed"));
|
||
} finally {
|
||
loading = false;
|
||
}
|
||
}
|
||
|
||
function sortItems(items: Attr[]): Attr[] {
|
||
if (!sortColumn) return items;
|
||
const dir = sortDirection === "asc" ? 1 : -1;
|
||
return [...items].sort((a, b) => {
|
||
let av = "";
|
||
let bv = "";
|
||
if (sortColumn === "name") {
|
||
av = String(a.name ?? "");
|
||
bv = String(b.name ?? "");
|
||
} else if (sortColumn === "attribute_key") {
|
||
av = attrKey(a);
|
||
bv = attrKey(b);
|
||
} else {
|
||
av = String(a.updated_at ?? "");
|
||
bv = String(b.updated_at ?? "");
|
||
}
|
||
return av.localeCompare(bv) * dir;
|
||
});
|
||
}
|
||
|
||
function toggleSort(column: "name" | "attribute_key" | "updated_at") {
|
||
if (sortColumn === column) {
|
||
sortDirection = sortDirection === "asc" ? "desc" : "asc";
|
||
} else {
|
||
sortColumn = column;
|
||
sortDirection = "asc";
|
||
}
|
||
attributes = sortItems(attributes);
|
||
}
|
||
|
||
onMount(() => {
|
||
void (async () => {
|
||
try {
|
||
const me = await api<MeResponse>("/api/auth/me");
|
||
authSession.setMe(me);
|
||
canAdmin = isCompanyAdmin(me);
|
||
} catch {
|
||
canAdmin = authSession.isCompanyAdmin;
|
||
}
|
||
await loadCategories();
|
||
await load();
|
||
})();
|
||
});
|
||
|
||
const rootAttributes = $derived(attributes.filter((a) => !a.parent_key));
|
||
|
||
const pageLabel = $derived(
|
||
total === 0
|
||
? i18n.t("attributes.zero")
|
||
: `Showing ${offset + 1}–${Math.min(offset + rootAttributes.length, total)} of ${total} attributes`
|
||
);
|
||
|
||
async function loadChildAttributes(parent: Attr) {
|
||
const key = attrKey(parent);
|
||
if (!key || loadedChildren[key] || loadingChildren.has(key)) return;
|
||
loadingChildren = new Set(loadingChildren).add(key);
|
||
try {
|
||
const fromPage = attributes.filter((a) => a.parent_key === key);
|
||
const payload = await api<ListResponse<Attr>>(
|
||
`/api/attributes?limit=500&parent_key=${encodeURIComponent(key)}`
|
||
);
|
||
const fetched = unwrapList(payload);
|
||
const byId = new Map<string, Attr>();
|
||
for (const child of [...fromPage, ...fetched]) byId.set(String(child.id), child);
|
||
loadedChildren = { ...loadedChildren, [key]: [...byId.values()] };
|
||
} catch {
|
||
loadedChildren = { ...loadedChildren, [key]: [] };
|
||
} finally {
|
||
const next = new Set(loadingChildren);
|
||
next.delete(key);
|
||
loadingChildren = next;
|
||
}
|
||
}
|
||
|
||
function toggleExpand(attr: Attr) {
|
||
const key = attrKey(attr);
|
||
const next = new Set(expanded);
|
||
if (next.has(key)) {
|
||
next.delete(key);
|
||
} else {
|
||
next.add(key);
|
||
if (isListType(attr)) void loadChildAttributes(attr);
|
||
}
|
||
expanded = next;
|
||
}
|
||
|
||
function resetAddForm() {
|
||
addKey = "";
|
||
addName = "";
|
||
addType = "string";
|
||
addUnit = "";
|
||
addExample = "";
|
||
addCategoryId = "";
|
||
addFile = null;
|
||
uploadError = "";
|
||
addTab = "single";
|
||
}
|
||
|
||
function openAdd() {
|
||
resetAddForm();
|
||
error = "";
|
||
success = "";
|
||
showAdd = true;
|
||
}
|
||
|
||
async function createAttribute(event: Event) {
|
||
event.preventDefault();
|
||
saving = true;
|
||
error = "";
|
||
success = "";
|
||
try {
|
||
const created = await api<Attr>("/api/attributes", {
|
||
method: "POST",
|
||
body: {
|
||
attribute_key: addKey,
|
||
name: addName,
|
||
value_type: addType,
|
||
unit: addUnit || null,
|
||
example: addExample || null,
|
||
parent_key: null
|
||
}
|
||
});
|
||
let linkFailed = "";
|
||
if (addCategoryId) {
|
||
const cat = categories.find((c) => String(c.unique_id ?? c.id) === addCategoryId);
|
||
if (cat) {
|
||
try {
|
||
await api(`/api/categories/${cat.id}/attributes`, {
|
||
method: "POST",
|
||
body: { attribute_id: String(created.id), required: false }
|
||
});
|
||
} catch (linkErr) {
|
||
linkFailed = failureMessage(
|
||
linkErr,
|
||
i18n.t("attributes.assignFailed")
|
||
);
|
||
}
|
||
}
|
||
}
|
||
const createdKey = String(created.attribute_key ?? addKey).trim();
|
||
showAdd = false;
|
||
resetAddForm();
|
||
if (linkFailed) {
|
||
success = i18n.t("flash.attrs.createdLinkFailed");
|
||
error = linkFailed;
|
||
notifyError(linkFailed);
|
||
} else {
|
||
success = i18n.t("flash.attrs.created");
|
||
}
|
||
offset = 0;
|
||
categoryFilter = "";
|
||
// Surface the new row immediately — default list is paginated/sorted and often hides it.
|
||
searchInput = createdKey;
|
||
searchQuery = createdKey;
|
||
await load();
|
||
} catch (err) {
|
||
error = notifyApiError(err, i18n.t("toast.attrs.createFailed"));
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
async function bulkImport(event: Event) {
|
||
event.preventDefault();
|
||
if (!addFile) return;
|
||
saving = true;
|
||
uploadError = "";
|
||
error = "";
|
||
success = "";
|
||
try {
|
||
const form = new FormData();
|
||
form.append("file", addFile);
|
||
await api("/api/attributes/import", { method: "POST", body: form });
|
||
showAdd = false;
|
||
resetAddForm();
|
||
success = i18n.t("flash.attrs.csvImported");
|
||
offset = 0;
|
||
await load();
|
||
} catch (err) {
|
||
uploadError = notifyApiError(err, i18n.t("toast.attrs.importFailed"));
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
function openEdit(attr: Attr) {
|
||
editing = attr;
|
||
editKey = attrKey(attr);
|
||
editName = String(attr.name ?? "");
|
||
editUnit = String(attr.unit ?? "");
|
||
editExample = String(attr.example ?? "");
|
||
error = "";
|
||
success = "";
|
||
}
|
||
|
||
async function saveEdit(event: Event) {
|
||
event.preventDefault();
|
||
if (!editing) return;
|
||
saving = true;
|
||
error = "";
|
||
success = "";
|
||
try {
|
||
await api(`/api/attributes/${editing.id}`, {
|
||
method: "PATCH",
|
||
body: {
|
||
name: editName,
|
||
value_type: editing.value_type,
|
||
unit: editUnit.trim() || null,
|
||
example: editExample.trim() || null
|
||
}
|
||
});
|
||
editing = null;
|
||
success = i18n.t("flash.attrs.updated");
|
||
await load();
|
||
} catch (err) {
|
||
error = notifyApiError(err, i18n.t("toast.attrs.updateFailed"));
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
async function confirmDelete() {
|
||
if (!deleting) return;
|
||
saving = true;
|
||
error = "";
|
||
success = "";
|
||
try {
|
||
await api(`/api/attributes/${deleting.id}`, { method: "DELETE" });
|
||
deleting = null;
|
||
success = i18n.t("flash.attrs.deleted");
|
||
await load();
|
||
} catch (err) {
|
||
error = notifyApiError(err, i18n.t("toast.attrs.deleteFailed"));
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
async function openManageValues(attr: Attr) {
|
||
manageValuesAttr = attr;
|
||
editingValue = null;
|
||
valueKey = "";
|
||
valueName = "";
|
||
await loadChildAttributes(attr);
|
||
listValues = loadedChildren[attrKey(attr)] ?? [];
|
||
}
|
||
|
||
async function refreshListValues() {
|
||
if (!manageValuesAttr) return;
|
||
const key = attrKey(manageValuesAttr);
|
||
loadedChildren = { ...loadedChildren };
|
||
delete loadedChildren[key];
|
||
await loadChildAttributes(manageValuesAttr);
|
||
listValues = loadedChildren[key] ?? [];
|
||
}
|
||
|
||
async function saveListValue(event: Event) {
|
||
event.preventDefault();
|
||
if (!manageValuesAttr) return;
|
||
saving = true;
|
||
error = "";
|
||
try {
|
||
const wasEdit = !!editingValue;
|
||
if (editingValue) {
|
||
await api(`/api/attributes/${editingValue.id}`, {
|
||
method: "PATCH",
|
||
body: { name: valueName, value_type: "string" }
|
||
});
|
||
} else {
|
||
await api("/api/attributes", {
|
||
method: "POST",
|
||
body: {
|
||
attribute_key: valueKey,
|
||
name: valueName,
|
||
value_type: "string",
|
||
parent_key: attrKey(manageValuesAttr)
|
||
}
|
||
});
|
||
}
|
||
valueKey = "";
|
||
valueName = "";
|
||
editingValue = null;
|
||
await refreshListValues();
|
||
success = wasEdit ? i18n.t("attributes.valueUpdated") : i18n.t("attributes.valueAdded");
|
||
} catch (err) {
|
||
error = failureMessage(err, i18n.t("attributes.saveValueFailed"));
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
function startEditValue(value: Attr) {
|
||
editingValue = value;
|
||
valueKey = attrKey(value);
|
||
valueName = String(value.name ?? "");
|
||
}
|
||
|
||
function cancelEditValue() {
|
||
editingValue = null;
|
||
valueKey = "";
|
||
valueName = "";
|
||
}
|
||
|
||
async function deleteListValue(id: string | number) {
|
||
saving = true;
|
||
error = "";
|
||
try {
|
||
await api(`/api/attributes/${id}`, { method: "DELETE" });
|
||
await refreshListValues();
|
||
success = i18n.t("flash.attrs.valueDeleted");
|
||
} catch (err) {
|
||
error = failureMessage(err, i18n.t("attributes.deleteValueFailed"));
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
async function submitBulkAssign(event: Event) {
|
||
event.preventDefault();
|
||
if (!bulkFile) return;
|
||
bulkStatus = "uploading";
|
||
bulkError = "";
|
||
error = "";
|
||
success = "";
|
||
try {
|
||
const text = await bulkFile.text();
|
||
const lines = text
|
||
.split(/\r?\n/)
|
||
.map((l) => l.trim())
|
||
.filter(Boolean);
|
||
if (lines.length < 2) throw new Error(i18n.t("attributes.csvNeedHeader"));
|
||
const header = lines[0].split(",").map((h) => h.trim().toLowerCase());
|
||
const catIdx = header.indexOf("category_id");
|
||
const keyIdx = header.indexOf("attribute_key");
|
||
if (catIdx < 0 || keyIdx < 0) throw new Error(i18n.t("attributes.csvNeedColumns"));
|
||
|
||
const allPayload = await api<ListResponse<Attr>>("/api/attributes?limit=2000");
|
||
const allAttrs = unwrapList(allPayload);
|
||
const byKey = new Map(allAttrs.map((a) => [attrKey(a), a]));
|
||
const byUnique = new Map(categories.map((c) => [String(c.unique_id ?? ""), c]));
|
||
|
||
let linked = 0;
|
||
const failures: string[] = [];
|
||
for (let i = 1; i < lines.length; i++) {
|
||
const cols = lines[i].split(",").map((c) => c.trim());
|
||
const catUid = cols[catIdx];
|
||
const aKey = cols[keyIdx];
|
||
const cat = byUnique.get(catUid);
|
||
const attr = byKey.get(aKey);
|
||
if (!cat || !attr) {
|
||
failures.push(i18n.t("attributes.rowUnknown", { row: i + 1 }));
|
||
continue;
|
||
}
|
||
try {
|
||
await api(`/api/categories/${cat.id}/attributes`, {
|
||
method: "POST",
|
||
body: { attribute_id: String(attr.id), required: false }
|
||
});
|
||
linked += 1;
|
||
} catch (err) {
|
||
failures.push(i18n.t("attributes.rowLinkFailed", { row: i + 1, detail: failureMessage(err, i18n.t("attributes.linkFailedShort")) }));
|
||
}
|
||
}
|
||
if (failures.length && linked === 0) {
|
||
bulkStatus = "error";
|
||
bulkError = failures.slice(0, 5).join("\n");
|
||
return;
|
||
}
|
||
bulkStatus = "success";
|
||
success = i18n.t("flash.attrs.assignedLinks", { count: linked });
|
||
if (failures.length) success += ` ${i18n.t("attributes.rowsFailed", { count: failures.length })}`;
|
||
await load();
|
||
} catch (err) {
|
||
bulkStatus = "error";
|
||
bulkError = failureMessage(err, i18n.t("attributes.bulkAssignFailed"));
|
||
}
|
||
}
|
||
|
||
function applySearch() {
|
||
searchQuery = searchInput;
|
||
offset = 0;
|
||
void load();
|
||
}
|
||
|
||
function clearSearch() {
|
||
searchInput = "";
|
||
searchQuery = "";
|
||
offset = 0;
|
||
void load();
|
||
}
|
||
|
||
function onCategoryFilterChange() {
|
||
offset = 0;
|
||
void load();
|
||
}
|
||
|
||
function categoryBadges(attr: Attr): string[] {
|
||
return categoryNamesByAttr[String(attr.id)] ?? [];
|
||
}
|
||
</script>
|
||
|
||
<PageShell title={i18n.t("attributes.title")} description={i18n.t("attributes.description")}>
|
||
{#snippet actions()}
|
||
<Button variant="outline" onclick={() => ((showBulkAssign = true), (bulkStatus = "idle"), (bulkFile = null), (bulkError = ""))}>
|
||
<Database class="h-4 w-4" />
|
||
{i18n.t("attributes.assignToCategories")}
|
||
</Button>
|
||
<Button onclick={openAdd} data-assistant-target="attributes-add" data-tour="attributes-add">
|
||
<Plus class="h-4 w-4" />
|
||
{i18n.t("attributes.addAttribute")}
|
||
</Button>
|
||
{/snippet}
|
||
|
||
<Alert message={error} />
|
||
<Alert tone="success" message={success} />
|
||
|
||
<DataCard>
|
||
{#snippet toolbar()}
|
||
<div class="flex flex-wrap items-center gap-4">
|
||
<div class="relative min-w-0 w-full max-w-[350px] flex-1">
|
||
<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||
<form
|
||
onsubmit={(e) => {
|
||
e.preventDefault();
|
||
applySearch();
|
||
}}
|
||
>
|
||
<Input
|
||
class="pl-9 pr-9"
|
||
placeholder={i18n.t("attributes.searchPlaceholder")}
|
||
bind:value={searchInput}
|
||
aria-label={i18n.t("attributes.searchAria")}
|
||
/>
|
||
{#if searchInput}
|
||
<button
|
||
type="button"
|
||
class="absolute right-1 top-1/2 flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:bg-accent"
|
||
aria-label={i18n.t("catalog.clearSearch")}
|
||
onclick={clearSearch}
|
||
>
|
||
<X class="h-4 w-4" />
|
||
</button>
|
||
{/if}
|
||
</form>
|
||
</div>
|
||
<div class="w-full max-w-[350px]">
|
||
<Select
|
||
aria-label={i18n.t("attributes.filterByCategory")}
|
||
bind:value={categoryFilter}
|
||
onchange={onCategoryFilterChange}
|
||
>
|
||
<option value="">{i18n.t("attributes.allCategories")}</option>
|
||
{#each categories as cat}
|
||
<option value={String(cat.unique_id ?? cat.id)}>
|
||
{cat.name ?? cat.unique_id}{#if cat.unique_id}
|
||
({cat.unique_id}){/if}
|
||
</option>
|
||
{/each}
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
{/snippet}
|
||
|
||
{#if loading}
|
||
<div class="p-8"><Spinner label={i18n.t("attributes.loading")} /></div>
|
||
{:else}
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>
|
||
<button
|
||
type="button"
|
||
class="inline-flex h-auto items-center p-0 font-semibold hover:underline"
|
||
onclick={() => toggleSort("name")}
|
||
>
|
||
{i18n.t("attributes.col.name")}
|
||
<ArrowUpDown class="ml-2 h-4 w-4 {sortColumn === "name" ? "text-primary" : ""}" />
|
||
</button>
|
||
</TableHead>
|
||
<TableHead class="max-w-[12rem]">
|
||
<button
|
||
type="button"
|
||
class="inline-flex h-auto items-center p-0 font-semibold hover:underline"
|
||
onclick={() => toggleSort("attribute_key")}
|
||
>
|
||
{i18n.t("attributes.col.key")}
|
||
<ArrowUpDown
|
||
class="ml-2 h-4 w-4 {sortColumn === "attribute_key" ? "text-primary" : ""}"
|
||
/>
|
||
</button>
|
||
</TableHead>
|
||
<TableHead class="whitespace-nowrap">{i18n.t("attributes.col.type")}</TableHead>
|
||
<TableHead class="whitespace-nowrap">{i18n.t("attributes.col.unit")}</TableHead>
|
||
<TableHead>{i18n.t("attributes.col.categories")}</TableHead>
|
||
<TableHead class="whitespace-nowrap">
|
||
<button
|
||
type="button"
|
||
class="inline-flex h-auto items-center p-0 font-semibold hover:underline"
|
||
onclick={() => toggleSort("updated_at")}
|
||
>
|
||
{i18n.t("attributes.col.updated")}
|
||
<ArrowUpDown
|
||
class="ml-2 h-4 w-4 {sortColumn === "updated_at" ? "text-primary" : ""}"
|
||
/>
|
||
</button>
|
||
</TableHead>
|
||
<TableHead stickyRight>{i18n.t("attributes.col.actions")}</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{#if rootAttributes.length === 0}
|
||
<TableRow>
|
||
<TableCell colspan={7} class="py-8 text-center text-muted-foreground">
|
||
<div class="flex flex-col items-center gap-3">
|
||
<FileText class="h-8 w-8 text-muted-foreground/50" />
|
||
<p>{i18n.t("attributes.emptyTitle")}</p>
|
||
<p class="text-sm text-muted-foreground">
|
||
{#if searchQuery.trim() || categoryFilter}
|
||
{i18n.t("attributes.emptyFiltered")}
|
||
{:else}
|
||
{i18n.t("attributes.emptyHint")}
|
||
{/if}
|
||
</p>
|
||
<div class="flex flex-wrap justify-center gap-2 pt-1">
|
||
{#if searchQuery.trim() || categoryFilter}
|
||
<Button
|
||
variant="outline"
|
||
onclick={() => {
|
||
categoryFilter = "";
|
||
clearSearch();
|
||
}}
|
||
>
|
||
{i18n.t("catalog.clearFilters")}
|
||
</Button>
|
||
{:else}
|
||
<Button onclick={openAdd} data-tour="attributes-empty-add">
|
||
<Plus class="mr-2 h-4 w-4" />
|
||
{i18n.t("attributes.addAttribute")}
|
||
</Button>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
{:else}
|
||
{#each rootAttributes as attribute (attribute.id)}
|
||
{@const key = attrKey(attribute)}
|
||
{@const hasChildren = isListType(attribute)}
|
||
{@const isExpanded = expanded.has(key)}
|
||
{@const children = loadedChildren[key] ?? []}
|
||
{@const isLoadingKids = loadingChildren.has(key)}
|
||
{@const hasLoaded = key in loadedChildren}
|
||
{@const cats = categoryBadges(attribute)}
|
||
<TableRow>
|
||
<TableCell>
|
||
<div class="flex items-center gap-2">
|
||
{#if hasChildren}
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
class="h-5 w-5"
|
||
aria-label={isExpanded ? i18n.t("catalog.collapse") : i18n.t("catalog.expand")}
|
||
aria-expanded={isExpanded}
|
||
onclick={() => toggleExpand(attribute)}
|
||
>
|
||
<ChevronRight
|
||
class="h-4 w-4 transition-transform {isExpanded ? "rotate-90" : ""}"
|
||
/>
|
||
</Button>
|
||
{/if}
|
||
<span>{attribute.name}</span>
|
||
{#if hasChildren && hasLoaded && children.length === 0}
|
||
<Badge variant="outline" class="ml-2 text-xs">{i18n.t("attributes.noValues")}</Badge>
|
||
{/if}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell class="max-w-[12rem] truncate font-medium" title={key || undefined}>
|
||
{key || i18n.t("status.emDash")}
|
||
</TableCell>
|
||
<TableCell class="whitespace-nowrap">
|
||
<Badge variant="secondary" title={attribute.value_type ?? undefined}>
|
||
{attributeTypeLabel(attribute.value_type)}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell class="whitespace-nowrap">{attribute.unit ?? i18n.t("status.emDash")}</TableCell>
|
||
<TableCell>
|
||
{#if cats.length === 0}
|
||
<span class="text-muted-foreground">{i18n.t("status.emDash")}</span>
|
||
{:else if cats.length <= 2}
|
||
<div class="flex flex-wrap gap-1">
|
||
{#each cats as name}
|
||
<Badge variant="outline" class="text-xs">{name}</Badge>
|
||
{/each}
|
||
</div>
|
||
{:else}
|
||
<div class="flex items-center gap-1" title={cats.join(", ")}>
|
||
<Badge variant="outline" class="text-xs">{cats[0]}</Badge>
|
||
<Badge variant="secondary" class="text-xs">+{cats.length - 1}</Badge>
|
||
</div>
|
||
{/if}
|
||
</TableCell>
|
||
<TableCell class="whitespace-nowrap">{formatRelative(attribute.updated_at)}</TableCell>
|
||
<TableCell stickyRight>
|
||
<DropdownMenu class="w-44">
|
||
{#snippet trigger({ open, toggle })}
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
aria-label={i18n.t("attributes.actions")}
|
||
aria-haspopup="menu"
|
||
aria-expanded={open}
|
||
onclick={(e) => {
|
||
e.stopPropagation();
|
||
toggle();
|
||
}}
|
||
>
|
||
<MoreVertical class="h-4 w-4" />
|
||
</Button>
|
||
{/snippet}
|
||
<DropdownMenuItem onclick={() => openEdit(attribute)}>{i18n.t("attributes.editDetails")}</DropdownMenuItem>
|
||
{#if hasChildren}
|
||
<DropdownMenuItem onclick={() => void openManageValues(attribute)}>
|
||
{i18n.t("attributes.manageValues")}
|
||
</DropdownMenuItem>
|
||
{/if}
|
||
{#if canAdmin}
|
||
<DropdownMenuItem
|
||
class="text-destructive focus:text-destructive"
|
||
onclick={() => {
|
||
deleting = attribute;
|
||
}}
|
||
>
|
||
{i18n.t("common.delete")}
|
||
</DropdownMenuItem>
|
||
{/if}
|
||
</DropdownMenu>
|
||
</TableCell>
|
||
</TableRow>
|
||
{#if isExpanded && hasChildren}
|
||
{#if isLoadingKids}
|
||
<TableRow class="bg-muted/30">
|
||
<TableCell colspan={7}>
|
||
<div class="flex items-center pl-6 text-muted-foreground">
|
||
<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
||
{i18n.t("attributes.loadingValues")}
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
{:else if children.length > 0}
|
||
{#each children as child (child.id)}
|
||
<TableRow class="bg-muted/30">
|
||
<TableCell colspan={2}>
|
||
<div class="flex items-center pl-6">
|
||
<span class="mr-2 inline-block h-2 w-2 rounded-full bg-muted-foreground"
|
||
></span>
|
||
{child.name}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell colspan={5}>{attrKey(child)}</TableCell>
|
||
</TableRow>
|
||
{/each}
|
||
{:else}
|
||
<TableRow class="bg-muted/30">
|
||
<TableCell colspan={7}>
|
||
<div class="flex items-center pl-6 text-muted-foreground">
|
||
<List class="mr-2 h-4 w-4" />
|
||
{i18n.t("attributes.noValuesYetHint")}
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
{/if}
|
||
{/if}
|
||
{/each}
|
||
{/if}
|
||
</TableBody>
|
||
</Table>
|
||
{/if}
|
||
|
||
{#snippet footer()}
|
||
{#if !loading && rootAttributes.length > 0 && !categoryFilter}
|
||
<div class="flex items-center justify-between gap-2 border-t border-border px-4 py-4">
|
||
<span class="text-sm text-muted-foreground">{pageLabel}</span>
|
||
<div class="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={offset === 0}
|
||
onclick={() => {
|
||
offset = Math.max(0, offset - limit);
|
||
void load();
|
||
}}>{i18n.t("common.previous")}</Button
|
||
>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={offset + limit >= total}
|
||
onclick={() => {
|
||
offset = offset + limit;
|
||
void load();
|
||
}}>{i18n.t("common.next")}</Button
|
||
>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
{/snippet}
|
||
</DataCard>
|
||
</PageShell>
|
||
|
||
<Dialog
|
||
bind:open={showAdd}
|
||
title={i18n.t("attributes.addNew")}
|
||
description={i18n.t("attributes.createDescription")}
|
||
class="max-w-[600px]"
|
||
onClose={resetAddForm}
|
||
>
|
||
<Tabs bind:value={addTab} class="w-full">
|
||
{#if canAdmin}
|
||
<TabsList class="grid w-full grid-cols-2">
|
||
<TabsTrigger value="single">{i18n.t("attributes.tab.single")}</TabsTrigger>
|
||
<TabsTrigger value="bulk">{i18n.t("attributes.tab.bulk")}</TabsTrigger>
|
||
</TabsList>
|
||
{/if}
|
||
|
||
<TabsContent value="single" class="mt-4">
|
||
<form class="space-y-4" onsubmit={createAttribute}>
|
||
<div class="grid gap-4">
|
||
<div class="grid gap-2">
|
||
<Label for="add-key">{i18n.t("attributes.field.key")}</Label>
|
||
<Input id="add-key" placeholder={i18n.t("attributes.field.keyPlaceholder")} bind:value={addKey} required />
|
||
</div>
|
||
<div class="grid gap-2">
|
||
<Label for="add-name">{i18n.t("attributes.field.displayName")}</Label>
|
||
<Input id="add-name" placeholder={i18n.t("attributes.displayName")} bind:value={addName} required />
|
||
</div>
|
||
<div class="grid gap-2">
|
||
<Label for="add-type">{i18n.t("attributes.field.type")}</Label>
|
||
<Select id="add-type" bind:value={addType}>
|
||
{#each VALUE_TYPES as t}
|
||
<option value={t.value}>{t.label}</option>
|
||
{/each}
|
||
</Select>
|
||
<p class="text-sm text-muted-foreground">
|
||
{VALUE_TYPES.find((t) => t.value === addType)?.hint ??
|
||
i18n.t("attributes.valueTypeHint")}
|
||
</p>
|
||
</div>
|
||
<div class="grid gap-2">
|
||
<Label for="add-cat">{i18n.t("attributes.field.category")}</Label>
|
||
<Select id="add-cat" bind:value={addCategoryId}>
|
||
<option value="">{i18n.t("attributes.field.categoryPlaceholder")}</option>
|
||
{#each categories as cat}
|
||
<option value={String(cat.unique_id ?? cat.id)}>
|
||
{cat.name ?? cat.unique_id}{#if cat.unique_id}
|
||
({cat.unique_id}){/if}
|
||
</option>
|
||
{/each}
|
||
</Select>
|
||
<p class="text-sm text-muted-foreground">
|
||
{i18n.t("attributes.field.categoryHint")}
|
||
</p>
|
||
</div>
|
||
{#if !isChoiceAttributeType(addType)}
|
||
<div class="grid gap-2">
|
||
<Label for="add-unit">{i18n.t("attributes.field.unitOptional")}</Label>
|
||
<Input id="add-unit" placeholder={i18n.t("attributes.field.unitPlaceholder")} bind:value={addUnit} />
|
||
</div>
|
||
<div class="grid gap-2">
|
||
<Label for="add-example">{i18n.t("attributes.field.exampleOptional")}</Label>
|
||
<Input id="add-example" placeholder={i18n.t("attributes.field.examplePlaceholder")} bind:value={addExample} />
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{#if error}
|
||
<p class="text-sm text-destructive" role="alert">{error}</p>
|
||
{/if}
|
||
<div class="flex justify-end gap-2 pt-2">
|
||
<Button type="button" variant="outline" onclick={() => (showAdd = false)}>{i18n.t("common.cancel")}</Button>
|
||
<Button type="submit" loading={saving}>{saving ? i18n.t("catalog.adding") : i18n.t("attributes.create")}</Button>
|
||
</div>
|
||
</form>
|
||
</TabsContent>
|
||
|
||
{#if canAdmin}
|
||
<TabsContent value="bulk" class="mt-4">
|
||
<form class="space-y-4" onsubmit={bulkImport}>
|
||
<div class="grid gap-2">
|
||
<Label for="bulk-file">{i18n.t("attributes.bulk.fileLabel")}</Label>
|
||
<div class="flex flex-wrap gap-2">
|
||
<Button type="button" variant="outline" size="sm" onclick={() => downloadAttributesTemplate(false)}>
|
||
<Download class="h-4 w-4" />
|
||
{i18n.t("attributes.bulk.downloadCsv")}
|
||
</Button>
|
||
<Button type="button" variant="outline" size="sm" onclick={() => downloadAttributesTemplate(true)}>
|
||
<Download class="h-4 w-4" />
|
||
{i18n.t("attributes.bulk.downloadTsv")}
|
||
</Button>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<Input
|
||
id="bulk-file"
|
||
type="file"
|
||
accept=".csv,.tsv,text/csv,text/tab-separated-values"
|
||
onchange={(e) => {
|
||
const input = e.currentTarget as HTMLInputElement;
|
||
addFile = input.files?.[0] ?? null;
|
||
uploadError = "";
|
||
}}
|
||
required
|
||
/>
|
||
<Button type="submit" disabled={!addFile} loading={saving}>
|
||
<Upload class="h-4 w-4" />
|
||
{saving ? i18n.t("common.processing") : i18n.t("common.upload")}
|
||
</Button>
|
||
</div>
|
||
{#if uploadError}
|
||
<div class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive whitespace-pre-wrap">
|
||
{uploadError}
|
||
</div>
|
||
{/if}
|
||
<div class="space-y-2 text-sm text-muted-foreground">
|
||
<p>{i18n.t("attributes.bulk.uploadHint")}</p>
|
||
<ul class="list-inside list-disc space-y-1">
|
||
<li><span class="font-mono text-xs">attribute_key</span>: {i18n.t("attributes.bulk.col.key")}</li>
|
||
<li><span class="font-mono text-xs">name</span>: {i18n.t("attributes.bulk.col.name")}</li>
|
||
<li>
|
||
<span class="font-mono text-xs">value_type</span>: {i18n.t("attributes.bulk.col.valueType")}
|
||
</li>
|
||
<li><span class="font-mono text-xs">category_id</span>: {i18n.t("attributes.bulk.col.categoryId")}</li>
|
||
<li><span class="font-mono text-xs">unit</span> / <span class="font-mono text-xs">example</span>: {i18n.t("attributes.bulk.col.unitExample")}</li>
|
||
<li><span class="font-mono text-xs">parent_key</span>: {i18n.t("attributes.bulk.col.parentKey")}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</TabsContent>
|
||
{/if}
|
||
</Tabs>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
open={!!editing}
|
||
title={i18n.t("attributes.edit")}
|
||
description={editing ? i18n.t("attributes.editDesc", { name: String(editing.name ?? "") }) : ""}
|
||
class="max-w-[600px]"
|
||
onClose={() => (editing = null)}
|
||
>
|
||
{#if editing}
|
||
<form class="space-y-6 py-2" onsubmit={saveEdit}>
|
||
<div class="grid gap-4">
|
||
<div class="grid gap-2">
|
||
<Label for="edit-key">{i18n.t("attributes.field.key")}</Label>
|
||
<Input id="edit-key" bind:value={editKey} required disabled />
|
||
<p class="text-sm text-muted-foreground">{i18n.t("attributes.field.keyHint")}</p>
|
||
</div>
|
||
<div class="grid gap-2">
|
||
<Label for="edit-name">{i18n.t("attributes.field.displayName")}</Label>
|
||
<Input id="edit-name" bind:value={editName} required />
|
||
<p class="text-sm text-muted-foreground">{i18n.t("attributes.field.displayNameHint")}</p>
|
||
</div>
|
||
{#if !isListType(editing)}
|
||
<div class="grid gap-2">
|
||
<Label for="edit-unit">{i18n.t("attributes.field.unitOptional")}</Label>
|
||
<Input id="edit-unit" placeholder={i18n.t("attributes.field.unitPlaceholder")} bind:value={editUnit} />
|
||
</div>
|
||
<div class="grid gap-2">
|
||
<Label for="edit-example">{i18n.t("attributes.field.exampleOptional")}</Label>
|
||
<Input id="edit-example" placeholder={i18n.t("attributes.field.examplePlaceholder")} bind:value={editExample} />
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{#if error}
|
||
<p class="text-sm text-destructive" role="alert">{error}</p>
|
||
{/if}
|
||
<div class="flex justify-end gap-2">
|
||
<Button type="button" variant="outline" onclick={() => (editing = null)}>{i18n.t("common.cancel")}</Button>
|
||
<Button type="submit" loading={saving}>{saving ? i18n.t("catalog.saving") : i18n.t("catalog.saveChanges")}</Button>
|
||
</div>
|
||
</form>
|
||
{/if}
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
open={!!deleting}
|
||
title={i18n.t("attributes.delete")}
|
||
description={deleting
|
||
? i18n.t("attributes.deleteDesc", { name: String(deleting.name ?? "") })
|
||
: ""}
|
||
class="max-w-[600px]"
|
||
onClose={() => (deleting = null)}
|
||
>
|
||
{#if deleting && isListType(deleting)}
|
||
<p class="mb-4 flex items-center gap-2 text-sm text-destructive">
|
||
{i18n.t("attributes.deleteWarningValues")}
|
||
</p>
|
||
{/if}
|
||
{#snippet footer()}
|
||
<Button variant="outline" onclick={() => (deleting = null)}>{i18n.t("common.cancel")}</Button>
|
||
<Button variant="destructive" loading={saving} onclick={() => void confirmDelete()}>
|
||
{saving ? i18n.t("catalog.deleting") : i18n.t("catalog.delete")}
|
||
</Button>
|
||
{/snippet}
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
open={!!manageValuesAttr}
|
||
title={manageValuesAttr ? i18n.t("attributes.manageTitleNamed", { name: String(manageValuesAttr.name ?? "") }) : i18n.t("attributes.manageTitle")}
|
||
description={i18n.t("attributes.manageValues")}
|
||
class="max-w-[800px]"
|
||
onClose={() => {
|
||
manageValuesAttr = null;
|
||
cancelEditValue();
|
||
}}
|
||
>
|
||
<form class="mb-4 space-y-4" onsubmit={saveListValue}>
|
||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||
<div class="space-y-2">
|
||
<Label for="value-key">{i18n.t("attributes.valueKey")}</Label>
|
||
<Input
|
||
id="value-key"
|
||
placeholder={manageValuesAttr ? `${attrKey(manageValuesAttr)}-value` : "value-key"}
|
||
bind:value={valueKey}
|
||
required
|
||
disabled={!!editingValue}
|
||
/>
|
||
<p class="text-sm text-muted-foreground">{i18n.t("attributes.valueKeyHint")}</p>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="value-name">{i18n.t("attributes.displayValue")}</Label>
|
||
<Input id="value-name" placeholder={i18n.t("attributes.displayValuePlaceholder")} bind:value={valueName} required />
|
||
<p class="text-sm text-muted-foreground">{i18n.t("attributes.displayValueHint")}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-end gap-2">
|
||
{#if editingValue}
|
||
<Button type="button" variant="outline" onclick={cancelEditValue}>{i18n.t("common.cancel")}</Button>
|
||
{/if}
|
||
<Button type="submit" loading={saving}>
|
||
{saving ? i18n.t("catalog.saving") : editingValue ? i18n.t("attributes.updateValue") : i18n.t("attributes.addValue")}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="max-h-[400px] overflow-auto rounded-lg border border-border">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>{i18n.t("attributes.valueKey")}</TableHead>
|
||
<TableHead>{i18n.t("attributes.displayValue")}</TableHead>
|
||
<TableHead stickyRight>{i18n.t("attributes.col.actions")}</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{#each listValues as value (value.id)}
|
||
<TableRow>
|
||
<TableCell class="font-mono">{attrKey(value)}</TableCell>
|
||
<TableCell>{value.name}</TableCell>
|
||
<TableCell stickyRight>
|
||
<div class="flex items-center justify-end gap-2">
|
||
<Button variant="ghost" size="sm" onclick={() => startEditValue(value)}>{i18n.t("common.edit")}</Button>
|
||
{#if canAdmin}
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
class="text-destructive"
|
||
onclick={() => void deleteListValue(value.id)}>{i18n.t("common.delete")}</Button
|
||
>
|
||
{/if}
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
{:else}
|
||
<TableRow>
|
||
<TableCell colspan={3} class="py-6 text-center text-muted-foreground"
|
||
>{i18n.t("attributes.noValuesYet")}</TableCell
|
||
>
|
||
</TableRow>
|
||
{/each}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
bind:open={showBulkAssign}
|
||
title={i18n.t("attributes.assignToCategories")}
|
||
description={i18n.t("attributes.assignDesc")}
|
||
class="max-w-[600px]"
|
||
onClose={() => {
|
||
bulkFile = null;
|
||
bulkStatus = "idle";
|
||
bulkError = "";
|
||
}}
|
||
>
|
||
<form class="space-y-4" onsubmit={submitBulkAssign}>
|
||
<div class="flex flex-wrap gap-2">
|
||
<Button type="button" variant="outline" size="sm" onclick={downloadAssignTemplate}>
|
||
<Download class="h-4 w-4" />
|
||
{i18n.t("attributes.downloadTemplate")}
|
||
</Button>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="assign-file">{i18n.t("attributes.csvFile")}</Label>
|
||
<Input
|
||
id="assign-file"
|
||
type="file"
|
||
accept=".csv,text/csv"
|
||
onchange={(e) => {
|
||
const input = e.currentTarget as HTMLInputElement;
|
||
bulkFile = input.files?.[0] ?? null;
|
||
bulkStatus = "idle";
|
||
bulkError = "";
|
||
}}
|
||
required
|
||
/>
|
||
</div>
|
||
{#if bulkError}
|
||
<div class="rounded-md border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive whitespace-pre-wrap">
|
||
{bulkError}
|
||
</div>
|
||
{/if}
|
||
{#if bulkStatus === "success"}
|
||
<div class="rounded-md border border-border bg-muted/40 p-3 text-sm text-foreground">
|
||
{i18n.t("attributes.assignSuccess")}
|
||
</div>
|
||
{/if}
|
||
<div class="flex justify-end gap-2">
|
||
<Button type="button" variant="outline" onclick={() => (showBulkAssign = false)}>{i18n.t("common.close")}</Button>
|
||
<Button type="submit" disabled={!bulkFile || bulkStatus === "uploading"} loading={bulkStatus === "uploading"}>
|
||
<Upload class="h-4 w-4" />
|
||
{bulkStatus === "uploading" ? i18n.t("catalog.assigning") : "Upload & Assign"}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</Dialog>
|