@tekkare/romulus 0.1.250 → 0.1.252

package/layer/app/components/oip-drugs/heart/results/les/Card.vue

@@ -0,0 +1,340 @@
+<!--
+  Carte d'indication du referentiel LES (JO).
+
+  Une carte = une indication (RmResultCard) : quel(s) produit(s), combien de
+  presentations, quel statut et quel libelle. L'historique complet vit dans la
+  fiche, ouverte au clic sur la carte entiere (les actions internes gardent
+  la main). Les liens passent par useOipResourceNav (chemins de fr_drugs_app).
+
+  En mode `inDetails` (tete de la fiche), la carte n'est plus cliquable et le
+  libelle s'affiche en entier.
+-->
+<template>
+  <RmResultCard
+    class="oip-drugs"
+    :clickable="!inDetails"
+    :count="result.products.length"
+    :count-label="countLabel"
+    :count-extra="allBrands.length > 1 ? `${allBrands.length} ${locale === 'fr' ? 'marques' : 'brands'}` : ''"
+    :more-label="inDetails ? '' : locale === 'fr' ? 'Voir le détail' : 'See details'"
+    :lang="dateLang"
+    :link="detailsHref"
+    @click="!inDetails && openCard($event)"
+  >
+    <template #title>
+      <OipDrugsHeartTextHighlight :text="allBrands.join(', ')" :queries="getHighlight(['brand'])" />
+    </template>
+    <template v-if="subtitle || allBrands.length > 1" #subtitle>
+      <OipDrugsHeartTextHighlight v-if="subtitle" :text="subtitle" :queries="getHighlight(['molecule', 'company'])" />
+      <!-- Plusieurs marques : un lien par marque, la carte ne peut pas choisir. -->
+      <div v-if="allBrands.length > 1" class="brand_links">
+        <span>{{ locale === "fr" ? "Fiches marque :" : "Brand pages:" }}</span>
+        <a
+          v-for="brand in allBrands"
+          :key="brand"
+          :href="nav.appHref('fr_drugs_app', brandUrl(brand))"
+          class="brand_link"
+          @click="openBrand($event, brand)"
+        >
+          {{ brand }}
+        </a>
+      </div>
+    </template>
+
+    <!-- Une carte LES porte une indication et les produits qui la portent :
+         c'est cette liste de documents qui part dans le projet. -->
+    <template #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" />
+      <component
+        :is="projectButton"
+        v-if="projectButton"
+        :resource-id="indicationIds"
+        type="FrHasIndication"
+        :label="allBrands.join(', ')"
+        compact
+      />
+    </template>
+
+    <template #meta>
+      <span class="rm-rcard__label">
+        {{ locale === "fr" ? "Dernière date début" : "Last start date" }} ·
+        <RmDate :date="lastStart[0]" :lang="dateLang" />
+      </span>
+      <span class="rm-rcard__ref">{{ result.indication }}</span>
+      <OipDrugsHeartResultsLesSourceTag
+        v-for="(source, index) in allSource"
+        :key="index"
+        :sourceValue="source"
+      />
+    </template>
+
+    <p class="rm-rcard__lead" :class="{ 'rm-rcard__clamp': !inDetails }">
+      <OipDrugsHeartTextHighlight :text="indicationText" :queries="getSearches" :id="result.indication" />
+    </p>
+
+    <!-- Rangees choisies dans « Personnaliser ». -->
+    <OipDrugsHeartResultsPrefRows scope="les" :values="prefValues" />
+
+    <!-- Ce que le moteur a reellement matche, cumule sur les lignes fusionnees
+         sous cette indication. -->
+    <OipDrugsHeartResultsMatchExplain :hit="{ highlight: result.highlight }" />
+
+    <template #footer>
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.LES"
+        :last-label="$t('oipDrugs.heart.sources.lastIndication')"
+        :last-date="lastStart"
+      />
+    </template>
+  </RmResultCard>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import { HEART_SOURCE_UUIDS } from "../../../../../oip-drugs/utils/sourceUuids";
+import { heartFormatDate } from "../../../../../oip-drugs/utils/heartStyleAndFormat";
+import { drugsBrandPath } from "../../../../../oip-drugs/kinds";
+import { useOipResourceHooks } from "../../../../../composables/useOipResourceHooks";
+import { useOipResourceNav } from "../../../../../composables/useOipResourceNav";
+
+const props = defineProps({
+  result: {
+    required: true,
+    type: Object,
+  },
+  inDetails: {
+    type: Boolean,
+    default: false,
+  },
+  /** Termes a surligner (ex-filterStore de la page de recherche). */
+  highlight: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { locale } = useI18n();
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+
+const dateLang = computed(() => (locale.value === "en" ? "en" : "fr"));
+
+/**
+ * Les documents que porte la carte : la fusion par indication (cf. la page
+ * Indications) empile un produit par marque, et `card_id` vaut le `_id` du
+ * document dans l'index. C'est ce que le projet range.
+ */
+const indicationIds = computed(() =>
+  (props.result.products ?? [])
+    .map((product: any) => product?.card_id)
+    .filter((id: any) => id != null),
+);
+
+/**
+ * La fiche marque, onglet LES, tiroir ouvert sur cette indication. La marque
+ * est le pivot du hub : la carte y mene, la fiche indication reste accessible
+ * depuis le tableau (colonne ID).
+ */
+function brandUrl(brand: string) {
+  const query = new URLSearchParams({ tab: "les", indication: String(props.result.indication ?? "") });
+  return `${drugsBrandPath(brand)}?${query.toString()}`;
+}
+
+/** La carte entiere mene a la premiere marque ; les autres ont leur lien dans le sous-titre. */
+const detailsUrl = computed(() =>
+  allBrands.value.length > 0
+    ? brandUrl(allBrands.value[0]!)
+    : `/hubr/heart/indication/${encodeURIComponent(String(props.result.indication ?? ""))}`
+);
+const detailsHref = computed(() => nav.appHref("fr_drugs_app", detailsUrl.value));
+
+/**
+ * Les elements qui portent leur propre action (lien, bouton, champ) gardent
+ * la main : le clic qui en vient est ignore (cf. heartOpenCard).
+ */
+const OWN_ACTION = "a, button, input, select, textarea, [role='menu'], .rm-tooltip";
+
+function openCard(event: MouseEvent) {
+  const target = event.target as HTMLElement | null;
+  if (target?.closest(OWN_ACTION)) return;
+  nav.openApp("fr_drugs_app", detailsUrl.value);
+}
+
+/** Lien de marque : Ctrl/Cmd-clic laisse faire le navigateur. */
+function openBrand(event: MouseEvent, brand: string) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
+  event.preventDefault();
+  nav.openApp("fr_drugs_app", brandUrl(brand));
+}
+
+const allBrands = computed(() => {
+  return [
+    ...new Set(props.result.products.map((a: any) => a.brand).filter(Boolean)),
+  ] as string[];
+});
+const allATC = computed(() => {
+  return [
+    ...new Set(props.result.products.map((a: any) => a.atc5_fr).filter(Boolean)),
+  ] as string[];
+});
+const allCompanies = computed(() => {
+  return [
+    ...new Set(
+      props.result.products.map((a: any) => a.owner_regroup).filter(Boolean)
+    ),
+  ] as string[];
+});
+
+/** « MOLECULE (ATC5) · FABRICANT », comme le sous-titre de la carte de marque. */
+const subtitle = computed(() =>
+  [allATC.value.join(", "), allCompanies.value.join(", ")]
+    .filter(Boolean)
+    .join(" · ")
+);
+
+const countLabel = computed(() => {
+  const n = props.result.products.length;
+  if (locale.value === "en") return n > 1 ? "products" : "product";
+  return n > 1 ? "produits" : "produit";
+});
+
+const indicationText = computed(() => {
+  const label = props.result.indication_label_fr ?? "";
+  return label.charAt(0) + label.slice(1)?.toLowerCase();
+});
+
+// Tags maladies rares / oncologie : identiques pour tous les produits d'une même
+// indication (dérivés du libellé), on lit donc le premier produit.
+const tagSource = computed(() => props.result.products?.[0] ?? {});
+
+const rareList = computed(() => {
+  const src =
+    locale.value === "fr"
+      ? tagSource.value.rare_diseases_fr
+      : tagSource.value.rare_diseases_en;
+  return Array.isArray(src)
+    ? ([
+        ...new Set(
+          src.map((a: any) => a.concat_disease_name_orpha_code).filter(Boolean)
+        ),
+      ] as string[])
+    : [];
+});
+
+const oncologyTerms = computed(() => {
+  const tagging =
+    locale.value === "fr"
+      ? tagSource.value.oncology_tagging_fr
+      : tagSource.value.oncology_tagging_en;
+  if (!Array.isArray(tagging)) return [];
+  const terms = new Set<string>();
+  tagging.forEach((t: any) => {
+    if (t.preferred_label) terms.add(t.preferred_label);
+  });
+  return [...terms];
+});
+
+const oncologyIcd10 = computed(() => {
+  const tagging =
+    locale.value === "fr"
+      ? tagSource.value.oncology_tagging_fr
+      : tagSource.value.oncology_tagging_en;
+  if (!Array.isArray(tagging)) return [];
+  const labels = new Set<string>();
+  tagging.forEach((t: any) => {
+    const icd = t.icd10;
+    if (Array.isArray(icd)) {
+      icd.forEach((x: any) => x?.combined_label && labels.add(x.combined_label));
+    } else if (icd?.combined_label) {
+      labels.add(icd.combined_label);
+    }
+  });
+  return [...labels];
+});
+
+/**
+ * Ce que la carte peut montrer en plus, si « Personnaliser » le demande.
+ * Les valeurs sont dedupliquees : une indication porte souvent plusieurs
+ * produits qui repetent le meme statut ou le meme type.
+ */
+const prefValues = computed(() => {
+  const products: any[] = props.result.products ?? [];
+  const uniq = (values: any[]) =>
+    [...new Set(values.map((v) => (typeof v === "string" ? v.trim() : v)).filter(Boolean))] as string[];
+
+  return {
+    rare: rareList.value,
+    oncoIcd10: oncologyIcd10.value,
+    oncoTerms: oncologyTerms.value,
+    statut: uniq(products.map((p) => p.statut_title)),
+    // La date de fin porte son motif quand il est connu : « fini » sans
+    // pourquoi n'aide personne.
+    endDate: uniq(
+      products
+        .filter((p) => p.end_date)
+        .map((p) =>
+          [heartFormatDate(p.end_date), p.end_motive ? `(${p.end_motive})` : null]
+            .filter(Boolean)
+            .join(" ")
+        )
+    ),
+    // Le referentiel melange les casses (« Générique » / « générique »).
+    drugType: uniq(
+      products.map((p) =>
+        typeof p.drug_type === "string" && p.drug_type.trim()
+          ? p.drug_type.trim().charAt(0).toUpperCase() + p.drug_type.trim().slice(1).toLowerCase()
+          : null
+      )
+    ),
+    ucd: uniq(products.map((p) => p.ucd13_code)),
+  };
+});
+
+
+const allSource = computed(() => {
+  return [
+    ...new Set(props.result.products.map((a: any) => `${a.source}`)),
+  ] as string[];
+});
+
+const lastStart = computed(() => {
+  return [
+    // Sans le filtre, les dates nulles devenaient la chaine "null" et
+    // passaient dans le tri.
+    ...new Set(props.result.products.map((a: any) => a.start_date).filter(Boolean)),
+  ].sort(
+    (a: any, b: any) => new Date(b).getTime() - new Date(a)?.getTime()
+  ) as string[];
+});
+
+/**
+ * Termes surlignes. fr_drugs_app y ajoutait les filtres marque, molecule et
+ * fabricant de la page de recherche : la prop `highlight` les porte tous.
+ */
+function getHighlight(_filters: string[]) {
+  return getSearches.value;
+}
+
+const getSearches = computed(() =>
+  (props.highlight ?? []).filter((f: any) => typeof f === "string" && f.length > 0),
+);
+</script>
+
+<style scoped>
+.brand_links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin-top: 4px;
+}
+.brand_link {
+  color: var(--primary);
+  font-weight: 600;
+}
+.brand_link:hover {
+  text-decoration: underline;
+}
+</style>

package/layer/app/components/oip-drugs/heart/results/les/Drawer.vue

@@ -0,0 +1,67 @@
+<!--
+  Tiroir d'une indication de la liste en sus, depuis la fiche marque.
+
+  Meme coque que les tiroirs Alertes, P.U.T et Contributions ; le corps est
+  celui de la page indication/[id] (carte + historique des produits), charge a
+  l'ouverture pour le code choisi.
+-->
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../../oip-drugs/utils/sourceUuids";
+import useDirectusSources from "../../../../../oip-drugs/composables/useDirectusSources";
+import { useHeartLesIndicationLoader } from "../../../../../oip-drugs/composables/useHeartLesIndication";
+
+const props = defineProps<{
+  /** Code d'indication a montrer ; `null` ferme le tiroir. */
+  code: string | null;
+  title?: string | null;
+  date?: string | null;
+}>();
+
+const emit = defineEmits<{ (event: "close"): void }>();
+
+const { locale } = useI18n();
+const { results, isLoading, load } = useHeartLesIndicationLoader();
+
+watch(
+  () => props.code,
+  (code) => {
+    results.value = null;
+    if (code) load(code);
+  },
+  { immediate: true },
+);
+
+const record = computed(() =>
+  props.code
+    ? {
+        typeLabel: "Liste en sus",
+        icon: "ListChecks",
+        date: props.date ?? null,
+        title: props.title || `Indication ${props.code}`,
+      }
+    : null,
+);
+
+// La date vient de Directus, comme le panneau « Sources » du rail.
+const { load: loadSourceMeta, verifiedRaw } = useDirectusSources();
+loadSourceMeta([HEART_SOURCE_UUIDS.LES]);
+const checkedAt = computed(() => verifiedRaw(HEART_SOURCE_UUIDS.LES));
+</script>
+
+<template>
+  <OipDrugsHeartResultsDetailsRecordDrawer
+    :record="record"
+    :source-label="locale === 'en' ? 'Ministry of Health (LES)' : 'Ministère de la Santé (LES)'"
+    :checked-at="checkedAt"
+    wide
+    @close="emit('close')"
+  >
+    <RmLoadingState v-if="isLoading" />
+    <OipDrugsHeartResultsLesIndicationDetail
+      v-else-if="code && results"
+      :code="code"
+      :results="results"
+      table-max-height="480px"
+    />
+  </OipDrugsHeartResultsDetailsRecordDrawer>
+</template>

package/layer/app/components/oip-drugs/heart/results/les/IndicationDetail.vue

@@ -0,0 +1,149 @@
+<!--
+  Detail d'une indication de la liste en sus : sa carte, puis l'historique de
+  ses produits. Un seul rendu pour la page indication/[id] et le tiroir LES de
+  la fiche marque, pour que les deux disent la meme chose.
+-->
+<script setup lang="ts">
+import { valueTable } from "../../../../../utils/valueTable";
+import {
+  heartLesCardData,
+  heartLesHistoryTable,
+} from "../../../../../oip-drugs/composables/useHeartLesIndication";
+const props = withDefaults(
+  defineProps<{
+    code: string;
+    /** Lignes de l'index LES pour ce code (cf. useHeartLesIndicationLoader). */
+    results: any[] | null;
+    tableMaxHeight?: string;
+  }>(),
+  { tableMaxHeight: "600px" },
+);
+
+const { locale, t } = useI18n();
+
+const cardData = computed(() => heartLesCardData(props.code, props.results));
+const table = computed(() =>
+  heartLesHistoryTable(props.results, locale.value, t("oipDrugs.heart.filters.company")),
+);
+
+/** L'inscription la plus recente de l'historique affiche. */
+const lastIndicationDates = computed(() =>
+  (props.results ?? []).map((row: any) => row?.start_date),
+);
+
+/** OUI / YES en vert, le reste en gris. */
+const isYes = (value: string) => /^(oui|yes)$/i.test(String(value).trim());
+
+// Le tableau etait ecrit pour `arg-table` : des libelles de tete et des lignes
+// `{ values: [...] }`. La conversion en colonnes de RmTable est mecanique,
+// cf. `valueTable`.
+const lesTable = computed(() =>
+  valueTable(table.value.header, table.value.data, table.value.type, table.value.style),
+);
+</script>
+
+<template>
+  <div class="ldetail oip-drugs">
+    <OipDrugsHeartResultsLesCard v-if="cardData" :result="cardData" in-details />
+    <RmTableCard class="stretch">
+      <template #header>
+        <div>
+        <div class="oip_list v-start gap-4">
+          <p class="oip_heading">{{ t("oipDrugs.heart.indication.history") }}</p>
+          <OipDrugsHeartResultsLesSource
+            :last-label="t('oipDrugs.heart.sources.lastIndication')"
+            :last-date="lastIndicationDates"
+          />
+        </div>
+        </div>
+      </template>
+        <RmTable
+          :columns="lesTable.columns"
+          :rows="lesTable.rows"
+          :max-height="tableMaxHeight"
+        >
+          <template v-for="key in lesTable.typeKeys.product" :key="key" #[key]="{ value }">
+            <div class="lprod">
+              <div class="lprod_tags">
+                <RmTag v-if="value.company" variant="gray">{{ value.company }}</RmTag>
+                <RmTag v-if="value.ucd" variant="transparent">UCD {{ value.ucd }}</RmTag>
+                <RmTag v-if="value.type" variant="gray">{{ value.type }}</RmTag>
+              </div>
+              <p class="lprod_name">{{ value.label }}</p>
+            </div>
+          </template>
+          <template v-for="key in lesTable.typeKeys.date" :key="key" #[key]="{ value }">
+            <RmDate
+              v-if="value && value !== '-'"
+              :date="value"
+              :lang="locale"
+              compact
+            />
+            <p v-else>-</p>
+          </template>
+          <template v-for="key in lesTable.typeKeys.period" :key="key" #[key]="{ value }">
+            <p v-if="value.start || value.end" class="lperiod">
+              <RmDate v-if="value.start" :date="value.start" :lang="locale" compact />
+              <span v-else>?</span>
+              <RmIcon name="ArrowRight" :size="12" />
+              <RmDate v-if="value.end" :date="value.end" :lang="locale" compact />
+              <span v-else>{{ locale === "en" ? "ongoing" : "en cours" }}</span>
+            </p>
+            <p v-else>-</p>
+          </template>
+          <template v-for="key in lesTable.typeKeys.source" :key="key" #[key]="{ value }">
+            <OipDrugsHeartResultsLesSourceTag v-if="value" :source-value="value" />
+            <p v-else>-</p>
+          </template>
+          <template v-for="key in lesTable.typeKeys.flag" :key="key" #[key]="{ value }">
+            <RmTag v-if="value" :variant="isYes(value) ? 'green' : 'gray'">
+              {{ value }}
+            </RmTag>
+            <p v-else>-</p>
+          </template>
+          <template v-for="key in lesTable.typeKeys.tag" :key="key" #[key]="{ value }">
+            <RmTag v-if="value" variant="gray">{{ value }}</RmTag>
+            <p v-else>-</p>
+          </template>
+        </RmTable>
+    </RmTableCard>
+  </div>
+</template>
+
+<style scoped>
+.ldetail {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
+  width: 100%;
+}
+
+.stretch {
+  align-self: stretch;
+}
+
+.lprod {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lprod_tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.lprod_name {
+  font-weight: 600;
+}
+
+.lperiod {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+</style>

package/layer/app/components/oip-drugs/heart/results/les/Source.vue

@@ -0,0 +1,20 @@
+<template>
+  <OipDrugsHeartElasticSourceContainerElastic
+    class="oip-drugs"
+    :uuid="HEART_SOURCE_UUIDS.LES"
+    tone="primary"
+    :last-label="lastLabel"
+    :last-date="lastDate"
+  />
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../../oip-drugs/utils/sourceUuids";
+
+// Le pied dit aussi, quand l'appelant la connait, la date du dernier
+// mouvement de ce qu'il affiche (cf. sourceContainerElastic).
+defineProps<{
+  lastLabel?: string;
+  lastDate?: string | number | null | Array<string | number | null | undefined>;
+}>();
+</script>

package/layer/app/components/oip-drugs/heart/results/les/SourceTag.vue

@@ -0,0 +1,39 @@
+<template>
+  <RmTag class="oip-drugs" :variant="getStyle">{{ sourceValue }}</RmTag>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  sourceValue: {
+    type: String,
+    required: true,
+  },
+});
+
+const getStyle = computed(() => {
+  if (props.sourceValue.includes("AAC")) {
+    return "yellow";
+  } else if (props.sourceValue.includes("AAP")) {
+    return "indigo";
+  } else if (props.sourceValue.includes("AP")) {
+    return "rose";
+  } else if (props.sourceValue.includes("ATUC")) {
+    return "fushia";
+  } else if (props.sourceValue.includes("AAP")) {
+    return "purple";
+  } else {
+    switch (props.sourceValue) {
+      case "Liste en sus":
+        return "green";
+      case "CPC en cours":
+        return "orange";
+      case "Dérogatoire par NI":
+        return "sky";
+      case "Post-ATUc":
+        return "violet";
+      case "ATU terminée":
+        return "teal";
+    }
+  }
+});
+</script>

package/layer/app/components/oip-drugs/heart/searchPage/DynamicSource.vue

@@ -0,0 +1,29 @@
+<template>
+  <OipDrugsHeartElasticSourceContainerElastic
+    v-if="sourceUuid"
+    class="oip-drugs"
+    :uuid="sourceUuid"
+    :last-label="lastLabel"
+    :last-date="lastDate"
+  />
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../oip-drugs/utils/sourceUuids";
+
+// Le pied dit aussi, quand l'appelant la connait, la date du dernier
+// mouvement de ce qu'il affiche (cf. SourceContainerElastic).
+// fr_drugs_app choisissait la source sur le chemin (ANSM sous /hubr/heart/ansm,
+// HAS ailleurs) : le layer la recoit en prop, HAS par defaut.
+const props = withDefaults(
+  defineProps<{
+    lastLabel?: string;
+    lastDate?: string | number | null | Array<string | number | null | undefined>;
+    /** La fiche Directus citee ; HAS par defaut (HEART_SOURCE_UUIDS.ANSM pour l'ANSM). */
+    uuid?: string;
+  }>(),
+  { lastLabel: undefined, lastDate: undefined, uuid: HEART_SOURCE_UUIDS.HAS },
+);
+
+const sourceUuid = computed(() => props.uuid || HEART_SOURCE_UUIDS.HAS);
+</script>