@tekkare/romulus 0.1.251 → 0.1.253

package/layer/app/components/oip-drugs/medicam/market/Chart.vue

@@ -0,0 +1,121 @@
+<!--
+  Graphe d'evolution d'un secteur Medic'AM, porte de medicam/market/chart de
+  fr_drugs_app. Le parent fait la requete du mensuel, une fois pour tous les
+  graphes : le bloc recoit les lignes et se filtre sur son secteur et sa
+  mesure. Source et date passent en props (ex-store retail).
+-->
+<template>
+  <div class="oip-drugs width_100">
+    <RmLoadingState v-if="loading" :lines="1" :chart-height="400" />
+    <RmChartCard v-else :title="cardTitle" :source="source"
+      :verified="verified" :lang="lang"
+      :state="chartContent.length > 0 ? 'ready' : 'empty'">
+      <RmLineChart :key="chartKey" :categories="chartHead" :series="chartContent" :height="400"
+        number-format="compact" />
+    </RmChartCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reportPageEmpty } from "../../../../oip-drugs/composables/usePageEmpty";
+import { salesCurves, salesPeriods } from "../../../../oip-drugs/utils/v-salesSeries";
+import { SALES_SOURCE_FALLBACKS } from "../../../../oip-drugs/composables/v-useSalesSource";
+
+// Data
+const chartKey = ref(0 as number);
+
+// Props
+const props = defineProps({
+  rows: {
+    type: Array as PropType<any[]>,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  selectedLevel: {
+    type: String,
+    required: true,
+  },
+  selectedLabel: {
+    type: Object,
+    required: true,
+  },
+  selectedMeasure: {
+    type: String,
+    required: true,
+  },
+  selectedSwitch: {
+    type: Boolean,
+    required: true,
+  },
+  selectedTitle: {
+    type: String,
+    required: true,
+  },
+  // Titre complet, quand l'appelant le compose (mesure, secteur, periode) :
+  // sans lui, la carte se contente de « Evolution » et du secteur.
+  title: {
+    type: String,
+    default: "",
+  },
+  selectedSector: {
+    type: String,
+    required: true,
+  },
+  lang: {
+    type: String as PropType<"fr" | "en">,
+    default: "fr",
+  },
+  // Ex-store retail (medicamSource, medicamUpdateDate).
+  source: {
+    type: String,
+    default: SALES_SOURCE_FALLBACKS.MEDICAM,
+  },
+  verified: {
+    type: String,
+    default: "/",
+  },
+});
+
+// Le titre de la carte porte le secteur lu : c'est ce que faisait le slot
+// #title du graphe Auriga.
+const cardTitle = computed(() =>
+  props.title ||
+  (props.lang === "fr"
+    ? "Évolution " + props.selectedTitle
+    : props.selectedTitle + " Evolution")
+);
+
+const data = computed(() => props.rows);
+
+// Methods
+const chartHead = computed(() => salesPeriods(data.value));
+const chartContent = computed(() => {
+  const measure = props.selectedSector + "_" + props.selectedMeasure;
+  return salesCurves(
+    data.value.map((i: any) => ({ ...i, volume: i[measure] })),
+    props.selectedLabel as any[],
+    props.selectedSwitch,
+  );
+});
+
+// Watch
+watch(chartContent, () => {
+  chartKey.value = chartKey.value + 1;
+});
+
+/**
+ * Le bloc dit a la vue s'il est vide : elle montre un seul etat vide a la
+ * place d'un par carte quand ils se vident tous ensemble. Pas avant la fin du
+ * chargement, sinon l'etat vide passerait devant les squelettes.
+ */
+reportPageEmpty(() => !props.loading && chartContent.value.length === 0);
+</script>
+
+<style scoped>
+.width_100 {
+  width: 100%;
+}
+</style>

package/layer/app/components/oip-drugs/outpatient/ProductEvolution.vue

@@ -0,0 +1,236 @@
+<!--
+  Evolution du marche Outpatient (PHMEV) d'un ou plusieurs codes, portee de
+  outpatient/productEvolution de fr_drugs_app. La requete passe par
+  oipEsSearch (ex-useElasticGeneral, plus d'await au niveau du setup : le
+  composant se monte sans Suspense et charge a l'affichage). La mesure lue
+  (ex-store outpatient) passe en prop.
+-->
+<template>
+  <div class="oip-drugs width_100">
+    <RmLoadingState v-if="loading" :lines="1" :chart-height="450" />
+    <RmChartCard v-else :title="cardTitle" :tags="cardTags" :source="source"
+      :verified="verified" :lang="lang"
+      :state="chartContent.length > 0 ? 'ready' : 'empty'">
+      <RmLineChart :key="chartKey" :categories="chartHead" :series="chartContent" :height="450"
+        number-format="compact" />
+    </RmChartCard>
+    <!-- Le graphe donne la forme, le tableau donne les chiffres : meme
+         donnee, relevable et copiable ligne a ligne. -->
+    <RmTableCard v-if="!loading" class="margin_top">
+      <template #header>
+        <div>
+          <p class="rm-table-card__title">{{ lang === "fr" ? "Données d’évolution" : "Evolution data" }}</p>
+          <RmTagRow class="kpi-card-tags" :tags="cardTags" />
+          <RmSourceLine :source="source" :verified="verified" :lang="lang" />
+        </div>
+        <p class="rm-table-card__caption">{{ dataTable.rows.length }}
+          {{ dataTable.rows.length > 1
+            ? (lang === "fr" ? "lignes affichées" : "rows displayed")
+            : (lang === "fr" ? "ligne affichée" : "row displayed") }}</p>
+      </template>
+      <RmTable :columns="dataTable.columns" :rows="dataTable.rows" max-height="420px"
+        :empty-text="lang === 'fr' ? 'Aucune donnée' : 'No data'">
+        <!-- Volume ou part de marche : le tableau lit la meme valeur que la
+             courbe, donc le meme format. -->
+        <template v-for="key in dataTable.valueKeys" :key="key" #[key]="{ value }">
+          <span v-if="value === null">-</span>
+          <span v-else-if="selectedSwitch">{{ rmNumber(Math.round(Number(value))) }}</span>
+          <span v-else>{{ rmDecimal(Number(value), 1) }} %</span>
+        </template>
+      </RmTable>
+    </RmTableCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { oipEsSearch } from "../../../composables/useOipResources";
+import { reportPageEmpty } from "../../../oip-drugs/composables/usePageEmpty";
+import { scopeTags } from "../../../oip-drugs/utils/v-scopeTags";
+import {
+  OUTPATIENT_DEFAULT_MEASURE,
+  OUTPATIENT_MEASURES,
+  salesCurves,
+  salesPeriods,
+} from "../../../oip-drugs/utils/v-salesSeries";
+import { SALES_SOURCE_FALLBACKS } from "../../../oip-drugs/composables/v-useSalesSource";
+
+// Data
+const chartKey = ref(0 as number);
+
+// Props
+const props = defineProps({
+  esIndex: {
+    type: String,
+    required: true,
+  },
+  selectedLabel: {
+    type: Array as PropType<any[]>,
+    required: true,
+  },
+  selectedItem: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  selectedSwitch: {
+    type: Boolean,
+    required: true,
+  },
+  // Ex-store outpatient (outpatientSelectedMeasureIndex).
+  measureIndex: {
+    type: Number,
+    default: OUTPATIENT_DEFAULT_MEASURE,
+  },
+  lang: {
+    type: String as PropType<"fr" | "en">,
+    default: "fr",
+  },
+  // Ex-store outpatient (outpatientSource, outpatientUpdateDate).
+  source: {
+    type: String,
+    default: SALES_SOURCE_FALLBACKS.OUTPATIENT,
+  },
+  verified: {
+    type: String,
+    default: "/",
+  },
+});
+
+const measureLabel = computed(
+  () => (props.lang === "fr" ? OUTPATIENT_MEASURES.fr : OUTPATIENT_MEASURES.en)[props.measureIndex] ?? "",
+);
+const selectedMetric = computed(() => OUTPATIENT_MEASURES.variables[props.measureIndex] ?? "value_public_price");
+// Le titre de la carte porte la mesure lue : c'est ce que faisait le slot
+// #title du graphe Auriga.
+const cardTitle = computed(() => (props.lang === "fr" ? "Évolution Totale Marché Sorties Hospitalières (Hôpitaux + Espic)" : "Total Outpatient Market (Hospital + Espic) Evolution"));
+// Mesure et lieu lus, en etiquettes sous le titre (cf. `scopeTags`).
+const cardTags = computed(() => scopeTags({ measure: measureLabel.value, geo: "France" }));
+
+// Query
+const esQuery = computed(() => {
+  const { selectedItem } = props;
+  const selectedHco = ["TOTAL"];
+
+  let query = {} as any;
+  let obj = {} as any;
+
+  if (selectedItem.length === 0) {
+    query = {
+      size: 2000,
+      query: {
+        bool: {
+          must: [{ bool: { should: [] } }],
+        },
+      },
+    };
+    obj = {
+      match_none: {},
+    };
+    query.query.bool.must[0].bool.should.push(obj);
+  }
+  if (selectedItem.length > 0) {
+    query = {
+      size: 2000,
+      query: {
+        bool: {
+          must: [{ bool: { should: [] } }, { bool: { should: [] } }],
+        },
+      },
+    };
+    // Filter code
+    for (let i = 0; i < selectedItem.length; i++) {
+      obj = {
+        match: {
+          "code.keyword": selectedItem[i],
+        },
+      };
+      query.query.bool.must[0].bool.should.push(obj);
+    }
+    // Filter hco_et_code === "TOTAL"
+    for (let i = 0; i < selectedHco.length; i++) {
+      obj = {
+        match: {
+          "hco_et_code.keyword": selectedHco[i],
+        },
+      };
+      query.query.bool.must[1].bool.should.push(obj);
+    }
+  }
+
+  return query;
+});
+
+const hits = ref<any[]>([]);
+const loading = ref(true);
+
+async function load() {
+  loading.value = true;
+  try {
+    const response: any = await oipEsSearch("drugs", props.esIndex, esQuery.value);
+    hits.value = response?.hits?.hits ?? [];
+  } catch {
+    hits.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+watch(() => [props.esIndex, JSON.stringify(esQuery.value)], load);
+
+// Methods
+const filteredResult = computed(() => {
+  let result = hits.value.map((i: any) => i["_source"]);
+  const metric = selectedMetric.value;
+
+  // Filter only total hospital rows
+  result = result.filter((i: any) => i.hco_et_code === "TOTAL");
+  // Filter selected codes
+  result = result.filter((i: any) => i.code !== "TOTAL");
+
+  // All periods in column
+  const p0_period = result.map((i: any) => i.max_period)[0];
+  const p1_period = (Number(p0_period) - 1).toString();
+  const p2_period = (Number(p0_period) - 2).toString();
+  const p3_period = (Number(p0_period) - 3).toString();
+  const p4_period = (Number(p0_period) - 4).toString();
+
+  const p0 = result.map((i: any) => ({ ...i, volume: i[metric + "_p0"], period: p0_period }));
+  const p1 = result.map((i: any) => ({ ...i, volume: i[metric + "_p1"], period: p1_period }));
+  const p2 = result.map((i: any) => ({ ...i, volume: i[metric + "_p2"], period: p2_period }));
+  const p3 = result.map((i: any) => ({ ...i, volume: i[metric + "_p3"], period: p3_period }));
+  const p4 = result.map((i: any) => ({ ...i, volume: i[metric + "_p4"], period: p4_period }));
+  return ([] as any[]).concat(p0, p1, p2, p3, p4);
+});
+
+const chartHead = computed(() => salesPeriods(filteredResult.value));
+const chartContent = computed(() => salesCurves(filteredResult.value, props.selectedLabel, props.selectedSwitch));
+
+// Watch
+watch(chartContent, () => {
+  chartKey.value = chartKey.value + 1;
+});
+
+// Le meme jeu de series, mis a plat : une ligne par courbe, une colonne par
+// periode.
+const dataTable = computed(() =>
+  rmSeriesTable(chartHead.value, chartContent.value, {
+    label: props.lang === "fr" ? "Produit" : "Product",
+  })
+);
+
+/**
+ * Le bloc dit a la vue s'il est vide, une fois la reponse arrivee : elle
+ * montre alors un seul etat vide.
+ */
+reportPageEmpty(() => !loading.value && chartContent.value.length === 0);
+</script>
+
+<style scoped>
+.width_100 {
+  width: 100%;
+}
+
+.margin_top {
+  margin-top: 8px;
+}
+</style>

package/layer/app/components/oip-drugs/resources/Ansm.vue

@@ -0,0 +1,75 @@
+<!--
+  Une specialite ANSM (CIS) rangee dans un projet (portage de
+  pages/hubr/heart/ansm/details/[id] de fr_drugs_app). La page relit le
+  document par son `_id` puis renvoie a la fiche marque, onglet ANSM : on
+  monte cette fiche, sur ce CIS. Sans marque, le bandeau de la page et le
+  detail du CIS (celui de l'onglet ANSM de la fiche marque).
+-->
+<template>
+  <div class="oip-drugs oip-drugs-rv-ansm">
+    <RmLoadingState v-if="pending" spinner />
+
+    <OipDrugsFichesBrandFiche
+      v-else-if="brand"
+      v-model:tab="tab"
+      :brand="brand"
+      :cis="docId"
+      :lang="lang"
+      :highlight="highlight"
+    >
+      <template #title-link><slot name="title-link" /></template>
+    </OipDrugsFichesBrandFiche>
+
+    <div v-else-if="source" class="arg_page_layout">
+      <RmPageHeader :eyebrow="$t('oipDrugs.heart.ansm.tabs.ansm')">
+        <template #title>
+          {{ source.cis_label || $t('oipDrugs.heart.ansm.details') }}
+          <slot name="title-link" />
+        </template>
+        <p class="oip_filter_label">
+          {{ [source.cis_code, source.atc5_french_code_label, source.owner].filter(Boolean).join(', ') }}
+        </p>
+      </RmPageHeader>
+      <div class="oip-drugs-rv-ansm__body">
+        <OipDrugsHeartAnsmCisDetail :cis="source" :sku-count="1" />
+      </div>
+    </div>
+
+    <RmEmptyState
+      v-else
+      icon="FileX"
+      :title="lang === 'en' ? 'Record unavailable' : 'Fiche indisponible'"
+      :text="lang === 'en' ? 'The record is no longer in the data.' : 'La fiche n\'est plus dans la donnée.'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { oipEsGet } from "../../../composables/useOipResources";
+import { ES_INDEX } from "../../../oip-drugs/esIndices";
+
+const props = withDefaults(
+  defineProps<{ id: string; type?: string; highlight?: string[]; lang?: "fr" | "en" }>(),
+  { type: "FrAnsmProduct", highlight: () => [], lang: "fr" },
+);
+
+/** L'onglet de la fiche marque, tenu ici (la page l'ecrivait dans `?tab=`). */
+const tab = ref("ansm");
+
+const { data: hit, pending } = useAsyncData(
+  () => `oip-drugs-ansm-${props.id}`,
+  () => oipEsGet<any>("drugs", ES_INDEX.CIS_ANSM, props.id),
+  { server: false, watch: [() => props.id] },
+);
+
+const source = computed(() => hit.value?._source ?? null);
+const docId = computed(() => hit.value?._id ?? props.id);
+const brand = computed(() => (source.value?.brand ? String(source.value.brand) : ""));
+</script>
+
+<style scoped>
+.oip-drugs-rv-ansm__body {
+  box-sizing: border-box;
+  padding: var(--space-24);
+}
+</style>

package/layer/app/components/oip-drugs/resources/Association.vue

@@ -0,0 +1,30 @@
+<!--
+  Vue de ressource d'une association de patients (FrPatientAssociation) :
+  le `resourceId` est le nom regroupe, `_id` de l'annuaire. Rien a relire, la
+  fiche charge ses donnees elle-meme.
+-->
+<template>
+  <OipDrugsFichesAssociationFiche
+    v-model:tab="tab"
+    class="oip-drugs"
+    :label="id"
+    :lang="lang"
+    :highlight="highlight"
+  >
+    <template #title-link><slot name="title-link" /></template>
+  </OipDrugsFichesAssociationFiche>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    id: string;
+    type?: string;
+    lang?: "fr" | "en";
+    highlight?: string[];
+  }>(),
+  { type: "FrPatientAssociation", lang: "fr", highlight: () => [] },
+);
+
+const tab = ref("1");
+</script>

package/layer/app/components/oip-drugs/resources/Brand.vue

@@ -0,0 +1,65 @@
+<!--
+  Vue de ressource `FrHasBrand` : la marque rangee dans un projet, par l'`_id`
+  de son document BRAND_HAS. Relit le document pour son `brand_group`, puis
+  monte la fiche marque entiere (cf. fiches/BrandFiche).
+-->
+<template>
+  <div class="oip-drugs">
+    <RmLoadingState v-if="loading" :lines="6" />
+    <BrandFiche
+      v-else-if="brand"
+      :brand="brand"
+      :tab="tab"
+      :lang="lang"
+      :highlight="highlight"
+      @update:tab="tab = $event"
+    >
+      <template #title-link><slot name="title-link" /></template>
+    </BrandFiche>
+    <RmEmptyState
+      v-else
+      icon="Pill"
+      :title="lang === 'en' ? 'Brand not found' : 'Marque introuvable'"
+      :text="lang === 'en' ? 'This record is no longer in the HAS index.' : 'Cette fiche ne figure plus dans l’index HAS.'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ES_INDEX } from "../../../oip-drugs/esIndices";
+import useOipDrugsElastic from "../../../oip-drugs/composables/useOipDrugsElastic";
+import BrandFiche from "../fiches/BrandFiche.vue";
+
+const props = withDefaults(
+  defineProps<{
+    /** `_id` du document BRAND_HAS (le resourceId du projet). */
+    id: string;
+    type?: string;
+    lang?: "fr" | "en";
+    highlight?: string[];
+  }>(),
+  { type: "FrHasBrand", lang: "fr", highlight: () => [] },
+);
+
+const { queryCustomElastic } = useOipDrugsElastic();
+
+const brand = ref<string>("");
+const loading = ref(true);
+/** Onglet ouvert, garde localement : le tiroir n'a pas d'URL a tenir. */
+const tab = ref("");
+
+async function load(id: string) {
+  loading.value = true;
+  brand.value = "";
+  const res: any = await queryCustomElastic({
+    index: ES_INDEX.BRAND_HAS,
+    customQuery: { query: { ids: { values: [id] } }, _source: ["brand_group"], size: 1 } as any,
+    onlyOne: true,
+  }).catch(() => null);
+  if (id !== props.id) return;
+  brand.value = res?.brand_group ?? "";
+  loading.value = false;
+}
+
+watch(() => props.id, (id) => load(id), { immediate: true });
+</script>