feat: create employees page

cspell.yml

@@ -7,6 +7,7 @@ ignoreWords:
   - androidx
   - appcompat
   - Avenir
+  - birthdate
   - buildx
   - clazz
   - cloudrun

web/src/App.svelte

@@ -6,7 +6,7 @@
 	import Map from "./routes/backOffice/map/Map.svelte";
 	import Routes from "./routes/backOffice/routes/Routes.svelte";
 	import Reports from "./routes/backOffice/reports/Reports.svelte";
-	import Employees from "./routes/backOffice/employees/Employees.svelte";
+	import EmployeesRouter from "./routes/backOffice/employees/EmployeesRouter.svelte";
 	import Forbidden from "./routes/clientErrors/Forbidden.svelte";
 	import NotFound from "./routes/clientErrors/NotFound.svelte";
 	import BackOfficeLayout from "./routes/backOffice/components/BackOfficeLayout.svelte";
@@ -33,7 +33,10 @@
 		<Route path={`/${backOfficeBasename}/*`}>
 			<Router>
 				<BackOfficeLayout>
-					<Route path={BackOfficeRouterPaths.EMPLOYEES} component={Employees} />
+					<Route
+						path={BackOfficeRouterPaths.EMPLOYEES}
+						component={EmployeesRouter}
+					/>
 					<Route path={BackOfficeRouterPaths.REPORTS} component={Reports} />
 					<Route path={`${BackOfficeRouterPaths.TRUCKS}/*`}>
 						<TrucksRouter />

web/src/domain/employees.ts

@@ -0,0 +1,30 @@
+import type { components } from "../../api/ecomap/http";
+import type { SortingDirection } from "../lib/components/table/types";
+
+/**
+ * Employee.
+ */
+export type Employee = components["schemas"]["Employee"];
+
+/**
+ * Sortable fields of a employees.
+ */
+export type EmployeeSortableFields = NonNullable<
+	components["parameters"]["EmployeeSortQueryParam"]
+>;
+
+/**
+ * Paginated employees.
+ */
+export type PaginatedEmployees = components["schemas"]["EmployeesPaginated"];
+
+/**
+ * Filters of employees.
+ */
+export interface EmployeesFilters {
+	pageIndex: number;
+	username: string;
+	sort: EmployeeSortableFields;
+	order: SortingDirection;
+	role?: Employee["role"];
+}

web/src/lib/constants/date.ts

@@ -2,7 +2,7 @@
  * Date format.
  * Used as the key names for {@link DateFormats}.
  */
-type DateFormat = "shortDateTime";
+type DateFormat = "shortDateTime" | "shortTime";
 
 /**
  * Date formats.
@@ -15,4 +15,8 @@ export const DateFormats: Record<DateFormat, Intl.DateTimeFormatOptions> = {
 		hour: "2-digit",
 		minute: "2-digit",
 	},
+	shortTime: {
+		hour: "2-digit",
+		minute: "2-digit",
+	},
 };

web/src/locales/en.json

@@ -94,5 +94,14 @@
 	"notFound.description": "The page you are looking for does not exist.",
 	"forbidden.title": "Access forbidden",
 	"forbidden.description": "You do not have permission to access this page.",
-	"map.layers": "Layers"
+	"map.layers": "Layers",
+	"employees.title": "Employees",
+	"employees.search": "Search by username",
+	"employees.username": "Username",
+	"employees.firstName": "First name",
+	"employees.lastName": "Last name",
+	"employees.schedule": "Schedule",
+	"employees.role": "Role",
+	"employees.role.manager": "Manager",
+	"employees.role.wasteOperator": "Waste operator"
 }

web/src/locales/pt.json

@@ -94,5 +94,14 @@
 	"notFound.description": "A página que procura não existe.",
 	"forbidden.title": "Acesso proibido",
 	"forbidden.description": "Não tem autorização para aceder a esta página.",
-	"map.layers": "Camadas"
+	"map.layers": "Camadas",
+	"employees.title": "Colaboradores",
+	"employees.search": "Pesquise por nome de utilizador",
+	"employees.username": "Nome de utilizador",
+	"employees.firstName": "Primeiro nome",
+	"employees.lastName": "Último nome",
+	"employees.schedule": "Horário",
+	"employees.role": "Cargo",
+	"employees.role.manager": "Gerente",
+	"employees.role.wasteOperator": "Operador de resíduos"
 }

web/src/locales/schema.json

@@ -285,6 +285,33 @@
 		},
 		"map.layers": {
 			"type": "string"
+		},
+		"employees.title": {
+			"type": "string"
+		},
+		"employees.search": {
+			"type": "string"
+		},
+		"employees.username": {
+			"type": "string"
+		},
+		"employees.firstName": {
+			"type": "string"
+		},
+		"employees.lastName": {
+			"type": "string"
+		},
+		"employees.schedule": {
+			"type": "string"
+		},
+		"employees.role": {
+			"type": "string"
+		},
+		"employees.role.manager": {
+			"type": "string"
+		},
+		"employees.role.wasteOperator": {
+			"type": "string"
 		}
 	}
 }

web/src/routes/backOffice/employees/EmployeesRouter.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Route, Router } from "svelte-routing";
+
+	import Employees from "./list/Employees.svelte";
+</script>
+
+<Router>
+	<Route path="/" component={Employees} />
+</Router>

web/src/routes/backOffice/employees/constants/roles.ts

@@ -0,0 +1,6 @@
+import type { Employee } from "../../../../domain/employees";
+
+/**
+ * List of employees roles.
+ */
+export const rolesOptions: Employee["role"][] = ["manager", "wasteOperator"];

web/src/routes/backOffice/employees/list/Employees.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { t } from "../../../../lib/utils/i8n";
+	import Card from "../../components/Card.svelte";
+	import EmployeesTable from "./EmployeesTable.svelte";
+	import SearchEmployees from "./SearchEmployees.svelte";
+</script>
+
+<Card class="page-layout">
+	<h1>{$t("sidebar.employees")}</h1>
+	<SearchEmployees />
+	<EmployeesTable />
+</Card>
+
+<style>
+	h1 {
+		font: var(--text-2xl-semibold);
+	}
+</style>