@tekkare/romulus 0.1.250 → 0.1.252

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

@@ -0,0 +1,487 @@
+<!--
+  Historique des avis HAS d'une marque, en cartes groupees par annee.
+
+  Le tableau d'historique disait la meme chose en lignes serrees : on lisait
+  mal ce que chaque avis avait decide. Ici chaque avis est une carte — son type,
+  sa date, sa reference, ce qu'il vise et ce qu'il conclut — et le detail
+  complet s'ouvre dans un tiroir plutot que de pousser la page.
+-->
+<script setup lang="ts">
+import { hasRatingTags } from "../../../../../oip-drugs/utils/q-hasRatings";
+const props = defineProps<{
+  /** Le document de la marque (_source), avec son brand_history. */
+  product: any;
+  /** Codes HAS des avis qui repondent a la recherche en cours. */
+  matchedCodes?: Set<string>;
+  /** Termes saisis, surlignes dans le texte des cartes. */
+  searchTerms?: string[];
+}>();
+
+const emit = defineEmits<{ (event: "select", opinion: any): void }>();
+
+const { locale } = useI18n();
+
+/** Combien d'avis on montre avant de demander « voir plus ». */
+const PAGE = 10;
+const shown = ref(PAGE);
+
+const AWAITING_TRANSLATION = /^\s*translation coming soon/i;
+
+/** Premiere valeur exploitable : l'anglais quand il existe, le francais sinon. */
+function text(opinion: any, field: string) {
+  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 "";
+}
+
+/** Les avis, alertes exclues, du plus recent au plus ancien. */
+const opinions = computed<any[]>(() =>
+  [...(props.product?.brand_history ?? [])]
+    .filter((h: any) => h?.document_type !== "alert")
+    .sort(
+      (a, b) => new Date(b.decision_date).getTime() - new Date(a.decision_date).getTime(),
+    ),
+);
+
+const visible = computed(() => opinions.value.slice(0, shown.value));
+
+/** Groupes par annee de decision, dans l'ordre d'affichage. */
+const years = computed(() => {
+  const groups = new Map<string, any[]>();
+  visible.value.forEach((opinion) => {
+    const year = String(new Date(opinion.decision_date).getFullYear() || "-");
+    if (!groups.has(year)) groups.set(year, []);
+    groups.get(year)!.push(opinion);
+  });
+  return [...groups.entries()].map(([year, items]) => ({ year, items }));
+});
+
+function typeLabel(opinion: any) {
+  if (opinion.opinion_type === "early_access_decision") {
+    return locale.value === "en" ? "Early access" : "Accès précoce";
+  }
+  if (opinion.opinion_type === "eval") {
+    return locale.value === "en" ? "Assessment" : "Évaluation";
+  }
+  return locale.value === "en" ? "Opinion" : "Avis";
+}
+
+function typeIcon(opinion: any) {
+  return opinion.opinion_type === "early_access_decision" ? "Lightning" : "FileText";
+}
+
+/** Ce que vise l'avis : le libelle court quand il existe, l'indication sinon. */
+function title(opinion: any) {
+  return (
+    text(opinion, "disease_name") ||
+    text(opinion, "relevant_indication") ||
+    text(opinion, "indication") ||
+    (locale.value === "en" ? "Opinion" : "Avis")
+  );
+}
+
+/** Ce qu'il conclut, en deux lignes. */
+function excerpt(opinion: any) {
+  return (
+    text(opinion, "recommendation") ||
+    text(opinion, "conclusion") ||
+    text(opinion, "indication")
+  );
+}
+
+/** « avis favorable » vient de l'index en minuscules. */
+function statusLabel(opinion: any) {
+  const status = text(opinion, "opinion_status");
+  return status ? status.charAt(0).toUpperCase() + status.slice(1) : "";
+}
+
+/** L'avis repond-il a la recherche qui a mene ici ? */
+function isMatched(opinion: any) {
+  return !!opinion?.has_code && !!props.matchedCodes?.has(String(opinion.has_code));
+}
+
+/** Les avis matches d'abord : c'est ce qu'on vient lire. */
+const matchedCount = computed(() => opinions.value.filter(isMatched).length);
+
+function statusTone(opinion: any) {
+  const status = text(opinion, "opinion_status").toLowerCase();
+  if (status.includes("défavorable") || status.includes("unfavourable")) return "is_bad";
+  if (status.includes("favorable")) return "is_good";
+  return "is_neutral";
+}
+</script>
+
+<template>
+  <section class="hh oip-drugs">
+    <header class="hh_head">
+      <div>
+        <h2 class="hh_title">
+          {{
+            locale === "en"
+              ? "French National Authority for Health opinions"
+              : "Avis de la Haute Autorité de santé"
+          }}
+        </h2>
+        <p class="hh_count">
+          {{ opinions.length }}
+          {{
+            locale === "en"
+              ? `opinions recorded for the brand · ${visible.length} shown`
+              : `avis recensés pour la marque · ${visible.length} affichés`
+          }}
+        </p>
+      </div>
+      <p class="hh_source">Source : <b>HAS</b></p>
+    </header>
+
+    <!-- Ce que la recherche a trouve ici : sans ce rappel, on arrive sur des
+         dizaines d'avis sans savoir lesquels ont repondu aux termes saisis. -->
+    <p v-if="matchedCount" class="hh_match_note">
+      <RmIcon name="Target" :size="14" />
+      <template v-if="locale === 'en'">
+        <b>{{ matchedCount }}</b> opinion(s) match your search
+        <template v-if="searchTerms?.length">
+          for <b>{{ searchTerms.join(", ") }}</b>
+        </template>
+      </template>
+      <template v-else>
+        <b>{{ matchedCount }}</b> avis correspondent à votre recherche
+        <template v-if="searchTerms?.length">
+          <b>{{ searchTerms.join(", ") }}</b>
+        </template>
+      </template>
+    </p>
+
+    <div v-for="group in years" :key="group.year" class="hh_year">
+      <p class="hh_year_label">{{ group.year }}</p>
+
+      <article
+        v-for="opinion in group.items"
+        :key="opinion.has_code || opinion.opinion_id"
+        class="hh_card"
+        :class="{ is_matched: isMatched(opinion) }"
+        @click="emit('select', opinion)"
+      >
+        <div class="hh_card_head">
+          <p class="hh_type">
+            <span class="hh_type_icon"><RmIcon :name="typeIcon(opinion)" :size="14" /></span>
+            {{ typeLabel(opinion) }}
+            <span v-if="isMatched(opinion)" class="hh_match_tag">
+              {{ locale === "en" ? "Matches your search" : "Correspond à votre recherche" }}
+            </span>
+            <RmTag
+              v-for="tag in hasRatingTags(opinion, locale)"
+              :key="tag.key"
+              :variant="tag.variant"
+            >
+              {{ tag.label }}
+            </RmTag>
+          </p>
+
+          <div class="hh_meta">
+            <RmDate :date="opinion.decision_date" :lang="locale" />
+            <span v-if="opinion.has_code" class="hh_ref">réf. HAS {{ opinion.has_code }}</span>
+            <a
+              v-if="opinion.has_url"
+              class="hh_link"
+              :href="opinion.has_url"
+              target="_blank"
+              rel="noopener noreferrer"
+              :data-tip="locale === 'en' ? 'Download' : 'Télécharger'"
+              @click.stop
+            >
+              <RmIcon name="FilePdf" :size="16" />
+            </a>
+          </div>
+        </div>
+
+        <div class="hh_card_body">
+          <h3 class="hh_card_title">
+            <OipDrugsHeartTextHighlight :text="title(opinion)" :queries="searchTerms ?? []" />
+          </h3>
+          <p v-if="excerpt(opinion)" class="hh_excerpt">
+            <OipDrugsHeartTextHighlight :text="excerpt(opinion)" :queries="searchTerms ?? []" />
+          </p>
+
+          <p v-if="statusLabel(opinion)" class="hh_status" :class="statusTone(opinion)">
+            {{ statusLabel(opinion) }}
+          </p>
+
+          <p class="hh_more">
+            {{ locale === "en" ? "See the opinion" : "Consulter l'avis" }} →
+          </p>
+        </div>
+      </article>
+    </div>
+
+    <button
+      v-if="shown < opinions.length"
+      type="button"
+      class="hh_load"
+      @click="shown += PAGE"
+    >
+      {{ locale === "en" ? "Show more opinions" : "Voir plus d'avis" }}
+    </button>
+  </section>
+</template>
+
+<style scoped>
+.hh {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  /* La gouttiere doit rentrer dans la colonne, pas s'y ajouter : la feuille
+     Auriga remet `box-sizing` a `content-box`, et la section debordait de 24px
+     de chaque cote au lieu de s'en ecarter. */
+  box-sizing: border-box;
+  padding-inline: 32px;
+}
+
+.hh_head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.hh_title {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.hh_count {
+  margin-top: 2px;
+  color: var(--medium);
+  font-size: 14px;
+}
+
+.hh_source {
+  color: var(--medium);
+  font-size: 14px;
+}
+
+.hh_year {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hh_year_label {
+  margin-top: 12px;
+  color: var(--medium);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.hh_card {
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--white);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s linear, box-shadow 0.15s linear;
+}
+
+/* Un avis qui repond a la recherche se repere avant d'etre lu. */
+.hh_card.is_matched {
+  border-color: color-mix(in srgb, var(--primary) 45%, var(--light));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+.hh_match_tag {
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+  color: var(--primary);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.hh_match_note {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+  color: var(--dark);
+  font-size: 13px;
+}
+
+.hh_card:hover {
+  border-color: color-mix(in srgb, var(--primary) 35%, var(--light));
+  box-shadow: var(--medium-shadow);
+}
+
+/* Bandeau de carte : le type a gauche, la date et la reference a droite. */
+.hh_card_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 16px;
+  background: color-mix(in srgb, var(--primary) 4%, transparent);
+  border-bottom: 1px solid var(--light);
+}
+
+.hh_type {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.hh_type_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+.hh_meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.hh_ref {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--lightest);
+  color: var(--dark);
+  font-family: "Courier New", monospace;
+  font-size: 12px;
+}
+
+/* Le PDF s'annonce au survol : pastille rouge et infobulle sous le bouton,
+   comme les autres actions d'icone du hub. */
+.hh_link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  color: var(--medium);
+  transition: background-color 0.15s linear, color 0.15s linear;
+}
+
+.hh_link:hover {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--system-alert);
+}
+
+.hh_link::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 5;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--darkest);
+  color: var(--white);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s linear;
+}
+
+.hh_link:hover::after {
+  opacity: 1;
+}
+
+.hh_card_body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+
+/* A defaut de libelle court, c'est l'indication reglementaire qui sert de
+   titre : plusieurs paragraphes, a borner comme l'amorce. */
+.hh_card_title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.35;
+}
+
+/* L'avis complet vit dans le tiroir : la carte n'en montre que l'amorce. */
+.hh_excerpt {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--dark);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.hh_status {
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.hh_status.is_good {
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--system-success-hover);
+}
+
+.hh_status.is_bad {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--system-alert-hover);
+}
+
+.hh_status.is_neutral {
+  background: var(--lightest);
+  color: var(--dark);
+}
+
+.hh_more {
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hh_load {
+  align-self: center;
+  margin-top: 8px;
+  padding: 8px 16px;
+  border: 1px solid var(--light);
+  border-radius: 999px;
+  background: var(--white);
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.hh_load:hover {
+  background: var(--lightest);
+}
+</style>