@revenexx/cover 0.1.0

package/app/components/account/directorder/AccountDirectOrder.vue

@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import { productsApi } from "../../../api/products";
+import { getBaseUnitPrice, getPriceTiers, type Product } from "../../../composables/useProducts";
+
+/**
+ * Direct order, structured after the Paul Horn IS8 pattern: three tabs —
+ * quick row entry (article no., customer article no., quantity, resolved
+ * name), whole-order file upload (template download per format) and bulk
+ * capture via clipboard paste with a selectable separator.
+ */
+const props = defineProps<{
+	/** Embedded in a modal (cart page): emit instead of navigating. */
+	embedded?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "added"): void;
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const { to } = useAppUrl();
+const { locale } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+
+const tab = ref("entry");
+const tabs = computed(() => [
+	{ value: "entry", label: t("directOrder.tabs.entry") },
+	{ value: "upload", label: t("directOrder.tabs.upload") },
+	{ value: "paste", label: t("directOrder.tabs.paste") },
+]);
+
+const { data: products } = useFetch<Product[]>(productsApi.list(), {
+	key: "direct-order-products",
+	headers: computed(() => ({ "x-locale": locale.value })),
+	server: false,
+	lazy: true,
+	default: () => [],
+});
+
+function findProduct(sku: string): Product | undefined {
+	const needle = sku.trim().toLowerCase();
+	if (!needle) {
+		return undefined;
+	}
+	return (products.value ?? []).find(p => p.sku.toLowerCase() === needle)
+		?? (products.value ?? []).find(p => p.sku.toLowerCase().includes(needle));
+}
+
+/* ---- tab 1: quick row entry ----------------------------------------- */
+interface Row {
+	sku: string;
+	customSku: string;
+	quantity: number;
+}
+
+const emptyRow = (): Row => ({ sku: "", customSku: "", quantity: 1 });
+const rows = ref<Row[]>([emptyRow()]);
+
+const resolvedRows = computed(() => rows.value.map((row) => {
+	const product = row.sku.trim() ? findProduct(row.sku) : undefined;
+	return {
+		...row,
+		product,
+		state: !row.sku.trim() ? "empty" as const : product ? "found" as const : "unknown" as const,
+	};
+}));
+
+const validRowCount = computed(() =>
+	resolvedRows.value.filter(row => row.state === "found").length,
+);
+
+function addRow(): void {
+	rows.value.push(emptyRow());
+}
+
+function removeRow(index: number): void {
+	rows.value.splice(index, 1);
+	if (rows.value.length === 0) {
+		addRow();
+	}
+}
+
+/* ---- tab 2: file upload ----------------------------------------------- */
+type UploadFormat = "xlsx" | "csv";
+const uploadFormat = ref<UploadFormat>("xlsx");
+
+const formatItems = computed(() => ([
+	{ value: "xlsx", label: t("directOrder.upload.formats.xlsx") },
+	{ value: "csv", label: t("directOrder.upload.formats.csv") },
+]));
+
+const templateUrl = computed(() => `/templates/direct-order-template.${uploadFormat.value}`);
+
+const uploadText = ref("");
+const uploadFileName = ref("");
+
+function onFileUpload(event: Event): void {
+	const file = (event.target as HTMLInputElement).files?.[0];
+	if (!file) {
+		return;
+	}
+	uploadFileName.value = file.name;
+	if (file.name.toLowerCase().endsWith(".xlsx")) {
+		uploadText.value = "";
+		toast.add({
+			title: t("directOrder.upload.xlsxDemoHint"),
+			color: "info",
+			icon: icon("info"),
+			duration: 4000,
+		});
+		return;
+	}
+	const reader = new FileReader();
+	reader.onload = () => {
+		uploadText.value = String(reader.result ?? "");
+	};
+	reader.readAsText(file);
+}
+
+const parsedUpload = computed(() => parseLines(uploadText.value, /[;,\t]/));
+const uploadFoundCount = computed(() => parsedUpload.value.filter(r => r.state === "found").length);
+
+/* ---- tab 3: bulk capture (paste) -------------------------------------- */
+type Separator = "comma" | "semicolon";
+const separator = ref<Separator>("comma");
+
+const separatorItems = computed(() => ([
+	{ value: "comma", label: t("directOrder.paste.separators.comma") },
+	{ value: "semicolon", label: t("directOrder.paste.separators.semicolon") },
+]));
+
+const separatorChar = computed(() => (separator.value === "comma" ? "," : ";"));
+
+const pastePlaceholder = computed(() => {
+	const sep = separatorChar.value;
+	return [
+		t("directOrder.columns.sku"),
+		t("directOrder.columns.customSku"),
+		t("directOrder.columns.quantity"),
+	].join(sep);
+});
+
+const pasteText = ref("");
+
+const parsedPaste = computed(() =>
+	parseLines(pasteText.value, new RegExp(`[${separatorChar.value}\\t]`)));
+const pasteFoundCount = computed(() => parsedPaste.value.filter(r => r.state === "found").length);
+
+/* ---- shared parsing + add to cart -------------------------------------- */
+interface ParsedLine {
+	sku: string;
+	customSku: string;
+	quantity: number;
+	product: Product | undefined;
+	state: "found" | "unknown";
+}
+
+function parseLines(text: string, splitter: RegExp): ParsedLine[] {
+	return text
+		.split(/\r?\n/)
+		.map(line => line.trim())
+		.filter(Boolean)
+		.map((line) => {
+			const [sku = "", customSku = "", qty = "1"] = line.split(splitter).map(part => part.trim());
+			const product = findProduct(sku);
+			return {
+				sku,
+				customSku,
+				quantity: Math.max(1, parseInt(qty, 10) || 1),
+				product,
+				state: product ? "found" as const : "unknown" as const,
+			};
+		});
+}
+
+function buildTiers(prices: { [key: string]: number }[]) {
+	return getPriceTiers(prices).map(tier => ({
+		minQuantity: tier.quantity,
+		unitPrice: tier.unitCents / 100,
+	}));
+}
+
+function addProductToCart(product: Product, quantity: number, customSku?: string): boolean {
+	const price = getBaseUnitPrice(product.prices);
+	if (price === null) {
+		return false;
+	}
+	const ok = cart.addItem({
+		id: product.id,
+		name: product.name,
+		image: product.image,
+		sku: product.sku,
+		price,
+		taxRate: product.tax.rate,
+		priceTiers: buildTiers(product.prices),
+		categorySlug: product.categorySlug,
+		subcategorySlug: product.subcategorySlug,
+		...(customSku?.trim() ? { customSku: customSku.trim() } : {}),
+		...(typeof product.maxOrderQuantity === "number"
+			? { maxOrderQuantity: product.maxOrderQuantity }
+			: {}),
+	});
+	if (ok && quantity > 1) {
+		const item = cart.items.find(i => i.id === product.id && !i.requisitionId);
+		if (item) {
+			cart.updateQuantityByKey(cart.keyOf(item), item.quantity + quantity - 1);
+		}
+	}
+	return ok;
+}
+
+async function submitParsed(lines: ParsedLine[]): Promise<void> {
+	let added = 0;
+	for (const line of lines) {
+		if (line.state === "found" && line.product) {
+			if (addProductToCart(line.product, line.quantity, line.customSku)) {
+				added++;
+			}
+		}
+	}
+	await finish(added);
+}
+
+async function submitRows(): Promise<void> {
+	let added = 0;
+	for (const row of resolvedRows.value) {
+		if (row.state === "found" && row.product) {
+			if (addProductToCart(row.product, Math.max(1, row.quantity || 1), row.customSku)) {
+				added++;
+			}
+		}
+	}
+	await finish(added);
+	rows.value = [emptyRow()];
+}
+
+async function submitUpload(): Promise<void> {
+	await submitParsed(parsedUpload.value);
+	uploadText.value = "";
+	uploadFileName.value = "";
+}
+
+async function submitPaste(): Promise<void> {
+	await submitParsed(parsedPaste.value);
+	pasteText.value = "";
+}
+
+async function finish(added: number): Promise<void> {
+	toast.add({
+		title: t("directOrder.added", { count: added }),
+		color: added ? "success" : "warning",
+		icon: icon(added ? "success" : "warning"),
+		duration: 2000,
+	});
+	if (!added) {
+		return;
+	}
+	if (props.embedded) {
+		emit("added");
+	}
+	else {
+		await navigateTo(to("/cart"));
+	}
+}
+</script>
+
+<template>
+	<div class="space-y-6">
+		<UTabs
+			v-model="tab"
+			variant="link"
+			:items="tabs"
+			:content="false"
+		/>
+
+		<!-- Tab 1: quick row entry -->
+		<div
+			v-if="tab === 'entry'"
+			class="space-y-4"
+		>
+			<div class="rounded-xl border border-(--ui-border) overflow-x-auto">
+				<table class="w-full text-sm">
+					<thead>
+						<tr class="text-left text-xs uppercase tracking-wide text-muted bg-elevated/60">
+							<th class="py-2.5 px-3 font-semibold">
+								{{ t('directOrder.columns.sku') }}
+							</th>
+							<th class="py-2.5 px-3 font-semibold">
+								{{ t('directOrder.columns.customSku') }}
+							</th>
+							<th class="py-2.5 px-3 font-semibold w-36">
+								{{ t('directOrder.columns.quantity') }}
+							</th>
+							<th class="py-2.5 px-3 font-semibold">
+								{{ t('directOrder.columns.name') }}
+							</th>
+							<th class="w-12" />
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-(--ui-border)">
+						<tr
+							v-for="(row, index) in resolvedRows"
+							:key="index"
+						>
+							<td class="py-2 px-3">
+								<UInput
+									v-model="rows[index]!.sku"
+									size="sm"
+									class="w-full min-w-40"
+									:placeholder="t('directOrder.skuPlaceholder')"
+								/>
+							</td>
+							<td class="py-2 px-3">
+								<UInput
+									v-model="rows[index]!.customSku"
+									size="sm"
+									class="w-full min-w-40"
+									:placeholder="t('directOrder.customSkuPlaceholder')"
+								/>
+							</td>
+							<td class="py-2 px-3">
+								<UInputNumber
+									v-model="rows[index]!.quantity"
+									size="sm"
+									:min="1"
+									class="w-32"
+								/>
+							</td>
+							<td class="py-2 px-3">
+								<span
+									v-if="row.state === 'found'"
+									class="inline-flex items-center gap-1.5 text-success"
+								>
+									<UIcon
+										:name="icon('success')"
+										class="size-4"
+									/>
+									<span class="truncate text-highlighted">{{ row.product!.name }}</span>
+								</span>
+								<span
+									v-else-if="row.state === 'unknown'"
+									class="inline-flex items-center gap-1.5 text-error text-xs"
+								>
+									<UIcon
+										:name="icon('error')"
+										class="size-4"
+									/>
+									{{ t('directOrder.unknownSku') }}
+								</span>
+								<span
+									v-else
+									class="text-dimmed"
+								>—</span>
+							</td>
+							<td class="py-2 px-2 text-right">
+								<UTooltip :text="t('directOrder.removeRow')">
+									<UButton
+										:icon="icon('delete')"
+										color="neutral"
+										variant="ghost"
+										size="xs"
+										tabindex="0"
+										:aria-label="t('directOrder.removeRow')"
+										@click="removeRow(index)"
+									/>
+								</UTooltip>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="flex flex-wrap items-center gap-3">
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('cart')"
+					:disabled="validRowCount === 0"
+					:label="t('directOrder.submitRows')"
+					@click="submitRows"
+				/>
+				<UButton
+					color="neutral"
+					variant="soft"
+					tabindex="0"
+					:icon="icon('plus')"
+					:label="t('directOrder.addRow')"
+					@click="addRow"
+				/>
+			</div>
+		</div>
+
+		<!-- Tab 2: whole-order file upload -->
+		<div
+			v-else-if="tab === 'upload'"
+			class="space-y-4"
+		>
+			<div class="text-sm text-muted space-y-1">
+				<p>{{ t('directOrder.upload.intro1') }}</p>
+				<p>{{ t('directOrder.upload.intro2') }}</p>
+				<p>{{ t('directOrder.upload.intro3') }}</p>
+			</div>
+
+			<div class="flex flex-wrap items-center gap-3">
+				<USelect
+					v-model="uploadFormat"
+					:items="formatItems"
+					:aria-label="t('directOrder.upload.format')"
+					class="w-72"
+				/>
+				<UButton
+					color="neutral"
+					variant="soft"
+					tabindex="0"
+					:trailing-icon="icon('chevron-right')"
+					:label="t('directOrder.upload.template')"
+					:to="templateUrl"
+					external
+					download
+				/>
+			</div>
+
+			<label
+				class="flex items-center gap-3 w-full sm:max-w-lg p-3 rounded-lg border border-(--ui-border)
+				text-sm cursor-pointer hover:border-(--ui-border-accented) transition-colors"
+			>
+				<UIcon
+					:name="icon('upload')"
+					class="size-5 text-primary shrink-0"
+				/>
+				<span
+					class="truncate"
+					:class="uploadFileName ? 'text-highlighted' : 'text-muted'"
+				>
+					{{ uploadFileName || t('directOrder.upload.formats.' + uploadFormat) }}
+				</span>
+				<input
+					type="file"
+					:accept="uploadFormat === 'xlsx' ? '.xlsx' : '.csv,.txt'"
+					class="hidden"
+					@change="onFileUpload"
+				>
+			</label>
+
+			<div class="flex items-center gap-3">
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('cart')"
+					:disabled="uploadFoundCount === 0"
+					:label="t('directOrder.upload.submit')"
+					@click="submitUpload"
+				/>
+				<span
+					v-if="parsedUpload.length"
+					class="text-xs text-muted"
+				>
+					{{ t('directOrder.parseSummary', {
+						found: uploadFoundCount,
+						total: parsedUpload.length,
+					}) }}
+				</span>
+			</div>
+		</div>
+
+		<!-- Tab 3: bulk capture via paste -->
+		<div
+			v-else
+			class="space-y-4"
+		>
+			<div class="text-sm text-muted space-y-1">
+				<p>{{ t('directOrder.paste.intro1') }}</p>
+				<p>{{ t('directOrder.paste.intro2') }}</p>
+			</div>
+
+			<USelect
+				v-model="separator"
+				:items="separatorItems"
+				:aria-label="t('directOrder.paste.separator')"
+				class="w-72"
+			/>
+
+			<UTextarea
+				v-model="pasteText"
+				:rows="6"
+				class="w-full font-mono"
+				:placeholder="pastePlaceholder"
+			/>
+
+			<div class="flex items-center gap-3">
+				<UButton
+					color="primary"
+					tabindex="0"
+					:icon="icon('cart')"
+					:disabled="pasteFoundCount === 0"
+					:label="t('directOrder.paste.submit')"
+					@click="submitPaste"
+				/>
+				<span
+					v-if="parsedPaste.length"
+					class="text-xs text-muted"
+				>
+					{{ t('directOrder.parseSummary', {
+						found: pasteFoundCount,
+						total: parsedPaste.length,
+					}) }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>