11.21.2 (avec fil d'ariane)

klee-contrib · Nov 18, 2024 · 08fe8a4 · 08fe8a4
1 parent 2d67ce8
commit 08fe8a4
Show file tree

Hide file tree

Showing 10 changed files with 346 additions and 426 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <html lang="fr">
     <head>
-        <title>Starter Kit Focus v4 - 11.21.0</title>
+        <title>Starter Kit Focus v4 - 11.21.2</title>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "focus4-starter-kit",
-    "version": "11.21.0",
+    "version": "11.21.2",
     "description": "Starter kit pour Focus V4",
     "repository": "http://www.github.com/klee-contrib/focus4-starter-kit",
     "main": "src/index.ts",
@@ -13,8 +13,8 @@
         "start": "vite"
     },
     "dependencies": {
-        "@focus4/tooling": "11.21.0",
-        "focus4": "11.21.0",
+        "@focus4/tooling": "11.21.2",
+        "focus4": "11.21.2",
         "vite-plugin-mock-dev-server": "1.8.0"
     },
     "devDependencies": {

diff --git a/src/locale/index.ts b/src/locale/index.ts
@@ -6,10 +6,20 @@ import "numeral/locales/fr";
 
 import {common} from "./common";
 import {securite} from "./securite";
+import {router} from "./router";
 
 i18next.init({
     lng: "fr",
-    resources: {fr: {translation: {focus, common, securite}}},
+    resources: {
+        fr: {
+            translation: {
+                focus,
+                common,
+                securite,
+                router
+            }
+        }
+    },
     nsSeparator: "🤷‍♂️"
 });
 numeral.locale("fr");
diff --git a/src/locale/router.ts b/src/locale/router.ts
@@ -0,0 +1,15 @@
+export const router = {
+    root: "Accueil",
+    profils: {
+        root: "Profils",
+        proId: {
+            root: "{{param}}"
+        }
+    },
+    utilisateurs: {
+        root: "Utilisateurs",
+        utiId: {
+            root: "{{param}}"
+        }
+    }
+};
diff --git a/src/views/__style__/header.css b/src/views/__style__/header.css
@@ -4,21 +4,16 @@
     --focus-ring-color: white;
     --input-outline-color: white;
     --input-text-color: white;
+
+    --fil-ariane-item-color: white;
+    --fil-ariane-item-active-color: white;
 }
 
 .item {
     display: flex;
     align-items: center;
 }
 
-.item > span {
-    margin-right: 6px;
-}
-
-.item strong {
-    white-space: nowrap;
-}
-
 .item--user strong {
     font-weight: 600;
     margin-right: 5px;

diff --git a/src/views/header.tsx b/src/views/header.tsx
@@ -1,24 +1,26 @@
 import {useObserver} from "mobx-react";
-import {ReactNode} from "react";
 
 import {messageStore} from "@focus4/core";
-import {HeaderItem, HeaderScrolling, HeaderTopRow} from "@focus4/layout";
+import {FilAriane, HeaderItem, HeaderScrolling, HeaderTopRow} from "@focus4/layout";
 import {colorScheme, toBem} from "@focus4/styling";
-import {IconButton, Switch} from "@focus4/toolbox";
+import {FontIcon, IconButton, Switch} from "@focus4/toolbox";
+
+import {router} from "../router";
 
 import css from "./__style__/header.css";
 
 const theme = toBem(css);
 
-export function Header({children}: {children?: ReactNode}) {
+export function Header({icon, paramResolver}: {icon: string; paramResolver?: () => string}) {
     return useObserver(() => (
         <HeaderScrolling theme={{scrolling: theme.header()}}>
             <HeaderTopRow>
                 <HeaderItem theme={{item: theme.item()}}>
                     <strong>Starter Kit Focus v4</strong>
                 </HeaderItem>
                 <HeaderItem fillWidth theme={{item: theme.item()}}>
-                    {children}
+                    <FontIcon>{icon}</FontIcon>
+                    <FilAriane paramResolver={paramResolver} router={router} />
                 </HeaderItem>
                 <HeaderItem theme={{item: theme.item({user: true})}}>
                     <strong>Utilisateur connecté [Administrateur]</strong>

diff --git a/src/views/home.tsx b/src/views/home.tsx
@@ -5,7 +5,7 @@ import {Header} from "./header";
 export function Home() {
     return (
         <>
-            <Header />
+            <Header icon="home" />
             <Content>
                 Bienvenue sur le starter kit de Focus v4 !<br />
                 <br />

diff --git a/src/views/profils/index.tsx b/src/views/profils/index.tsx
@@ -1,7 +1,5 @@
 import {useObserver} from "mobx-react";
 
-import {FontIcon} from "@focus4/toolbox";
-
 import {profilStore} from "../../stores/profil";
 
 import {router} from "../../router";
@@ -13,14 +11,7 @@ import {ProfilTable} from "./table";
 export function Profils() {
     return useObserver(() => (
         <>
-            <Header>
-                <FontIcon>settings</FontIcon>
-                <strong>
-                    {!router.state.profils.proId
-                        ? "Profils"
-                        : `Détail du profil : ${profilStore.profil.libelle.value ?? ""}`}
-                </strong>
-            </Header>
+            <Header icon="settings" paramResolver={() => profilStore.profil.libelle.value ?? ""} />
             {router.state.profils.proId ? <ProfilDetail /> : <ProfilTable />}
         </>
     ));

diff --git a/src/views/utilisateurs/index.tsx b/src/views/utilisateurs/index.tsx
@@ -1,7 +1,6 @@
 import {useObserver} from "mobx-react";
 
 import {Content} from "@focus4/layout";
-import {FontIcon} from "@focus4/toolbox";
 
 import {utilisateurStore} from "../../stores/utilisateur";
 
@@ -14,19 +13,14 @@ import {UtilisateurList} from "./list";
 export function Utilisateurs() {
     return useObserver(() => (
         <>
-            <Header>
-                <FontIcon>group</FontIcon>
-                <strong>
-                    {!router.state.utilisateurs.utiId
-                        ? "Utilisateurs"
-                        : `Détail de l'utilisateur : ${utilisateurStore.utilisateur.prenom.value ?? ""} ${
-                              utilisateurStore.utilisateur.nom.value ?? ""
-                          }`}
-                </strong>
-            </Header>
+            <Header
+                icon="group"
+                paramResolver={() =>
+                    `${utilisateurStore.utilisateur.prenom.value ?? ""} ${utilisateurStore.utilisateur.nom.value ?? ""}`
+                }
+            />
             {router.state.utilisateurs.utiId ? (
                 <Content>
-                    {" "}
                     <UtilisateurDetail />
                 </Content>
             ) : (