@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-drugs/heart/JoCard.vue

@@ -0,0 +1,314 @@
+<!--
+  Une publication du Journal Officiel pour une presentation (CIP/UCD).
+
+  Meme en-tete que les autres cartes de resultat du hub (marque, MITM, LES) :
+  le titre au palier des cartes, le laboratoire et le circuit en sous-titre, le
+  compte en pastille a droite, la source en pied. L'export de la carte se
+  demande par la roue crantee, comme partout ailleurs, pas par un bouton qui
+  lui serait propre.
+
+  Porte de `heart/joCard.vue` de fr_drugs_app.
+-->
+<template>
+  <RmTableCard class="oip-drugs" :lang="dateLang" :payload="exportPayload">
+    <template #header>
+      <div class="jo_identity">
+        <h3 class="rm-table-card__title">{{ product.label }}</h3>
+        <p class="jo_meta">
+          {{ product.manufacturer }}
+          <template v-if="product.distribution_channel">
+            · {{ product.distribution_channel }}
+          </template>
+        </p>
+        <p v-if="lastPrice?.jorf_code || lastPrice?.nor_code" class="jo_refs">
+          <span v-if="lastPrice?.jorf_code">JORF {{ lastPrice.jorf_code }}</span>
+          <span v-if="lastPrice?.jorf_code && lastPrice?.nor_code"> · </span>
+          <span v-if="lastPrice?.nor_code">NOR {{ lastPrice.nor_code }}</span>
+        </p>
+      </div>
+
+      <div class="jo_actions">
+        <!-- Emplacement libre pour un appelant (la fiche projet y pose son
+             bouton « Commenter ») avant le bouton projet : vide partout ailleurs. -->
+        <slot name="hubr-actions" />
+        <!-- La liste JO passe par le second cluster, qui range l'`_id` du
+             document dans `id` (cf. mapHits de useOipDrugsElastic). -->
+        <component
+          :is="projectButton"
+          v-if="projectButton"
+          :resource-id="product._id ?? product.id"
+          type="FrDrugPriceJo"
+          :label="product.label"
+          compact
+        />
+      </div>
+
+      <div class="jo_facts">
+        <span class="jo_count">{{ countLabel }}</span>
+        <span v-if="lastPrice?.announce_date" class="jo_date">
+          {{ locale === "fr" ? "Dernière publication" : "Latest publication" }} :
+          <RmDate :date="lastPrice.announce_date" :lang="dateLang" />
+        </span>
+      </div>
+    </template>
+
+    <RmTable :columns="table.columns" :rows="table.rows">
+      <template v-for="key in table.typeKeys.Date" :key="key" #[key]="{ value }">
+        <RmDate :lang="dateLang" :date="value" />
+      </template>
+      <template v-for="key in table.typeKeys.Code" :key="key" #[key]="{ value }">
+        <span>{{ value.join(" - ") }}</span>
+      </template>
+      <!-- Memes montants que le suivi des prix : format monetaire complet, et
+           « NA » quand le tarif n'existe pas (un « € » seul se lisait comme
+           un prix nul). Un `<p>` ici prenait la marge du reset et decalait la
+           cellule d'une demi-ligne par rapport a ses voisines. -->
+      <template v-for="key in table.typeKeys.Price" :key="key" #[key]="{ value }">
+        <span>{{ money(value) }}</span>
+      </template>
+    </RmTable>
+
+    <!-- Meme pied que les cartes de marque, MITM et LES : la source, et rien
+         d'autre. La gouttiere vient de RmTableCard. -->
+    <div class="jo_footer">
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.ACTUALITE_JO"
+        :last-label="$t('oipDrugs.heart.sources.lastPrice')"
+        :last-date="lastPrice?.announce_date"
+      />
+    </div>
+  </RmTableCard>
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../oip-drugs/utils/sourceUuids";
+import { valueTable } from "../../../utils/valueTable";
+
+const props = defineProps({
+  product: {
+    required: true,
+    type: Object
+  },
+  inDetails: {
+    type: Boolean,
+    default: false
+  }
+});
+const { locale } = useI18n();
+const { projectButton } = useOipResourceHooks();
+
+const dateLang = computed(() => (locale.value === "fr" ? "fr" : "en"));
+
+const lastPrice = computed(() => {
+  return props.product.jo?.length > 0
+    ? [...props.product.jo].sort(
+        (a: any, b: any) =>
+          new Date(b.announce_date).getTime() -
+          new Date(a.announce_date).getTime()
+      )[0]
+    : props.product.jo?.[0];
+});
+
+/** Meme formatage monetaire que les cartes du suivi des prix. */
+function money(value: any) {
+  if (value === null || value === undefined || value === "" || value === "-") return "NA";
+  return new Intl.NumberFormat(locale.value === "en" ? "en-US" : "fr-FR", {
+    style: "currency",
+    currency: "EUR",
+    maximumFractionDigits: 2,
+  }).format(Number(value));
+}
+
+const countLabel = computed(() => {
+  const count = props.product.jo?.length ?? 0;
+  return locale.value === "fr"
+    ? `${count} publication${count > 1 ? "s" : ""} JO`
+    : `${count} JO publication${count > 1 ? "s" : ""}`;
+});
+
+/**
+ * Ce que la roue crantee ne peut pas lire du rendu : l'historique JO complet
+ * de la presentation, quand le tableau n'en montre que le tarif courant.
+ */
+const exportPayload = computed(() => ({
+  title: `France JO - ${props.product.label}`,
+  subtitle: `🇫🇷 JO: ${props.product.label}`,
+  limit: 10000,
+  sheets: [
+    {
+      name: locale.value === "fr" ? "Données JO" : "JO Data",
+      data: props.product.jo ?? [],
+      schema: [
+        { column: locale.value === 'fr' ? 'Code NOR' : 'NOR Code', type: String, value: (a: any) => a.nor_code, width: 20 },
+        { column: locale.value === 'fr' ? 'Code JORF' : 'JORF Code', type: String, value: (a: any) => a.jorf_code, width: 20 },
+        { column: locale.value === 'fr' ? "Date d'application" : 'Application Date', type: Date, format: 'mmm d yyyy', value: (a: any) => new Date(a.application_date), width: 15 },
+        { column: locale.value === 'fr' ? 'PFHT' : 'Ex-Factory Price', type: Number, value: (a: any) => a.factory_price, width: 15 },
+        { column: locale.value === 'fr' ? 'Prix Public' : 'Public Price', type: Number, value: (a: any) => a.public_price, width: 15 },
+        { column: locale.value === 'fr' ? 'Prix TFR' : 'TFR Price', type: Number, value: (a: any) => a.reference_price, width: 15 },
+      ],
+    },
+  ],
+}));
+
+const buildTable = computed(() => {
+  const isCIP = props.product.distribution_channel.includes("CIP");
+  return props.inDetails
+    ? {
+        head:
+          locale.value === "en"
+            ? [
+                `NOR/JORF Code`,
+                "JO Date",
+                "Application Date",
+                "Ex-Factory Price",
+                "Public Price",
+                "TFR Price"
+              ]
+            : [
+                `Code NORF/JORF`,
+                "JO Date",
+                "Date d'Application",
+                "PFHT",
+                "Prix Public",
+                "Prix TFR"
+              ],
+        data: props.product?.jo?.map((a: any) => {
+          return {
+            values: [
+              [a.nor_code, a.jorf_code],
+              a.announce_date,
+              a.application_date,
+              a.factory_price,
+              a.public_price,
+              a.reference_price
+            ]
+          };
+        }) ?? [{ values: [] }],
+
+        type: ["Code", "Date", "Date", "Price", "Price", "Price"],
+        style: {
+          align: ["left", "left", "left", "right", "right", "right"] as const,
+          size: [2, 2, 2, 2, 2, 2]
+        }
+      }
+    : {
+        head:
+          locale.value === "en"
+            ? [
+                `${isCIP ? "CIP Code" : "UCD Code"}`,
+                "Application Date",
+                "Ex-Factory Price",
+                "Public Price",
+                "TFR Price"
+              ]
+            : [
+                `${isCIP ? "Code CIP" : "Code UCD"}`,
+                "Date d'Application",
+                "PFHT",
+                "Prix Public",
+                "Prix TFR"
+              ],
+        data: [
+          props.product.jo?.map((a: any) => {
+            return {
+              values: [
+                props.product.local_drug_id,
+                a.application_date,
+                a.factory_price,
+                a.public_price,
+                a.reference_price
+              ]
+            };
+          })?.[0] ?? [{ values: [] }]
+        ],
+        type: ["", "Date", "Price", "Price", "Price"],
+        style: {
+          align: ["left", "left", "right", "right", "right"] as const,
+          size: [3, 3, 2, 2, 2]
+        }
+      };
+});
+
+// Le tableau du JO etait ecrit pour `arg-table` : des libelles de tete et des
+// lignes `{ values: [...] }`. La conversion en colonnes de RmTable est
+// mecanique, cf. `valueTable`.
+const table = computed(() => {
+  const converted = valueTable(
+    buildTable.value.head,
+    buildTable.value.data,
+    buildTable.value.type,
+    buildTable.value.style,
+  );
+  // Une carte de liste ne porte qu'une ligne : ses fleches de tri n'ont rien a
+  // trier. La fiche, elle, empile tout l'historique et se trie.
+  return props.inDetails
+    ? converted
+    : {
+        ...converted,
+        columns: converted.columns.map((column: any) => ({ ...column, sortable: false })),
+      };
+});
+</script>
+
+<style scoped>
+.jo_identity {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.jo_meta {
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: var(--font-13);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jo_refs {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+}
+
+.jo_actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  gap: var(--space-8);
+}
+
+.jo_facts {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+/* Meme pastille que le compte de presentations des cartes de marque. */
+.jo_count {
+  padding: var(--space-2) var(--space-8);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+  color: var(--color-primary);
+  font-size: var(--font-12);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.jo_date {
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+  white-space: nowrap;
+}
+
+.jo_footer {
+  border-top: 1px solid var(--border-default);
+  background: var(--bg-surface-2);
+  font-size: var(--font-13);
+}
+</style>

package/layer/app/components/oip-drugs/heart/TextHighlight.vue

@@ -0,0 +1,326 @@
+<template>
+  <span class="oip-drugs" :class="haveReadMore && needsMore ? 'crop_display' : ''">
+    <span
+      :id="id"
+      :class="crop && !showMore ? 'crop' : ''"
+      :style="crop && !showMore ? `-webkit-line-clamp: ${lines}` : ''"
+      v-html="renderText"
+    />
+    <div
+      v-if="crop && haveReadMore && needsMore"
+      @click="toggleMore"
+      class="read_more"
+    >
+      {{ getReadMore }}
+    </div>
+  </span>
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "heartTextHighlight",
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    queries: {
+      type: Array as PropType<string[]>,
+      default: null,
+    },
+    genes: {
+      type: Array as PropType<any[]>,
+      default: null,
+    },
+    crop: {
+      type: Boolean,
+      default: false,
+    },
+    lines: {
+      type: Number,
+      default: 3,
+    },
+    haveReadMore: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: null,
+    },
+    customReadMore: {
+      type: Object as () => { more: string; less: string },
+      default: null,
+    },
+    /**
+     * Surlignage des pages d'indication (LES) : fr_drugs_app le lisait dans
+     * le chemin (`/indication`), le layer le recoit en prop.
+     */
+    indication: {
+      type: Boolean,
+      default: undefined,
+    },
+    lang: {
+      type: String as () => "en" | "fr" | "es",
+      default: "en",
+      validator: (value: string) => {
+        return ["en", "fr", "es"].includes(value);
+      },
+    },
+  },
+  emits: ["onShowMore", "onShowLess"],
+  setup(props, { emit }) {
+    // Sous une fiche indication (cf. IndicationFiche), sans prop explicite.
+    const indicationPage = inject<boolean>("oipDrugsIndicationPage", false);
+    const showMore = ref(false);
+    const indic = ref<HTMLElement | null>(null);
+
+    const getReadMore = computed(() => {
+      if (props.customReadMore !== null) {
+        return showMore.value
+          ? props.customReadMore.less
+          : props.customReadMore.more;
+      } else {
+        const texts = {
+          more: { en: "Read more", fr: "Voir plus", es: "Ver más" },
+          less: { en: "Read less", fr: "Voir moins", es: "Ver menos" },
+        };
+        return showMore.value ? texts.less[props.lang] : texts.more[props.lang];
+      }
+    });
+
+    function removeAccents(str: string): string {
+      return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    }
+
+    function addSingleAccent(
+      word: string,
+      char: string,
+      accentedChar: string
+    ): string[] {
+      let variants: string[] = [];
+      for (let i = 0; i < word.length; i++) {
+        if (word[i]!.toLowerCase() === char) {
+          variants.push(word.slice(0, i) + accentedChar + word.slice(i + 1));
+        }
+      }
+      return variants;
+    }
+
+    function addAccents(word: string): string[] {
+      let variants: string[] = [word];
+      if (!word.toLowerCase().includes("é")) {
+        variants = variants.concat(addSingleAccent(word, "e", "é"));
+      }
+      if (!word.toLowerCase().includes("ï")) {
+        variants = variants.concat(addSingleAccent(word, "i", "ï"));
+      }
+      return variants;
+    }
+
+    function handleEndingS(word: string): string[] {
+      let variants: string[] = [word];
+      if (word.toLowerCase().endsWith("s")) {
+        variants.push(word.slice(0, -1));
+      } else {
+        variants.push(word + "s");
+      }
+      return variants;
+    }
+
+    function capitalizeFirstLetter(str: string): string {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    /**
+     * Les termes arrivent sous deux formes selon la barre de recherche qui les
+     * a produits : une chaine, ou un operateur `{ type, value }`. On ramene
+     * tout a des mots, et on ecarte les termes exclus — surligner ce que
+     * l'utilisateur a demande d'exclure n'aurait pas de sens.
+     */
+    function toWords(arr: any[]): string[] {
+      return (arr ?? [])
+        .filter((item) => item !== null && item !== undefined)
+        .filter((item) => typeof item !== "object" || item.type !== "not")
+        .map((item) => (typeof item === "object" ? item.value : item))
+        .filter((value): value is string => typeof value === "string" && value.trim() !== "")
+        // Une recherche a plusieurs mots est une phrase avec slop, ou un ET
+        // flou : les mots matchent separes (« cancer … de l’ovaire »). On
+        // les surligne donc un par un, sans les mots-outils (« de », « la »).
+        .flatMap((value) => {
+          const words = value.trim().split(/\s+/);
+          return words.length > 1 ? words.filter((word) => word.length >= 3) : words;
+        });
+    }
+
+    function processArray(input: any[]): string[] {
+      let result: string[] = [];
+      const arr = toWords(input);
+
+      if (arr !== null && arr.length > 0) {
+        arr.forEach((word) => {
+          // Add original word
+          result.push(word);
+
+          // Handle accents removal
+          const wordWithoutAccents = removeAccents(word);
+          if (word !== wordWithoutAccents) {
+            result.push(wordWithoutAccents);
+          }
+
+          // Handle adding accents to e and i if no accents already exist
+          const accentedVariants = addAccents(word);
+          accentedVariants.forEach((accentedWord) => {
+            result.push(accentedWord);
+          });
+
+          // Handle ending s for original word, word without accents, and accented variants
+          const wordsToProcess = [
+            word,
+            wordWithoutAccents,
+            ...accentedVariants,
+          ];
+          wordsToProcess.forEach((w) => {
+            const sVariants = handleEndingS(w);
+            sVariants.forEach((sVariant) => {
+              if (!result.includes(sVariant)) {
+                result.push(sVariant);
+              }
+            });
+          });
+
+          // Add uppercase variants of each processed word
+          const processedWords = [...result];
+          processedWords.forEach((w) => {
+            const capitalized = capitalizeFirstLetter(w);
+            if (!result.includes(capitalized)) {
+              result.push(capitalized);
+            }
+          });
+        });
+      }
+
+      return result;
+    }
+
+    function toggleMore() {
+      showMore.value = !showMore.value;
+
+      if (showMore.value) {
+        emit("onShowMore");
+      } else {
+        emit("onShowLess");
+      }
+    }
+
+    function escapeRegExp(str: string) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    }
+
+    const HTML_ESCAPES: Record<string, string> = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+    };
+    function escapeHtml(str: string) {
+      return str.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c] ?? c);
+    }
+
+    /**
+     * Le texte part dans un `v-html` : il vient d'Elasticsearch brut, on
+     * l'echappe. Seul prefixe HTML tolere : le statut d'avis que la carte
+     * d'acces precoce colle devant l'essentiel (`has_fav_access` /
+     * `has_defav_access`), rendu tel quel et laisse hors du surlignage.
+     */
+    const STATUS_PREFIX = /^<span class="has_(?:de)?fav_access">[^<]*<\/span>/;
+
+    const needsMore = computed(() => {
+      const fullHeight = ref(0);
+      const originalHeight = ref(0);
+
+      if (indic.value !== null) {
+        indic.value.classList.remove("crop");
+
+        fullHeight.value = indic.value.offsetHeight;
+        indic.value.classList.add("crop");
+        originalHeight.value = indic.value.offsetHeight;
+      }
+      return fullHeight.value > originalHeight.value;
+    });
+
+    const renderText = computed(() => {
+      const prefix = STATUS_PREFIX.exec(props.text ?? "")?.[0] ?? "";
+      let returnText = escapeHtml((props.text ?? "").slice(prefix.length));
+
+      if (props.queries !== null && props.queries.length > 0) {
+        const sepQueries = props.queries;
+        // Les termes sont echappes comme le texte, pour se retrouver dedans.
+        const queries = processArray(sepQueries)
+          .filter((query) => query.trim() !== "")
+          .map((query) => escapeRegExp(escapeHtml(query)));
+
+        // Plus rien a surligner (que des termes exclus, par exemple) : une
+        // alternation vide matcherait chaque position du texte.
+        if (queries.length === 0) return prefix + returnText;
+
+        // Create a single regex to match any of the queries, case-insensitive.
+        // `$` : un terme en toute fin de texte se surligne aussi.
+        const regex = new RegExp(
+          (props.indication ?? indicationPage)
+            ? `\\b(${queries.join("|")})(?=\\s|\\d|\\W|\\w|\\b)`
+            : `\\b(${queries.join("|")})(?=[s\\d\\W]|$)`,
+          "gi" // case-insensitive matching
+        );
+
+        returnText = returnText.replace(regex, (match) => {
+          return `<mark>${match}</mark>`;
+        });
+      }
+
+      return prefix + returnText;
+    });
+
+    onMounted(() => {
+      indic.value = document.getElementById(props.id);
+    });
+
+    return {
+      showMore,
+      needsMore,
+      renderText,
+      getReadMore,
+      toggleMore,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.crop {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.crop_display {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.read_more {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-decoration-line: underline;
+  cursor: pointer;
+  color: var(--primary);
+}
+.read_more:hover {
+  color: var(--primary-hover) !important;
+}
+</style>