feat: add web page to crud warehouse

web/src/App.svelte

@@ -5,7 +5,6 @@
 	import Dashboard from "./routes/backOffice/dashboard/Dashboard.svelte";
 	import Map from "./routes/backOffice/map/Map.svelte";
 	import Routes from "./routes/backOffice/routes/Routes.svelte";
-	import Warehouses from "./routes/backOffice/warehouses/Warehouses.svelte";
 	import Trucks from "./routes/backOffice/trucks/Trucks.svelte";
 	import Reports from "./routes/backOffice/reports/Reports.svelte";
 	import Employees from "./routes/backOffice/employees/Employees.svelte";
@@ -20,6 +19,7 @@
 	import url from "./lib/stores/url";
 	import ContainersRouter from "./routes/backOffice/containers/ContainersRouter.svelte";
 	import Toast from "./lib/components/Toast.svelte";
+	import WarehousesRouter from "./routes/backOffice/warehouses/WarehousesRouter.svelte";
 
 	onMount(() => {
 		if ($url.pathname === "/") {
@@ -36,10 +36,9 @@
 					<Route path={BackOfficeRouterPaths.EMPLOYEES} component={Employees} />
 					<Route path={BackOfficeRouterPaths.REPORTS} component={Reports} />
 					<Route path={BackOfficeRouterPaths.TRUCKS} component={Trucks} />
-					<Route
-						path={BackOfficeRouterPaths.WAREHOUSES}
-						component={Warehouses}
-					/>
+					<Route path={`${BackOfficeRouterPaths.WAREHOUSES}/*`}>
+						<WarehousesRouter />
+					</Route>
 					<Route path={`${BackOfficeRouterPaths.CONTAINERS}/*`}>
 						<ContainersRouter />
 					</Route>

web/src/domain/warehouse.ts

@@ -0,0 +1,19 @@
+import type { components } from "../../api/ecomap/http";
+
+/**
+ * Warehouse.
+ */
+export type Warehouse = components["schemas"]["Warehouse"];
+
+/**
+ * Paginated warehouses.
+ */
+export type PaginatedWarehouses = components["schemas"]["WarehousesPaginated"];
+
+/**
+ * Filters of warehouses.
+ */
+export interface WarehousesFilters {
+	pageIndex: number;
+	location: string;
+}

web/src/lib/components/Field.svelte

@@ -10,7 +10,7 @@
 	 * The value of the field.
 	 * @default null
 	 */
-	export let value: string | null = null;
+	export let value: number | string | null = null;
 </script>
 
 <div>

web/src/lib/components/Input.svelte

@@ -2,6 +2,7 @@
 	import type {
 		ChangeEventHandler,
 		HTMLInputAttributes,
+		KeyboardEventHandler,
 		MouseEventHandler,
 	} from "svelte/elements";
 	import Icon from "./Icon.svelte";
@@ -30,6 +31,18 @@
 	 */
 	export let id: HTMLInputAttributes["id"] = null;
 
+	/**
+	 * Defines the maximum value that is acceptable and valid for the input.
+	 * @default null
+	 */
+	export let max: HTMLInputAttributes["max"] = null;
+
+	/**
+	 * Defines the minimum value that is acceptable and valid for the input.
+	 * @default null
+	 */
+	export let min: HTMLInputAttributes["min"] = null;
+
 	/**
 	 * The name of the form control. Submitted with the form as part of a name/value pair.
 	 * @default null
@@ -48,6 +61,12 @@
 	 */
 	export let onInput: ChangeEventHandler<HTMLInputElement> | null = null;
 
+	/**
+	 * Callback fired when a key is pressed.
+	 * @default null
+	 */
+	export let onKeyDown: KeyboardEventHandler<HTMLInputElement> | null = null;
+
 	/**
 	 * The text that appears in the form control when it has no value set.
 	 * @default null
@@ -60,6 +79,18 @@
 	 */
 	export let readonly: boolean = false;
 
+	/**
+	 * Indicates that the user must specify a value for the input before the owning form can be submitted.
+	 * @default false
+	 */
+	export let required: boolean = false;
+
+	/**
+	 * CSS styling declarations to be applied to the element.
+	 * @default null
+	 */
+	export let style: string | null = null;
+
 	/**
 	 * The type of control to render.
 	 * @default null
@@ -70,7 +101,7 @@
 	 * The value of the input.
 	 * @default null
 	 */
-	export let value: string | null = null;
+	export let value: number | string | null = null;
 </script>
 
 <div class="input-container">
@@ -83,6 +114,11 @@
 		{type}
 		{value}
 		{readonly}
+		{required}
+		{max}
+		{min}
+		{style}
+		on:keydown={onKeyDown}
 		on:input={onInput}
 		on:click={onClick}
 		data-endIcon={endIcon}

web/src/lib/components/LocationInput.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import Input from "./Input.svelte";
+
+	/**
+	 * Indicates if the input contains an error.
+	 * @default false
+	 */
+	export let error: boolean = false;
+
+	/**
+	 * The name of the form control. Submitted with the form as part of a name/value pair.
+	 * @default null
+	 */
+	export let name: string | null = null;
+
+	/**
+	 * Callback fired when input element is clicked.
+	 * @default null
+	 */
+	export let onClick: (() => void) | null = null;
+
+	/**
+	 * The text that appears in the form control when it has no value set.
+	 * @default null
+	 */
+	export let placeholder: string | null = null;
+
+	/**
+	 * Indicates that the user must specify a value for the input before the owning form can be submitted.
+	 * @default false
+	 */
+	export let required: boolean = false;
+
+	/**
+	 * The value of the input.
+	 * @default null
+	 */
+	export let value: string | null = null;
+
+	/**
+	 * Handle the keyboard event of the input by preventing typing a value inside the input.
+	 * @param e Keyboard event.
+	 */
+	function handleKeyDown(e: KeyboardEvent) {
+		switch (e.key) {
+			// Ignore Tab key since it's used to interact with the HTML form element.
+			case "Tab":
+				break;
+
+			case "Enter":
+				onClick?.();
+				e.preventDefault();
+				break;
+
+			default:
+				e.preventDefault();
+				break;
+		}
+	}
+</script>
+
+<Input
+	{required}
+	{name}
+	{value}
+	{placeholder}
+	{error}
+	{onClick}
+	style="cursor: pointer; caret-color: transparent;"
+	endIcon="location_on"
+	onKeyDown={handleKeyDown}
+/>

web/src/lib/components/Select.svelte

@@ -38,6 +38,12 @@
 	 */
 	export let placeholder: string | null = null;
 
+	/**
+	 * Indicates that the user must specify a value for the input before the owning form can be submitted.
+	 * @default false
+	 */
+	export let required: boolean = false;
+
 	/**
 	 * The value of the select.
 	 * @default ""
@@ -50,6 +56,7 @@
 	{name}
 	{value}
 	{placeholder}
+	{required}
 	on:change={onChange}
 	class={`${className} ${error ? "error" : ""}`}
 >

web/src/lib/components/SelectLocation.svelte

@@ -19,6 +19,7 @@
 	import {
 		DEFAULT_ANIMATION_DURATION,
 		DEFAULT_MAX_ZOOM,
+		DEFAULT_PIN_ICON_SRC,
 	} from "../constants/map";
 
 	/**
@@ -51,6 +52,12 @@
 	 */
 	export let onCancel: (() => void) | null = null;
 
+	/**
+	 * Map layer style.
+	 * @default "/images/pin.svg"
+	 */
+	export let iconSrc: string = DEFAULT_PIN_ICON_SRC;
+
 	/**
 	 * Open Layers map.
 	 */
@@ -67,7 +74,7 @@
 	const layer = new VectorLayer({
 		source: new VectorSource<Feature<Point>>({ features: [] }),
 		style: {
-			"icon-src": "/images/pin.svg",
+			"icon-src": iconSrc,
 		},
 	});
 

web/src/lib/components/map/mapUtils.ts

@@ -24,6 +24,7 @@ import {
 	colorLayerKey,
 	nameLayerKey,
 	DEFAULT_MAX_ZOOM,
+	CONTAINER_ICON_SRC,
 } from "../../constants/map";
 import type { Geometry } from "ol/geom";
 import type Feature from "ol/Feature";
@@ -53,15 +54,15 @@ const defaultVectorStyle: VectorStyle = {
  * Default style for WebGl point layer.
  */
 const defaultIconStyle: WebGLStyle = {
-	"icon-src": "/images/logo.svg",
+	"icon-src": CONTAINER_ICON_SRC,
 };
 
 /**
  * Default style for cluster point layer.
  */
 const defaultClusterIcon = new Style({
 	image: new Icon({
-		src: "/images/logo.svg",
+		src: CONTAINER_ICON_SRC,
 	}),
 });
 

web/src/lib/constants/map.ts

@@ -32,3 +32,18 @@ export const OL_PROJECTION = "EPSG:3857";
  * Resource geometry projection.
  */
 export const RESOURCE_PROJECTION = "EPSG:4326";
+
+/**
+ * Source location of the default pin icon.
+ */
+export const DEFAULT_PIN_ICON_SRC = "/images/pin.svg";
+
+/**
+ * Source location of the container pin icon.
+ */
+export const CONTAINER_ICON_SRC = "/images/logo.svg";
+
+/**
+ * Source location of the warehouse pin icon.
+ */
+export const WAREHOUSE_ICON_SRC = "/images/warehouse-pin.svg";

web/src/lib/utils/i8n.ts

@@ -73,6 +73,9 @@ function _locale(): Writable<string> {
 
 	localStorage.setItem("locale", supportedLocale);
 
+	// Set the supported locale in the lang attribute of the HTML element.
+	document.documentElement.setAttribute("lang", supportedLocale);
+
 	const store = writable(supportedLocale);
 	const { subscribe, set } = store;
 
@@ -82,6 +85,9 @@ function _locale(): Writable<string> {
 			const supportedLocale = getSupportedLocale(locale);
 			localStorage.setItem("locale", supportedLocale);
 
+			// Set the supported locale in the lang attribute of the HTML element.
+			document.documentElement.setAttribute("lang", supportedLocale);
+
 			// Refresh current page when switching locales.
 			location.reload();
 
@@ -93,6 +99,9 @@ function _locale(): Writable<string> {
 			const supportedLocale = getSupportedLocale(updatedLocale);
 			localStorage.setItem("locale", supportedLocale);
 
+			// Set the supported locale in the lang attribute of the HTML element.
+			document.documentElement.setAttribute("lang", supportedLocale);
+
 			// Refresh current page when switching locales.
 			location.reload();