@revenexx/cover 0.1.0

package/app/components/auth/AuthResetPasswordPanel.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { ResetPasswordFormState } from "../../interfaces/auth";
+
+/**
+ * Password reset panel in the focus-page design. Confirms the recovery
+ * (userId + secret from the mail link) via the auth store; the consuming
+ * page handles success feedback and navigation via the success emit.
+ */
+const props = defineProps<{
+	userId: string;
+	secret: string;
+}>();
+
+const emit = defineEmits<{
+	(e: "success"): void;
+}>();
+
+const { t } = useI18n();
+const localePath = useLocalePath();
+const auth = useAuthStore();
+const { loading, error } = storeToRefs(auth);
+
+const invalidLink = computed(() => !props.userId || !props.secret);
+
+const state = reactive<ResetPasswordFormState>({
+	password: "",
+	passwordConfirm: "",
+});
+
+const { validate } = useFormValidation<ResetPasswordFormState>("resetPassword");
+
+async function onSubmit(): Promise<void> {
+	try {
+		await auth.confirmRecovery(props.userId, props.secret, state.password);
+		emit("success");
+	}
+	catch {
+		// error is set on the store and rendered by UAlert
+	}
+}
+</script>
+
+<template>
+	<div class="bg-elevated py-6 px-8 rounded-lg">
+		<h2 class="text-xl font-semibold text-highlighted">
+			{{ t('auth.resetPassword.title') }}
+		</h2>
+
+		<UAlert
+			v-if="invalidLink"
+			class="mt-6"
+			color="error"
+			variant="soft"
+			:title="t('auth.resetPassword.errors.invalidLink')"
+		/>
+
+		<UForm
+			v-else
+			:state="state"
+			:validate="validate"
+			class="space-y-4 pt-6"
+			@submit="onSubmit"
+		>
+			<UFormField
+				:label="t('auth.resetPassword.fields.password')"
+				name="password"
+				required
+			>
+				<UiFormsPasswordInput
+					v-model="state.password"
+					autocomplete="new-password"
+					:placeholder="t('auth.resetPassword.fields.passwordPlaceholder')"
+					show-strength
+				/>
+			</UFormField>
+
+			<UFormField
+				:label="t('auth.resetPassword.fields.passwordConfirm')"
+				name="passwordConfirm"
+				required
+			>
+				<UiFormsPasswordInput
+					v-model="state.passwordConfirm"
+					autocomplete="new-password"
+					:placeholder="t('auth.resetPassword.fields.passwordConfirmPlaceholder')"
+				/>
+			</UFormField>
+
+			<UAlert
+				v-if="error"
+				color="error"
+				variant="soft"
+				:title="t(error)"
+			/>
+
+			<UButton
+				type="submit"
+				color="primary"
+				variant="solid"
+				block
+				:loading="loading"
+				:label="t('auth.resetPassword.submit')"
+			/>
+
+			<div class="text-center">
+				<NuxtLink
+					:to="localePath('/login')"
+					class="text-sm text-primary hover:underline"
+				>
+					{{ t('auth.forgotPassword.backToLogin') }}
+				</NuxtLink>
+			</div>
+		</UForm>
+	</div>
+</template>

package/app/components/cart/CartButton.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { icon } = useIcons();
+
+const { t } = useI18n();
+const cart = useCartStore();
+const { itemCount } = storeToRefs(cart);
+const { openCart } = cart;
+const { to, isCartOrCheckoutPage } = useAppUrl();
+
+// On the cart page the mini-cart drawer is disabled (it would just mirror
+// the page) — the button links to the cart instead of opening the drawer.
+const cartTo = computed(() => (isCartOrCheckoutPage.value ? to("/cart") : undefined));
+
+const cartLabel = computed(() =>
+	t("nav.cartButton", itemCount.value, { count: itemCount.value }),
+);
+const positionsLabel = computed(() =>
+	t("header.cartPositions", itemCount.value, { count: itemCount.value }),
+);
+</script>
+
+<template>
+	<div class="relative">
+		<LayoutHeaderActionItem
+			:icon="icon('orders')"
+			:label="t('header.cart')"
+			:aria-label="cartLabel"
+			:title="positionsLabel"
+			:to="cartTo"
+			@click="openCart"
+		/>
+		<UBadge
+			v-if="itemCount > 0"
+			:label="String(itemCount)"
+			color="primary"
+			variant="solid"
+			size="xs"
+			class="absolute top-0 left-7 xl:left-auto xl:-right-1 min-w-4 h-4 flex items-center justify-center px-1
+			pointer-events-none"
+		/>
+	</div>
+</template>

package/app/components/cart/actions/CartCostCenterModal.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+/**
+ * Cost center picker for one or many positions (spec: Kostenstellen
+ * bearbeiten). Full-text search over code and name, the currently
+ * assigned cost center sorts first, "no cost center" only when the
+ * organization does not require one.
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+const props = defineProps<{
+	lineKeys: string[];
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const cart = useCartStore();
+const { settings, costCenters } = useB2BContext();
+
+const query = ref("");
+const selectedId = ref<string | null>(null);
+
+const NONE = "__none__";
+
+const currentId = computed(() => {
+	const items = cart.items.filter(i => props.lineKeys.includes(cart.keyOf(i)));
+	const ids = new Set(items.map(i => i.costCenterId ?? NONE));
+	return ids.size === 1 ? [...ids][0]! : null;
+});
+
+watch(open, (isOpen) => {
+	if (isOpen) {
+		query.value = "";
+		selectedId.value = currentId.value;
+	}
+});
+
+const filtered = computed(() => {
+	const q = query.value.trim().toLowerCase();
+	const list = costCenters.value.filter(cc =>
+		!q || cc.code.toLowerCase().includes(q) || cc.label.toLowerCase().includes(q),
+	);
+	// Currently assigned cost center always sorts first (spec).
+	return [...list].sort((a, b) =>
+		Number(b.id === currentId.value) - Number(a.id === currentId.value),
+	);
+});
+
+const allowNone = computed(() => !settings.value?.costCenters.required);
+
+function apply(): void {
+	if (selectedId.value === null) {
+		return;
+	}
+	cart.setCostCenter(
+		props.lineKeys,
+		selectedId.value === NONE ? undefined : selectedId.value,
+	);
+	open.value = false;
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('cart.costCenter.title', lineKeys.length, { count: lineKeys.length })"
+	>
+		<template #body>
+			<div class="space-y-3">
+				<UInput
+					v-model="query"
+					:icon="icon('search')"
+					:placeholder="t('cart.costCenter.searchPlaceholder')"
+					class="w-full"
+				/>
+				<URadioGroup
+					v-model="selectedId"
+					:items="[
+						...filtered.map(cc => ({
+							value: cc.id,
+							label: `${cc.code} — ${cc.label}`,
+						})),
+						...(allowNone ? [{ value: NONE, label: t('cart.costCenter.none') }] : []),
+					]"
+				/>
+				<p
+					v-if="filtered.length === 0"
+					class="text-sm text-muted"
+				>
+					{{ t('cart.costCenter.noResults', { query }) }}
+				</p>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="selectedId === null"
+				:label="t('cart.costCenter.apply')"
+				@click="apply"
+			/>
+		</template>
+	</UModal>
+</template>

package/app/components/cart/actions/CartExportModal.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Cart export (spec: Warenkorb exportieren) — CSV download with the
+ * standardized column structure; XLSX follows once a writer is decided.
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+const { t } = useI18n();
+const { locale } = useI18n();
+const toast = useToast();
+const { icon } = useIcons();
+const cart = useCartStore();
+
+const exporting = ref(false);
+
+async function exportCsv(): Promise<void> {
+	exporting.value = true;
+	try {
+		const csv = await $fetch<string>("/api/cart/export", {
+			method: "POST",
+			headers: { "x-locale": locale.value },
+			body: { items: cart.items },
+		});
+		const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "cart-export.csv";
+		link.click();
+		URL.revokeObjectURL(url);
+		open.value = false;
+	}
+	catch {
+		toast.add({
+			title: t("cart.export.error"),
+			color: "error",
+			icon: icon("error"),
+		});
+	}
+	finally {
+		exporting.value = false;
+	}
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('cart.export.title')"
+	>
+		<template #body>
+			<p class="text-sm text-muted">
+				{{ t('cart.export.description') }}
+			</p>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:loading="exporting"
+				:label="t('cart.export.csv')"
+				@click="exportCsv"
+			/>
+			<UTooltip :text="t('cart.export.xlsxSoon')">
+				<UButton
+					color="primary"
+					variant="soft"
+					tabindex="0"
+					disabled
+					:label="t('cart.export.xlsx')"
+				/>
+			</UTooltip>
+		</template>
+	</UModal>
+</template>

package/app/components/cart/actions/CartPositionTextsModal.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { CART_POSITION_TEXT_COUNT } from "../../../interfaces/cart-item";
+
+/**
+ * Position texts and own article number editor (spec: Positionstexte und
+ * eigene Artikelnummer). The own article number is per-position only and
+ * therefore hidden in bulk mode.
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+const props = defineProps<{
+	lineKeys: string[];
+}>();
+
+const { t } = useI18n();
+const cart = useCartStore();
+const { role } = useB2BContext();
+
+const isBulk = computed(() => props.lineKeys.length > 1);
+
+const texts = ref<string[]>([]);
+const customSku = ref("");
+
+watch(open, (isOpen) => {
+	if (!isOpen) {
+		return;
+	}
+	const items = cart.items.filter(i => props.lineKeys.includes(cart.keyOf(i)));
+	const first = items[0];
+	texts.value = Array.from(
+		{ length: CART_POSITION_TEXT_COUNT },
+		(_, i) => (!isBulk.value ? first?.positionTexts?.[i] ?? "" : ""),
+	);
+	customSku.value = !isBulk.value ? first?.customSku ?? "" : "";
+});
+
+function save(): void {
+	cart.setPositionDetails(props.lineKeys, {
+		positionTexts: texts.value,
+		...(isBulk.value ? {} : { customSku: customSku.value }),
+	});
+	open.value = false;
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('cart.positionTexts.title', lineKeys.length, { count: lineKeys.length })"
+	>
+		<template #body>
+			<div class="space-y-3">
+				<UFormField
+					v-if="role && !isBulk"
+					:label="t('cart.positionTexts.customSku')"
+				>
+					<UInput
+						v-model="customSku"
+						class="w-full"
+						:placeholder="t('cart.positionTexts.customSkuPlaceholder')"
+					/>
+				</UFormField>
+				<UFormField
+					v-for="index in CART_POSITION_TEXT_COUNT"
+					:key="index"
+					:label="t('cart.positionTexts.textLabel', { index })"
+				>
+					<UInput
+						v-model="texts[index - 1]"
+						class="w-full"
+						maxlength="80"
+					/>
+				</UFormField>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:label="t('cart.positionTexts.save')"
+				@click="save"
+			/>
+		</template>
+	</UModal>
+</template>

package/app/components/cart/actions/CartSaveToListModal.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { OrderList, OrderListKind, OrderListPosition } from "../../../interfaces/account/order-lists";
+
+/**
+ * Saves positions to a shopping or label list (account order lists BFF).
+ * The whole position is saved — article, quantity, texts, cost center.
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+const props = defineProps<{
+	lineKeys: string[];
+}>();
+
+const { icon } = useIcons();
+const { t } = useI18n();
+const toast = useToast();
+const cart = useCartStore();
+const authStore = useAuthStore();
+
+type Mode = "existing" | "new";
+
+const kind = ref<OrderListKind>("shopping");
+const mode = ref<Mode>("existing");
+const listName = ref("");
+const selectedListId = ref<string | null>(null);
+const saving = ref(false);
+
+const { data: lists, refresh } = useFetch<OrderList[]>("/api/account/order-lists", {
+	key: "account-order-lists",
+	server: false,
+	lazy: true,
+	immediate: false,
+	default: () => [],
+});
+
+const ownLists = computed(() =>
+	(lists.value ?? []).filter(l => l.owner.id === authStore.user?.$id && l.kind === kind.value),
+);
+
+watch(open, async (isOpen) => {
+	if (!isOpen) {
+		return;
+	}
+	listName.value = "";
+	await refresh();
+	const first = ownLists.value[0];
+	selectedListId.value = first?.id ?? null;
+	mode.value = first ? "existing" : "new";
+});
+
+watch(kind, () => {
+	const first = ownLists.value[0];
+	selectedListId.value = first?.id ?? null;
+	mode.value = first ? "existing" : "new";
+});
+
+const canSave = computed(() =>
+	mode.value === "existing" ? Boolean(selectedListId.value) : listName.value.trim().length > 0,
+);
+
+function selectedPositions(): OrderListPosition[] {
+	return cart.items
+		.filter(i => props.lineKeys.includes(cart.keyOf(i)))
+		.map(i => ({
+			id: i.id,
+			sku: i.sku,
+			name: i.name,
+			...(i.image ? { image: i.image } : {}),
+			quantity: i.quantity,
+			...(i.unit ? { unit: i.unit } : {}),
+			price: i.price,
+			...(typeof i.taxRate === "number" ? { taxRate: i.taxRate } : {}),
+			...(i.costCenterId ? { costCenterId: i.costCenterId } : {}),
+			...(i.positionTexts ? { positionTexts: i.positionTexts } : {}),
+			...(i.customSku ? { customSku: i.customSku } : {}),
+			...(i.categorySlug ? { categorySlug: i.categorySlug } : {}),
+			...(i.subcategorySlug ? { subcategorySlug: i.subcategorySlug } : {}),
+		}));
+}
+
+async function save(): Promise<void> {
+	const positions = selectedPositions();
+	saving.value = true;
+	try {
+		let name: string;
+		if (mode.value === "existing" && selectedListId.value) {
+			const target = ownLists.value.find(l => l.id === selectedListId.value);
+			await $fetch(`/api/account/order-lists/${selectedListId.value}`, {
+				method: "PUT",
+				body: { appendPositions: positions },
+			});
+			name = target?.name ?? "";
+		}
+		else {
+			name = listName.value.trim();
+			await $fetch("/api/account/order-lists", {
+				method: "POST",
+				body: { name, kind: kind.value, public: false, positions },
+			});
+		}
+		toast.add({
+			title: t("cart.saveToList.success", positions.length, { count: positions.length, list: name }),
+			color: "success",
+			icon: icon("success"),
+			duration: 2500,
+		});
+		open.value = false;
+	}
+	catch {
+		toast.add({ title: t("orderLists.error"), color: "error", icon: icon("error") });
+	}
+	finally {
+		saving.value = false;
+	}
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('cart.saveToList.title', lineKeys.length, { count: lineKeys.length })"
+	>
+		<template #body>
+			<div class="space-y-4">
+				<URadioGroup
+					v-model="kind"
+					:items="[
+						{ value: 'shopping', label: t('cart.saveToList.shoppingList') },
+						{ value: 'label', label: t('cart.saveToList.labelList') },
+					]"
+					orientation="horizontal"
+				/>
+				<URadioGroup
+					v-model="mode"
+					:items="[
+						{ value: 'existing', label: t('cart.saveToList.existing'), disabled: ownLists.length === 0 },
+						{ value: 'new', label: t('cart.saveToList.new') },
+					]"
+					orientation="horizontal"
+				/>
+				<USelect
+					v-if="mode === 'existing'"
+					v-model="selectedListId"
+					:items="ownLists.map(l => ({ value: l.id, label: l.name }))"
+					class="w-full"
+					:placeholder="t('cart.saveToList.selectPlaceholder')"
+				/>
+				<UInput
+					v-else
+					v-model="listName"
+					class="w-full"
+					:placeholder="t('cart.saveToList.namePlaceholder')"
+				/>
+				<p class="text-xs text-muted">
+					{{ t('cart.saveToList.hint') }}
+				</p>
+			</div>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="!canSave"
+				:loading="saving"
+				:label="t('cart.saveToList.save')"
+				@click="save"
+			/>
+		</template>
+	</UModal>
+</template>

package/app/components/cart/actions/CartWorkflowPickerModal.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { ApprovalWorkflow } from "../../../interfaces/b2b";
+
+/**
+ * Workflow selection when a requester belongs to several workflows
+ * (spec: CTA für Anforderer, Auswahl-Modal).
+ */
+const open = defineModel<boolean>("open", { default: false });
+
+defineProps<{
+	workflows: ApprovalWorkflow[];
+}>();
+
+const emit = defineEmits<{
+	(e: "select", workflowId: string): void;
+}>();
+
+const { t } = useI18n();
+const selectedId = ref<string | null>(null);
+
+function stepSummary(workflow: ApprovalWorkflow): string {
+	const orderers = workflow.steps
+		.filter(step => step.type === "order")
+		.flatMap(step => step.users.map(u => u.name));
+	return t("cart.workflow.stepSummary", {
+		steps: workflow.steps.length,
+		orderers: orderers.join(", "),
+	});
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('cart.workflow.pickTitle')"
+	>
+		<template #body>
+			<URadioGroup
+				v-model="selectedId"
+				:items="workflows.map(wf => ({
+					value: wf.id,
+					label: wf.name,
+					description: stepSummary(wf),
+				}))"
+			/>
+		</template>
+		<template #footer>
+			<UButton
+				color="neutral"
+				variant="ghost"
+				tabindex="0"
+				:label="t('cart.item.cancel')"
+				@click="open = false"
+			/>
+			<UButton
+				color="primary"
+				tabindex="0"
+				:disabled="!selectedId"
+				:label="t('cart.workflow.continue')"
+				@click="selectedId && emit('select', selectedId)"
+			/>
+		</template>
+	</UModal>
+</template>