fix: fix routes with no containers associated (#263)

## Summary

Prevent routes from being created and updated without containers
associated in the UI.

## Changes

- Update validation logic on the route edit form
- Remove the disabled logic of the save button inside the select
containers modal, since it's now validated on the form
- Add custom message on the map page of a route if it does not have any
containers associated with it

web/src/lib/errors/route.ts

@@ -0,0 +1,9 @@
+/**
+ * Error that indicates that a route does not have any containers associated
+ * with it.
+ */
+export class RouteWithNoContainersError extends Error {
+	constructor() {
+		super("Route does not have any containers associated");
+	}
+}

web/src/locales/en.json

@@ -122,6 +122,8 @@
 	"routes.update.conflict.description": "The route already has more employees associated with it than the new truck has capacity.",
 	"routes.notFound.title": "Route not found",
 	"routes.notFound.description": "The route you are looking for does not exist.",
+	"routes.noContainersAssociated.title": "Route has no containers associated with it",
+	"routes.noContainersAssociated.description": "Associate at least one container with the route to display it on the map.",
 	"routes.delete.success": "Route deleted successfully",
 	"routes.delete.conflict.title": "Conflict",
 	"routes.delete.conflict.description": "This route cannot be deleted because it's associated with a container or employee.",

web/src/locales/pt.json

@@ -121,6 +121,8 @@
 	"routes.update.conflict.description": "A rota já tem mais operadores associados do que a capacidade do novo camião.",
 	"routes.notFound.title": "Rota não encontrada",
 	"routes.notFound.description": "A rota que procura não existe.",
+	"routes.noContainersAssociated.title": "Rota não tem contentores associados",
+	"routes.noContainersAssociated.description": "Associe pelo menos um contentor à rota para a visualizar no mapa.",
 	"routes.delete.success": "Rota eliminada com sucesso",
 	"routes.delete.conflict.title": "Conflito",
 	"routes.delete.conflict.description": "Esta rota não pode ser eliminada porque está associada a um contentor ou a um operador.",

web/src/locales/schema.json

@@ -364,6 +364,12 @@
 		"routes.notFound.description": {
 			"type": "string"
 		},
+		"routes.noContainersAssociated.title": {
+			"type": "string"
+		},
+		"routes.noContainersAssociated.description": {
+			"type": "string"
+		},
 		"routes.delete.success": {
 			"type": "string"
 		},

web/src/routes/backOffice/routes/components/RouteForm.svelte

@@ -141,15 +141,13 @@
 	 * @param truckInput Truck input field.
 	 * @param departureWarehouseInput Departure warehouse input field.
 	 * @param arrivalWarehouseInput Arrival warehouse input field.
-	 * @param containersInput Containers input field.
 	 * @returns `true` if form is valid, `false` otherwise.
 	 */
 	function validateForm(
 		nameInput: HTMLInputElement,
 		truckInput: HTMLSelectElement,
 		departureWarehouseInput: HTMLSelectElement,
 		arrivalWarehouseInput: HTMLSelectElement,
-		containersInput: HTMLInputElement,
 	) {
 		if (nameInput.validity.valueMissing) {
 			formErrorMessages.name = $t("error.valueMissing");
@@ -175,7 +173,12 @@
 			formErrorMessages.arrivalWarehouse = "";
 		}
 
-		if (containersInput.validity.valueMissing) {
+		const selectedContainerAmount = getSelectedContainerAmount(
+			containersMap.original.length,
+			containersMap.added.length,
+			containersMap.deleted.length,
+		);
+		if (!selectedContainerAmount) {
 			formErrorMessages.containers = $t("error.valueMissing");
 		} else {
 			formErrorMessages.containers = "";
@@ -204,14 +207,12 @@
 		const departureWarehouseInput =
 			formElements.namedItem("departureWarehouse");
 		const arrivalWarehouseInput = formElements.namedItem("arrivalWarehouse");
-		const containersInput = formElements.namedItem("containers");
 
 		if (
 			!(nameInput instanceof HTMLInputElement) ||
 			!(truckInput instanceof HTMLSelectElement) ||
 			!(departureWarehouseInput instanceof HTMLSelectElement) ||
-			!(arrivalWarehouseInput instanceof HTMLSelectElement) ||
-			!(containersInput instanceof HTMLInputElement)
+			!(arrivalWarehouseInput instanceof HTMLSelectElement)
 		) {
 			throw new Error("Form elements are not inputs");
 		}
@@ -223,7 +224,6 @@
 				truckInput,
 				departureWarehouseInput,
 				arrivalWarehouseInput,
-				containersInput,
 			)
 		) {
 			return;
@@ -333,19 +333,26 @@
 	}
 
 	/**
-	 * Retrieves the value displayed in the container input.
+	 * Retrieves the amount of selected containers of route.
 	 * @param originalAmount The number of containers on the route.
 	 * @param addedAmount The number of containers added to the route.
 	 * @param deletedAmount The number of containers deleted from the route.
-	 * @returns Container input value.
+	 * @returns Amount of selected containers of route.
 	 */
-	function getContainersInputValue(
+	function getSelectedContainerAmount(
 		originalAmount: number,
 		addedAmount: number,
 		deletedAmount: number,
 	) {
-		const containerAmount = originalAmount + addedAmount - deletedAmount;
+		return originalAmount + addedAmount - deletedAmount;
+	}
 
+	/**
+	 * Retrieves the value displayed in the container input.
+	 * @param containerAmount The number of selected containers for the route.
+	 * @returns Container input value.
+	 */
+	function getContainersInputValue(containerAmount: number) {
 		return `${containerAmount} ${$t(containerAmount === 1 ? "container" : "containers").toLowerCase()}`;
 	}
 
@@ -583,9 +590,11 @@
 					<LocationInput
 						required
 						value={getContainersInputValue(
-							containersMap.original.length,
-							containersMap.added.length,
-							containersMap.deleted.length,
+							getSelectedContainerAmount(
+								containersMap.original.length,
+								containersMap.added.length,
+								containersMap.deleted.length,
+							),
 						)}
 						name="containers"
 						placeholder={$t("routes.containers.placeholder")}

web/src/routes/backOffice/routes/components/SelectContainers.svelte

@@ -77,12 +77,6 @@
 	 */
 	let selectedFeatures: Feature[] = [];
 
-	/**
-	 * Indicates if save action is disabled.
-	 * @default true
-	 */
-	let isSaveActionDisabled = true;
-
 	/**
 	 * Retrieves the ID of a feature.
 	 * @param coordinate Feature coordinate.
@@ -164,7 +158,6 @@
 			if (originalContainersMap.has(container.id)) {
 				containerFeature.set("selected", true);
 				selectedFeatures.push(containerFeature);
-				isSaveActionDisabled = false;
 			}
 		}
 
@@ -284,8 +277,6 @@
 				selectFeature(feature);
 			}
 		}
-
-		isSaveActionDisabled = !selectedFeatures.length;
 	}
 
 	/**
@@ -339,11 +330,7 @@
 	/>
 	<svelte:fragment slot="actions">
 		<Button variant="tertiary" onClick={handleCancel}>{$t("cancel")}</Button>
-		<Button
-			startIcon="check"
-			disabled={isSaveActionDisabled}
-			onClick={handleSave}
-		>
+		<Button startIcon="check" onClick={handleSave}>
 			{$t("save")}
 		</Button>
 	</svelte:fragment>

web/src/routes/backOffice/routes/details/RouteMap.svelte

@@ -24,6 +24,7 @@
 	import { convertToMapProjection } from "../../../../lib/utils/map";
 	import type { GeoJSONFeatureCollectionLineString } from "../../../../domain/geojson";
 	import { getCssVariable } from "../../../../lib/utils/cssVars";
+	import { RouteWithNoContainersError } from "../../../../lib/errors/route";
 
 	/**
 	 * Route ID.
@@ -255,6 +256,15 @@
 			throw new Error("Failed to retrieve route details");
 		}
 
+		// Check if there are no containers associated with the route.
+		if (
+			containerFeaturesRes.status === "fulfilled" &&
+			!containerFeaturesRes.value.length
+		) {
+			isMapVisible = false;
+			throw new RouteWithNoContainersError();
+		}
+
 		const mapHelper = new MapHelper(map);
 
 		addRouteToMap(routeWaysRes.value);
@@ -334,12 +344,18 @@
 			</div>
 		</Link>
 		<RouteBottomSheet {route} />
-	{:catch}
+	{:catch error}
+		{@const errorType =
+			error instanceof RouteWithNoContainersError
+				? "noContainersAssociated"
+				: "notFound"}
 		<div
 			class="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center"
 		>
-			<h2 class="text-2xl font-semibold">{$t("routes.notFound.title")}</h2>
-			<p>{$t("routes.notFound.description")}</p>
+			<h2 class="text-2xl font-semibold">
+				{$t(`routes.${errorType}.title`)}
+			</h2>
+			<p>{$t(`routes.${errorType}.description`)}</p>
 		</div>
 	{/await}
 </main>