@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,370 @@
+<template>
+  <RmSectionCard
+    class="oip-drugs"
+    v-if="getLatestEval !== undefined"
+    position="top"
+    :class="inDetails ? '' : 'action'"
+  >
+    <template #header>
+      <div class="oip_row v-center justify-between full_flex" style="width: 100%">
+        <div class="oip_row gap-8 wrap v-center">
+          <RmTag v-if="opinionMatch" variant="green">
+            Match : {{ opinionMatch.fields.map(f => f.label).join(', ') }} - {{ $t('oipDrugs.heart.card.history.opinion') }} <RmDate :lang="locale" :date="opinionMatch.date" />
+          </RmTag>
+          <RmTag variant="teal">{{ opinionCount }} {{ opinionCount > 1 ? (locale === 'fr' ? 'avis' : 'opinions') : (locale === 'fr' ? 'avis' : 'opinion') }}</RmTag>
+          <div v-if="locale === 'en' || showOriginal" class="oip_row v-center gap-8">
+            <p>{{ $t("oipDrugs.heart.translation") }}</p>
+            <div class="link" @click="showOriginal = !showOriginal">
+              {{ showOriginal ? $t("oipDrugs.heart.card.lang") : $t("oipDrugs.heart.card.original") }}
+            </div>
+          </div>
+        </div>
+        <div class="oip_row v-center gap-8" style="margin-left: auto">
+          <a
+            :href="detailsHref"
+            @click="onDetails"
+          >
+            <RmButton prefix-icon="Eye" variant="secondary">{{ $t("oipDrugs.heart.card.details") }}</RmButton>
+          </a>
+        </div>
+      </div>
+    </template>
+    <div class="card_display">
+      <div class="card_top">
+        <!-- <RmTag
+          v-if="!isHistoryMatch && !inDetails"
+          variant="orange"
+          class="mb-8"
+          >{{ $t("oipDrugs.heart.card.history.match") }}</RmTag> -->
+        <div class="oip_row gap-32 space-between">
+          <div class="card_header">
+            <div class="card_title">
+              <oip-drugs-heart-text-highlight
+                :text="
+                  getLatestEval.disease_name !== null
+                    ? `${getLatestEval.brand} - ${
+                        locale === 'en' && !showOriginal
+                          ? getLatestEval.disease_name_en
+                          : getLatestEval.disease_name
+                      }`
+                    : getLatestEval.brand
+                "
+                :queries="getHighlight(['brand'])"
+                class="has_product_title"
+              />
+            </div>
+          </div>
+
+        </div>
+
+        <div class="oip_row v-center gap-8 card_head_text wrap">
+          <RmDate :lang="locale" :date="getLatestEval.decision_date" />
+          <span
+            v-if="
+              ((locale === 'fr' || showOriginal) &&
+                (getLatestEval.nature_of_request_regroup !== null ||
+                  getLatestEval.nature_of_request !== null)) ||
+              (locale === 'en' &&
+                !showOriginal &&
+                ((getLatestEval.nature_of_request_regroup_en &&
+                  getLatestEval.nature_of_request_regroup_en !== null) ||
+                  (getLatestEval.nature_of_request_en &&
+                    getLatestEval.nature_of_request_en !== null)))
+            "
+            >-</span
+          >
+          <oip-drugs-heart-text-highlight
+            :text="
+              !showOriginal && locale === 'en'
+                ? getLatestEval.nature_of_request_en !== null
+                  ? getLatestEval.nature_of_request_en
+                  : getLatestEval.nature_of_request_regroup_en
+                : getLatestEval.nature_of_request !== null
+                ? getLatestEval.nature_of_request
+                : getLatestEval.nature_of_request_regroup
+            "
+            :queries="getStore('motif')"
+            v-if="
+              ((locale === 'fr' || showOriginal) &&
+                (getLatestEval.nature_of_request_regroup !== null ||
+                  getLatestEval.nature_of_request !== null)) ||
+              (locale === 'en' &&
+                !showOriginal &&
+                ((getLatestEval.nature_of_request_regroup_en &&
+                  getLatestEval.nature_of_request_regroup_en !== null) ||
+                  (getLatestEval.nature_of_request_en &&
+                    getLatestEval.nature_of_request_en !== null)))
+            "
+          />
+        </div>
+      </div>
+      <div class="oip_row v-center gap-8">
+        <div class="oip_list v-start gap-4">
+          <p class="oip_filter_label">ATC5</p>
+          <RmTag variant="transparent">
+            <oip-drugs-heart-text-highlight
+              v-if="getLatestEval.atc5_code !== null"
+              :text="getLatestEval.atc5_code?.join(', ')"
+              :queries="getMolHighlight"
+            />
+            <span v-else>{{ $t("oipDrugs.heart.card.not_provided") }}</span></RmTag>
+        </div>
+        <div
+          v-if="allCompanies.length > 0"
+          class="oip_list v-start gap-4"
+          style="flex: 1; min-width: 0;"
+        >
+          <p class="oip_filter_label">{{ $t("oipDrugs.heart.card.labels.comps") }}</p>
+          <RmTagRow :tags="allCompanies" />
+        </div>
+      </div>
+
+      <oip-drugs-heart-text-highlight
+        :key="textKey"
+        crop
+        have-read-more
+        :queries="getSearches"
+        :text="
+          locale === 'en' && !showOriginal
+            ? getLatestEval.essential_en
+            : getLatestEval.essential
+        "
+        v-if="
+          (locale === 'en' &&
+            !showOriginal &&
+            getLatestEval.essential_en !== null) ||
+          ((locale === 'fr' || showOriginal) &&
+            getLatestEval.essential !== null)
+        "
+        class="oip_body"
+        :id="`indic_${getLatestEval.brand}_${getLatestEval.opinion_id}`"
+      />
+
+      <div class="oip_row v-center gap-32 wrap">
+        <div class="oip_list v-start gap-4">
+          <p class="oip_filter_label">SMR</p>
+          <div class="oip_row v-center gap-8">
+            <div
+              v-if="
+                getLatestEval.smr &&
+                getLatestEval.smr !== null &&
+                getLatestEval.smr.length > 0
+              "
+              class="oip_row v-center gap-4 wrap"
+            >
+              <div v-for="(smr, index) in getLatestEval.smr" :key="index">
+                <RmTag variant="gray">{{ smr.type }}</RmTag>
+              </div>
+            </div>
+            <div v-else class="unavailable">N/A</div>
+          </div>
+        </div>
+        <oip-drugs-heart-results-asmr-cursor :asmr="getLatestEval.asmr" />
+      </div>
+      <!-- Pied de carte : la source voyage avec le resultat plutot
+           qu'en tete de page. Elle est posee ici, dernier enfant de
+           .card_display, et non dans le slot #footer : celui-ci ne
+           s'affiche qu'avec `position="bottom"`, ce qui supprimerait
+           le slot #header dont la carte a besoin. Et pas en frere de
+           .card_display non plus : `.card_content` d'Auriga est un
+           flex row, le pied y deviendrait une colonne de droite. -->
+      <div class="card_source_footer">
+        <oip-drugs-heart-search-page-dynamic-source
+          :last-label="$t('oipDrugs.heart.sources.lastOpinion')"
+          :last-date="getLatestEval?.decision_date"
+        />
+      </div>
+    </div>
+  </RmSectionCard>
+</template>
+
+<script setup lang="ts">
+import {
+  heartGetBestOpinionMatch,
+  heartSplitSearchTerms,
+} from "../../../../oip-drugs/composables/useHeartDetailSearches";
+import { drugsBrandPath } from "../../../../oip-drugs/kinds";
+import { useOipResourceNav } from "../../../../composables/useOipResourceNav";
+// product = one result from ES query
+const props = defineProps({
+  product: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  inDetails: {
+    type: Boolean,
+    default: false,
+  },
+  pathName: {
+    type: String,
+    require: true,
+  },
+  /** Termes cherches a surligner (ex-filterStore de la page de recherche). */
+  highlight: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const showModal = ref(false);
+const { locale } = useI18n();
+const nav = useOipResourceNav();
+const showOriginal = ref(false);
+
+const textKey = ref(0);
+
+watch(
+  () => showOriginal.value,
+  () => {
+    textKey.value += 1;
+  }
+);
+
+const opinionCount = computed(() => {
+  return props.product._source.brand_history.filter((a: any) => a.document_type !== 'alert').length;
+});
+
+const getLatestEval = computed(() => {
+  return props.product._source.brand_history?.[0]?.opinion_type === "eval"
+    ? props.product._source.brand_history[0]
+    : props.product._source.brand_history?.find(
+        (a: any) => a.opinion_type === "eval"
+      );
+});
+
+const allCompanies = computed(() => {
+  return [...new Set<string>(
+    props.product._source.brand_history
+      .map((h: any) => h.company)
+      .filter((c: any) => c !== null && c !== undefined && c.length > 0)
+  )];
+});
+
+// fr_drugs_app relisait les filtres de sa page de recherche (filterStore) ;
+// le layer ne recoit que les termes cherches (`highlight`).
+const getStore = (filter: string): any[] => {
+  return filter === "Search Filter" ? props.highlight ?? [] : [];
+};
+
+const isHistoryMatch = computed(() => {
+  const innerHits = props.product.inner_hits
+    ? Object.keys(props.product.inner_hits)
+    : [];
+
+  let match = ref(true);
+  innerHits.forEach((hit) => {
+    if (
+      props.product.inner_hits[hit].hits.total.value > 0 &&
+      props.product.inner_hits[hit].hits.hits.filter(
+        (f: any) => f._source.opinion_id === getLatestEval.value.opinion_id
+      ).length === 0
+    ) {
+      match.value = false;
+    }
+  });
+
+  return match.value;
+});
+
+const hasHeaderContent = computed(() => {
+  return !!opinionMatch.value || locale.value === 'en' || showOriginal.value;
+});
+
+const opinionMatch = computed(() => {
+  return heartGetBestOpinionMatch(
+    props.product._source.brand_history,
+    getSearches.value,
+    locale.value
+  );
+});
+
+/** La fiche marque dans fr_drugs_app, sur l'avis matche. */
+const detailsPath = computed(() => {
+  const base = drugsBrandPath(props.product._source.brand_group);
+  const code = opinionMatch.value?.hasCode;
+  return code ? `${base}?code=${encodeURIComponent(code)}` : base;
+});
+const detailsHref = computed(() => nav.appHref("fr_drugs_app", detailsPath.value));
+
+/** Le clic garde le Ctrl/Cmd-clic du navigateur (nouvel onglet). */
+function onDetails(event: MouseEvent) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
+  event.preventDefault();
+  nav.openApp("fr_drugs_app", detailsPath.value);
+}
+
+
+function getHighlight(filters: string[]) {
+  const filterValues = ref<any[]>([]);
+  filters.forEach((filter) => {
+    filterValues.value.push(getStore(filter));
+  });
+  return filterValues.value
+    .concat(getSearches.value)
+    .flat()
+    .filter((f) => f && f.length > 0);
+}
+
+const getSearches = computed(() => {
+  const searches = getStore("Search Filter");
+  if (searches && searches.length > 0) {
+    return heartSplitSearchTerms(searches);
+  } else return [];
+});
+const getMolHighlight = computed(() => {
+  const mols = getStore("molecule");
+  const finalMolArray: any = [];
+  if (mols.length > 0) {
+    mols.forEach((mol: any) => {
+      finalMolArray.push(
+        mol.split(" (ATC5: ")[0],
+        mol.split(" (ATC5: ")[1]?.replace(")", "")
+      );
+    });
+  }
+  return finalMolArray.filter(Boolean);
+});
+
+</script>
+
+<style scoped>
+/* Pied de source, cale sur `.drug-card-foot` du design system : libelle
+   atenue, 11px, filet clair. Le bleu primaire d'arg-source-container y
+   attirait l'oeil autant que le titre du resultat, alors que la provenance
+   se lit apres. */
+.card_source_footer {
+  display: flex;
+  align-items: center;
+  /* Pas de marge haute : `.card_display` porte deja `gap: 20px`, qui separe
+     le pied du dernier bloc de contenu. S'y ajouter faisait 28px au-dessus
+     du filet contre 25 en dessous, d'ou le desequilibre. */
+  padding-top: 6px;
+  border-top: 1px solid var(--light);
+  font-size: 11px;
+}
+
+/* Auriga pose 24px de padding sous le contenu de la carte, pensés pour un
+   bloc de texte, pas pour un pied de provenance : ça laissait 25px de vide
+   sous le filet. La charte en met 8 sous ce texte (`.drug-card-foot`).
+   Cible la carte courante via son style scope, pas toutes les
+   `arg_section_card` de l'app. */
+:deep(.card_content) {
+  padding-bottom: 8px;
+}
+
+.card_source_footer :deep(a),
+.card_source_footer :deep(span) {
+  color: var(--medium) !important;
+  font-size: 11px;
+}
+
+
+/* Le pied reste cliquable — il ouvre le tiroir Sources. En gris il n'a plus
+   de couleur pour le dire, donc le survol assombrit au lieu de repasser au
+   primaire : l'affordance survit sans reintroduire le bleu. */
+.card_source_footer:hover :deep(a),
+.card_source_footer:hover :deep(span) {
+  color: var(--darkest) !important;
+}
+
+</style>