@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,243 @@
+<!--
+  « Pourquoi ce resultat ? »
+
+  Sous chaque carte, la liste des endroits ou les termes ont ete trouves, avec
+  le nombre d'avis concernes, et au depliage l'extrait exact — surligne en
+  `<mark>`, la balise que la feuille du hub peint en rose.
+
+  Deux sources d'extraits : ce qu'Elasticsearch a matche lui-meme (recherche
+  texte libre, via les inner_hits du hit) et, pour les filtres qui n'ont pas
+  d'inner_hits exploitable, ce qu'un appelant fournit en `extraFields` — par
+  exemple le texte que le pipeline de tagging oncologie a lui-meme surligne
+  dans `oncology_tagging.section[].highlight` (cf. `heartGetTaggingExcerpts`).
+  Dans les deux cas, rien n'est recalcule ici.
+-->
+<script setup lang="ts">
+import { heartExplainMatch } from "../../../../oip-drugs/composables/useHeartMatchExplain";
+
+export interface MatchExplainExtraField {
+  key: string;
+  label: string;
+  count?: number;
+  fragments: { html: string; date: string | null; ref?: string | null }[];
+}
+
+const props = defineProps<{
+  /** Le hit Elasticsearch complet, inner hits compris. */
+  hit: any;
+  /** Repli par defaut ; la fiche produit ouvre le detail d'emblee. */
+  open?: boolean;
+  /** Familles supplementaires, hors inner_hits ES (cf. commentaire ci-dessus). */
+  extraFields?: MatchExplainExtraField[];
+}>();
+
+const { locale } = useI18n();
+
+const explain = computed(() => heartExplainMatch(props.hit, locale.value));
+
+// Filtres deja couverts par un extrait `extraFields` : la pastille de filtre
+// ES resterait sinon en double avec la pastille d'extrait (ex. Oncology
+// ICD-10 apparaitrait a la fois nue et avec son texte).
+const extraKeys = computed(() => new Set((props.extraFields ?? []).map((f) => f.key)));
+
+const allFields = computed(() => [...(explain.value?.fields ?? []), ...(props.extraFields ?? [])]);
+const allFilters = computed(() => (explain.value?.filters ?? []).filter((f) => !extraKeys.value.has(f.name)));
+
+const expanded = ref(!!props.open);
+// Les cartes d'une liste sont reutilisees d'une recherche a l'autre : le
+// depliage suit la recherche en cours, pas seulement la premiere.
+watch(
+  () => props.open,
+  (open) => (expanded.value = !!open),
+);
+
+/**
+ * Extraits de toutes les familles, du plus ancien avis au plus recent : c'est
+ * par la date qu'on retrouve un avis dans la fiche. Les extraits sans date
+ * (dont ceux du pipeline de tagging, qui ne portent pas de date d'avis)
+ * ferment la liste.
+ */
+const excerpts = computed(() =>
+  allFields.value
+    .flatMap((field) =>
+      field.fragments
+        // `v-html` en aval : un extrait mal forme (donnee de tagging
+        // irreguliere) s'afficherait en "[object Object]" plutot que de
+        // disparaitre silencieusement.
+        .filter((fragment) => typeof fragment.html === "string" && fragment.html)
+        .slice(0, 2)
+        .map((fragment) => ({
+          key: `${field.key}-${fragment.html}`,
+          label: field.label,
+          date: fragment.date,
+          ref: fragment.ref ?? null,
+          html: fragment.html,
+        })),
+    )
+    .sort((a, b) => {
+      if (!a.date || !b.date) return a.date ? -1 : b.date ? 1 : 0;
+      return new Date(a.date).getTime() - new Date(b.date).getTime();
+    }),
+);
+</script>
+
+<template>
+  <div v-if="allFields.length || allFilters.length" class="oip-drugs mx">
+    <!-- La carte entiere est un lien : sans `prevent`, deplier partirait sur la
+         fiche produit. -->
+    <button type="button" class="mx_head" @click.stop.prevent="expanded = !expanded">
+      <RmIcon name="Target" :size="14" />
+      <span class="mx_intro">
+        {{
+          allFields.length
+            ? (locale === "en" ? "Match in" : "Correspondance dans")
+            : (locale === "en" ? "Filters matched" : "Filtres retenus")
+        }}
+      </span>
+      <!-- Le decompte est celui des avis de la famille : sur un index plat il
+           n'y a rien a compter, la pastille reste nue. -->
+      <span v-for="field in allFields" :key="field.key" class="mx_chip">
+        {{ field.label }}
+        <b v-if="field.count">{{ field.count }}</b>
+      </span>
+      <!-- Filtre matche sans aucun extrait (ni ES, ni tagging) : rien a
+           deplier, la pastille parle directement dans l'en-tete plutot que
+           de rester invisible derriere un « Voir pourquoi » qui ne
+           s'affiche jamais. -->
+      <template v-if="!allFields.length">
+        <span v-for="filter in allFilters" :key="filter.name" class="mx_chip">
+          {{ filter.label }}
+          <b>{{ filter.count }}</b>
+        </span>
+      </template>
+      <span v-if="excerpts.length" class="mx_toggle">
+        {{ expanded ? (locale === "en" ? "Hide" : "Masquer") : (locale === "en" ? "See why" : "Voir pourquoi") }}
+      </span>
+    </button>
+
+    <div v-if="expanded && excerpts.length" class="mx_body">
+      <p v-for="excerpt in excerpts" :key="excerpt.key" class="mx_excerpt">
+        <span class="mx_excerpt_label">
+          {{ excerpt.label }}
+          <span v-if="excerpt.date" class="mx_excerpt_date">
+            · <RmDate :date="excerpt.date" :lang="locale === 'en' ? 'en' : 'fr'" />
+          </span>
+          <span v-if="excerpt.ref" class="mx_excerpt_date">· réf. HAS {{ excerpt.ref }}</span>
+        </span>
+        <span class="mx_excerpt_text" v-html="excerpt.html" />
+      </p>
+
+      <p v-if="allFilters.length" class="mx_filters">
+        {{ locale === "en" ? "Filters matched:" : "Filtres retenus :" }}
+        <span v-for="filter in allFilters" :key="filter.name" class="mx_chip">
+          {{ filter.label }}
+          <b>{{ filter.count }}</b>
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Bande de bas de carte, calee sur les gouttieres de la carte (24px) pour ne
+   pas donner l'impression de deborder. */
+.mx {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 24px 16px;
+  border-top: 1px solid var(--light);
+}
+
+.mx_head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--medium);
+  font-family: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mx_intro {
+  font-weight: 600;
+}
+
+/* Meme rose que le surlignage des extraits : la pastille et le mot souligne
+   dans le texte parlent de la meme chose. */
+.mx_chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: #ffaeff;
+  color: var(--darkest);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.mx_chip b {
+  font-weight: 800;
+}
+
+.mx_toggle {
+  margin-left: auto;
+  color: var(--primary);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.mx_body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mx_excerpt {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--lightest);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.mx_excerpt_label {
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* La date garde sa casse : « 27 août 2025 » se lit mieux que « 27 AOÛT 2025 ». */
+.mx_excerpt_date {
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.mx_excerpt_text {
+  color: var(--dark);
+}
+
+.mx_filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  color: var(--medium);
+  font-size: 13px;
+}
+</style>

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

@@ -0,0 +1,105 @@
+<!--
+  Les rangees facultatives d'une carte de resultat, celles cochees dans
+  « Personnaliser ».
+
+  La carte passe ce qu'elle sait lire (`values`, une liste d'etiquettes par cle
+  d'option) ; le composant garde les rangees demandees et non vides, dans
+  l'ordre du catalogue (useCardPrefOptions). Rien de coche, ou rien a
+  montrer : il ne rend rien du tout.
+-->
+<script setup lang="ts">
+import {
+  cardPrefOptions,
+  defaultCardPrefs,
+  type CardPrefs,
+  type CardPrefScope,
+} from "../../../../oip-drugs/composables/useCardPrefOptions";
+
+const props = withDefaults(
+  defineProps<{
+    /** Famille de page : dit quelles options existent. */
+    scope: CardPrefScope;
+    /** cle d'option → etiquettes a afficher (une chaine seule est acceptee). */
+    values: Record<string, string[] | string | null | undefined>;
+    /** Au-dela, la rangee se resume par un « +n » qui liste le reste au survol. */
+    maxTags?: number;
+    /**
+     * Les options cochees dans « Personnaliser » (ex-store `cardPrefs` de
+     * fr_drugs_app) ; par defaut celles de fr_drugs_app : rien.
+     */
+    prefs?: CardPrefs;
+  }>(),
+  { maxTags: 4, prefs: () => defaultCardPrefs() },
+);
+
+const { locale } = useI18n();
+
+const rows = computed(() => {
+  const active = props.prefs ?? {};
+  const en = locale.value === "en";
+
+  return cardPrefOptions(props.scope)
+    .filter((option) => active[option.key])
+    .map((option) => {
+      const raw = props.values[option.key];
+      const tags = (Array.isArray(raw) ? raw : raw ? [raw] : []).filter(Boolean) as string[];
+      return { ...option, label: en ? option.en : option.fr, tags };
+    })
+    .filter((row) => row.tags.length > 0);
+});
+</script>
+
+<template>
+  <div v-if="rows.length" class="oip-drugs pref_rows">
+    <div v-for="row in rows" :key="row.key" class="pref_row">
+      <div class="pref_row_label">
+        <RmIcon :name="row.icon" :size="16" />
+        <p class="oip_filter_label">{{ row.label }}</p>
+      </div>
+      <div class="pref_row_tags">
+        <RmTag v-for="(tag, i) in row.tags.slice(0, maxTags)" :key="i" :variant="row.variant">
+          {{ tag }}
+        </RmTag>
+        <RmTag
+          v-if="row.tags.length > maxTags"
+          variant="gray"
+          :title="row.tags.slice(maxTags).join(', ')"
+        >
+          +{{ row.tags.length - maxTags }}
+        </RmTag>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pref_rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.pref_row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.pref_row_label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 160px;
+  padding-top: 4px;
+  white-space: nowrap;
+}
+
+.pref_row_tags {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+}
+</style>