@tekkare/romulus 0.1.251 → 0.1.252

package/layer/app/components/oip-drugs/heart/ansm/BrandCard.vue

@@ -0,0 +1,187 @@
+<template>
+  <RmSectionCard class="oip-drugs rcard" :class="{ 'rcard--dense': dense }" @click="openDrugsCard(nav, $event, brandDetailPath)" :position="'top'">
+    <template #header>
+      <div class="oip_row v-center justify-between full_flex" style="width: 100%">
+        <div class="oip_list gap-4">
+          <h3 class="card_title">
+            <OipDrugsHeartTextHighlight :text="brand.brand || brand.cis_label" :queries="storeSearchBar" />
+          </h3>
+          <p class="card_context">
+            <OipDrugsHeartTextHighlight :text="cardContext" :queries="storeSearchBar" />
+          </p>
+        </div>
+        <div class="oip_row v-center gap-8" style="margin-left: auto">
+          <!-- La carte porte une marque et ses presentations (CIS) : ce sont
+               ces documents qui partent dans le projet. -->
+          <!-- Emplacement libre pour un appelant (la fiche projet y pose son
+               bouton « Commenter ») avant le bouton projet. -->
+          <slot name="hubr-actions" />
+          <component
+            :is="projectButton"
+            v-if="projectButton"
+            :resource-id="cisIds"
+            type="FrAnsmProduct"
+            :label="brand.brand || brand.cis_label"
+            compact
+          />
+          <RmCardActions
+            :lang="locale === 'fr' ? 'fr' : 'en'"
+            :name="`ANSM - ${brand.brand || brand.cis_label}`"
+            :link="brandDetailHref"
+            :payload="exportPayload"
+            :visual="false"
+          />
+        </div>
+      </div>
+    </template>
+
+    <OipDrugsHeartAnsmCisTable
+      v-if="!dense"
+      class="card_body"
+      :brand-name="brand.brand || brand.cis_label"
+      :cis-hits="cisHits"
+      :store-search-bar="storeSearchBar"
+      :prefs="prefs"
+    />
+      <div v-if="!dense" class="rcard_footer">
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.ANSM"
+        :last-label="t('oipDrugs.heart.sources.lastAuthorization')"
+        :last-date="lastAuthorizationDates"
+      />
+    </div>
+  </RmSectionCard>
+</template>
+
+<script lang="ts" setup>
+import { HEART_SOURCE_UUIDS } from '../../../../oip-drugs/utils/sourceUuids';
+import { drugsBrandPath } from "../../../../oip-drugs/kinds";
+import { openDrugsCard } from "../../../../oip-drugs/utils/s-openCard";
+// ========================
+// IMPORTS
+// ========================
+import type { OneAnsmResult } from "../../../../oip-drugs/types/heart/ansm";
+
+// ========================
+// COMPOSABLES
+// ========================
+const { t, locale } = useI18n();
+const nav = useOipResourceNav();
+const { projectButton } = useOipResourceHooks();
+
+// ========================
+// PROPS
+// ========================
+const props = defineProps<{
+  brand: OneAnsmResult;
+  cisHits: Array<{ _id: string; _source: OneAnsmResult }>;
+  storeSearchBar: string[];
+  /** Rendu serre de la fiche projet : l'en-tete seul, sans le tableau. */
+  dense?: boolean;
+  /** Colonnes facultatives du tableau des CIS (ex-cardPrefs, cle « ansm »). */
+  prefs?: Record<string, boolean>;
+}>();
+
+// ========================
+// COMPUTED
+// ========================
+/** Les documents de la carte : une presentation (CIS) par hit. */
+const cisIds = computed(() => props.cisHits.map((hit) => hit._id).filter(Boolean));
+
+/**
+ * L'AMM la plus recente des presentations de la marque : c'est le dernier
+ * mouvement que l'index ANSM date. Les dates de commercialisation des
+ * presentations comptent aussi, une marque autorisee de longue date pouvant
+ * n'etre commercialisee que depuis peu.
+ */
+const lastAuthorizationDates = computed(() =>
+  props.cisHits.flatMap((hit) => [
+    (hit._source as any)?.authorization_date,
+    ...(((hit._source as any)?.drug ?? []) as any[]).map((d: any) => d?.commercialization_date),
+  ]),
+);
+
+const cardContext = computed(() => {
+  const b = props.brand;
+  return [b.atc5_french_code_label, b.atc4_french_code_label, b.owner]
+    .filter(Boolean)
+    .join(" · ");
+});
+
+// Fiche marque unifiee, ouverte sur l'onglet ANSM.
+const brandDetailPath = computed(() => {
+  const path = drugsBrandPath(props.brand.brand);
+  return path ? `${path}?tab=ansm` : "";
+});
+const brandDetailHref = computed(() =>
+  brandDetailPath.value ? nav.appHref("fr_drugs_app", brandDetailPath.value) : undefined,
+);
+
+/**
+ * Onglet de la carte pour le menu : en fonction, la liste monte la carte
+ * vingt fois et le menu ne l'appelle qu'a l'export.
+ */
+const exportPayload = () => ({
+  title: `ANSM - ${props.brand.brand || props.brand.cis_label}`,
+  subtitle: `🇫🇷 ANSM: ${props.brand.brand || props.brand.cis_label}`,
+  limit: 10000,
+  sheets: exportSheets(),
+});
+
+const exportSheets = () => [
+  {
+    name: "Spécialités",
+    data: props.cisHits.map((h) => h._source),
+    schema: [
+      { column: "Code CIS", type: String, value: (c: any) => c.cis_code, width: 15 },
+      { column: "Dénomination", type: String, value: (c: any) => c.cis_label, width: 60, wrap: true },
+      { column: "Date d'autorisation", type: String, value: (c: any) => c.authorization_date || "-", width: 20 },
+      { column: "État", type: String, value: (c: any) => c.amm_status, width: 25 },
+      { column: "Commercialisation", type: String, value: (c: any) => c.commercialization_status, width: 25 },
+      { column: "Laboratoire", type: String, value: (c: any) => c.owner, width: 30, wrap: true },
+      { column: "ATC5", type: String, value: (c: any) => c.atc5_french_code_label, width: 40, wrap: true },
+    ],
+  },
+];
+</script>
+
+<style scoped>
+/* Rendu serre : RmSectionCard dessine son corps meme vide. */
+.rcard--dense :deep(.rm-section-card__body) {
+  display: none;
+}
+
+.card_title {
+  font-weight: 900;
+  font-size: 20px;
+  color: var(--darkest);
+  font-family: Figtree, sans-serif !important;
+}
+.card_context {
+  font-size: 13px;
+  color: var(--dark);
+}
+/* Plus d'air autour du header de la card. */
+:deep(.card_header) {
+  padding: 20px 24px;
+}
+/* Tableau a fleur des bords de la carte. La regle visait `.card_content`,
+   le corps des cartes Auriga : depuis le passage a `RmSectionCard` ce corps
+   s'appelle `rm-section-card__body` et le tableau se retrouvait a 24px des
+   deux bords, seul bloc de la carte a ne pas toucher le filet.
+
+   Marges negatives plutot que padding a zero sur le corps : le pied de
+   provenance sort deja par ce chemin (cf. `.rm-shell .rcard_footer` dans
+   assets/css/main.css) et garde ainsi son propre calage. Les 24px verticaux
+   restent, c'est l'air entre l'en-tete et la premiere ligne. */
+.card_body {
+  /* `flex: none` : le corps de la carte est une rangee flex, elle retrecissait
+     le tableau elargi pour le faire rentrer et les 24px de droite revenaient. */
+  flex: none;
+  margin-inline: -24px;
+  width: calc(100% + 48px);
+}
+:deep(.flex-table) {
+  gap: 0;
+}
+</style>

package/layer/app/components/oip-drugs/heart/ansm/CisDetail.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="oip-drugs oip_list gap-16 full">
+    <!-- Synthèse : badges + strip de stats -->
+    <div class="oip_card oip_list gap-16 oip_body full">
+      <div class="oip_list gap-4">
+        <h3 class="card_title">{{ cis.cis_label }}</h3>
+        <p class="oip_filter_label">{{ synthContext }}</p>
+      </div>
+      <div class="oip_row gap-8 wrap">
+        <RmTag :variant="heartGetStatusColor(cis.amm_status)">{{ cis.amm_status }}</RmTag>
+        <RmTag :variant="heartGetStatusColor(cis.commercialization_status)">{{ cis.commercialization_status }}</RmTag>
+        <RmTag v-if="cis.procedure_type" variant="default">{{ cis.procedure_type }}</RmTag>
+      </div>
+      <div class="statbar">
+        <div class="stat">
+          <span class="stat-num">{{ cis.cis_code }}</span>
+          <span class="stat-lbl">{{ t('oipDrugs.heart.ansm.card.codeCIS') }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">{{ skuCount ?? '-' }}</span>
+          <span class="stat-lbl">{{ t('oipDrugs.heart.ansm.detailsPage.skuOfBrand') }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">{{ avisCount ?? '-' }}</span>
+          <span class="stat-lbl">{{ t('oipDrugs.heart.ansm.detailsPage.avisHas') }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">{{ cis.drug?.length ?? 0 }}</span>
+          <span class="stat-lbl">{{ t('oipDrugs.heart.ansm.detailsPage.presentations') }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Composition en substances actives -->
+    <div class="oip_card oip_list gap-16 oip_body full">
+      <p class="oip_heading">{{ t('oipDrugs.heart.ansm.detailsPage.composition') }}</p>
+      <RmTable
+        v-if="compoContents.length"
+        class="card-table"
+        :columns="compoTable.columns"
+        :rows="compoTable.rows"
+        max-height="600px"
+      />
+      <div v-else class="oip_list full centered v-center">
+        <RmEmptyState :title="t('oipDrugs.heart.ansm.detailsPage.noData')" icon="Prohibit" />
+      </div>
+    </div>
+
+    <!-- Titulaire & données administratives -->
+    <div class="oip_card oip_list gap-16 oip_body full">
+      <p class="oip_heading">{{ t('oipDrugs.heart.ansm.card.administrativeData') }}</p>
+      <dl class="admin-grid">
+        <div class="col-span">
+          <dt>{{ t('oipDrugs.heart.ansm.card.laboratory') }}</dt>
+          <dd>
+            {{ cis.owner || '-' }}
+            <span v-if="ownerSince" class="admin-since">· {{ t('oipDrugs.heart.ansm.detailsPage.holderSince') }} {{ ownerSince }}</span>
+          </dd>
+        </div>
+        <div>
+          <dt>{{ t('oipDrugs.heart.ansm.brandCard.authorizationDate') }}</dt>
+          <dd>{{ heartFormatDate(cis.authorization_date) }}</dd>
+        </div>
+        <div>
+          <dt>{{ t('oipDrugs.heart.ansm.brandCard.status') }}</dt>
+          <dd><RmTag :variant="heartGetStatusColor(cis.amm_status)">{{ cis.amm_status }}</RmTag></dd>
+        </div>
+        <div>
+          <dt>{{ t('oipDrugs.heart.ansm.card.procedure') }}</dt>
+          <dd>{{ cis.procedure_type || '-' }}</dd>
+        </div>
+        <div>
+          <dt>{{ t('oipDrugs.heart.ansm.detailsPage.forme') }}</dt>
+          <dd>{{ heartFirstLetterUpperCase(cis.pharmaceutical_form) }}</dd>
+        </div>
+        <div>
+          <dt>{{ t('oipDrugs.heart.ansm.detailsPage.administrationMode') }}</dt>
+          <dd>{{ heartFormatAdministrations(cis.administration_mode) }}</dd>
+        </div>
+        <div>
+          <dt>{{ t('oipDrugs.heart.ansm.card.molecule') }}</dt>
+          <dd>{{ cis.atc5_french_code_label || '-' }}</dd>
+        </div>
+        <div class="col-span">
+          <dt>{{ t('oipDrugs.heart.ansm.card.genericGroup') }}</dt>
+          <dd>{{ cis.generic_group_label || t('oipDrugs.heart.ansm.card.noGenericGroup') }}</dd>
+        </div>
+      </dl>
+    </div>
+
+    <!-- Conditions de prescription et de délivrance -->
+    <div class="oip_card oip_list gap-16 oip_body full">
+      <p class="oip_heading">{{ t('oipDrugs.heart.ansm.detailsPage.prescription') }}</p>
+      <div v-if="cpdGroups.length" class="cpd-groups">
+        <div v-for="g in cpdGroups" :key="g.label" class="cpd-group">
+          <p class="cpd-group-title">{{ g.label }}</p>
+          <ul class="cpd-glist">
+            <li v-for="(c, i) in g.items" :key="i">{{ c }}</li>
+          </ul>
+        </div>
+      </div>
+      <div v-else class="oip_list full centered v-center">
+        <RmEmptyState :title="t('oipDrugs.heart.ansm.detailsPage.noData')" icon="Prohibit" />
+      </div>
+    </div>
+
+    <!-- Présentations -->
+    <div class="oip_card oip_list gap-16 oip_body full">
+      <p class="oip_heading">{{ t('oipDrugs.heart.ansm.detailsPage.presentations') }}</p>
+      <RmTable
+        v-if="presContents.length"
+        class="card-table"
+        :columns="presTable.columns"
+        :rows="presTable.rows"
+        max-height="600px"
+      >
+        <template v-for="key in presTable.typeKeys.tag" :key="key" #[key]="{ value }">
+          <RmTag :variant="heartGetStatusColor(value)">{{ value }}</RmTag>
+        </template>
+      </RmTable>
+      <div v-else class="oip_list full centered v-center">
+        <RmEmptyState :title="t('oipDrugs.heart.ansm.detailsPage.noData')" icon="Prohibit" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { OneAnsmResult } from "../../../../oip-drugs/types/heart/ansm";
+import {
+  heartFirstLetterUpperCase,
+  heartFormatAdministrations,
+  heartGetStatusColor,
+} from "../../../../oip-drugs/utils/heartStyleAnsm";
+import { heartFormatDate } from "../../../../oip-drugs/utils/heartStyleAndFormat";
+import { valueTable } from "../../../../utils/valueTable";
+
+const { t, locale } = useI18n();
+
+const props = defineProps<{
+  cis: OneAnsmResult;
+  skuCount?: number;
+  avisCount?: number;
+}>();
+
+const synthContext = computed(() =>
+  [props.cis.atc5_french_code_label, props.cis.atc4_french_code_label, props.cis.owner]
+    .filter(Boolean)
+    .join(" · ")
+);
+
+const ownerSince = computed(() => {
+  const d = (props.cis as any).owner_authorization_date;
+  return d && d !== "-" ? heartFormatDate(d) : null;
+});
+
+const compoContents = computed(() =>
+  (props.cis.compo ?? []).map((c) => ({
+    values: [
+      c.substance_label,
+      heartFirstLetterUpperCase(c.substance_form || c.pharmaceutical_form),
+      c.substance_dosage,
+    ],
+  }))
+);
+
+const presContents = computed(() =>
+  (props.cis.drug ?? []).map((d) => ({
+    values: [
+      d.drug_code,
+      heartFirstLetterUpperCase(d.presentation_label),
+      d.presentation_status,
+      d.commercialization_date && d.commercialization_date !== "-"
+        ? heartFormatDate(d.commercialization_date)
+        : "-",
+    ],
+  }))
+);
+
+// Conditions de prescription regroupées par catégorie (comme le modèle Synappses).
+function cpdCategory(c: string): string {
+  const s = (c || "").toLowerCase();
+  if (s.includes("surveillance")) return "surveillance";
+  if (s.includes("hospital") || s.includes("usage")) return "delivrance";
+  if (s.includes("prescription") || s.includes("spécial") || s.includes("special") || s.includes("services") || s.includes("médecin") || s.includes("medecin")) return "prescripteur";
+  if (s.includes("liste")) return "classification";
+  return "autre";
+}
+const CPD_CATS = [
+  { key: "classification", fr: "Classification", en: "Classification" },
+  { key: "surveillance", fr: "Surveillance", en: "Monitoring" },
+  { key: "prescripteur", fr: "Prescripteur habilité", en: "Authorized prescriber" },
+  { key: "delivrance", fr: "Cadre de délivrance", en: "Dispensing setting" },
+  { key: "autre", fr: "Autre", en: "Other" },
+];
+const cpdGroups = computed(() => {
+  const map: Record<string, string[]> = {};
+  (props.cis.cpd ?? []).forEach((c: any) => {
+    const cat = cpdCategory(c.prescription_delivery_condition);
+    (map[cat] ||= []).push(c.prescription_delivery_condition);
+  });
+  return CPD_CATS.filter((c) => map[c.key]).map((c) => ({
+    label: locale.value === "en" ? c.en : c.fr,
+    items: map[c.key],
+  }));
+});
+
+// Les deux tableaux de la fiche etaient ecrits pour `arg-table` : des libelles
+// de tete et des lignes `{ values: [...] }`. La conversion en colonnes de
+// RmTable est mecanique, cf. `valueTable`. Ils ne se trient pas : la fiche
+// garde l'ordre de la source.
+const unsorted = (table: ReturnType<typeof valueTable>) => ({
+  ...table,
+  columns: table.columns.map((column) => ({ ...column, sortable: false })),
+});
+
+const compoTable = computed(() =>
+  unsorted(
+    valueTable(
+      [
+        t("oipDrugs.heart.ansm.detailsPage.substanceActive"),
+        t("oipDrugs.heart.ansm.detailsPage.forme"),
+        t("oipDrugs.heart.ansm.detailsPage.dosage"),
+      ],
+      compoContents.value,
+      ["", "", ""],
+      { align: ["left", "left", "left"] },
+    ),
+  ),
+);
+
+const presTable = computed(() =>
+  unsorted(
+    valueTable(
+      [
+        locale.value === "en" ? "CIP code" : "Code CIP",
+        t("oipDrugs.heart.ansm.detailsPage.conditioning"),
+        t("oipDrugs.heart.ansm.detailsPage.declaration"),
+        t("oipDrugs.heart.ansm.detailsPage.date"),
+      ],
+      presContents.value,
+      ["", "", "tag", ""],
+      { align: ["left", "left", "left", "left"] },
+    ),
+  ),
+);
+</script>
+
+<style scoped>
+.card_title {
+  font-weight: 900;
+  font-size: 20px;
+  color: var(--darkest);
+  font-family: Figtree, sans-serif !important;
+}
+.wrap {
+  flex-wrap: wrap;
+}
+
+/* Tableau à fleur des bords de la card (annule le padding 24px de .oip_card).
+   Le padding de cellule interne d'arg-table garde le texte aligné sous le titre. */
+.card-table {
+  margin: 0 -24px -24px;
+}
+
+/* Strip de stats (synthèse). */
+.statbar {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-top: 1px solid var(--light);
+}
+.stat {
+  padding: 16px 24px 0;
+  border-right: 1px solid var(--light);
+}
+.stat:last-child {
+  border-right: none;
+}
+.stat-num {
+  display: block;
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--primary);
+  line-height: 1.2;
+}
+.stat-lbl {
+  display: block;
+  margin-top: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--medium);
+}
+
+/* Grille données administratives (style dl). */
+.admin-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px 32px;
+  margin: 0;
+}
+.admin-grid > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.admin-grid .col-span {
+  grid-column: 1 / -1;
+}
+.admin-grid dt {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--medium);
+}
+.admin-grid dd {
+  margin: 0;
+  font-size: 14px;
+  color: var(--darkest);
+  font-weight: 500;
+}
+.admin-since {
+  color: var(--medium);
+  font-weight: 400;
+}
+
+/* Conditions de prescription groupées. */
+.cpd-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.cpd-group-title {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--primary);
+}
+.cpd-glist {
+  margin: 0;
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.cpd-glist li {
+  font-size: 14px;
+  color: var(--dark);
+}
+
+@media (max-width: 860px) {
+  .statbar {
+    grid-template-columns: 1fr 1fr;
+  }
+  .admin-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>