🐛 Manage alias duplicate error in front #1016

src/lib/components/ProductForm.svelte

@@ -74,12 +74,14 @@
 		hasVariations: false,
 		hasSellDisclaimer: false
 	};
+	export let listAliases: string[] | undefined;
 
 	let paymentMethods = product.paymentMethods || [...availablePaymentMethods];
 	let restrictPaymentMethods = !!product.paymentMethods;
 	let vatProfileId = product.vatProfileId || '';
 	let formElement: HTMLFormElement;
 	let priceAmountElement: HTMLInputElement;
+	let aliasElement: HTMLInputElement;
 	let variationInput: HTMLInputElement[] = [];
 	let disableDateChange = !isNew;
 	let displayPreorderCustomText = !!product.customPreorderText;
@@ -131,6 +133,15 @@
 			} else {
 				priceAmountElement.setCustomValidity('');
 			}
+			if (listAliases?.includes(aliasElement.value)) {
+				aliasElement.setCustomValidity('Duplicated alias');
+				aliasElement.reportValidity();
+				event.preventDefault();
+				return;
+			} else {
+				aliasElement.setCustomValidity('');
+			}
+
 			const seen = new Set<string>();
 			for (const [i, value] of variationLabelsValues.entries()) {
 				const key = JSON.stringify(
@@ -290,6 +301,8 @@
 					placeholder="alias"
 					step="any"
 					value={duplicateFromId ? '' : product.alias?.[1] ?? ''}
+					bind:this={aliasElement}
+					on:input={() => aliasElement?.setCustomValidity('')}
 				/>
 			</label>
 		</div>

src/routes/(app)/admin[[hash=admin_hash]]/product/[id]/+page.server.ts

@@ -11,6 +11,7 @@ import { amountOfProductReserved, amountOfProductSold } from '$lib/server/produc
 import type { Tag } from '$lib/types/Tag';
 import { adminPrefix } from '$lib/server/admin';
 import { ObjectId } from 'mongodb';
+import type { Product } from '$lib/types/Product';
 
 export const load = async ({ params }) => {
 	const pictures = await collections.pictures
@@ -25,7 +26,10 @@ export const load = async ({ params }) => {
 		.find({})
 		.project<Pick<Tag, '_id' | 'name'>>({ _id: 1, name: 1 })
 		.toArray();
-
+	const products = await collections.products
+		.find({})
+		.project<Pick<Product, '_id' | 'name' | 'alias'>>({ _id: 1, name: 1, alias: 1 })
+		.toArray();
 	const [reserved, sold, scanned] = await Promise.all([
 		amountOfProductReserved(params.id),
 		amountOfProductSold(params.id),
@@ -38,7 +42,8 @@ export const load = async ({ params }) => {
 		tags,
 		reserved,
 		sold,
-		scanned
+		scanned,
+		products
 	};
 };
 

src/routes/(app)/admin[[hash=admin_hash]]/product/[id]/+page.svelte

@@ -16,6 +16,7 @@
 	scanned={data.scanned}
 	vatProfiles={data.vatProfiles}
 	availablePaymentMethods={data.availablePaymentMethods}
+	listAliases={data.products?.flatMap((product) => product.alias?.[1])}
 />
 
 <h2 class="text-2xl my-4">Photos</h2>

src/routes/(app)/admin[[hash=admin_hash]]/product/alias/+page.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
 	export let data;
+	let listAliases = data.products.flatMap((product) => product.alias?.[1]);
+
+	function hasDuplicates(list: string[]) {
+		let uniqueSet = new Set(list.filter((alias) => alias !== null && alias !== undefined));
+		return uniqueSet.size !== list.filter((alias) => alias !== null && alias !== undefined).length;
+	}
 </script>
 
 <h1 class="text-3xl">Bulk Alias Change</h1>
 
 <form class="flex flex-col gap-2" method="post">
-	{#each data.products as product}
+	{#each data.products as product, i}
 		<h2 class="text-2xl">{product.name}</h2>
 		<div class="gap-4 flex flex-col md:flex-row">
 			<label class="w-full">
@@ -20,10 +26,15 @@
 					type="text"
 					name="{product._id}.alias"
 					placeholder="alias"
-					value={product.alias?.[1] ?? ''}
+					bind:value={listAliases[i]}
 				/>
 			</label>
 		</div>
 	{/each}
-	<button class="btn btn-black self-start mt-4" type="submit">Update</button>
+	{#if hasDuplicates(listAliases)}
+		<span class="text-red-500">Duplicated aliases was found, please fix them before submit</span
+		>{/if}
+	<button class="btn btn-black self-start mt-4" type="submit" disabled={hasDuplicates(listAliases)}
+		>Update</button
+	>
 </form>

src/routes/(app)/admin[[hash=admin_hash]]/product/new/+page.server.ts

@@ -27,7 +27,10 @@ export const load = async ({ url }) => {
 		.find({})
 		.project<Pick<Tag, '_id' | 'name'>>({ _id: 1, name: 1 })
 		.toArray();
-
+	const products = await collections.products
+		.find({})
+		.project<Pick<Product, '_id' | 'name' | 'alias'>>({ _id: 1, name: 1, alias: 1 })
+		.toArray();
 	if (productId) {
 		const product = await collections.products.findOne({ _id: productId });
 
@@ -48,12 +51,14 @@ export const load = async ({ url }) => {
 				pictures,
 				digitalFiles,
 				tags,
-				currency: runtimeConfig.priceReferenceCurrency
+				currency: runtimeConfig.priceReferenceCurrency,
+				products
 			};
 		}
 	}
 	return {
-		tags
+		tags,
+		products
 	};
 };
 

src/routes/(app)/admin[[hash=admin_hash]]/product/new/+page.svelte

@@ -17,6 +17,7 @@
 	defaultActionSettings={data.productActionSettings}
 	vatProfiles={data.vatProfiles}
 	availablePaymentMethods={data.availablePaymentMethods}
+	listAliases={data.products?.flatMap((product) => product.alias?.[1])}
 />
 
 {#if data.pictures?.length}