@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,227 @@
+<!--
+  Prix des produits d'une marque (onglet Prix de la fiche indication), porte
+  de `heart/results/details/price.vue` de fr_drugs_app. Le lien « Voir
+  details » ouvre la fiche prix de fr_drugs_app par useOipResourceNav.
+-->
+<template>
+  <div v-if="product" class="oip-drugs full_width">
+    <RmTableCard class="full_width">
+      <template #header>
+        <div>
+          <h3 class="oip_heading" v-if="locale === 'fr'">Prix des produits de la marque.</h3>
+          <h3 class="oip_heading" v-else>Prices of products of the brand.</h3>
+          <OipDrugsHeartElasticSourceContainerElastic
+            :uuid="HEART_SOURCE_UUIDS.PRICE_TRACKER"
+            :last-label="t('oipDrugs.heart.sources.lastPrice')"
+            :last-date="lastPriceDates"
+          />
+        </div>
+      </template>
+      <RmTable
+        class="full_width"
+        :columns="table.columns"
+        :rows="table.rows"
+      >
+        <template v-for="key in table.typeKeys.code" :key="key" #[key]="{ value }">
+          <div class="oip_row v-center gap-8 nowrap">
+            <RmTag variant="transparent">{{ value.type }}</RmTag>
+            <span>{{ value.code || '-' }}</span>
+          </div>
+        </template>
+        <template v-for="key in table.typeKeys.nowrap" :key="key" #[key]="{ value }">
+          <p class="nowrap">{{ value }}</p>
+        </template>
+        <template v-for="key in table.typeKeys.number" :key="key" #[key]="{ value }">
+          <p class="nowrap">
+            <template v-if="value !== null && value !== undefined">
+              {{ heartFormatNumber(value) }} {{ selectedMoneySymbol }}
+            </template>
+            <template v-else>-</template>
+          </p>
+        </template>
+        <template v-for="key in table.typeKeys.evol" :key="key" #[key]="{ value }">
+          <div class="oip_row gap-8 v-center evol-cell">
+            <RmTrendIndicator
+              v-if="value !== null && value !== undefined && value !== 0"
+              :up="value > 0"
+            />
+            <p v-if="value !== null && value !== undefined">
+              {{ value > 0 ? "+ " : "" }}{{ value.toLocaleString("fr-FR", { maximumFractionDigits: 2 }) }}
+              {{ selectedMoneySymbol }}
+            </p>
+            <p v-else>-</p>
+          </div>
+        </template>
+        <template v-for="key in table.typeKeys.action" :key="key" #[key]="{ value }">
+          <a
+            v-if="value"
+            :href="nav.appHref('fr_drugs_app', priceDetailsPath(value))"
+            class="link nowrap"
+            @click="openPriceDetails($event, value)"
+          >
+            <RmButton variant="text">{{ locale === 'fr' ? 'Voir détails' : 'See details' }}</RmButton>
+          </a>
+        </template>
+      </RmTable>
+    </RmTableCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../../../oip-drugs/utils/sourceUuids";
+import { heartFormatDate, heartFormatNumber } from "../../../../../oip-drugs/utils/heartStyleAndFormat";
+import { valueTable } from "../../../../../utils/valueTable";
+
+const { locale, t } = useI18n();
+const nav = useOipResourceNav();
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  },
+  selectedPrice: {
+    type: String,
+    required: false,
+    default: ""
+  },
+  index: {
+    type: Number
+  }
+});
+
+const selectedMoneySymbol = ref("€");
+
+/** La fiche prix de fr_drugs_app pour un code CIP / UCD. */
+function priceDetailsPath(code: string) {
+  return `/hubr/heart/prices/details/${code}`;
+}
+
+// Ctrl/Cmd-clic : le navigateur ouvre le lien ; sinon l'hote decide (tiroir ou page).
+function openPriceDetails(event: MouseEvent, code: string) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+  event.preventDefault();
+  nav.openApp("fr_drugs_app", priceDetailsPath(code));
+}
+
+// En-tetes alignes sur le Price Tracker : deux colonnes de prix (PFHT + Prix
+// public) + une colonne d'evolution du PFHT uniquement.
+const tableHeads = computed(() => [
+  "",
+  locale.value === "fr" ? "Produit" : "Product",
+  "CIP / UCD",
+  t("oipDrugs.heart.details.priceEvolution.date"),
+  t("oipDrugs.heart.details.priceEvolution.exFactory"), // PFHT / Ex-factory
+  locale.value === "fr" ? "Evol. PFHT" : "Ex-factory evol.",
+  t("oipDrugs.heart.details.priceEvolution.retail"),    // Prix public / Public price
+  t("oipDrugs.heart.mainTable.company"),
+]);
+
+// Type de code (CIP ville / UCD hopital) deduit du canal de distribution.
+function codeType(oneProduct: any): string {
+  const dc = (oneProduct?.distribution_channel || "").toUpperCase();
+  return dc.startsWith("UCD") ? "UCD" : "CIP";
+}
+
+// Derniere variation du PFHT (price_type_id 1) depuis changed_history.
+function factoryVariation(oneProduct: any): number | null {
+  const hist = (oneProduct?.changed_history || [])
+    .filter((h: any) => h.price_type_id === 1 && h.status_changed !== "N")
+    .sort(
+      (a: any, b: any) =>
+        new Date(b.application_date).getTime() -
+        new Date(a.application_date).getTime()
+    );
+  return hist[0]?.price_variation ?? null;
+}
+
+const tableData = computed(() => {
+  return ((props.product as any[]) || [])
+    .map((oneProduct: any, idx: number) => {
+      // Comme le Price Tracker : on lit factory_price (PFHT) ET public_price
+      // (Prix public) sur la meme entree. reimbursement_history n'etant PAS
+      // trie, on prend la plus recente par application_date (sinon un ancien
+      // retrait sans prix masquerait le prix courant, bug TECENTRIQ).
+      const reimbHist = oneProduct?.reimbursement_history;
+      const reimb =
+        Array.isArray(reimbHist) && reimbHist.length > 0
+          ? [...reimbHist].sort(
+              (a: any, b: any) =>
+                new Date(b.application_date).getTime() -
+                new Date(a.application_date).getTime()
+            )[0]
+          : {};
+      return {
+        oneProduct,
+        idx,
+        factory: reimb.factory_price ?? null,
+        publicPrice: reimb.public_price ?? null,
+        appDate: reimb.application_date ?? null,
+        factoryVar: factoryVariation(oneProduct),
+      };
+    })
+    // Aligne sur le filtre "Avec prix uniquement" du Price Tracker.
+    .filter((p: any) => p.factory !== null || p.publicPrice !== null)
+    .map((p: any) => ({
+      id: `${p.oneProduct?.label}-${p.idx}`,
+      values: [
+        p.oneProduct?.local_drug_id,
+        p.oneProduct?.label,
+        { type: codeType(p.oneProduct), code: p.oneProduct?.local_drug_id },
+        p.appDate ? heartFormatDate(p.appDate) : "-",
+        p.factory,
+        p.factoryVar,
+        p.publicPrice,
+        p.oneProduct?.manufacturer,
+      ],
+    }));
+});
+
+/**
+ * Les dates d'application des prix des produits de la carte, brutes : le pied
+ * garde la plus recente. Prises sur l'historique plutot que sur les lignes du
+ * tableau, qui portent une date deja mise en forme pour l'affichage.
+ */
+const lastPriceDates = computed(() =>
+  ((props.product as any[]) || []).flatMap((one: any) =>
+    (one?.reimbursement_history ?? []).map((entry: any) => entry?.application_date),
+  ),
+);
+
+// Le tableau etait ecrit pour `arg-table` : des libelles de tete et des lignes
+// `{ values: [...] }`. La conversion en colonnes de RmTable est mecanique,
+// cf. `valueTable`.
+const table = computed(() =>
+  valueTable(
+    tableHeads.value,
+    tableData.value,
+    ["action", "", "code", "nowrap", "number", "evol", "number", "nowrap"],
+    {
+      size: [1, 4, 2, 1, 2, 2, 2, 3],
+      align: ["center", "left", "left", "left", "right", "right", "right", "left"],
+    },
+  ),
+);
+</script>
+
+<style scoped>
+.nowrap {
+  white-space: nowrap;
+}
+
+.evol-cell {
+  justify-content: flex-end;
+}
+
+.full_width {
+  width: 100%;
+}
+
+.link {
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+}
+.link:hover {
+  color: var(--primary-hover);
+}
+</style>