@tekkare/romulus 0.1.251 → 0.1.252

package/layer/app/components/oip-drugs/heart/results/details/Monograph.vue

@@ -0,0 +1,128 @@
+<!--
+  Monographie reglementaire d'une marque (portage de
+  heart/results/details/monograph.vue de fr_drugs_app).
+
+  Chaque monographie est un composant de `app/oip-drugs/monographs/`, charge a
+  la demande. Le bouton PDF rejoint la barre d'outils de la page
+  (`#oip-rail-pdf`) quand elle existe ; dans un tiroir, ou sans rail, il reste
+  en tete du document.
+-->
+<script setup lang="ts">
+import { OIP_RESOURCE_NAV } from "../../../../../composables/useOipResourceNav";
+
+const props = defineProps<{
+  /** Identifiant du document, sans extension (« keytruda-has »). */
+  id: string;
+  /** PDF equivalent, propose en tete de page quand il existe. */
+  pdf?: string | null;
+}>();
+
+const { locale } = useI18n();
+
+// Un import statique chargerait les treize documents pour n'en montrer qu'un.
+const modules = import.meta.glob("../../../../../oip-drugs/monographs/*.vue");
+
+const view = computed(() => {
+  const loader = modules[`../../../../../oip-drugs/monographs/${props.id}.vue`];
+  return loader ? defineAsyncComponent(loader as any) : null;
+});
+
+// Le tiroir d'un projet fournit sa navigation : la fiche y est embarquee, le
+// rail de la page dessous n'est pas le sien.
+const embedded = inject(OIP_RESOURCE_NAV, null) !== null;
+
+/** Le rail de la page porte-t-il l'emplacement du PDF ? */
+const railTarget = ref(false);
+onMounted(() => {
+  railTarget.value = !embedded && !!document.getElementById("oip-rail-pdf");
+});
+</script>
+
+<template>
+  <section class="mg oip-drugs">
+    <!-- Le telechargement est une commande de page : il rejoint l'export et les
+         scopes dans la barre d'outils, plutot que de flotter sur le document. -->
+    <Teleport v-if="pdf && railTarget" to="#oip-rail-pdf" defer>
+      <a
+        class="mg_pdf"
+        :href="pdf"
+        download
+        target="_blank"
+        rel="noopener noreferrer"
+        :title="locale === 'en' ? 'Download the PDF' : 'Télécharger le PDF'"
+      >
+        <RmIcon name="FilePdf" :size="18" />
+      </a>
+    </Teleport>
+    <div v-else-if="pdf" class="mg_inline">
+      <a
+        class="mg_pdf"
+        :href="pdf"
+        download
+        target="_blank"
+        rel="noopener noreferrer"
+        :title="locale === 'en' ? 'Download the PDF' : 'Télécharger le PDF'"
+      >
+        <RmIcon name="FilePdf" :size="18" />
+      </a>
+    </div>
+
+    <component :is="view" v-if="view" />
+
+    <p v-else class="mg_empty">
+      {{ locale === "en" ? "Monograph unavailable." : "Monographie indisponible." }}
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.mg {
+  box-sizing: border-box;
+  width: 100%;
+  padding-inline: 32px;
+}
+
+/* Hors rail, le bouton se pose en tete du document, a droite. */
+.mg_inline {
+  display: flex;
+  justify-content: flex-end;
+  padding-block: 8px;
+}
+
+/* Meme tuile que l'export et les scopes du rail. */
+.mg_pdf {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--rm-shell-subtle);
+  color: var(--rm-shell-text-dark);
+  transition: background-color 0.15s linear;
+}
+
+.mg_pdf:hover {
+  background: var(--rm-shell-border);
+}
+
+/* Le bandeau du document portait une image de fond distante, opaque et bornee
+   a la colonne de lecture : un degrade leger, etale d'un bord a l'autre de la
+   zone de contenu, laisse le titre respirer. */
+.mg :deep(.hero),
+.mg :deep(.cover) {
+  margin-inline: -32px;
+  padding-inline: 32px;
+  background: linear-gradient(
+    115deg,
+    rgba(77, 204, 247, 0.12),
+    rgba(160, 107, 245, 0.14) 45%,
+    rgba(255, 92, 240, 0.1)
+  );
+}
+
+.mg_empty {
+  color: var(--medium);
+  font-size: 14px;
+}
+</style>

package/layer/app/components/oip-drugs/heart/results/details/OpinionDrawer.vue

@@ -0,0 +1,535 @@
+<!--
+  Tiroir d'un avis HAS.
+
+  Ouvrir un avis ne doit pas faire perdre sa place dans l'historique : le detail
+  arrive par la droite, au-dessus de la liste, et se referme au clic ailleurs ou
+  sur Echap. Les rubriques de l'avis (indication, population cible, strategie
+  therapeutique...) deviennent des onglets — celles qui n'ont rien a dire ne
+  s'affichent pas.
+-->
+<script setup lang="ts">
+import { hasRatingTags } from "../../../../../oip-drugs/utils/q-hasRatings";
+const props = defineProps<{
+  /** L'avis a detailler, ou null quand le tiroir est ferme. */
+  opinion: any | null;
+  /** Date de derniere verification de la source, telle qu'affichee en pied. */
+  checkedAt?: string | null;
+  /** Termes de la recherche qui a mene a la fiche, surlignes dans l'avis. */
+  searchTerms?: string[];
+}>();
+
+const emit = defineEmits<{ (event: "close"): void }>();
+
+const { locale } = useI18n();
+
+const AWAITING_TRANSLATION = /^\s*translation coming soon/i;
+
+function text(field: string) {
+  const opinion = props.opinion;
+  if (!opinion) return "";
+  const candidates =
+    locale.value === "en" ? [`${field}_en`, field] : [field, `${field}_en`];
+  for (const key of candidates) {
+    const value = opinion[key];
+    if (typeof value === "string" && value.trim() && !AWAITING_TRANSLATION.test(value)) {
+      return value.trim();
+    }
+  }
+  return "";
+}
+
+const typeLabel = computed(() => {
+  if (props.opinion?.opinion_type === "early_access_decision") {
+    return locale.value === "en" ? "Early access" : "Accès précoce";
+  }
+  if (props.opinion?.opinion_type === "eval") {
+    return locale.value === "en" ? "Assessment" : "Évaluation";
+  }
+  return locale.value === "en" ? "Opinion" : "Avis";
+});
+
+const title = computed(
+  () =>
+    text("disease_name") ||
+    text("relevant_indication") ||
+    text("indication") ||
+    typeLabel.value,
+);
+
+const ratings = computed(() => hasRatingTags(props.opinion, locale.value));
+
+const status = computed(() => {
+  const value = text("opinion_status");
+  return value ? value.charAt(0).toUpperCase() + value.slice(1) : "";
+});
+
+/** Rubriques disponibles pour cet avis : celles qui portent un texte. */
+const sections = computed(() =>
+  [
+    {
+      key: "essential",
+      label: locale.value === "en" ? "Key point" : "Essentiel",
+      body: text("recommendation") || text("conclusion") || text("essential"),
+    },
+    {
+      key: "indication",
+      label: "Indication",
+      body: text("indication") || text("relevant_indication"),
+    },
+    {
+      key: "population",
+      label: locale.value === "en" ? "Target population" : "Population cible",
+      body: text("target_population") || text("syn_target_pop"),
+    },
+    {
+      key: "strategy",
+      label: locale.value === "en" ? "Therapeutic strategy" : "Stratégie thérapeutique",
+      body: text("therapeutic_strategy_place"),
+    },
+    {
+      key: "conclusion",
+      label: locale.value === "en" ? "Conclusion" : "Conclusion",
+      body: text("conclusion"),
+    },
+  ].filter((section) => section.body),
+);
+
+const active = ref(0);
+
+// Un autre avis s'ouvre : on revient sur la premiere rubrique, sinon le tiroir
+// s'ouvre sur un onglet qui n'existe pas pour lui.
+watch(() => props.opinion, () => (active.value = 0));
+
+function links(field: string): string[] {
+  const value = props.opinion?.[field];
+  return Array.isArray(value) ? value.filter(Boolean) : [];
+}
+
+/**
+ * Le nom du document, tire de la fin de l'URL : le prefixe technique (le
+ * numero de fiche HAS, le code de l'avis) ne dit rien au lecteur.
+ */
+function docName(url: string) {
+  const last = decodeURIComponent(
+    (url.split("?")[0] ?? "").replace(/\/+$/, "").split("/").pop() ?? "",
+  );
+  const name = (last.replace(/\.pdf$/i, "").split("__").pop() ?? "")
+    .replace(/[-_]+/g, " ")
+    .trim();
+  return name ? name.charAt(0).toUpperCase() + name.slice(1) : url;
+}
+
+/** Deux copies du meme document ne font qu'une ligne : le nom sert de cle. */
+function unique(urls: string[]) {
+  const seen = new Set<string>();
+  return urls.filter((url) => {
+    const key = docName(url).toLowerCase().replace(/[^a-z0-9]/g, "");
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+/**
+ * Tous les documents de l'avis, ranges par origine : nos copies d'un cote (des
+ * PDF, servis meme quand le site de la HAS ne repond pas), les pages de la HAS
+ * de l'autre. Chaque famille melange l'avis lui-meme, sa synthese, la
+ * transcription du debat et les contributions d'associations.
+ */
+const documentGroups = computed(() => {
+  const groups = [
+    {
+      key: "tekkare",
+      label: locale.value === "en" ? "Tekkare copies" : "Copies Tekkare",
+      format: "pdf",
+      action: "preview" as const,
+      urls: unique([...links("tekkare_info_links"), ...links("tekkare_contribution_links")]),
+    },
+    {
+      key: "has",
+      label: locale.value === "en" ? "HAS website" : "Site de la HAS",
+      format: "",
+      action: "open" as const,
+      urls: unique([
+        ...links("has_info_links"),
+        ...links("has_contribution_links"),
+        ...links("info_links"),
+      ]),
+    },
+  ];
+  return groups.filter((group) => group.urls.length);
+});
+
+const documentCount = computed(() =>
+  documentGroups.value.reduce((total, group) => total + group.urls.length, 0),
+);
+
+/**
+ * Nos copies s'ouvrent en apercu, dans la meme visionneuse que les documents
+ * du rail : ce sont des PDF, et `/api/oip/pdf` les sert comme tels. Les liens de
+ * la HAS pointent une fiche de son site, pas un fichier : eux partent dans un
+ * onglet.
+ */
+const previewOpen = ref(false);
+const previewSrc = ref<string | null>(null);
+const previewExternal = ref<string | null>(null);
+const previewTitle = ref("");
+
+function openDocument(group: { key: string }, url: string) {
+  if (group.key !== "tekkare") {
+    window.open(url, "_blank", "noopener");
+    return;
+  }
+  previewSrc.value = `/api/oip/pdf?url=${encodeURIComponent(url)}`;
+  previewExternal.value = url;
+  previewTitle.value = docName(url);
+  previewOpen.value = true;
+}
+
+function onKeydown(event: KeyboardEvent) {
+  // L'apercu se ferme en premier : sans ce garde, Echap refermait les deux
+  // tiroirs d'un coup et on ressortait de l'avis qu'on lisait.
+  if (event.key === "Escape" && !previewOpen.value) emit("close");
+}
+
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <!-- Pose dans `body` : un ancetre du contenu de page etablit un bloc conteneur
+       pour les elements `fixed`, et le voile s'arretait au bord de la colonne
+       au lieu de couvrir le cadre entier. -->
+  <Teleport to="body">
+    <Transition name="drawer">
+      <div v-if="opinion" class="odr oip-drugs" @click.self="emit('close')">
+        <aside class="odr_panel">
+          <header class="odr_head">
+            <p class="odr_type">
+              <RmIcon
+                :name="opinion.opinion_type === 'early_access_decision' ? 'Lightning' : 'FileText'"
+                :size="16"
+              />
+              {{ typeLabel }}
+            </p>
+            <button
+              type="button"
+              class="odr_close"
+              :aria-label="locale === 'en' ? 'Close' : 'Fermer'"
+              @click="emit('close')"
+            >
+              <RmIcon name="X" :size="16" />
+            </button>
+          </header>
+
+          <div class="odr_body">
+            <p class="odr_date"><RmDate :date="opinion.decision_date" :lang="locale" /></p>
+            <h2 class="odr_title">
+              <OipDrugsHeartTextHighlight :text="title ?? ''" :queries="searchTerms ?? []" />
+            </h2>
+
+            <div v-if="ratings.length" class="odr_ratings">
+              <RmTag v-for="tag in ratings" :key="tag.key" :variant="tag.variant">
+                {{ tag.label }}
+              </RmTag>
+            </div>
+
+            <div v-if="sections.length > 1" class="odr_tabs">
+              <button
+                v-for="(section, index) in sections"
+                :key="section.key"
+                type="button"
+                class="odr_tab"
+                :class="{ is_active: index === active }"
+                @click="active = index"
+              >
+                {{ section.label }}
+              </button>
+            </div>
+
+            <p v-if="status" class="odr_status">{{ status }}</p>
+
+            <p class="odr_text">
+              <OipDrugsHeartTextHighlight :text="sections[active]?.body ?? ''" :queries="searchTerms ?? []" />
+            </p>
+
+            <!-- Les documents ne suivent pas les onglets : ils valent pour
+                 l'avis entier, et les chercher rubrique par rubrique revenait
+                 a ne pas les trouver. -->
+            <section v-if="documentCount" class="odr_docs">
+              <h3 class="odr_docs_title">
+                Documents
+                <span class="odr_docs_count">{{ documentCount }}</span>
+              </h3>
+
+              <div v-for="group in documentGroups" :key="group.key" class="odr_docs_group">
+                <p class="odr_docs_label">{{ group.label }}</p>
+                <RmFileRow
+                  v-for="url in group.urls"
+                  :key="url"
+                  :name="docName(url)"
+                  :format="group.format"
+                  :action="group.action"
+                  @select="openDocument(group, url)"
+                />
+              </div>
+            </section>
+          </div>
+
+          <footer class="odr_foot">
+            <span>
+              Source :
+              <a
+                v-if="opinion.has_url"
+                :href="opinion.has_url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="odr_foot_link"
+                >HAS</a
+              >
+              <b v-else>HAS</b>
+            </span>
+            <span v-if="checkedAt">
+              ·
+              {{ locale === "en" ? "Last updated" : "Dernière mise à jour le" }}
+              <RmDate :date="checkedAt" :lang="locale" />
+            </span>
+          </footer>
+        </aside>
+
+        <!-- Le voile de l'avis couvre le cadre entier : l'apercu se pose
+             au-dessus de lui, sinon il s'ouvre derriere. -->
+        <OipDocumentPreview
+          v-model="previewOpen"
+          :src="previewSrc"
+          :title="previewTitle"
+          :external-src="previewExternal"
+          :download-src="previewExternal"
+          :z-index="320"
+        />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Le voile epouse le cadre de la coque (marge de 8px, coins arrondis) plutot
+   que la fenetre : sinon il deborde sur la bordure du cadre. */
+.odr {
+  position: fixed;
+  inset: var(--rm-shell-inset, 8px);
+  border-radius: var(--rm-shell-radius, 12px);
+  overflow: hidden;
+  z-index: 300;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(30, 41, 59, 0.35);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+.odr_panel {
+  display: flex;
+  flex-direction: column;
+  /* Les textes d'avis font plusieurs paragraphes : a 560px, chaque ligne etait
+     trop courte pour se lire d'une traite. */
+  width: min(760px, 100%);
+  height: 100%;
+  background: var(--white);
+  box-shadow: var(--overlay-shadow);
+}
+
+.odr_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--light);
+}
+
+.odr_type {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--primary);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.odr_close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--light);
+  border-radius: 8px;
+  background: var(--white);
+  color: var(--dark);
+  cursor: pointer;
+}
+
+.odr_close:hover {
+  background: var(--lightest);
+}
+
+.odr_body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+}
+
+/* Le corps est une colonne flex qui defile : sans ce garde, le texte de l'avis
+   ecrase les blocs au-dessus de lui — le titre tombait litteralement a zero de
+   haut et disparaissait. */
+.odr_date,
+.odr_title,
+.odr_ratings,
+.odr_tabs,
+.odr_status,
+.odr_docs {
+  flex: 0 0 auto;
+}
+
+.odr_date {
+  color: var(--medium);
+  font-size: 14px;
+}
+
+/* Meme borne que sur la carte : le titre peut etre une indication entiere.
+   Le `-webkit-box` du clamp ne tient pas ici — une regle exterieure impose
+   `display: flow-root` aux titres et la boite tombait a zero de haut — donc on
+   borne a deux interlignes, ce qui ne depend d'aucun mode d'affichage. */
+.odr_title {
+  max-height: 2.6em;
+  overflow: hidden;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.odr_ratings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.odr_tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-bottom: 1px solid var(--light);
+}
+
+.odr_tab {
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--medium);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.odr_tab.is_active {
+  border-bottom-color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+  color: var(--primary);
+}
+
+.odr_status {
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--system-success-hover);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.odr_text {
+  color: var(--dark);
+  font-size: 15px;
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+.odr_docs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
+  padding-top: 16px;
+  border-top: 1px solid var(--light);
+}
+
+.odr_docs_title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.odr_docs_count {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: var(--lightest);
+  color: var(--medium);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.odr_docs_group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.odr_docs_label {
+  color: var(--medium);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.odr_foot {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--light);
+  background: var(--demi-fond);
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.odr_foot_link {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active .odr_panel,
+.drawer-leave-active .odr_panel {
+  transition: transform 0.2s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from .odr_panel,
+.drawer-leave-to .odr_panel {
+  transform: translateX(24px);
+}
+</style>