From 2162230141881f95d4e103b5e475a9d195c35e0f Mon Sep 17 00:00:00 2001
From: Renaud Heluin <renaud.heluin@novagaia.fr>
Date: Fri, 16 Feb 2024 11:59:56 +0000
Subject: [PATCH] Refactor code for FichesFilter and CardView components

---
 src/components/CardView.astro                 |  22 +-
 src/components/fiches/FichesCard.astro        |  44 ++--
 src/components/fiches/FichesFilter.astro      |   1 +
 .../fiches/FichesMetasDisplay.astro           | 224 +++++++++---------
 4 files changed, 140 insertions(+), 151 deletions(-)

diff --git a/src/components/CardView.astro b/src/components/CardView.astro
index 4fe0555..32c5612 100644
--- a/src/components/CardView.astro
+++ b/src/components/CardView.astro
@@ -1,30 +1,10 @@
 ---
-import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import { getLangFromUrl } from "@i18n/utils";
 import type { CollectionEntry } from "astro:content";
 import Card from "./Card";
 import FichesCard from "./fiches/FichesCard.astro";
 
-const REF_NAME = process.env.PUBLIC_REF_NAME;
-
 const lang = getLangFromUrl(Astro.url);
-const t = useTranslations(lang);
-
-function cleanImpact(meta) {
-  // TODO: replace with a proper translation
-  let regexp: RegExp;
-  switch (getLangFromUrl(Astro.url)) {
-    case "es":
-      regexp = /t("Fort")|t("Moyen")|t("Faible")/gi;
-      break;
-    case "en":
-      regexp = /t("High")|t("Medium")|t("Low")/gi;
-      break;
-    default:
-      regexp = /t("Fuerte")|t("Medio")|t("Débil")/gi;
-      break;
-  }
-  return entry.data[`${meta}`].replace(regexp, " ");
-}
 
 type Props = {
   entry: CollectionEntry<"fiches" | "lexique" | "personas"> | any;
diff --git a/src/components/fiches/FichesCard.astro b/src/components/fiches/FichesCard.astro
index d7963b6..96012b2 100644
--- a/src/components/fiches/FichesCard.astro
+++ b/src/components/fiches/FichesCard.astro
@@ -33,7 +33,7 @@ function cleanImpact(meta) {
       regexp = /t("Fuerte")|t("Medio")|t("Débil")/gi;
       break;
   }
-  return entry.data[`${meta}`].replace(regexp, " ");
+  return entry.data[`${meta}`]?.replace(regexp, " ") || "TBD";
 }
 
 const getScope = () => {
@@ -59,19 +59,35 @@ const getScope = () => {
     <span>{entry.data.title}</span>
   </h2>
   <div class="flex flex-row items-center justify-end gap-2">
-    <span
-      title={t("Priorité d'implémentation")}
-      aria-label={`${t("Priorité d'implémentation")} : ${
-        entry.data[`priority_implementation`]
-      }`}
-      role="img"
-    >
-      {
-        typeof entry.data[`priority_implementation`] === "number"
-          ? entry.data[`priority_implementation`]
-          : t(cleanImpact("priority_implementation"))
-      }
-    </span>
+    {
+      typeof entry.data[`priority_implementation`] === "number" && (
+        <span
+          title={t("Priorité d'implémentation")}
+          aria-label={`${t("Priorité d'implémentation")} : ${
+            entry.data[`priority_implementation`]
+          }`}
+          role="img"
+          class="text-base"
+        >
+          {t("Priorité d'implémentation") +
+            " " +
+            entry.data[`priority_implementation`]}
+        </span>
+      )
+    }
+    {
+      typeof entry.data[`priority_implementation`] !== "number" && (
+        <span
+          title={t("Priorité d'implémentation")}
+          aria-label={`${t("Priorité d'implémentation")} : ${
+            entry.data[`priority_implementation`]
+          }`}
+          role="img"
+        >
+          {t(cleanImpact("priority_implementation"))}
+        </span>
+      )
+    }
     <span>|</span>
     {
       getRefConfig().featuresEnabled.environmental_impact === MESURE_ON_3 && (
diff --git a/src/components/fiches/FichesFilter.astro b/src/components/fiches/FichesFilter.astro
index 2157bcf..0b3b4dc 100644
--- a/src/components/fiches/FichesFilter.astro
+++ b/src/components/fiches/FichesFilter.astro
@@ -30,6 +30,7 @@ const getDatas = async () => {
           if (Array.isArray(entry.data[key])) {
             datas
               .find((data) => data.name === key)
+              // @ts-ignore
               .values.push(...entry.data[key]);
           } else {
             datas
diff --git a/src/components/fiches/FichesMetasDisplay.astro b/src/components/fiches/FichesMetasDisplay.astro
index 96012b2..d3835b9 100644
--- a/src/components/fiches/FichesMetasDisplay.astro
+++ b/src/components/fiches/FichesMetasDisplay.astro
@@ -1,142 +1,134 @@
 ---
-import { getLangFromUrl, isStringInUi, useTranslations } from "@i18n/utils";
-import { slugify } from "@js/utils";
-import type { CollectionEntry } from "astro:content";
-import {
-  MESURE_ON_3,
-  MESURE_ON_5,
-  getRefConfig,
-} from "../../../referentiel-config";
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import { MESURE_ON_5, getRefConfig } from "../../../referentiel-config";
+import MetaItem from "./MetaItem.astro";
 
 type Props = {
-  entry: CollectionEntry<"fiches">;
+  className?: string;
+  frontmatter: any;
+  tableOfContents: Array<{ depth: number; text: string; slug: string }>;
 };
 
+const { className, frontmatter, tableOfContents } = Astro.props;
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
-
-const REF_NAME = import.meta.env.PUBLIC_REF_NAME || process.env.PUBLIC_REF_NAME;
-
-const { entry } = Astro.props;
-
-function cleanImpact(meta) {
-  // TODO: replace with a proper translation
-  let regexp: RegExp;
-  switch (getLangFromUrl(Astro.url)) {
-    case "es":
-      regexp = /t("Fort")|t("Moyen")|t("Faible")/gi;
-      break;
-    case "en":
-      regexp = /t("High")|t("Medium")|t("Low")/gi;
-      break;
-    default:
-      regexp = /t("Fuerte")|t("Medio")|t("Débil")/gi;
-      break;
-  }
-  return entry.data[`${meta}`]?.replace(regexp, " ") || "TBD";
-}
-
-const getScope = () => {
-  if (getRefConfig().featuresEnabled.scope === true) {
-    return { "data-scope": slugify(entry.data.scope || "") };
-  }
-};
 ---
 
 <div
-  class="mb-0 mt-0 text-lg font-bold text-neutral md:grid md:grid-cols-[2fr_1fr] md:grid-rows-2 md:gap-2"
-  data-lifecycle={slugify(entry.data.lifecycle)}
-  {...getScope()}
-  data-saved_resources={slugify(entry.data.saved_resources.join(" "))}
+  class:list={[
+    className,
+    `box flex flex-col border-neutral-transparent
+        md:flex-row md:flex-wrap md:justify-between md:gap-4
+        lg:sticky lg:top-[80px] lg:mt-8 lg:flex-col`,
+  ]}
 >
-  <h2
-    class="m-0 flex flex-row items-start text-lg font-bold text-neutral md:col-span-1 md:row-span-2"
-  >
-    <span class="badge mr-2 whitespace-nowrap border-primary bg-primary">
-      {REF_NAME}
-      {entry.data.refID}
-    </span>
-    <span>{entry.data.title}</span>
-  </h2>
-  <div class="flex flex-row items-center justify-end gap-2">
-    {
-      typeof entry.data[`priority_implementation`] === "number" && (
-        <span
-          title={t("Priorité d'implémentation")}
-          aria-label={`${t("Priorité d'implémentation")} : ${
-            entry.data[`priority_implementation`]
-          }`}
-          role="img"
-          class="text-base"
-        >
-          {t("Priorité d'implémentation") +
-            " " +
-            entry.data[`priority_implementation`]}
-        </span>
-      )
-    }
+  <ul class="my-2 md:mb-0">
+    <MetaItem
+      frontmatter={frontmatter}
+      meta="lifecycle"
+      displayTitle
+      fontSize="sm"
+    />
+
+    <MetaItem
+      frontmatter={frontmatter}
+      fontSize="sm"
+      meta="environmental_impact"
+      displayTitle
+    />
+
     {
-      typeof entry.data[`priority_implementation`] !== "number" && (
-        <span
-          title={t("Priorité d'implémentation")}
-          aria-label={`${t("Priorité d'implémentation")} : ${
-            entry.data[`priority_implementation`]
-          }`}
-          role="img"
-        >
-          {t(cleanImpact("priority_implementation"))}
-        </span>
+      getRefConfig().featuresEnabled.moe === true && (
+        <MetaItem
+          frontmatter={frontmatter}
+          meta="moe"
+          displayTitle
+          fontSize="sm"
+        />
       )
     }
-    <span>|</span>
     {
-      getRefConfig().featuresEnabled.environmental_impact === MESURE_ON_3 && (
-        <span
-          title={t("Impact environnemental")}
-          aria-label={`${t("Impact environnemental")} : ${
-            entry.data[`environmental_impact`]
-          }`}
-        >
-          {t(cleanImpact("environmental_impact"))}
-        </span>
+      getRefConfig().featuresEnabled.priority_implementation === MESURE_ON_5 &&
+      getRefConfig().featuresEnabled.moe === true ? (
+        <MetaItem
+          frontmatter={{
+            "priority-level": frontmatter["priority_implementation"],
+          }}
+          meta="priority-level"
+          displayTitle
+          fontSize="sm"
+        />
+      ) : (
+        <MetaItem
+          frontmatter={frontmatter}
+          meta="priority_implementation"
+          displayTitle
+          fontSize="sm"
+        />
       )
     }
     {
-      getRefConfig().featuresEnabled.environmental_impact === MESURE_ON_5 && (
-        <span
-          title={t("Impact environnemental")}
-          aria-label={`${t("Impact environnemental")} : ${
-            entry.data[`environmental_impact`]
-          }`}
-          class="text-base"
-        >
-          {`${t("Impact environnemental")} : ${
-            entry.data[`environmental_impact`]
-          }`}
-        </span>
-      )
+      getRefConfig().featuresEnabled.perimetre === true ? (
+        <MetaItem
+          frontmatter={frontmatter}
+          meta="scope"
+          displayTitle
+          fontSize="sm"
+        />
+      ) : null
     }
+    <MetaItem
+      frontmatter={frontmatter}
+      meta="responsible"
+      collectionType="personas"
+      collectionTypeMeta="shortName"
+      displayTitle
+      fontSize="sm"
+    />
+  </ul>
+  <div
+    class="border-t-2 border-neutral-transparent md:border-r-2 lg:border-t-2"
+  >
   </div>
+  <ul class="my-2 md:mb-0">
+    <MetaItem
+      frontmatter={frontmatter}
+      meta="saved_resources"
+      displayTitle
+      fontSize="sm"
+    />
+  </ul>
   <div
-    class="mt-2 flex flex-row items-center justify-end gap-2 md:mt-0 md:gap-4"
+    class="border-t-2 border-neutral-transparent md:border-r-2 lg:border-r-0"
   >
-    <span
-      title={t("lifecycle")}
-      class="badge border-primary text-xs text-neutral"
-    >
-      {/* @ts-ignore */}
-      {isStringInUi(lang, entry.data.lifecycle) && t(entry.data.lifecycle)}
-    </span>
+  </div>
+  <div class="my-2 text-sm md:mb-0">
+    <p class="mb-0 font-bold">{t("Sommaire :")}</p>
     {
-      getRefConfig().featuresEnabled.scope === true && (
-        <span
-          title={t("scope")}
-          class="badge border-primary text-xs text-neutral"
-        >
-          {/* @ts-ignore */}
-          {isStringInUi(lang, entry.data.scope) && t(entry.data.scope)}
-        </span>
-      )
+      /*
+    <!-- <nav
+        aria-label="navigation article"
+        class="summary-article"
+        dangerouslySetInnerHTML={{ __html: tableOfContents }}
+        /> -->
+     */
     }
+    <nav aria-label="navigation article" class="summary-article">
+      <ul>
+        {
+          tableOfContents.map((h) => {
+            return (
+              <li>
+                {" "}
+                <a href={`#${h.slug}`}>{h.text}</a>
+              </li>
+            );
+          })
+        }
+        <li>
+          <a href="#principe-de-validations">{t("Principe de validation")}</a>
+        </li>
+      </ul>
+    </nav>
   </div>
 </div>