@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-drugs/heart/mitm/details/Overview.vue

@@ -0,0 +1,381 @@
+<!--
+  Onglet MITM d'une specialite.
+
+  L'index MITM tient, pour un code CIS, l'integralite des avis de la Commission
+  de la transparence : une quarantaine de SMR et autant d'ASMR, chacun avec son
+  texte complet. En trois tableaux empiles, on lisait des colonnes tronquees
+  sans jamais voir un avis en entier. Ici, l'identite du produit et ses deux
+  derniers niveaux se lisent en tete, puis chaque avis devient une carte,
+  SMR et ASMR reunis par code, le texte integral s'ouvrant dans le tiroir.
+-->
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../../oip-drugs/utils/sourceUuids";
+import useDirectusSources from "../../../../../oip-drugs/composables/useDirectusSources";
+
+// Libelle de source : Directus, comme le panneau « Sources » du rail.
+const { load: loadSourceMeta, metaByUuid } = useDirectusSources();
+loadSourceMeta([HEART_SOURCE_UUIDS.HAS]);
+const props = defineProps<{
+  /** Le document MITM du CIS choisi (_source). */
+  cis: any;
+}>();
+
+const emit = defineEmits<{ (event: "select", record: any): void }>();
+
+const { locale } = useI18n();
+const hasSourceName = computed(
+  () => metaByUuid(HEART_SOURCE_UUIDS.HAS, locale.value === "en" ? "en" : "fr").name,
+);
+
+/** `20260708` dans l'index, une date ailleurs. */
+function isoDate(raw: string | null | undefined) {
+  if (!raw) return null;
+  const value = String(raw);
+  if (/^\d{8}$/.test(value)) {
+    return `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`;
+  }
+  return value;
+}
+
+/** Les libelles d'avis portent des `<br>` : on les rend au lecteur, pas au DOM. */
+function plain(text: string | null | undefined) {
+  if (!text) return "";
+  return text
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<[^>]+>/g, "")
+    .trim();
+}
+
+/** Important, Modere, Faible, Insuffisant. */
+function smrTone(value: string) {
+  const v = (value || "").toLowerCase();
+  const bad = v.includes("insuffisant");
+  const good = v.includes("important");
+  // Un avis peut etre important sur une indication et insuffisant sur une autre.
+  if (bad && good) return "neutral" as const;
+  if (bad) return "bad" as const;
+  if (good) return "good" as const;
+  return "neutral" as const;
+}
+
+/** ASMR I a V : plus le niveau est haut, plus le progres est net. */
+function asmrTone(value: string) {
+  const level = (value || "").trim().match(/^(I{1,3}|IV|V)\b/)?.[1];
+  if (level === "I" || level === "II") return "good" as const;
+  if (level === "III") return "post" as const;
+  if (level === "IV") return "warn" as const;
+  return "neutral" as const;
+}
+
+// Premier niveau renseigne : l'index met des lignes de remplissage nulles en
+// tete de `last_smr`/`last_asmr`, le KPI affichait un tiret a tort.
+const lastSmr = computed(() => (props.cis?.last_smr ?? []).find((s: any) => s?.value) ?? null);
+const lastAsmr = computed(() => (props.cis?.last_asmr ?? []).find((s: any) => s?.value) ?? null);
+
+const atcLabel = computed(() =>
+  locale.value === "en"
+    ? props.cis?.atc5_english_code_label
+    : props.cis?.atc5_french_code_label,
+);
+
+/**
+ * Les avis, un par code HAS.
+ *
+ * SMR et ASMR sont deux listes separees dans l'index alors qu'ils sont rendus
+ * dans le meme avis : on les rassemble par `has_code`, sinon chaque decision
+ * apparaissait deux fois.
+ */
+const opinions = computed(() => {
+  const byCode = new Map<string, any>();
+
+  const push = (entry: any, kind: "smr" | "asmr") => {
+    // L'index porte des lignes de remplissage entierement nulles : sans ce
+    // garde, chacune devenait un avis vide dans la liste.
+    if (!entry?.has_code && !entry?.has_date && !entry?.label && !entry?.value) return;
+    const code = entry.has_code || `${kind}-${entry.has_date}`;
+    const found = byCode.get(code) ?? {
+      code: entry.has_code || null,
+      date: isoDate(entry.has_date),
+      reason: entry.has_reason || null,
+    };
+    // Un meme avis peut rendre plusieurs niveaux (important ici, insuffisant
+    // la) : on les cumule au lieu de garder le dernier.
+    const previous = found[kind];
+    found[kind] = {
+      value: [previous?.value, entry.value].filter(Boolean).join(", ") || null,
+      label: [previous?.label, plain(entry.label)].filter(Boolean).join("\n\n"),
+    };
+    byCode.set(code, found);
+  };
+
+  (props.cis?.smr ?? []).forEach((entry: any) => push(entry, "smr"));
+  (props.cis?.asmr ?? []).forEach((entry: any) => push(entry, "asmr"));
+
+  // `has_date` peut etre nul : NaN dans le comparateur rendait l'ordre
+  // aleatoire, on classe ces avis en fin de liste.
+  const time = (d: string | null) => (d ? new Date(d).getTime() : 0);
+  return [...byCode.values()].sort((a, b) => time(b.date) - time(a.date));
+});
+
+const records = computed(() =>
+  opinions.value.map((opinion) => ({
+    key: opinion.code || opinion.date,
+    typeLabel:
+      opinion.reason || (locale.value === "en" ? "Transparency opinion" : "Avis de transparence"),
+    icon: "FileText",
+    date: opinion.date,
+    ref: opinion.code,
+    title:
+      opinion.smr?.label ||
+      opinion.asmr?.label ||
+      (locale.value === "en" ? "Transparency opinion" : "Avis de transparence"),
+    excerpt: opinion.smr?.label ? opinion.asmr?.label : null,
+    status: opinion.smr?.value ? `SMR ${opinion.smr.value}` : null,
+    statusTone: smrTone(opinion.smr?.value),
+    badge: opinion.asmr?.value ? `ASMR ${opinion.asmr.value}` : null,
+    badgeTone: asmrTone(opinion.asmr?.value),
+    sourceLabel: hasSourceName.value,
+    sections: [
+      {
+        key: "smr",
+        label: locale.value === "en" ? "Actual benefit (SMR)" : "Service médical rendu (SMR)",
+        body: opinion.smr?.label ?? "",
+      },
+      {
+        key: "asmr",
+        label:
+          locale.value === "en"
+            ? "Improvement in actual benefit (ASMR)"
+            : "Amélioration du service médical rendu (ASMR)",
+        body: opinion.asmr?.label ?? "",
+      },
+    ],
+  })),
+);
+
+const attached = computed(() =>
+  (props.cis?.molecule ?? []).filter((row: any) => row?.brand || row?.drug_label || row?.cis_code),
+);
+</script>
+
+<template>
+  <section class="oip-drugs mi">
+    <p class="mi_scope">
+      <RmIcon name="Info" :size="14" />
+      {{
+        locale === "en"
+          ? `Opinions cover the presentation ${cis.cis_label}.`
+          : `Les avis portent sur la présentation ${cis.cis_label}.`
+      }}
+      <a
+        v-if="cis.url_link"
+        class="mi_link"
+        :href="cis.url_link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {{ locale === "en" ? "Public drug database" : "Base publique du médicament" }} →
+      </a>
+    </p>
+
+    <!-- Meme bandeau de synthese que l'onglet Prix : les niveaux en vigueur et
+         l'ampleur de l'historique, avant d'entrer dans le detail. -->
+    <div class="mi_kpis">
+      <div class="mi_kpi">
+        <p class="mi_kpi_value" :class="`is_${smrTone(lastSmr?.value)}`">
+          {{ lastSmr?.value || "-" }}
+        </p>
+        <p class="mi_kpi_label">{{ locale === "en" ? "Current SMR" : "SMR en vigueur" }}</p>
+      </div>
+
+      <div class="mi_kpi">
+        <p class="mi_kpi_value" :class="`is_${asmrTone(lastAsmr?.value)}`">
+          {{ lastAsmr?.value || "-" }}
+        </p>
+        <p class="mi_kpi_label">{{ locale === "en" ? "Current ASMR" : "ASMR en vigueur" }}</p>
+      </div>
+
+      <div class="mi_kpi">
+        <p class="mi_kpi_value">{{ records.length }}</p>
+        <p class="mi_kpi_label">
+          {{ locale === "en" ? "Opinions recorded" : "Avis recensés" }}
+        </p>
+      </div>
+
+      <div class="mi_kpi">
+        <p class="mi_kpi_value">
+          <RmDate
+            v-if="isoDate(lastSmr?.has_date || lastAsmr?.has_date)"
+            :date="isoDate(lastSmr?.has_date || lastAsmr?.has_date)!"
+            :lang="locale"
+          />
+          <template v-else>-</template>
+        </p>
+        <p class="mi_kpi_label">
+          {{ locale === "en" ? "Last assessment" : "Dernière évaluation" }}
+        </p>
+      </div>
+    </div>
+
+    <OipDrugsHeartResultsDetailsRecordList
+      :title="locale === 'en' ? 'Transparency Committee opinions' : 'Avis de la Commission de la transparence'"
+      :subtitle="locale === 'en' ? 'opinions recorded for this presentation' : 'avis recensés pour cette présentation'"
+      :items="records"
+      :empty-label="locale === 'en' ? 'No opinion recorded.' : 'Aucun avis recensé.'"
+      @select="emit('select', $event)"
+    />
+
+    <template v-if="attached.length">
+      <h3 class="mi_section">
+        {{ locale === "en" ? "Products attached to this molecule" : "Produits rattachés à cette molécule" }}
+      </h3>
+      <ul class="mi_attached">
+        <li v-for="row in attached" :key="row.cis_code || row.drug_code">
+          <b>{{ row.brand || "-" }}</b>
+          <span>{{ row.drug_label }}</span>
+          <span class="mi_attached_meta">
+            <template v-if="row.cis_code">CIS {{ row.cis_code }}</template>
+            <template v-if="row.owner_regroup"> · {{ row.owner_regroup }}</template>
+          </span>
+        </li>
+      </ul>
+    </template>
+
+    <p class="mi_source">
+      <OipDrugsHeartMitmSource
+        :last-label="$t('oipDrugs.heart.sources.lastUpdate')"
+        :last-date="cis?.update_date"
+      />
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.mi {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* La liste d'avis pose deja sa propre gouttiere de 32px ; les autres blocs la
+   prennent en marge et non en retrait interne, pour que leur cadre s'aligne sur
+   celui des cartes plutot que de le deborder. */
+.mi > :not(.rl) {
+  margin-inline: 32px;
+}
+
+.mi_scope {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.mi_link {
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* Bandeau de synthese : meme dessin que celui de l'onglet Prix. */
+.mi_kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  border: 1px solid var(--light);
+  /* Le filet degrade court d'un bord a l'autre : arrondir le haut le tronquait
+     a ses extremites. */
+  border-radius: 0 0 12px 12px;
+  background: var(--white);
+  overflow: hidden;
+  box-shadow: var(--small-shadow);
+}
+
+.mi_kpis::before {
+  content: "";
+  grid-column: 1 / -1;
+  height: 3px;
+  background: linear-gradient(to right, var(--primary), color-mix(in srgb, var(--primary) 35%, var(--white)));
+}
+
+.mi_kpi {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 16px;
+  border-left: 1px solid var(--light);
+  text-align: center;
+}
+
+.mi_kpi:first-of-type {
+  border-left: none;
+}
+
+.mi_kpi_value {
+  color: var(--primary);
+  font-size: 19px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+/* Le niveau porte sa propre lecture : favorable, moyen, insuffisant. */
+.mi_kpi_value.is_good {
+  color: var(--system-success-hover);
+}
+
+.mi_kpi_value.is_bad {
+  color: var(--system-alert-hover);
+}
+
+.mi_kpi_value.is_warn {
+  color: #b45309;
+}
+
+.mi_kpi_label {
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.mi_section {
+  margin-top: 8px;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.mi_attached {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+}
+
+.mi_attached li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--white);
+  font-size: 14px;
+}
+
+.mi_attached_meta {
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.mi_source {
+  color: var(--medium);
+  font-size: 13px;
+}
+</style>

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

@@ -0,0 +1,212 @@
+<!--
+  Carte d'un P.U.T. (protocole d'utilisation therapeutique).
+
+  Meme modele que les cartes de marque, LES, MITM et PNDS (RmResultCard) : une
+  specialite, ses documents, son objectif et son indication. Le detail vit dans
+  la fiche marque, onglet PUT, ouverte au clic sur la carte entiere.
+
+  En mode `inDetails` (tete de la fiche), la carte n'est plus cliquable, le
+  libelle s'affiche en entier et les documents sont listes.
+-->
+<template>
+  <RmResultCard
+    class="oip-drugs"
+    :clickable="!inDetails"
+    :count="documentCount"
+    :count-label="countLabel"
+    :more-label="inDetails ? '' : locale === 'fr' ? 'Voir le détail' : 'See details'"
+    :lang="dateLang"
+    :link="detailsHref"
+    @click="!inDetails && openDrugsCard(nav, $event, detailsPath)"
+  >
+    <template #title>
+      <OipDrugsHeartTextHighlight :text="product.specialty_dci" :queries="storeSearchBar" />
+    </template>
+    <template v-if="subtitle" #subtitle>{{ subtitle }}</template>
+
+    <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="productId"
+        type="FrHasPut"
+        :label="product.specialty_dci"
+        compact
+      />
+    </template>
+
+    <!-- Export masque pour l'instant (demande produit), comme sur les autres cartes.
+    <template #actions>
+      <RmButton v-if="allLinks.length" variant="tertiary" ghost prefix-icon="DownloadSimple" @click.stop.prevent="openPdf(allLinks[0])">Export</RmButton>
+    </template>
+    -->
+
+    <template #meta>
+      <span v-if="product.authorization_date" class="rm-rcard__label">
+        {{ t('oipDrugs.heart.put.card.date') }} ·
+        <RmDate :date="product.authorization_date" :lang="dateLang" />
+      </span>
+      <RmTag v-if="statusLabel" :variant="statusVariant">{{ statusLabel }}</RmTag>
+    </template>
+
+    <p v-if="objectiveLabel" class="rm-rcard__text">
+      <strong>{{ t('oipDrugs.heart.put.card.objectives') }} :</strong> {{ objectiveLabel }}
+    </p>
+    <p v-if="efficacyLabel" class="rm-rcard__desc">
+      <strong>{{ t('oipDrugs.heart.put.card.efficacy') }} :</strong> {{ efficacyLabel }}
+    </p>
+
+    <p class="rm-rcard__lead" :class="{ 'rm-rcard__clamp': !inDetails }">
+      <OipDrugsHeartTextHighlight :text="fullIndication" :queries="storeSearchBar" />
+    </p>
+
+    <!-- Rangees choisies dans « Personnaliser ». -->
+    <OipDrugsHeartResultsPrefRows scope="put" :values="prefValues" />
+
+    <details v-if="inDetails && allLinks.length > 0" class="put-docs">
+      <summary class="put-docs-summary">
+        <RmIcon name="CaretRight" :size="16" class="put-docs-caret" />
+        <strong>Documents ({{ allLinks.length }})</strong>
+      </summary>
+      <div class="oip_list gap-8 put-docs-body">
+        <RmButton
+          v-for="(link, i) in allLinks"
+          :key="'doc-' + i"
+          variant="secondary"
+          size="sm"
+          prefix-icon="DownloadSimple"
+          @click.stop.prevent="openPdf(link)"
+        >
+          {{ locale === 'fr' ? 'Télécharger' : 'Download' }} - {{ heartDocLabel(link) }}
+        </RmButton>
+      </div>
+    </details>
+
+    <!-- Ce que le moteur a reellement matche sur cette autorisation. -->
+    <OipDrugsHeartResultsMatchExplain :hit="{ highlight }" />
+
+    <template #footer>
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.PUT"
+        :last-label="t('oipDrugs.heart.sources.lastAuthorization')"
+        :last-date="product?.authorization_date"
+      />
+    </template>
+  </RmResultCard>
+</template>
+
+<script lang="ts" setup>
+import { HEART_SOURCE_UUIDS } from '../../../../oip-drugs/utils/sourceUuids';
+import { heartDocLabel } from '../../../../oip-drugs/utils/heartStyleAndFormat';
+import { drugsBrandPath } from '../../../../oip-drugs/kinds';
+import { openDrugsCard } from '../../../../oip-drugs/utils/s-openCard';
+const { t, locale } = useI18n();
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+
+const props = withDefaults(defineProps<{
+  product: any;
+  productId: string;
+  storeSearchBar?: string[];
+  inDetails?: boolean;
+  /** Extraits surlignes du hit, pour l'explication de la correspondance. */
+  highlight?: Record<string, string[]>;
+}>(), {
+  storeSearchBar: () => [],
+  inDetails: false,
+});
+
+const dateLang = computed(() => (locale.value === 'en' ? 'en' : 'fr'));
+
+/** La fiche marque, onglet PUT, ouverte sur ce protocole. */
+const detailsPath = computed(() => {
+  const path = drugsBrandPath(props.product.brand);
+  return path ? `${path}?tab=put&put=${encodeURIComponent(props.productId ?? '')}` : '';
+});
+const detailsHref = computed(() => (detailsPath.value ? nav.appHref('fr_drugs_app', detailsPath.value) : undefined));
+
+const statusLabel = computed(() => {
+  return locale.value === 'fr' ? props.product.status_fr : props.product.status_en;
+});
+
+/** Vert quand le protocole tourne, ambre quand il est clos. */
+const statusVariant = computed(() => {
+  const lower = String(statusLabel.value ?? '').toLowerCase().trim();
+  if (lower === 'en cours' || lower === 'ongoing') return 'green';
+  if (['cloturé', 'closed', 'terminé', 'finished'].includes(lower)) return 'amber';
+  return 'default';
+});
+
+/** « TYPE D'ACCÈS · PÉRIODICITÉ », le cadre reglementaire du protocole. */
+const subtitle = computed(() =>
+  [
+    locale.value === 'fr' ? props.product.aap_type_fr : props.product.aap_type_en,
+    locale.value === 'fr' ? props.product.put_periodicity_fr : props.product.put_periodicity_en,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+);
+
+const objectiveLabel = computed(() => {
+  return (locale.value === 'fr' ? props.product.objective_fr : props.product.objective_en) || null;
+});
+
+const efficacyLabel = computed(() => {
+  return (locale.value === 'fr' ? props.product.efficacy_precision_fr : props.product.efficacy_precision_en) || null;
+});
+
+const fullIndication = computed(() => {
+  return (locale.value === 'fr' ? props.product.indication_fr : props.product.indication_en) || '-';
+});
+
+const docLinks = computed<string[]>(() => props.product.tekkare_doc_links || []);
+const pdfLinks = computed<string[]>(() => props.product.tekkare_pdf_links || []);
+const allLinks = computed(() => [...docLinks.value, ...pdfLinks.value]);
+
+const documentCount = computed(() => allLinks.value.length);
+
+const countLabel = computed(() => (documentCount.value > 1 ? 'documents' : 'document'));
+
+/**
+ * Ce que la carte peut montrer en plus, si « Personnaliser » le demande.
+ * Les documents sont nommes par leur fichier : l'URL HAS est illisible.
+ */
+const prefValues = computed(() => ({
+  brand: props.product.brand,
+  dci: props.product.dci,
+  therapeuticArea: locale.value === 'fr' ? props.product.therapeutic_area_fr : props.product.therapeutic_area_en,
+  docs: allLinks.value.map((link) => heartDocLabel(link)),
+}));
+
+function openPdf(url: string) {
+  if (url) window.open(url, '_blank');
+}
+</script>
+
+<style scoped>
+/* Accordéon Documents (natif <details>). */
+.put-docs > summary {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+.put-docs > summary::-webkit-details-marker {
+  display: none;
+}
+.put-docs-caret {
+  transition: transform 0.15s;
+}
+.put-docs[open] .put-docs-caret {
+  transform: rotate(90deg);
+}
+.put-docs-body {
+  margin-top: 12px;
+}
+</style>