feat: move locale to employee profile page (#245)

Refs: closes #244

## Summary

 Move locale to employee profile page.

## Changes

- Add section `Preferences` to the employee profile page 
- Add locale within `Preferences` section
- Remove locale from sidebar

web/src/lib/constants/locale.ts

@@ -0,0 +1,15 @@
+/**
+ * Supported locales.
+ */
+export enum SupportedLocales {
+	EN = "en",
+	PT = "pt",
+}
+
+/**
+ * Locale names.
+ */
+export enum LocaleNames {
+	EN = "English",
+	PT = "Português",
+}

web/src/lib/utils/i8n.ts

@@ -2,7 +2,7 @@ import { derived, get, writable, type Writable } from "svelte/store";
 import en from "../../locales/en.json";
 import pt from "../../locales/pt.json";
 import schema from "../../locales/schema.json";
-import { SupportedLocales } from "../../domain/locale";
+import { LocaleNames, SupportedLocales } from "../constants/locale";
 
 /**
  * Identifiers of the locale schema.
@@ -14,6 +14,11 @@ type LocaleTextID = keyof (typeof schema)["properties"];
  */
 const DEFAULT_LOCALE: SupportedLocales = SupportedLocales.EN;
 
+/**
+ * The standard locale name in which the application is configured.
+ */
+const DEFAULT_LOCALE_NAME: LocaleNames = LocaleNames.EN;
+
 /**
  * Map of the supported locales with their respective configuration.
  */
@@ -59,6 +64,22 @@ export function getSupportedLocale(locale: string): SupportedLocales {
 	return DEFAULT_LOCALE;
 }
 
+/**
+ * Retrieves the name of a supported locale.
+ * @param locale Source locale.
+ * @returns Name of `locale` if its a supported locale, otherwise {@link DEFAULT_LOCALE_NAME}.
+ */
+export function getSupportedLocaleName(locale: string): LocaleNames {
+	switch (locale) {
+		case "en":
+			return LocaleNames.EN;
+		case "pt":
+			return LocaleNames.PT;
+	}
+
+	return DEFAULT_LOCALE_NAME;
+}
+
 /**
  * Inits a custom store for the application locale.
  * It synchronizes the store value with local storage.
@@ -88,9 +109,6 @@ function _locale(): Writable<string> {
 			// 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();
-
 			set(supportedLocale);
 		},
 		update(cb) {
@@ -102,9 +120,6 @@ function _locale(): Writable<string> {
 			// 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();
-
 			set(supportedLocale);
 		},
 	};

web/src/locales/en.json

@@ -12,6 +12,8 @@
 	"save": "Save",
 	"preview": "Preview",
 	"work": "Work",
+	"preferences": "Preferences",
+	"language": "Language",
 	"confirm": "Confirm",
 	"selectLocation": "Select location",
 	"location": "Location",

web/src/locales/pt.json

@@ -12,6 +12,8 @@
 	"save": "Guardar",
 	"preview": "Pré-visualização",
 	"work": "Trabalho",
+	"preferences": "Preferências",
+	"language": "Idioma",
 	"selectLocation": "Selecionar localização",
 	"location": "Localização",
 	"location.placeholder": "Selecione uma localização",

web/src/locales/schema.json

@@ -37,6 +37,12 @@
 		"work": {
 			"type": "string"
 		},
+		"preferences": {
+			"type": "string"
+		},
+		"language": {
+			"type": "string"
+		},
 		"selectLocation": {
 			"type": "string"
 		},

web/src/routes/backOffice/components/sidebar/SideBar.svelte

@@ -4,7 +4,6 @@
 	import url from "../../../../lib/stores/url";
 	import { t } from "../../../../lib/utils/i8n";
 	import { BackOfficeRoutes } from "../../../constants/routes";
-	import LocaleSelect from "./LocaleSelect.svelte";
 </script>
 
 <nav>
@@ -90,7 +89,6 @@
 			</Link>
 		</li>
 	</ul>
-	<LocaleSelect />
 </nav>
 
 <style>

web/src/routes/backOffice/employees/components/EmployeeForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from "../../../../lib/components/Button.svelte";
-	import { t } from "../../../../lib/utils/i8n";
+	import { locale, t } from "../../../../lib/utils/i8n";
 	import DetailsFields from "../../../../lib/components/details/DetailsFields.svelte";
 	import DetailsSection from "../../../../lib/components/details/DetailsSection.svelte";
 	import DetailsContent from "../../../../lib/components/details/DetailsContent.svelte";
@@ -19,6 +19,8 @@
 	import { rolesOptions } from "../constants/roles";
 	import Option from "../../../../lib/components/Option.svelte";
 	import { formatTime24H } from "../../../../lib/utils/date";
+	import { isViewingSelf } from "../../../../lib/utils/auth";
+	import { LocaleNames } from "../../../../lib/constants/locale";
 
 	/**
 	 * The back route.
@@ -68,6 +70,7 @@
 		location: GeoJSONFeaturePoint,
 		scheduleStart: string,
 		scheduleEnd: string,
+		selectedLocale: string,
 	) => void;
 
 	/**
@@ -351,6 +354,7 @@
 		const location = formData.get("location") ?? "";
 		const scheduleStart = formData.get("scheduleStart") ?? "";
 		const scheduleEnd = formData.get("scheduleEnd") ?? "";
+		const selectedLocale = formData.get("locale") ?? "";
 
 		// Check if all fields are strings.
 		if (
@@ -364,7 +368,8 @@
 			typeof scheduleStart !== "string" ||
 			typeof scheduleEnd !== "string" ||
 			typeof password !== "string" ||
-			typeof confirmPassword !== "string"
+			typeof confirmPassword !== "string" ||
+			typeof selectedLocale !== "string"
 		) {
 			return;
 		}
@@ -475,6 +480,7 @@
 			},
 			scheduleStart,
 			scheduleEnd,
+			selectedLocale,
 		);
 	}
 </script>
@@ -692,6 +698,21 @@
 				{/if}
 			</DetailsFields>
 		</DetailsSection>
+
+		<!-- Preferences -->
+		{#if action === "edit" && employee && isViewingSelf(employee.id)}
+			<DetailsSection label={$t("preferences")}>
+				<DetailsFields>
+					<!-- Locale -->
+					<FormControl label={$t("language")}>
+						<Select name="locale" value={$locale}>
+							<Option value="en">{LocaleNames.EN}</Option>
+							<Option value="pt">{LocaleNames.PT}</Option>
+						</Select>
+					</FormControl>
+				</DetailsFields>
+			</DetailsSection>
+		{/if}
 	</DetailsContent>
 </form>
 

web/src/routes/backOffice/employees/details/Employee.svelte

@@ -3,7 +3,7 @@
 	import Spinner from "../../../../lib/components/Spinner.svelte";
 	import { Link, navigate } from "svelte-routing";
 	import Button from "../../../../lib/components/Button.svelte";
-	import { t } from "../../../../lib/utils/i8n";
+	import { getSupportedLocaleName, locale, t } from "../../../../lib/utils/i8n";
 	import DetailsHeader from "../../../../lib/components/details/DetailsHeader.svelte";
 	import ecomapHttpClient from "../../../../lib/clients/ecomap/http";
 	import type { Employee } from "../../../../domain/employees";
@@ -100,9 +100,10 @@
 			employee.geoJson.properties.wayName,
 			employee.geoJson.properties.municipalityName,
 		)}
+		{@const isSelf = isViewingSelf(employee.id)}
 
 		<DetailsHeader to="" title={`${employee.firstName} ${employee.lastName}`}>
-			{#if isViewingSelf(employee.id)}
+			{#if isSelf}
 				<Button
 					variant="secondary"
 					onClick={() => (openUpdatePasswordModal = true)}
@@ -151,6 +152,16 @@
 					/>
 				</DetailsFields>
 			</DetailsSection>
+			{#if isSelf}
+				<DetailsSection label={$t("preferences")}>
+					<DetailsFields>
+						<Field
+							label={$t("language")}
+							value={getSupportedLocaleName($locale)}
+						/>
+					</DetailsFields>
+				</DetailsSection>
+			{/if}
 			<DetailsSection label={$t("additionalInfo")}>
 				<DetailsFields>
 					<Field

web/src/routes/backOffice/employees/edit/EditEmployee.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { navigate } from "svelte-routing";
 	import { BackOfficeRoutes } from "../../../constants/routes";
-	import { t } from "../../../../lib/utils/i8n";
+	import { locale, t } from "../../../../lib/utils/i8n";
 	import Spinner from "../../../../lib/components/Spinner.svelte";
 	import Card from "../../components/Card.svelte";
 	import ecomapHttpClient from "../../../../lib/clients/ecomap/http";
 	import type { GeoJSONFeaturePoint } from "../../../../domain/geojson";
 	import type { Employee } from "../../../../domain/employees";
 	import { getToastContext } from "../../../../lib/contexts/toast";
 	import EmployeeForm from "../components/EmployeeForm.svelte";
+	import { isViewingSelf } from "../../../../lib/utils/auth";
 
 	/**
 	 * Employee ID.
@@ -51,6 +52,7 @@
 	 * @param location Employee location.
 	 * @param scheduleStart Employee scheduleStart.
 	 * @param scheduleEnd Employee scheduleEnd.
+	 * @param selectedLocale Selected locale for the application.
 	 */
 	async function updateEmployee(
 		username: string,
@@ -61,6 +63,7 @@
 		location: GeoJSONFeaturePoint,
 		scheduleStart: string,
 		scheduleEnd: string,
+		selectedLocale: string,
 	) {
 		isSubmittingForm = true;
 
@@ -110,6 +113,11 @@
 			return;
 		}
 
+		// If the employee is viewing themselves, update the application locale.
+		if (isViewingSelf(id)) {
+			locale.set(selectedLocale);
+		}
+
 		toast.show({
 			type: "success",
 			title: $t("employees.update.success"),