@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,647 @@
+<!--
+  Tout ce que le suivi mondial sait d'une presentation etrangere.
+
+  La carte pays ne montre que le prix en vigueur : c'est ce qu'on lit d'un coup
+  d'oeil. Le reste est ici : les autres types de prix publies sur la meme
+  presentation, l'historique complet des changements avec leur ecart, et
+  l'identite du produit tel que le pays l'enregistre.
+
+  Meme chrome que le tiroir des presentations francaises : le lecteur passe de
+  l'onglet Prix a l'onglet Regard international sans changer d'habitude.
+-->
+<script setup lang="ts">
+import type { HeartIntlPriceRow } from "../../../../../oip-drugs/utils/heartIntlPrice";
+
+const props = defineProps<{
+  /** La presentation ouverte, ou null quand le tiroir est ferme. */
+  row: HeartIntlPriceRow | null;
+  /** Nom du pays dans la langue lue ; l'index l'ecrit toujours en anglais. */
+  countryLabel?: string;
+}>();
+
+const emit = defineEmits<{ (event: "close"): void }>();
+
+const { locale } = useI18n();
+const isEn = computed(() => locale.value === "en");
+
+/** Les montants gardent leur devise : un prix local n'est pas un prix en euros. */
+function money(value: number | null | undefined, currency = "EUR") {
+  if (value === null || value === undefined) return "-";
+  // `narrowSymbol` : en francais, GBP s'ecrit sinon « £GB » et USD « $US ».
+  return new Intl.NumberFormat(isEn.value ? "en-US" : "fr-FR", {
+    style: "currency",
+    currency,
+    currencyDisplay: "narrowSymbol",
+    maximumFractionDigits: 2,
+  }).format(Number(value));
+}
+
+/** Le prix converti ne s'affiche que hors zone euro. */
+function inEuro(value: number | null | undefined, currency: string) {
+  if (currency === "EUR" || value === null || value === undefined) return "";
+  return money(value, "EUR");
+}
+
+function date(raw: string | number | null | undefined) {
+  if (raw === null || raw === undefined || raw === "") return "-";
+  const value = new Date(raw);
+  if (Number.isNaN(value.getTime())) return String(raw);
+  return value.toLocaleDateString(isEn.value ? "en-GB" : "fr-FR", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+function signedPercent(value: number | null) {
+  if (value === null) return "";
+  const formatted = value.toLocaleString(isEn.value ? "en-US" : "fr-FR", {
+    maximumFractionDigits: 1,
+  });
+  return `${value > 0 ? "+" : ""}${formatted} %`;
+}
+
+const currency = computed(() => props.row?.currency ?? "EUR");
+
+/**
+ * L'historique, ligne par ligne, avec l'ecart au prix precedent.
+ *
+ * `price_variation` est rempli par la source et vaut 0 sur les lignes de
+ * reconduction : l'ecart affiche se recalcule donc a partir du prix precedent
+ * du meme type, la seule comparaison qui ait un sens.
+ */
+const historyRows = computed(() => {
+  const history = props.row?.history ?? [];
+  return history.map((entry, index) => {
+    const previous = history
+      .slice(index + 1)
+      .find((older) => older.type === entry.type && typeof older.local === "number");
+    const variation = previous ? entry.local - previous.local : null;
+    return {
+      entry,
+      variation,
+      variationPct: variation !== null && previous?.local ? (variation / previous.local) * 100 : null,
+    };
+  });
+});
+
+/**
+ * Seuls les mouvements sont montres.
+ *
+ * L'index republie le meme tarif a chaque collecte (jusqu'a 540 lignes pour
+ * une seule presentation) : garder les reconductions noyait les quelques
+ * dates ou le prix a reellement bouge. Le prix en vigueur, lui, se lit sur
+ * l'onglet d'a cote.
+ */
+const visibleHistory = computed(() =>
+  historyRows.value.filter((item) => item.variation === null || item.variation !== 0),
+);
+
+/** Le nombre de lignes posees d'un coup ; le reste arrive a la demande. */
+const PAGE = 40;
+const shown = ref(PAGE);
+const pagedHistory = computed(() => visibleHistory.value.slice(0, shown.value));
+
+/** Premiere mise en vigueur connue, tous types confondus. */
+const firstSeen = computed(() => {
+  const dates = (props.row?.history ?? [])
+    .map((entry) => entry.date)
+    .filter(Boolean)
+    .sort();
+  return dates[0] ?? null;
+});
+
+const tabs = computed(() =>
+  [
+    { key: "prices", label: isEn.value ? "Current prices" : "Prix en vigueur", filled: true },
+    {
+      key: "history",
+      label: isEn.value ? "Price history" : "Historique des prix",
+      filled: (props.row?.history?.length ?? 0) > 0,
+    },
+    { key: "identity", label: isEn.value ? "Identity" : "Identité", filled: true },
+  ].filter((tab) => tab.filled),
+);
+
+const active = ref(0);
+const activeKey = computed(() => tabs.value[active.value]?.key ?? "prices");
+
+// Une autre presentation s'ouvre : on repart de son premier onglet, et la
+// liste d'historique reprend a sa premiere page.
+watch(
+  () => props.row,
+  () => {
+    active.value = 0;
+    shown.value = PAGE;
+  },
+);
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") emit("close");
+}
+
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="drawer">
+      <div v-if="row" class="ipd oip-drugs" @click.self="emit('close')">
+        <aside class="ipd_panel">
+          <header class="ipd_head">
+            <p class="ipd_type">
+              <RmFlag :code="row.iso" :height="14" :title="countryLabel || row.country" />
+              {{ countryLabel || row.country }}
+            </p>
+            <button
+              type="button"
+              class="ipd_close"
+              :aria-label="isEn ? 'Close' : 'Fermer'"
+              @click="emit('close')"
+            >
+              <RmIcon name="X" :size="16" />
+            </button>
+          </header>
+
+          <div class="ipd_body">
+            <h2 class="ipd_title">{{ row.product }}</h2>
+            <p class="ipd_sub">
+              <span v-if="row.localId">{{ isEn ? "Code" : "Code local" }} {{ row.localId }}</span>
+              <span v-if="row.manufacturer"> · {{ row.manufacturer }}</span>
+              <span v-if="row.category"> · {{ row.category }}</span>
+            </p>
+
+            <!-- Le prix de reference, celui que porte la carte du pays. -->
+            <div class="ipd_hero">
+              <p class="ipd_hero_price">
+                {{ money(row.priceLocal, currency) }}
+                <span class="ipd_hero_type">{{ row.typeLabel }}</span>
+              </p>
+              <p v-if="inEuro(row.priceEur, currency)" class="ipd_hero_eur">
+                {{ inEuro(row.priceEur, currency) }}
+                <span class="ipd_muted">{{ isEn ? "converted" : "converti" }}</span>
+              </p>
+              <p class="ipd_hero_date">
+                <RmIcon name="Calendar" :size="14" />
+                {{ isEn ? "In force since" : "En vigueur depuis" }} {{ date(row.date) }}
+              </p>
+            </div>
+
+            <div v-if="tabs.length > 1" class="ipd_tabs">
+              <button
+                v-for="(tab, index) in tabs"
+                :key="tab.key"
+                type="button"
+                class="ipd_tab"
+                :class="{ is_active: index === active }"
+                @click="active = index"
+              >
+                {{ tab.label }}
+              </button>
+            </div>
+
+            <!-- Tous les types de prix publies sur cette presentation. -->
+            <div v-if="activeKey === 'prices'" class="ipd_scroll">
+              <table class="ipd_table">
+                <thead>
+                  <tr>
+                    <th>{{ isEn ? "Price type" : "Type de prix" }}</th>
+                    <th>{{ isEn ? "Local price" : "Prix local" }}</th>
+                    <th v-if="currency !== 'EUR'">{{ isEn ? "In euros" : "En euros" }}</th>
+                    <th>{{ isEn ? "In force since" : "En vigueur depuis" }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="type in row.types" :key="type.type">
+                    <td>{{ type.label }}</td>
+                    <td class="ipd_num">{{ money(type.local, currency) }}</td>
+                    <td v-if="currency !== 'EUR'" class="ipd_num">
+                      {{ inEuro(type.eur, currency) || "-" }}
+                    </td>
+                    <td>{{ date(type.date) }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <p class="ipd_note">
+                {{
+                  isEn
+                    ? "Each country publishes its own price types. The card shows the first available in this order: ex-factory, wholesale, public, reimbursement."
+                    : "Chaque pays publie ses propres types de prix. La carte montre le premier disponible dans cet ordre : fabricant, grossiste, public, remboursement."
+                }}
+              </p>
+            </div>
+
+            <!-- L'historique complet, un mouvement par ligne. -->
+            <template v-else-if="activeKey === 'history'">
+              <p class="ipd_filter">
+                {{ visibleHistory.length }}
+                {{
+                  isEn
+                    ? visibleHistory.length > 1
+                      ? "price movements"
+                      : "price movement"
+                    : "mouvement" + (visibleHistory.length > 1 ? "s" : "") + " de prix"
+                }}
+                <span class="ipd_muted">
+                  {{ isEn ? "out of" : "sur" }} {{ row.history.length }}
+                  {{ isEn ? "records" : "relevés" }}
+                </span>
+              </p>
+
+              <div class="ipd_scroll">
+                <table class="ipd_table">
+                  <thead>
+                    <tr>
+                      <th>{{ isEn ? "Applies from" : "Applicable au" }}</th>
+                      <th>{{ isEn ? "Price type" : "Type de prix" }}</th>
+                      <th>{{ isEn ? "Price" : "Prix" }}</th>
+                      <th>{{ isEn ? "Change" : "Évolution" }}</th>
+                      <th v-if="currency !== 'EUR'">{{ isEn ? "In euros" : "En euros" }}</th>
+                      <th>{{ isEn ? "Collected on" : "Relevé le" }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(item, index) in pagedHistory" :key="index">
+                      <td>{{ date(item.entry.date) }}</td>
+                      <td>{{ item.entry.label }}</td>
+                      <td class="ipd_num">{{ money(item.entry.local, currency) }}</td>
+                      <td
+                        class="ipd_num"
+                        :class="
+                          item.variation && item.variation > 0
+                            ? 'is_up'
+                            : item.variation && item.variation < 0
+                            ? 'is_down'
+                            : ''
+                        "
+                      >
+                        <template v-if="item.variation === null">
+                          {{ isEn ? "First price" : "Premier prix" }}
+                        </template>
+                        <template v-else-if="item.variation === 0">-</template>
+                        <template v-else>
+                          {{ item.variation > 0 ? "+" : "" }}{{ money(item.variation, currency) }}
+                          <span v-if="item.variationPct !== null" class="ipd_muted">
+                            ({{ signedPercent(item.variationPct) }})
+                          </span>
+                        </template>
+                      </td>
+                      <td v-if="currency !== 'EUR'" class="ipd_num">
+                        {{ inEuro(item.entry.eur, currency) || "-" }}
+                      </td>
+                      <td>{{ date(item.entry.sourceUpdate) }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <button
+                v-if="visibleHistory.length > shown"
+                type="button"
+                class="ipd_more"
+                @click="shown += PAGE"
+              >
+                {{ isEn ? "Load more" : "Voir plus" }}
+                ({{ visibleHistory.length - shown }})
+              </button>
+            </template>
+
+            <!-- Ce que le pays enregistre du produit. -->
+            <dl v-else class="ipd_grid">
+              <div>
+                <dt>{{ isEn ? "Country" : "Pays" }}</dt>
+                <dd>{{ countryLabel || row.country }}</dd>
+              </div>
+              <div v-if="row.brandLocal">
+                <dt>{{ isEn ? "Brand" : "Marque" }}</dt>
+                <dd>{{ row.brandLocal }}</dd>
+              </div>
+              <div v-if="row.molecule">
+                <dt>{{ isEn ? "Molecule" : "Molécule" }}</dt>
+                <dd>{{ row.molecule }}</dd>
+              </div>
+              <div v-if="row.atc">
+                <dt>ATC</dt>
+                <dd>{{ row.atc }}</dd>
+              </div>
+              <div v-if="row.manufacturer">
+                <dt>{{ isEn ? "Manufacturer" : "Fabricant" }}</dt>
+                <dd>{{ row.manufacturer }}</dd>
+              </div>
+              <div v-if="row.localId">
+                <dt>{{ isEn ? "Local code" : "Code local" }}</dt>
+                <dd>{{ row.localId }}</dd>
+              </div>
+              <div v-if="row.category">
+                <dt>{{ isEn ? "Channel" : "Circuit" }}</dt>
+                <dd>{{ row.category }}</dd>
+              </div>
+              <div>
+                <dt>{{ isEn ? "Currency" : "Devise" }}</dt>
+                <dd>{{ row.currency }}</dd>
+              </div>
+              <div v-if="row.marketedOn">
+                <dt>{{ isEn ? "Marketed since" : "Commercialisé depuis" }}</dt>
+                <dd>{{ date(row.marketedOn) }}</dd>
+              </div>
+              <div v-if="firstSeen">
+                <dt>{{ isEn ? "First price recorded" : "Premier prix relevé" }}</dt>
+                <dd>{{ date(firstSeen) }}</dd>
+              </div>
+              <div v-if="row.lastPriceUpdate">
+                <dt>{{ isEn ? "Latest price change" : "Dernier changement de prix" }}</dt>
+                <dd>{{ date(row.lastPriceUpdate) }}</dd>
+              </div>
+              <div v-if="row.lastSourceUpdate">
+                <dt>{{ isEn ? "Source collected on" : "Source relevée le" }}</dt>
+                <dd>{{ date(row.lastSourceUpdate) }}</dd>
+              </div>
+            </dl>
+          </div>
+
+          <p v-if="row.sourceLabel" class="ipd_foot">
+            <RmIcon name="Info" :size="14" />
+            {{ isEn ? "Source" : "Source" }} : {{ row.sourceLabel }}
+          </p>
+        </aside>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ipd {
+  position: fixed;
+  inset: var(--rm-shell-inset, 8px);
+  border-radius: var(--rm-shell-radius, 12px);
+  overflow: hidden;
+  z-index: 300;
+  display: flex;
+  justify-content: flex-end;
+  background: rgba(30, 41, 59, 0.35);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+.ipd_panel {
+  display: flex;
+  flex-direction: column;
+  width: min(860px, 100%);
+  height: 100%;
+  background: var(--white);
+  box-shadow: var(--overlay-shadow);
+}
+
+.ipd_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--light);
+}
+
+.ipd_type {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--primary);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.ipd_close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--light);
+  border-radius: 8px;
+  background: var(--white);
+  color: var(--dark);
+  cursor: pointer;
+}
+
+.ipd_close:hover {
+  background: var(--lightest);
+}
+
+.ipd_body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+}
+
+.ipd_title {
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.ipd_sub {
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.ipd_hero {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px 20px;
+  padding: 14px 16px;
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--lightest, #f7f7fb);
+}
+
+.ipd_hero_price {
+  font-family: var(--font-serif, inherit);
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.ipd_hero_type {
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--medium);
+}
+
+.ipd_hero_eur {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--darkest);
+}
+
+.ipd_hero_date {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--medium);
+}
+
+.ipd_tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-bottom: 1px solid var(--light);
+}
+
+.ipd_tab {
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--medium);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.ipd_tab.is_active {
+  border-bottom-color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+  color: var(--primary);
+}
+
+.ipd_filter {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--dark);
+}
+
+.ipd_scroll {
+  overflow-x: auto;
+}
+
+.ipd_table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.ipd_table th {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--light);
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.ipd_table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--lightest);
+  color: var(--dark);
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.ipd_num {
+  font-variant-numeric: tabular-nums;
+}
+
+.ipd_table .is_up {
+  color: var(--system-alert-hover);
+  font-weight: 700;
+}
+
+.ipd_table .is_down {
+  color: var(--system-success-hover);
+  font-weight: 700;
+}
+
+.ipd_muted {
+  color: var(--medium);
+  font-weight: 400;
+}
+
+.ipd_note {
+  margin-top: 10px;
+  font-size: 11px;
+  color: var(--medium);
+}
+
+.ipd_more {
+  align-self: flex-start;
+  border: 1px solid var(--light);
+  border-radius: 8px;
+  padding: 6px 12px;
+  background: var(--white);
+  color: var(--primary);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.ipd_more:hover {
+  background: var(--lightest);
+}
+
+.ipd_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+  margin: 0;
+}
+
+.ipd_grid dt {
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.ipd_grid dd {
+  margin: 2px 0 0;
+  color: var(--dark);
+  font-size: 14px;
+}
+
+.ipd_foot {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--light);
+  background: var(--demi-fond);
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active .ipd_panel,
+.drawer-leave-active .ipd_panel {
+  transition: transform 0.2s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from .ipd_panel,
+.drawer-leave-to .ipd_panel {
+  transform: translateX(24px);
+}
+</style>