@revenexx/cover 0.1.0

package/app/components/account/orderlists/AccountOrderListDetail.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import type { OrderList } from "../../../interfaces/account/order-lists";
+
+/**
+ * Detail page content of one order list: position management for the
+ * owner, add-to-cart, edit (modal) and delete.
+ */
+const props = defineProps<{
+	listId: string;
+}>();
+
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const authStore = useAuthStore();
+const localePath = useLocalePath();
+const { getImage } = useProductImage();
+const { formatCurrency } = useCartSummaryFormatting();
+
+const { data: list, status, error, refresh } = useFetch<OrderList>(
+	`/api/account/order-lists/${props.listId}`,
+	{ key: `account-order-list:${props.listId}` },
+);
+
+const isOwner = computed(() => authStore.user?.$id === list.value?.owner.id);
+const listValue = computed(() =>
+	Math.round((list.value?.positions ?? []).reduce((sum, p) => sum + p.price * p.quantity, 0) * 100) / 100,
+);
+
+const formatDate = (value: string) => d(new Date(value), { dateStyle: "medium" });
+
+/* ---- position management ------------------------------------------ */
+async function updatePositions(positions: OrderList["positions"]): Promise<void> {
+	await $fetch(`/api/account/order-lists/${props.listId}`, {
+		method: "PUT",
+		body: { positions },
+	});
+	await refresh();
+}
+
+async function changeQuantity(index: number, delta: number): Promise<void> {
+	if (!list.value) {
+		return;
+	}
+	await updatePositions(list.value.positions.map((p, i) =>
+		i === index ? { ...p, quantity: Math.max(1, p.quantity + delta) } : p,
+	));
+}
+
+async function removePosition(index: number): Promise<void> {
+	if (!list.value) {
+		return;
+	}
+	await updatePositions(list.value.positions.filter((_, i) => i !== index));
+}
+
+/* ---- edit modal ----------------------------------------------------- */
+const editOpen = ref(false);
+const formName = ref("");
+const formPublic = ref(false);
+const saving = ref(false);
+
+function openEdit(): void {
+	formName.value = list.value?.name ?? "";
+	formPublic.value = list.value?.public ?? false;
+	editOpen.value = true;
+}
+
+async function saveEdit(): Promise<void> {
+	saving.value = true;
+	try {
+		await $fetch(`/api/account/order-lists/${props.listId}`, {
+			method: "PUT",
+			body: { name: formName.value.trim(), public: formPublic.value },
+		});
+		editOpen.value = false;
+		await refresh();
+		toast.add({ title: t("orderLists.saved"), color: "success", icon: icon("success"), duration: 1500 });
+	}
+	catch {
+		toast.add({ title: t("orderLists.error"), color: "error", icon: icon("error") });
+	}
+	finally {
+		saving.value = false;
+	}
+}
+
+async function deleteList(): Promise<void> {
+	try {
+		await $fetch(`/api/account/order-lists/${props.listId}`, { method: "DELETE" });
+		toast.add({ title: t("orderLists.deleted"), color: "success", icon: icon("success"), duration: 1500 });
+		await navigateTo(localePath("/account/order-lists"));
+	}
+	catch {
+		toast.add({ title: t("orderLists.error"), color: "error", icon: icon("error") });
+	}
+}
+
+/* ---- add to cart ----------------------------------------------------- */
+async function addToCart(): Promise<void> {
+	if (!list.value) {
+		return;
+	}
+	let added = 0;
+	for (const position of list.value.positions) {
+		const ok = cart.addItem({
+			id: position.id,
+			name: position.name,
+			image: position.image ?? "",
+			sku: position.sku,
+			price: position.price,
+			taxRate: position.taxRate,
+			unit: position.unit,
+			costCenterId: position.costCenterId,
+			positionTexts: position.positionTexts,
+			customSku: position.customSku,
+			categorySlug: position.categorySlug,
+			subcategorySlug: position.subcategorySlug,
+		});
+		if (ok && position.quantity > 1) {
+			const item = cart.items.find(i => i.id === position.id && !i.requisitionId);
+			if (item) {
+				cart.updateQuantityByKey(cart.keyOf(item), item.quantity + position.quantity - 1);
+			}
+		}
+		if (ok) {
+			added++;
+		}
+	}
+	toast.add({
+		title: t("orderLists.addedToCart", { count: added }),
+		color: "success",
+		icon: icon("success"),
+		duration: 2000,
+	});
+	await navigateTo(to("/cart"));
+}
+</script>
+
+<template>
+	<div>
+		<USkeleton
+			v-if="status === 'pending'"
+			class="h-64 w-full rounded-xl"
+		/>
+
+		<UiFeedbackErrorBoundary
+			v-else-if="error || !list"
+			:title="t('orderLists.notFound')"
+			:show-retry="false"
+		/>
+
+		<div
+			v-else
+			class="space-y-6"
+		>
+			<h1 class="text-2xl font-semibold text-highlighted">
+				{{ list.name }}
+			</h1>
+			<!-- Head -->
+			<div
+				class="border border-(--ui-border) rounded-xl p-4 sm:p-5
+				flex flex-wrap items-center gap-x-8 gap-y-3"
+			>
+				<UBadge
+					:color="list.kind === 'shopping' ? 'primary' : 'info'"
+					variant="subtle"
+					:label="t(`orderLists.kinds.${list.kind}`)"
+				/>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('orderLists.columns.visibility') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ list.public ? t('orderLists.public') : list.owner.name }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('orderLists.columns.updatedAt') }}
+					</p>
+					<p class="text-sm font-medium text-highlighted">
+						{{ formatDate(list.updatedAt) }}
+					</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted">
+						{{ t('orderLists.columns.value') }}
+					</p>
+					<p class="text-sm font-semibold text-highlighted tabular-nums">
+						{{ formatCurrency(listValue) }}
+					</p>
+				</div>
+				<div
+					v-if="isOwner"
+					class="flex items-center gap-2 ms-auto"
+				>
+					<UButton
+						color="neutral"
+						variant="outline"
+						size="sm"
+						tabindex="0"
+						:icon="icon('edit')"
+						:label="t('governance.edit')"
+						@click="openEdit"
+					/>
+					<UButton
+						color="error"
+						variant="soft"
+						size="sm"
+						tabindex="0"
+						:icon="icon('delete')"
+						:label="t('orderLists.delete')"
+						@click="deleteList"
+					/>
+				</div>
+			</div>
+
+			<!-- Positions -->
+			<section class="border border-(--ui-border) rounded-xl overflow-hidden">
+				<h2 class="px-4 sm:px-5 py-3 text-sm font-semibold text-highlighted bg-elevated/60 border-b border-(--ui-border)">
+					{{ t('orderLists.columns.positions') }} ({{ list.positions.length }})
+				</h2>
+				<ul class="divide-y divide-(--ui-border) px-4 sm:px-5">
+					<li
+						v-for="(position, index) in list.positions"
+						:key="`${list.id}-${index}`"
+						class="flex items-center gap-3 py-3"
+					>
+						<span
+							class="w-14 h-14 shrink-0 flex items-center justify-center rounded-lg
+							bg-elevated/60 ring-1 ring-(--ui-border) p-1.5"
+						>
+							<img
+								v-if="position.image"
+								:src="getImage(position.image)"
+								:alt="position.name"
+								class="max-h-full max-w-full object-contain"
+							>
+						</span>
+						<div class="min-w-0 flex-1">
+							<p class="text-sm font-medium text-highlighted truncate">
+								{{ position.name }}
+							</p>
+							<p class="text-xs text-muted">
+								{{ position.sku }}
+								<template v-if="position.customSku">
+									· {{ position.customSku }}
+								</template>
+								· {{ formatCurrency(position.price) }}
+							</p>
+						</div>
+						<div
+							v-if="isOwner"
+							class="flex items-center gap-1 shrink-0"
+						>
+							<UButton
+								:icon="icon('minus')"
+								color="neutral"
+								variant="ghost"
+								size="xs"
+								tabindex="0"
+								:disabled="position.quantity <= 1"
+								:aria-label="t('cart.item.ariaDecreaseQuantity', { name: position.name })"
+								@click="changeQuantity(index, -1)"
+							/>
+							<span class="w-8 text-center text-sm tabular-nums">{{ position.quantity }}</span>
+							<UButton
+								:icon="icon('plus')"
+								color="neutral"
+								variant="ghost"
+								size="xs"
+								tabindex="0"
+								:aria-label="t('cart.item.ariaIncreaseQuantity', { name: position.name })"
+								@click="changeQuantity(index, 1)"
+							/>
+							<UButton
+								:icon="icon('delete')"
+								color="neutral"
+								variant="ghost"
+								size="xs"
+								tabindex="0"
+								:aria-label="t('cart.item.remove')"
+								@click="removePosition(index)"
+							/>
+						</div>
+						<span
+							v-else
+							class="text-sm tabular-nums shrink-0"
+						>{{ position.quantity }}×</span>
+					</li>
+				</ul>
+			</section>
+
+			<UButton
+				v-if="list.kind === 'shopping' && list.positions.length"
+				color="primary"
+				tabindex="0"
+				:icon="icon('cart')"
+				:label="t('cart.requisition.load')"
+				@click="addToCart"
+			/>
+		</div>
+
+		<!-- Edit modal -->
+		<UModal
+			v-model:open="editOpen"
+			:title="t('orderLists.editTitle')"
+		>
+			<template #body>
+				<div class="space-y-4">
+					<UFormField
+						:label="t('orderLists.columns.name')"
+						required
+					>
+						<UInput
+							v-model="formName"
+							class="w-full"
+						/>
+					</UFormField>
+					<UCheckbox
+						v-model="formPublic"
+						:label="t('orderLists.shareWithOrg')"
+						:description="t('orderLists.shareHint')"
+					/>
+				</div>
+			</template>
+			<template #footer>
+				<UButton
+					color="neutral"
+					variant="ghost"
+					tabindex="0"
+					:label="t('cart.item.cancel')"
+					@click="editOpen = false"
+				/>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:disabled="!formName.trim()"
+					:loading="saving"
+					:label="t('governance.save')"
+					@click="saveEdit"
+				/>
+			</template>
+		</UModal>
+	</div>
+</template>

package/app/components/account/orderlists/AccountOrderListsTable.vue

@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import type { TableColumn } from "@nuxt/ui";
+
+import type { OrderList, OrderListKind } from "../../../interfaces/account/order-lists";
+
+/**
+ * Order lists overview (account pattern): data table with the Add modal;
+ * details (position management, edit, delete) live on their own page.
+ * Search, kind filter pills and sortable columns per datatable-ux.
+ */
+const { icon } = useIcons();
+const { t, d } = useI18n();
+const localePath = useLocalePath();
+const { to } = useAppUrl();
+const toast = useToast();
+const cart = useCartStore();
+const { formatCurrency } = useCartSummaryFormatting();
+const { tableUi } = useDataTable();
+
+const { data: lists, status, refresh } = useFetch<OrderList[]>("/api/account/order-lists", {
+	key: "account-order-lists",
+	default: () => [],
+});
+
+const listValue = (list: OrderList): number =>
+	Math.round(list.positions.reduce((sum, p) => sum + p.price * p.quantity, 0) * 100) / 100;
+
+/* ---- search + kind filter --------------------------------------------- */
+const search = ref("");
+const kindFilter = ref<string>("all");
+
+const searched = computed(() => {
+	const query = search.value.trim().toLowerCase();
+	if (!query) {
+		return lists.value ?? [];
+	}
+	return (lists.value ?? []).filter(list =>
+		[list.name, list.owner.name].some(value => value.toLowerCase().includes(query)),
+	);
+});
+
+const filtered = computed(() =>
+	kindFilter.value === "all"
+		? searched.value
+		: searched.value.filter(list => list.kind === kindFilter.value),
+);
+
+const LIST_KINDS: OrderListKind[] = ["shopping", "label"];
+
+const filterItems = computed(() => [
+	{ value: "all", label: t("table.filterAll"), count: searched.value.length },
+	...LIST_KINDS.map(value => ({
+		value,
+		label: t(`orderLists.kinds.${value}`),
+		count: searched.value.filter(list => list.kind === value).length,
+	})),
+]);
+
+/* ---- columns + sorting ------------------------------------------------ */
+const sorting = ref([{ id: "updatedAt", desc: true }]);
+
+const columns = computed<TableColumn<OrderList>[]>(() => [
+	{ accessorKey: "name", header: t("orderLists.columns.name") },
+	{ id: "kind", header: t("orderLists.columns.kind"), enableSorting: false },
+	{
+		id: "positions",
+		accessorFn: row => row.positions.length,
+		header: t("orderLists.columns.positions"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{
+		id: "value",
+		accessorFn: row => listValue(row),
+		header: t("orderLists.columns.value"),
+		meta: { class: { th: "text-right", td: "text-right" } },
+	},
+	{ id: "visibility", header: t("orderLists.columns.visibility"), enableSorting: false },
+	{ accessorKey: "updatedAt", header: t("orderLists.columns.updatedAt") },
+	{ id: "actions", header: "", enableSorting: false },
+]);
+
+const formatDate = (value: string) => d(new Date(value), { dateStyle: "medium" });
+
+/* ---- create / edit modal ------------------------------------------ */
+const modalOpen = ref(false);
+const formName = ref("");
+const formKind = ref<OrderListKind>("shopping");
+const formPublic = ref(false);
+const saving = ref(false);
+
+function openCreate(): void {
+	formName.value = "";
+	formKind.value = "shopping";
+	formPublic.value = false;
+	modalOpen.value = true;
+}
+
+async function saveList(): Promise<void> {
+	saving.value = true;
+	try {
+		await $fetch("/api/account/order-lists", {
+			method: "POST",
+			body: { name: formName.value.trim(), kind: formKind.value, public: formPublic.value },
+		});
+		modalOpen.value = false;
+		await refresh();
+		toast.add({ title: t("orderLists.saved"), color: "success", icon: icon("success"), duration: 1500 });
+	}
+	catch {
+		toast.add({ title: t("orderLists.error"), color: "error", icon: icon("error") });
+	}
+	finally {
+		saving.value = false;
+	}
+}
+
+/* ---- add to cart ---------------------------------------------------- */
+async function addToCart(list: OrderList): Promise<void> {
+	let added = 0;
+	for (const position of list.positions) {
+		const ok = cart.addItem({
+			id: position.id,
+			name: position.name,
+			image: position.image ?? "",
+			sku: position.sku,
+			price: position.price,
+			taxRate: position.taxRate,
+			unit: position.unit,
+			costCenterId: position.costCenterId,
+			positionTexts: position.positionTexts,
+			customSku: position.customSku,
+			categorySlug: position.categorySlug,
+			subcategorySlug: position.subcategorySlug,
+		});
+		if (ok && position.quantity > 1) {
+			const item = cart.items.find(i => i.id === position.id && !i.requisitionId);
+			if (item) {
+				cart.updateQuantityByKey(cart.keyOf(item), item.quantity + position.quantity - 1);
+			}
+		}
+		if (ok) {
+			added++;
+		}
+	}
+	toast.add({
+		title: t("orderLists.addedToCart", { count: added }),
+		color: "success",
+		icon: icon("success"),
+		duration: 2000,
+	});
+	await navigateTo(to("/cart"));
+}
+</script>
+
+<template>
+	<div>
+		<UiTableToolbar
+			v-model:search="search"
+			v-model:filter="kindFilter"
+			:search-placeholder="t('orderLists.searchPlaceholder')"
+			:filter-items="filterItems"
+		>
+			<template #actions>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('plus')"
+					:label="t('orderLists.add')"
+					@click="openCreate"
+				/>
+			</template>
+		</UiTableToolbar>
+
+		<UTable
+			v-model:sorting="sorting"
+			:data="filtered"
+			:columns="columns"
+			:loading="status === 'pending'"
+			:ui="tableUi"
+		>
+			<template #name-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('orderLists.columns.name')"
+				/>
+			</template>
+			<template #positions-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('orderLists.columns.positions')"
+				/>
+			</template>
+			<template #value-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('orderLists.columns.value')"
+				/>
+			</template>
+			<template #updatedAt-header="{ column }">
+				<UiTableSortButton
+					:column="column"
+					:label="t('orderLists.columns.updatedAt')"
+				/>
+			</template>
+
+			<template #name-cell="{ row }">
+				<ULink
+					class="font-semibold text-highlighted hover:text-primary transition-colors"
+					:to="localePath(`/account/order-lists/${row.original.id}`)"
+				>
+					{{ row.original.name }}
+				</ULink>
+			</template>
+			<template #kind-cell="{ row }">
+				<UBadge
+					:color="row.original.kind === 'shopping' ? 'primary' : 'info'"
+					variant="subtle"
+					size="sm"
+					:label="t(`orderLists.kinds.${row.original.kind}`)"
+				/>
+			</template>
+			<template #positions-cell="{ row }">
+				<span class="tabular-nums">{{ row.original.positions.length }}</span>
+			</template>
+			<template #value-cell="{ row }">
+				<span class="tabular-nums text-highlighted">{{ formatCurrency(listValue(row.original)) }}</span>
+			</template>
+			<template #visibility-cell="{ row }">
+				<span class="inline-flex items-center gap-1.5 text-sm text-muted">
+					<UIcon
+						:name="icon(row.original.public ? 'users' : 'user')"
+						class="size-4"
+					/>
+					{{ row.original.public
+						? t('orderLists.public')
+						: row.original.owner.name }}
+				</span>
+			</template>
+			<template #updatedAt-cell="{ row }">
+				{{ formatDate(row.original.updatedAt) }}
+			</template>
+			<template #actions-cell="{ row }">
+				<div class="flex items-center justify-end gap-1">
+					<UTooltip :text="t('orderLists.details')">
+						<UButton
+							color="neutral"
+							variant="ghost"
+							size="sm"
+							tabindex="0"
+							:icon="icon('eye')"
+							:aria-label="t('orderLists.details')"
+							:to="localePath(`/account/order-lists/${row.original.id}`)"
+						/>
+					</UTooltip>
+					<UTooltip
+						v-if="row.original.kind === 'shopping' && row.original.positions.length"
+						:text="t('cart.requisition.load')"
+					>
+						<UButton
+							color="primary"
+							variant="soft"
+							size="sm"
+							tabindex="0"
+							:icon="icon('cart')"
+							:aria-label="t('cart.requisition.load')"
+							@click="addToCart(row.original)"
+						/>
+					</UTooltip>
+				</div>
+			</template>
+
+			<template #loading>
+				<div class="space-y-3 py-2">
+					<USkeleton
+						v-for="index in 4"
+						:key="index"
+						class="h-9 w-full"
+					/>
+				</div>
+			</template>
+			<template #empty>
+				<UiFeedbackEmptyState
+					v-if="search || kindFilter !== 'all'"
+					:icon="icon('no-results')"
+					:title="t('table.noResults.title')"
+					:description="t('table.noResults.description')"
+				/>
+				<UiFeedbackEmptyState
+					v-else
+					:icon="icon('empty')"
+					:title="t('orderLists.empty.title')"
+					:description="t('orderLists.empty.description')"
+				/>
+			</template>
+		</UTable>
+
+		<!-- Create / edit modal -->
+		<UModal
+			v-model:open="modalOpen"
+			:title="t('orderLists.addTitle')"
+		>
+			<template #body>
+				<div class="space-y-4">
+					<UFormField
+						:label="t('orderLists.columns.name')"
+						required
+					>
+						<UInput
+							v-model="formName"
+							class="w-full"
+							:placeholder="t('orderLists.namePlaceholder')"
+						/>
+					</UFormField>
+					<UFormField
+						:label="t('orderLists.columns.kind')"
+					>
+						<URadioGroup
+							v-model="formKind"
+							orientation="horizontal"
+							:items="[
+								{ value: 'shopping', label: t('orderLists.kinds.shopping') },
+								{ value: 'label', label: t('orderLists.kinds.label') },
+							]"
+						/>
+					</UFormField>
+					<UCheckbox
+						v-model="formPublic"
+						:label="t('orderLists.shareWithOrg')"
+						:description="t('orderLists.shareHint')"
+					/>
+				</div>
+			</template>
+			<template #footer>
+				<UButton
+					color="neutral"
+					variant="ghost"
+					tabindex="0"
+					:label="t('cart.item.cancel')"
+					@click="modalOpen = false"
+				/>
+				<UButton
+					color="primary"
+					tabindex="0"
+					:disabled="!formName.trim()"
+					:loading="saving"
+					:label="t('governance.save')"
+					@click="saveList"
+				/>
+			</template>
+		</UModal>
+	</div>
+</template>