@tekkare/romulus 0.1.251 → 0.1.252

package/layer/app/components/oip-drugs/fiches/IndicationFiche.vue

@@ -0,0 +1,182 @@
+<!--
+  Fiche d'une indication de la liste en sus (LES), portee de la page
+  `hubr/heart/indication/[id]` de fr_drugs_app : historique d'inscription des
+  produits, et prix des marques quand l'index des prix en connait.
+
+  Montee par la page de fr_drugs_app et par le tiroir des projets. L'export et
+  le bouton Projet de la page passent par le slot `actions` ; le tiroir pose
+  son lien « Ouvrir dans... » sous le titre par le slot `title-link`.
+-->
+<template>
+  <div class="oip-drugs arg_page_layout">
+    <RmPageHeader
+      :have-return="haveReturn"
+      :eyebrow="t('oipDrugs.heart.indication.lesRef')"
+      :tabs="headerTabs"
+      :tabs-label="t('oipDrugs.heart.indication.lesRef')"
+      @tab="selectTab"
+    >
+      <template #title>
+        <span class="oip-drugs-fiche__title">{{ title }}</span>
+        <slot name="title-link" />
+      </template>
+      <!-- Les lignes de l'indication passent au slot : l'export et le bouton
+           Projet de la page de fr_drugs_app s'en servent. -->
+      <template v-if="$slots.actions" #actions>
+        <slot name="actions" :results="results" />
+      </template>
+    </RmPageHeader>
+
+    <div v-if="isLoading || !loaded" class="oip_row v-center centered stretch">
+      <RmLoadingState spinner />
+    </div>
+    <div v-else-if="!results?.length" class="oip_list full centered v-center">
+      <RmEmptyState :title="t('oipDrugs.heart.errors.results')" icon="Prohibit" />
+    </div>
+    <template v-else>
+      <div v-if="activeTab === 1" class="arg_page_layout">
+        <!-- Le corps est partage avec le tiroir LES de la fiche marque. -->
+        <OipDrugsHeartResultsLesIndicationDetail :code="code" :results="results" />
+      </div>
+      <div v-else-if="activeTab === 2" class="arg_page_layout">
+        <OipDrugsHeartResultsDetailsPrice :product="resultsQueryPrice" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ES_INDEX } from "../../../oip-drugs/esIndices";
+import useOipDrugsElastic from "../../../oip-drugs/composables/useOipDrugsElastic";
+import { useHeartLesIndicationLoader } from "../../../oip-drugs/composables/useHeartLesIndication";
+
+// Le surlignage des pages d'indication (cf. TextHighlight) : fr_drugs_app le
+// lisait dans la route.
+provide("oipDrugsIndicationPage", true);
+import { indexedTabs } from "../../../utils/headerTabs";
+
+const props = withDefaults(
+  defineProps<{
+    /** Code de l'indication (CPEMB13, I000711...), l'id de la route de fr_drugs_app. */
+    code: string;
+    /** Onglet ouvert : "1" historique, "2" prix. */
+    tab?: string;
+    lang?: "fr" | "en";
+    highlight?: string[];
+    /** Fleche de retour du bandeau : la page la demande, pas le tiroir. */
+    haveReturn?: boolean;
+  }>(),
+  { tab: "1", lang: undefined, highlight: () => [], haveReturn: false },
+);
+
+const emit = defineEmits<{ "update:tab": [key: string] }>();
+
+const { t } = useI18n();
+const { queryCustomElastic } = useOipDrugsElastic();
+
+const title = computed(() => `Indication ${props.code}`);
+
+const activeTab = ref(Number(props.tab) || 1);
+watch(
+  () => props.tab,
+  (value) => {
+    activeTab.value = Number(value) || 1;
+  },
+);
+
+function selectTab(key: string) {
+  activeTab.value = Number(key);
+  emit("update:tab", key);
+}
+
+const { results, isLoading, load } = useHeartLesIndicationLoader();
+
+const resultsQueryPrice = ref<any[]>([]);
+const isLoadingQueryPrice = ref(false);
+
+const headerTabs = computed(() =>
+  indexedTabs(
+    resultsQueryPrice.value.length > 0
+      ? [t("oipDrugs.heart.indication.history"), t("oipDrugs.heart.indication.prices")]
+      : [t("oipDrugs.heart.indication.history")],
+    activeTab.value,
+  ),
+);
+
+// Marques dedoublonnees et sans trou : une ref imbriquee dans un ref partait
+// telle quelle dans la requete.
+const brands = computed(() =>
+  [...new Set((results.value ?? []).map((x: any) => x?.brand).filter(Boolean))],
+);
+
+const customQueryPrices = computed(() => ({
+  from: 0,
+  _source: [],
+  query: {
+    bool: {
+      must: [{ terms: { "brand.keyword": brands.value } }],
+    },
+  },
+  size: 100,
+  track_total_hits: true,
+}));
+
+// Pour eviter les bugs lors de la navigation
+const isMounted = ref(true);
+
+const launchQueryPrices = async () => {
+  if (!isMounted.value) return;
+  resultsQueryPrice.value = [];
+  if (!brands.value.length) return;
+
+  isLoadingQueryPrice.value = true;
+  await queryCustomElastic({
+    index: ES_INDEX.DRUG_CARDS,
+    customQuery: customQueryPrices.value,
+  })
+    .then((res) => {
+      if (res && res.results && res.results.length > 0 && isMounted.value) {
+        resultsQueryPrice.value = res.results;
+      }
+      if (isMounted.value) {
+        isLoadingQueryPrice.value = false;
+      }
+    })
+    .catch((error) => {
+      console.error("Error fetching prices:", error);
+      if (isMounted.value) {
+        isLoadingQueryPrice.value = false;
+      }
+    });
+};
+
+const loaded = ref(false);
+
+async function loadAll() {
+  await load(props.code);
+  loaded.value = true;
+  await launchQueryPrices();
+}
+
+watch(
+  () => props.code,
+  () => {
+    loadAll();
+  },
+);
+
+onMounted(async () => {
+  isMounted.value = true;
+  await loadAll();
+});
+
+onBeforeUnmount(() => {
+  isMounted.value = false;
+});
+</script>
+
+<style scoped>
+.oip-drugs-fiche__title {
+  display: block;
+}
+</style>

package/layer/app/components/oip-drugs/fiches/JoFiche.vue

@@ -0,0 +1,101 @@
+<!--
+  Fiche d'une presentation (CIP/UCD) au Journal Officiel, portee de la page
+  `hubr/heart/prices/jo/[id]` de fr_drugs_app : la carte JO, historique
+  complet des publications.
+
+  Montee par la page de fr_drugs_app et par le tiroir des projets. L'export de
+  la page passe par le slot `actions` ; le tiroir pose son lien « Ouvrir
+  dans... » sous le titre par le slot `title-link`.
+-->
+<template>
+  <div class="oip-drugs arg_page_layout">
+    <RmPageHeader :have-return="haveReturn" :eyebrow="t('oipDrugs.heart.joFeed.title')">
+      <template #title>
+        <span class="oip-drugs-fiche__title">{{ id }}</span>
+        <slot name="title-link" />
+      </template>
+      <template v-if="$slots.actions" #actions>
+        <slot name="actions" />
+      </template>
+    </RmPageHeader>
+    <div class="arg_page_content">
+      <div class="oip_row v-center centered stretch" v-if="isLoadingQuery">
+        <RmLoadingState spinner />
+      </div>
+      <OipDrugsHeartJoCard
+        v-else-if="resultsQuery !== null"
+        in-details
+        :product="resultsQuery"
+      />
+      <div v-else class="oip_list full centered v-center">
+        <RmEmptyState :title="t('oipDrugs.heart.errors.results')" icon="Prohibit" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ES_INDEX } from "../../../oip-drugs/esIndices";
+import useOipDrugsElastic from "../../../oip-drugs/composables/useOipDrugsElastic";
+
+const props = withDefaults(
+  defineProps<{
+    /** `local_drug_id` de la presentation (CIP/UCD), l'id de la route de fr_drugs_app. */
+    id: string;
+    lang?: "fr" | "en";
+    highlight?: string[];
+    /** Fleche de retour du bandeau : la page la demande, pas le tiroir. */
+    haveReturn?: boolean;
+  }>(),
+  { lang: undefined, highlight: () => [], haveReturn: false },
+);
+
+const { t } = useI18n();
+
+const resultsQuery = ref(null as any);
+const isLoadingQuery = ref(true);
+const { queryCustomElastic } = useOipDrugsElastic();
+
+// QUERY
+const lanchQuery = async () => {
+  isLoadingQuery.value = true;
+  resultsQuery.value = null;
+  // Meme requete que queryOneElastic, reponse entiere : la carte range le
+  // produit par son `_id` (bouton « Projet »), que queryOneElastic ne rend pas.
+  await queryCustomElastic({
+    index: ES_INDEX.DRUG_CARDS_PRICE_JO,
+    customQuery: {
+      from: 0,
+      _source: [],
+      query: { bool: { must: [{ match: { local_drug_id: props.id } }] } },
+      size: 1,
+      track_total_hits: true,
+    },
+    allAnswer: true,
+  }).then((res) => {
+    const hit = res?.hits?.hits?.[0];
+    if (hit) {
+      resultsQuery.value = { ...hit._source, _id: hit._id };
+    }
+    isLoadingQuery.value = false;
+  });
+};
+
+watch(() => props.id, () => {
+  lanchQuery();
+});
+
+onMounted(async () => {
+  await lanchQuery();
+});
+
+// La page de fr_drugs_app declare l'export du cadre depuis son script : elle
+// relit ici la presentation chargee plutot que de la redemander.
+defineExpose({ product: resultsQuery });
+</script>
+
+<style scoped>
+.oip-drugs-fiche__title {
+  display: block;
+}
+</style>

package/layer/app/components/oip-drugs/fiches/PndsFiche.vue

@@ -0,0 +1,279 @@
+<!--
+  Fiche d'un protocole national de diagnostic et de soins (PNDS), portee de la
+  page `hubr/heart/pnds/[id]` de fr_drugs_app : description, maladies rares,
+  documents Tekkare et HAS.
+
+  Montee par la page de fr_drugs_app et par le tiroir des projets. Le bouton
+  Projet de la page passe par le slot `actions` ; le tiroir pose son lien
+  « Ouvrir dans... » sous le titre par le slot `title-link`.
+-->
+<template>
+  <div class="oip-drugs arg_page_layout">
+    <RmPageHeader :have-return="haveReturn" :eyebrow="t('oipDrugs.heart.pnds.titleShort')">
+      <template #title>
+        <span class="oip-drugs-fiche__title">{{ title }}</span>
+        <slot name="title-link" />
+      </template>
+      <!-- Le document et son titre passent au slot : le bouton Projet de la
+           page de fr_drugs_app ne s'affiche qu'une fois le protocole charge. -->
+      <template v-if="$slots.actions" #actions>
+        <slot
+          name="actions"
+          :doc="resultPage?.results?.[0]?._source ?? null"
+          :title="title"
+        />
+      </template>
+      <p class="oip_filter_label" v-if="resultPage?.results?.[0]?._source?.protocol_date">
+        {{ heartFormatDate(resultPage.results[0]._source.protocol_date) }}
+      </p>
+    </RmPageHeader>
+
+    <div v-if="isLoadingQuery" class="oip_row v-center centered stretch">
+      <RmLoadingState spinner />
+    </div>
+
+    <div v-else-if="resultPage?.results?.[0]" class="oip_list gap-12 full">
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.PNDS"
+        :last-label="t('oipDrugs.heart.sources.lastProtocol')"
+        :last-date="source?.protocol_date"
+      />
+
+      <!-- Tags -->
+      <div class="oip_row gap-8 wrap ml-24" v-if="source.theme_fr || source.publication_type_fr">
+        <RmTag v-for="(th, i) in detailThemes" :key="'th-' + i" variant="blue">{{ th }}</RmTag>
+        <RmTag v-if="locale === 'fr' ? source.publication_type_fr : source.publication_type_en" variant="amber">
+          {{ locale === 'fr' ? source.publication_type_fr : source.publication_type_en }}
+        </RmTag>
+      </div>
+
+      <!-- Description -->
+      <div class="oip_card oip_list gap-24 oip_body full ml-24">
+        <p class="oip_heading">{{ t('oipDrugs.heart.pnds.detailsPage.description') }}</p>
+        <p>{{ locale === 'fr'
+          ? source.protocol_description_fr
+          : source.protocol_description_en }}
+        </p>
+        <!-- Maladies Rares -->
+        <div v-if="rareDiseaseTags.length > 0" class="indic_category_row" style="margin-top: 12px">
+          <div class="indic_category_label">
+            <RmIcon name="Virus" :size="16" color="#4A4A4A" />
+            <p class="oip_filter_label">
+              {{ t('oipDrugs.heart.filters.rare') }}
+            </p>
+          </div>
+          <div class="indic_tags_wrap">
+            <RmTag variant="gray" v-for="(rd, i) in rareDiseaseTags" :key="'rd-' + i">{{ rd }}</RmTag>
+          </div>
+        </div>
+      </div>
+
+      <!-- Documents Tekkare -->
+      <div v-if="tekkareLinks.length > 0" class="oip_card oip_list gap-16 oip_body full ml-24">
+        <div class="oip_list gap-4">
+          <p class="oip_heading">{{ t('oipDrugs.heart.pnds.detailsPage.documentsTekkare') }}</p>
+          <p class="pnds_doc_info">{{ t('oipDrugs.heart.pnds.detailsPage.documentsTekkareInfo') }}</p>
+        </div>
+        <div class="oip_list gap-12">
+          <div v-for="(link, index) in tekkareLinks" :key="'tk-' + index" class="oip_row gap-8 v-center">
+            <RmButton
+              prefix-icon="DownloadSimple"
+              variant="secondary"
+              @click="openPdf(link)"
+            >
+              {{ t('oipDrugs.heart.pnds.detailsPage.downloadPdf') }} - {{ getFileName(link) }}
+            </RmButton>
+          </div>
+        </div>
+      </div>
+
+      <!-- Documents HAS -->
+      <div v-if="hasLinks.length > 0" class="oip_card oip_list gap-16 oip_body full ml-24">
+        <p class="oip_heading">{{ t('oipDrugs.heart.pnds.detailsPage.documentsHas') }}</p>
+        <div class="oip_list gap-12">
+          <div v-for="(link, index) in hasLinks" :key="'has-' + index" class="oip_row gap-8 v-center">
+            <RmButton
+              prefix-icon="ArrowSquareOut"
+              variant="secondary"
+              @click="openPdf(link)"
+            >
+              {{ t('oipDrugs.heart.pnds.detailsPage.downloadPdf') }} - {{ getFileName(link) }}
+            </RmButton>
+          </div>
+        </div>
+      </div>
+
+      <!-- Aucun document -->
+      <div v-if="tekkareLinks.length === 0 && hasLinks.length === 0" class="oip_card oip_list gap-24 oip_body full ml-24">
+        <p class="oip_heading">{{ t('oipDrugs.heart.pnds.detailsPage.documents') }}</p>
+        <div class="oip_list full centered v-center">
+          <RmEmptyState :title="t('oipDrugs.heart.pnds.detailsPage.noDocuments')" icon="Prohibit" />
+        </div>
+      </div>
+
+      <!-- Lien HAS -->
+      <div class="oip_card oip_list gap-24 oip_body full ml-24" v-if="source.has_url">
+        <a
+          :href="source.has_url"
+          target="_blank"
+          class="oip_row gap-8 v-center has-link"
+        >
+          <RmButton prefix-icon="ArrowSquareOut" variant="primary">
+            {{ t('oipDrugs.heart.pnds.detailsPage.hasLink') }}
+          </RmButton>
+        </a>
+      </div>
+    </div>
+
+    <div v-else class="oip_list full centered v-center">
+      <RmEmptyState :title="t('oipDrugs.heart.errors.results')" icon="Prohibit" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ES_INDEX } from "../../../oip-drugs/esIndices";
+import useOipDrugsElastic from "../../../oip-drugs/composables/useOipDrugsElastic";
+import { HEART_SOURCE_UUIDS } from "../../../oip-drugs/utils/sourceUuids";
+import { heartFormatDate } from "../../../oip-drugs/utils/heartStyleAndFormat";
+
+const props = withDefaults(
+  defineProps<{
+    /** `_id` du protocole dans l'index PNDS, l'id de la route de fr_drugs_app. */
+    id: string;
+    lang?: "fr" | "en";
+    highlight?: string[];
+    /** Fleche de retour du bandeau : la page la demande, pas le tiroir. */
+    haveReturn?: boolean;
+  }>(),
+  { lang: undefined, highlight: () => [], haveReturn: false },
+);
+
+const { t, locale: i18nLocale } = useI18n();
+/** Langue des champs du document : celle passee par l'hote, sinon celle de l'app. */
+const locale = computed(() => props.lang ?? (i18nLocale.value === "en" ? "en" : "fr"));
+
+const isLoadingQuery = ref(true);
+const keyName = "pndsDetails";
+const { queryElastic, lists } = useOipDrugsElastic();
+
+const resultPage = computed(() => lists[keyName] ?? null);
+
+const source = computed<any>(() => {
+  return resultPage.value?.results?.[0]?._source ?? {};
+});
+
+const title = computed(() =>
+  (locale.value === "fr" ? source.value.pathology_fr : source.value.pathology_en)
+    || t("oipDrugs.heart.pnds.detailsPage.title"),
+);
+
+const detailThemes = computed(() => {
+  const val = locale.value === 'fr' ? source.value.theme_fr : source.value.theme_en;
+  if (Array.isArray(val)) return val.filter(Boolean);
+  if (val) return [val];
+  return [];
+});
+
+const rareDiseaseTags = computed(() => {
+  const src = locale.value === 'fr'
+    ? source.value.rare_diseases_fr
+    : source.value.rare_diseases_en;
+  if (!Array.isArray(src)) return [];
+  return src.map((d: any) => d.concat_disease_name_orpha_code).filter(Boolean);
+});
+
+const tekkareLinks = computed(() => {
+  if (!source.value) return [];
+  return (source.value.tekkare_pdf_links || []).filter(Boolean);
+});
+
+const hasLinks = computed(() => {
+  if (!source.value) return [];
+  return (source.value.has_pdf_links || []).filter(Boolean);
+});
+
+function openPdf(url: string) {
+  if (url) window.open(url, '_blank');
+}
+
+function getFileName(url: string) {
+  if (!url) return '';
+  const parts = url.split('/');
+  const fileName = parts[parts.length - 1];
+  return decodeURIComponent(fileName ?? "").replace('.pdf', '').replace(/_/g, ' ');
+}
+
+const launchQuery = async () => {
+  isLoadingQuery.value = true;
+  // Sans remise a zero, le document precedent s'affiche le temps de la reponse.
+  delete lists[keyName];
+  await queryElastic({
+    index: ES_INDEX.PNDS,
+    // queryElastic attend `{ values }` : un nombre nu retombe sur size 10.
+    take: { values: 1 },
+    customQuery: [{
+      filter: 'id',
+      values: {
+        term: {
+          _id: props.id
+        }
+      }
+    }],
+    keyName,
+  });
+  isLoadingQuery.value = false;
+};
+
+watch(() => props.id, () => {
+  launchQuery();
+});
+
+onBeforeMount(async () => {
+  await launchQuery();
+});
+</script>
+
+<style scoped>
+.oip-drugs-fiche__title {
+  display: block;
+}
+
+.ml-24 {
+  margin-left: 24px;
+}
+
+.has-link {
+  text-decoration: none;
+}
+
+.pnds_doc_info {
+  font-size: 13px;
+  color: var(--dark, #6c6c8a);
+  font-weight: 500;
+}
+
+.indic_category_row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.indic_category_label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 160px;
+  white-space: nowrap;
+  padding-top: 4px;
+}
+
+.indic_tags_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+</style>