@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,342 @@
+<!--
+  Carte d'alerte de securite ANSM.
+
+  Meme modele que les cartes d'avis HAS (results/brandCard.vue, RmResultCard) :
+  de quel produit s'agit-il, combien d'alertes porte-t-il, et que dit la plus
+  recente. La molecule et le laboratoire tiennent le sous-titre, le message de
+  l'ANSM le corps. Le detail vit dans la fiche marque, onglet Alertes, ouverte
+  au clic sur la carte entiere.
+-->
+<template>
+  <RmResultCard
+    class="oip-drugs"
+    v-if="getLatestAlert && latestAlertDetail"
+    :clickable="!inDetails"
+    :count="totalAlertCount"
+    :count-label="countLabel"
+    :more-label="inDetails ? '' : moreLabel"
+    :lang="dateLang"
+    :link="detailsHref"
+    @click="!inDetails && onOpen($event)"
+  >
+    <template #title>
+      <oip-drugs-heart-text-highlight
+        :text="product._source.brand_group"
+        :queries="getHighlight(['brand'])"
+      />
+    </template>
+    <template v-if="subtitle" #subtitle>
+      <oip-drugs-heart-text-highlight
+        :text="subtitle"
+        :queries="getMolHighlight.concat(getHighlight(['company']))"
+      />
+    </template>
+
+    <template #actions>
+      <div class="oip_row v-center gap-8">
+        <component
+          :is="projectButton"
+          v-if="projectButton"
+          :resource-id="product?._id"
+          type="FrHasBrand"
+          :label="product?._source?.brand_group"
+          compact
+        />
+        <!-- Le message vient de l'ANSM en francais : en anglais, on montre la
+             traduction et on laisse revenir a l'original. Un bouton, pas un
+             div : la carte entiere est cliquable et laisse la main a ce qui
+             porte sa propre action. -->
+        <button
+          v-if="locale === 'en'"
+          type="button"
+          class="alert_lang"
+          :title="$t('oipDrugs.heart.translation')"
+          @click.stop="showOriginal = !showOriginal"
+        >
+          {{ showOriginal ? $t("oipDrugs.heart.card.lang") : $t("oipDrugs.heart.card.original") }}
+        </button>
+      </div>
+    </template>
+
+    <template #meta>
+      <span class="rm-rcard__label">
+        {{ locale === "en" ? "Alert" : "Alerte" }} ·
+        <template v-if="getLatestAlert.security_end_date">
+          {{ locale === "en" ? "from" : "du" }}
+          <RmDate :date="getLatestAlert.security_start_date" :lang="dateLang" />
+          {{ locale === "en" ? "to" : "au" }}
+          <RmDate :date="getLatestAlert.security_end_date" :lang="dateLang" />
+        </template>
+        <RmDate v-else :date="getLatestAlert.security_start_date" :lang="dateLang" />
+      </span>
+      <!-- Ce que la recherche a matche ailleurs que dans l'alerte : un avis de
+           la marque. -->
+      <RmTag v-if="opinionMatch" variant="emerald">
+        {{ opinionMatch.fields.map((f: any) => f.label).join(", ") }} ·
+        {{ $t("oipDrugs.heart.card.history.opinion") }}
+        <RmDate :date="opinionMatch.date" :lang="dateLang" />
+      </RmTag>
+    </template>
+
+    <p v-if="message" class="rm-rcard__desc">
+      <oip-drugs-heart-text-highlight
+        :key="textKey"
+        crop
+        have-read-more
+        :queries="getSearches"
+        :text="message"
+        :id="`alert_${getLatestAlert.brand}_${getLatestAlert.opinion_id}`"
+      />
+    </p>
+
+    <!-- Rangees choisies dans « Personnaliser ». -->
+    <oip-drugs-heart-results-pref-rows scope="alert" :values="prefValues" :prefs="prefs" />
+
+    <template #footer>
+      <oip-drugs-heart-elastic-source-container-elastic
+        :uuid="HEART_SOURCE_UUIDS.ANSM"
+        :last-label="$t('oipDrugs.heart.sources.lastAlert')"
+        :last-date="getLatestAlert?.security_start_date"
+      />
+    </template>
+  </RmResultCard>
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../oip-drugs/utils/sourceUuids";
+import {
+  heartGetBestOpinionMatch,
+  heartSplitSearchTerms,
+} from "../../../../oip-drugs/composables/useHeartDetailSearches";
+import { heartFixMojibake } from "../../../../oip-drugs/utils/heartStyleAndFormat";
+import {
+  heartGeneTags,
+  heartOncoIcd10Tags,
+  heartOncoTermTags,
+  heartRareTags,
+} from "../../../../oip-drugs/utils/p-heartCardTags";
+import { defaultCardPrefs, type CardPrefs } from "../../../../oip-drugs/composables/useCardPrefOptions";
+import { drugsBrandPath } from "../../../../oip-drugs/kinds";
+import { useOipResourceNav } from "../../../../composables/useOipResourceNav";
+import { useOipResourceHooks } from "../../../../composables/useOipResourceHooks";
+
+const props = defineProps({
+  /** Un resultat de la requete ES : { _source: { brand_group, brand_history[] } }. */
+  product: {
+    type: Object,
+    required: true,
+  },
+  inDetails: {
+    type: Boolean,
+    default: false,
+  },
+  pathName: {
+    type: String,
+    require: true,
+  },
+  /** Termes cherches a surligner (ex-filterStore de la page des alertes). */
+  highlight: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  /** Options de « Personnaliser » (ex-store cardPrefs) ; defaut fr_drugs_app : rien. */
+  prefs: {
+    type: Object as PropType<CardPrefs>,
+    default: () => defaultCardPrefs(),
+  },
+});
+
+const { locale } = useI18n();
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+const showOriginal = ref(false);
+
+const dateLang = computed(() => (locale.value === "en" ? "en" : "fr"));
+
+/** Le texte croppe ne se recalcule pas seul : il se remonte au changement de langue. */
+const textKey = ref(0);
+watch(showOriginal, () => {
+  textKey.value += 1;
+});
+
+const hasValidAlertDetails = (entry: any) =>
+  entry?.alert_details && Array.isArray(entry.alert_details) && entry.alert_details.length > 0;
+
+/**
+ * L'alerte la plus recente. Les resultats de recherche la portent dans
+ * `inner_hits` (requete nested), les autres cas dans `brand_history`.
+ */
+const getLatestAlert = computed(() => {
+  const innerHitsAlerts = props.product.inner_hits?.searchType?.hits?.hits;
+  if (innerHitsAlerts && innerHitsAlerts.length > 0) {
+    const valid = innerHitsAlerts
+      .map((a: any) => a._source)
+      .filter(hasValidAlertDetails)
+      .sort(
+        (a: any, b: any) =>
+          new Date(b.security_end_date).getTime() - new Date(a.security_end_date).getTime(),
+      );
+    if (valid.length > 0) return valid[0];
+  }
+
+  const alerts = props.product._source?.brand_history?.filter(
+    (a: any) =>
+      (a.document_type === "alert" || hasValidAlertDetails(a)) && hasValidAlertDetails(a),
+  );
+  if (alerts && alerts.length > 0) {
+    return alerts.sort(
+      (a: any, b: any) =>
+        new Date(b.security_end_date).getTime() - new Date(a.security_end_date).getTime(),
+    )[0];
+  }
+  return undefined;
+});
+
+const latestAlertDetail = computed(() => getLatestAlert.value?.alert_details?.[0]);
+
+/** Les alertes de la marque : entrees `brand_history` de type alerte. */
+const totalAlertCount = computed(() => {
+  const innerHitsAlerts = props.product.inner_hits?.searchType?.hits?.hits;
+  if (innerHitsAlerts && innerHitsAlerts.length > 0) {
+    return innerHitsAlerts.length;
+  }
+  const alerts = props.product._source?.brand_history?.filter(
+    (a: any) => a.document_type === "alert" || (a.alert_details && a.alert_details.length > 0),
+  );
+  return alerts?.length || 0;
+});
+
+const countLabel = computed(() => {
+  const n = totalAlertCount.value;
+  if (locale.value === "en") return n > 1 ? "alerts" : "alert";
+  return n > 1 ? "alertes" : "alerte";
+});
+
+const moreLabel = computed(() => {
+  const n = totalAlertCount.value;
+  if (locale.value === "en") return n > 1 ? `See the ${n} alerts` : "See the alert";
+  return n > 1 ? `Voir les ${n} alertes` : "Voir l'alerte";
+});
+
+/** « MOLECULE (ATC5) · FABRICANT », comme le sous-titre de la carte de marque. */
+const subtitle = computed(() => {
+  const detail = latestAlertDetail.value;
+  if (!detail) return "";
+  const atc = Array.isArray(detail.atc5_code)
+    ? detail.atc5_code.filter(Boolean).join(", ")
+    : detail.atc5_code;
+  const molecule = [detail.molecule, atc ? `(${atc})` : null].filter(Boolean).join(" ");
+  return [molecule, detail.company].filter(Boolean).join(" · ");
+});
+
+const message = computed(() => {
+  const detail = latestAlertDetail.value;
+  if (!detail) return "";
+  const text =
+    locale.value === "en" && !showOriginal.value
+      ? detail.display_message_en || detail.display_message
+      : detail.display_message;
+  return text ? heartFixMojibake(text) : "";
+});
+
+/**
+ * Ce que la carte peut montrer en plus, si « Personnaliser » le demande.
+ * Les tags sont ceux de la marque : l'index des alertes est celui des avis.
+ */
+const prefValues = computed(() => {
+  const src = props.product._source ?? {};
+  return {
+    rare: heartRareTags(src, locale.value),
+    oncoIcd10: heartOncoIcd10Tags(src, locale.value),
+    oncoTerms: heartOncoTermTags(src, locale.value),
+    genes: heartGeneTags(src, locale.value),
+    cis: [
+      ...new Set(
+        (getLatestAlert.value?.alert_details ?? [])
+          .map((detail: any) => detail?.cis_code)
+          .filter(Boolean),
+      ),
+    ] as string[],
+  };
+});
+
+/** La fiche marque, onglet Alertes, dans fr_drugs_app. */
+const detailsPath = computed(
+  () => `${drugsBrandPath(String(props.product._source?.brand_group ?? ""))}?tab=alerts`,
+);
+const detailsHref = computed(() => nav.appHref("fr_drugs_app", detailsPath.value));
+
+/**
+ * La carte entiere ouvre la fiche (cf. heartOpenCard de fr_drugs_app) : ce qui
+ * porte sa propre action garde la main, et le Ctrl/Cmd-clic reste au
+ * navigateur.
+ */
+const OWN_ACTION = "a, button, input, select, textarea, .rcd-pagination, .rcd-pagination-navigate";
+function onOpen(event: MouseEvent) {
+  const target = event.target as HTMLElement | null;
+  if (target?.closest(OWN_ACTION)) return;
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
+  event.preventDefault();
+  nav.openApp("fr_drugs_app", detailsPath.value);
+}
+
+// fr_drugs_app relisait les filtres de sa page des alertes (filterStore) ;
+// le layer ne recoit que les termes cherches (`highlight`).
+const getStore = (filter: string): any[] => {
+  return filter === "Search Filter" ? props.highlight ?? [] : [];
+};
+
+const getSearches = computed(() => {
+  const searches = getStore("Search Filter");
+  return searches && searches.length > 0 ? heartSplitSearchTerms(searches) : [];
+});
+
+function getHighlight(filters: string[]) {
+  const filterValues = ref([] as any);
+  filters.forEach((filter) => {
+    filterValues.value.push(getStore(filter));
+  });
+  return filterValues.value
+    .concat(getSearches.value)
+    .flat()
+    .filter((f: any) => f && f.length > 0);
+}
+
+/** Le filtre molecule porte « MOLECULE (ATC5: CODE) » : les deux se surlignent. */
+const getMolHighlight = computed(() => {
+  const mols = getStore("molecule");
+  const finalMolArray: any = [];
+  if (mols.length > 0) {
+    mols.forEach((mol: string) => {
+      finalMolArray.push(
+        mol.split(" (ATC5: ")[0],
+        mol.split(" (ATC5: ")[1]?.replace(")", ""),
+      );
+    });
+  }
+  return finalMolArray.filter(Boolean);
+});
+
+const opinionMatch = computed(() =>
+  heartGetBestOpinionMatch(
+    props.product._source.brand_history,
+    getSearches.value,
+    locale.value,
+  ),
+);
+
+</script>
+
+<style scoped>
+.alert_lang {
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--primary);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,229 @@
+<template>
+  <div class="oip-drugs oip_list v-start gap-4">
+    <p v-if="view" :class="selected ? 'white' : ''" class="oip_filter_label">
+      ASMR
+    </p>
+    <div
+      class="asmr_section"
+      :class="{ asmr_null_section: asmr === null || emptyAsmr }"
+    >
+      <div class="asmr_section">
+        <p
+          v-if="!view"
+          :class="selected ? 'white' : ''"
+          class="oip_filter_label"
+        >
+          ASMR
+        </p>
+        <div v-if="asmr === null || emptyAsmr">
+          <p class="unavailable" :class="selected ? 'white' : ''">N/A</p>
+        </div>
+        <div v-else class="asmr_cursor">
+          <div
+            v-for="type in 5"
+            :key="type"
+            class="asmr_space"
+            :class="{
+              active_asmr: isActive(6 - type),
+              active_left: leftActive(6 - type),
+              active_right: rightActive(6 - type),
+            }"
+          >
+            <p>{{ 6 - type }}</p>
+          </div>
+        </div>
+        <div
+          v-if="(asmr !== null || !emptyAsmr) && view"
+          class="asmr_values_display"
+        >
+          <p
+            v-for="(val, index) in asmrValues"
+            :key="index"
+            class="asmr_indicator"
+          >
+            {{ asmrType[(asmrAsNum(val.type) ?? 1) - 1] ?? ""
+            }}<span v-if="index < asmrValues.length - 1">,</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  asmr: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  view: {
+    type: Boolean,
+    default: true,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  pathName: {
+    type: String,
+    require: true,
+  },
+});
+
+const asmrRange = 5;
+const { locale } = useI18n();
+const asmrType = computed(() => {
+  return locale.value === "en"
+    ? ["Major", "Important", "Moderate", "Minor", "None"]
+    : ["Majeur", "Important", "Modéré", "Mineur", "Inexistant"];
+});
+
+const emptyAsmr = computed(() => {
+  let empty = true;
+  if (props.asmr !== null) {
+    for (let i = 0; i < props.asmr.length; i++) {
+      if (validAsmr(props.asmr[i]!.type)) {
+        empty = false;
+      }
+    }
+  }
+  return empty;
+});
+
+const asmrValues = computed(() => {
+  const asmrArray = [];
+  for (let i = 0; i < props.asmr.length; i++) {
+    if (validAsmr(props.asmr[i]!.type)) {
+      asmrArray.push(props.asmr[i]!);
+    }
+  }
+  return asmrArray;
+});
+
+function leftActive(val: number) {
+  if (isActive(val + 1)) {
+    return true;
+  } else return false;
+}
+
+function rightActive(val: number) {
+  if (isActive(val - 1)) {
+    return true;
+  } else return false;
+}
+
+function isActive(val: number) {
+  if (props.asmr !== null) {
+    for (let i = 0; i < props.asmr.length; i++) {
+      if (asmrAsNum(props.asmr[i]!.type) === val) {
+        return true;
+      }
+    }
+  }
+}
+
+function validAsmr(val: string) {
+  if (
+    val === "V (absence)" ||
+    val === "IV (mineur)" ||
+    val === "III (modéré)" ||
+    val === "II (important)" ||
+    val === "I (majeur)"
+  ) {
+    return true;
+  } else return false;
+}
+
+function asmrAsNum(val: string) {
+  if (val === "V (absence)") {
+    return 5;
+  } else if (val === "IV (mineur)") {
+    return 4;
+  } else if (val === "III (modéré)") {
+    return 3;
+  } else if (val === "II (important)") {
+    return 2;
+  } else if (val === "I (majeur)") {
+    return 1;
+  } else return null;
+}
+</script>
+<style>
+/* Feuille globale dans fr_drugs_app, limitee ici aux fiches du layer. */
+.oip-drugs .asmr_values_display {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+.oip-drugs .asmr_null_section {
+  align-items: baseline !important;
+}
+
+.oip-drugs .active_left {
+  border-left: 0px !important;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
+
+.oip-drugs .active_right {
+  border-right: 0px !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+
+.oip-drugs .asmr_title {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.oip-drugs .asmr_indicator {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--medium);
+}
+.oip-drugs .asmr_section {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.oip-drugs .asmr_cursor {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  isolation: isolate;
+  height: 24px;
+  border: 1px solid var(--light);
+  border-radius: 8px;
+}
+
+.oip-drugs .asmr_space {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 10px;
+  height: 100%;
+  border-radius: 8px;
+}
+
+.oip-drugs .active_asmr {
+  padding: 0px 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+  color: var(--pink);
+
+  background: #fef2f6;
+
+  border: 2px solid var(--pink);
+  border-radius: 8px;
+}
+</style>