@tekkare/romulus 0.1.250 → 0.1.252

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

@@ -0,0 +1,775 @@
+<!--
+  Fiche d'une association de patients, portee de la page
+  `hubr/heart/associations/[id]` de fr_drugs_app : identite dans le bandeau,
+  puis quatre onglets (contributions HAS, debats HAS, comites ANSM,
+  Assemblee nationale).
+
+  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.associations.title')"
+      :tabs="headerTabs"
+      :tabs-label="t('oipDrugs.heart.associations.detail.tabsLabel')"
+      @tab="selectTab"
+    >
+      <template #title>
+        <span class="oip-drugs-fiche__title">{{ label }}</span>
+        <slot name="title-link" />
+      </template>
+      <!-- La ligne de l'annuaire passe au slot : le bouton Projet de la page de
+           fr_drugs_app ne s'affiche qu'une fois l'association reconnue. -->
+      <template v-if="$slots.actions" #actions>
+        <slot name="actions" :directory="directory" :label="label" />
+      </template>
+      <!-- L'identite tient sous le nom, dans le bandeau. -->
+      <div v-if="description || otherNames || tags.length" class="assoc_identity oip_list gap-2">
+        <p v-if="description">{{ description }}</p>
+        <p v-if="otherNames" class="assoc_muted">
+          {{ t("oipDrugs.heart.associations.card.alsoKnownAs") }} {{ otherNames }}
+        </p>
+        <div v-if="tags.length > 0" class="oip_row gap-8 wrap">
+          <RmTag v-for="tag in tags" :key="tag.label" :variant="tag.variant">{{ tag.label }}</RmTag>
+        </div>
+      </div>
+    </RmPageHeader>
+
+    <div class="oip_list gap-12 full assoc_detail">
+      <OipDrugsHeartElasticSourceContainerElastic
+        :uuid="HEART_SOURCE_UUIDS.ASSOCIATIONS"
+        :last-label="lastActivity.label"
+        :last-date="lastActivity.dates"
+      />
+
+      <RmLoadingState v-if="loading" />
+
+      <RmEmptyState
+        v-else-if="!directory"
+        :title="t('oipDrugs.heart.associations.detail.notFound')"
+        icon="Prohibit"
+      />
+
+      <template v-else>
+        <!-- Contributions ecrites aux evaluations HAS. -->
+        <div v-if="activeTab === 1" class="oip_list gap-12 full">
+          <RmEmptyState
+            v-if="contributions.length === 0"
+            :title="t('oipDrugs.heart.associations.detail.noContributions')"
+            icon="Prohibit"
+          />
+          <div
+            v-for="contribution in contributions"
+            :key="contribution.contribution_url || contribution.has_code"
+            class="oip_card oip_list gap-12 oip_body full"
+          >
+            <div class="oip_row v-center gap-8 wrap">
+              <p class="oip_heading">
+                {{ brands[contribution.has_code] || contribution.has_code || t("oipDrugs.heart.associations.detail.tabs.contributions") }}
+              </p>
+              <span class="oip_label">
+                <RmDate :date="contribution.contribution_date" :lang="dateLang" />
+              </span>
+              <RmTag v-if="contribution.has_code" variant="gray">{{ contribution.has_code }}</RmTag>
+              <RmTag v-if="contribution.request_nature" variant="violet">
+                {{ contribution.request_nature }}
+              </RmTag>
+            </div>
+
+            <p v-if="contribution.synthesis" class="assoc_field_text oip_body assoc_clamp">
+              {{ contribution.synthesis }}
+            </p>
+
+            <div class="oip_row gap-8 wrap">
+              <RmButton
+                v-if="contributionSections(contribution).length > 0"
+                variant="secondary"
+                prefix-icon="ListBullets"
+                @click="openContribution(contribution)"
+              >
+                {{ t("oipDrugs.heart.associations.detail.contributionDetail") }}
+              </RmButton>
+              <!-- Vers l'avis que la contribution accompagne : la fiche marque,
+                   ouverte sur ce code, quand la marque est resolue. -->
+              <RmButton
+                v-if="opinionPath(contribution)"
+                variant="secondary"
+                prefix-icon="Tag"
+                @click="goToOpinion(opinionPath(contribution))"
+              >
+                {{
+                  t("oipDrugs.heart.associations.detail.seeLinkedOpinion", {
+                    brand: brands[contribution.has_code],
+                  })
+                }}
+              </RmButton>
+              <RmButton
+                v-if="contribution.contribution_url"
+                variant="tertiary"
+                ghost
+                prefix-icon="ArrowSquareOut"
+                @click="openLink(contribution.contribution_url)"
+              >
+                {{ t("oipDrugs.heart.associations.detail.seeOnHas") }}
+              </RmButton>
+            </div>
+          </div>
+        </div>
+
+        <!-- Debats de la commission de la transparence. -->
+        <div v-else-if="activeTab === 2" class="oip_list gap-12 full">
+          <RmEmptyState
+            v-if="transcriptions.length === 0"
+            :title="t('oipDrugs.heart.associations.detail.noTranscriptions')"
+            icon="Prohibit"
+          />
+          <OipDrugsHeartAssociationsTranscriptionCard
+            v-for="transcription in transcriptions"
+            :key="transcription.transcription_url"
+            :transcription="transcription"
+            @open="openThread"
+            @pdf="openPdf($event.tekkare_url, $event.brand || t('oipDrugs.heart.associations.detail.debate'))"
+          />
+        </div>
+
+        <!-- Comptes rendus de commission de l'Assemblee nationale qui la citent. -->
+        <div v-else-if="activeTab === 4" class="oip_list gap-12 full">
+          <RmEmptyState
+            v-if="nationalAssembly.length === 0"
+            :title="t('oipDrugs.heart.associations.detail.noNationalAssembly')"
+            icon="Prohibit"
+          />
+          <OipDrugsHeartAssociationsNationalAssemblyCard
+            v-for="report in nationalAssembly"
+            :key="report.document_id"
+            :report="report"
+            :store-search-bar="highlight"
+            :current-association="label"
+            @read="openReport"
+          />
+        </div>
+
+        <!-- Seances du comite d'interface ANSM. -->
+        <div v-else class="oip_list gap-12 full">
+          <RmEmptyState
+            v-if="sessions.length === 0"
+            :title="t('oipDrugs.heart.associations.detail.noSessions')"
+            icon="Prohibit"
+          />
+          <div
+            v-for="session in sessions"
+            :key="session.session_url"
+            class="oip_card oip_list gap-12 oip_body full"
+          >
+            <div class="oip_row v-center gap-8 wrap">
+              <p class="oip_heading">{{ session.title || t("oipDrugs.heart.associations.detail.committee") }}</p>
+              <span class="oip_label">
+                <RmDate :date="session.session_date" :lang="dateLang" />
+              </span>
+            </div>
+
+            <!-- Les autres associations de la seance : chacune ouvre sa fiche. -->
+            <div v-if="otherAttendees(session).length > 0" class="oip_list gap-4">
+              <p class="oip_label">{{ t("oipDrugs.heart.associations.detail.otherAttendees") }}</p>
+              <div class="oip_row gap-8 wrap">
+                <a
+                  v-for="name in otherAttendees(session)"
+                  :key="name"
+                  :href="nav.appHref('fr_drugs_app', drugsAssociationPath(name))"
+                  class="assoc_attendee"
+                  @click="openAssociation($event, name)"
+                >
+                  {{ name }}
+                </a>
+              </div>
+            </div>
+
+            <div class="oip_row gap-8 wrap">
+              <RmButton
+                v-if="session.minutes_text"
+                variant="secondary"
+                prefix-icon="FileText"
+                @click="openMinutes(session)"
+              >
+                {{ t("oipDrugs.heart.associations.detail.minutesText") }}
+              </RmButton>
+              <RmButton
+                v-if="session.session_url"
+                variant="tertiary"
+                ghost
+                prefix-icon="ArrowSquareOut"
+                @click="openLink(session.session_url)"
+              >
+                {{ t("oipDrugs.heart.associations.detail.seeOnAnsm") }}
+              </RmButton>
+              <RmButton
+                v-if="session.agenda_tekkare_url || session.agenda_url"
+                variant="tertiary"
+                ghost
+                prefix-icon="FilePdf"
+                @click="
+                  openPdf(
+                    session.agenda_tekkare_url || session.agenda_url,
+                    t('oipDrugs.heart.associations.detail.agenda'),
+                  )
+                "
+              >
+                {{ t("oipDrugs.heart.associations.detail.agenda") }}
+              </RmButton>
+              <RmButton
+                v-if="session.minutes_tekkare_url || session.minutes_url"
+                variant="tertiary"
+                ghost
+                prefix-icon="FilePdf"
+                @click="
+                  openPdf(
+                    session.minutes_tekkare_url || session.minutes_url,
+                    t('oipDrugs.heart.associations.detail.minutes'),
+                  )
+                "
+              >
+                {{ t("oipDrugs.heart.associations.detail.minutes") }}
+              </RmButton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Le detail d'une contribution, pose une fois pour la liste entiere.
+         Teleporte dans <body> : chaque zone reprend la classe `oip-drugs`. -->
+    <RmDrawer
+      v-model="contributionOpen"
+      size="min(760px, 94vw)"
+      :label="t('oipDrugs.heart.associations.detail.contributionDetail')"
+      :close-label="dateLang === 'en' ? 'Close' : 'Fermer'"
+    >
+      <template #header>
+        <div class="oip-drugs oip_list gap-4">
+          <p class="oip_heading">{{ t("oipDrugs.heart.associations.detail.contributionDetail") }}</p>
+          <div class="oip_row v-center gap-8 wrap">
+            <span class="oip_label">
+              <RmDate :date="selectedContribution?.contribution_date" :lang="dateLang" />
+            </span>
+            <RmTag v-if="selectedContribution?.has_code" variant="gray">
+              {{ selectedContribution.has_code }}
+            </RmTag>
+            <RmTag v-if="selectedContribution?.request_nature" variant="violet">
+              {{ selectedContribution.request_nature }}
+            </RmTag>
+          </div>
+        </div>
+      </template>
+
+      <!-- Sections repliables : la premiere est ouverte, les autres se
+           replient independamment. -->
+      <div v-if="openSections.length > 0" class="oip-drugs oip_list full">
+        <RmCollapse
+          v-for="section in openSections"
+          :key="section.key"
+          v-model="sectionOpen[section.key]"
+          :title="section.label"
+        >
+          <p class="assoc_field_text oip_body">{{ section.value }}</p>
+        </RmCollapse>
+      </div>
+
+      <template #footer>
+        <div class="oip-drugs oip_row gap-8 wrap">
+          <RmButton
+            v-if="linkedOpinionUrl"
+            variant="primary"
+            prefix-icon="Tag"
+            @click="goToOpinion(linkedOpinionUrl)"
+          >
+            {{ t("oipDrugs.heart.associations.detail.seeLinkedOpinion", { brand: linkedBrand }) }}
+          </RmButton>
+          <RmButton
+            v-if="selectedContribution?.contribution_url"
+            variant="secondary"
+            prefix-icon="ArrowSquareOut"
+            @click="openLink(selectedContribution.contribution_url)"
+          >
+            {{ t("oipDrugs.heart.associations.detail.seeOnHas") }}
+          </RmButton>
+        </div>
+      </template>
+    </RmDrawer>
+
+    <!-- Le fil d'un debat, tour de parole par tour de parole. -->
+    <RmDrawer
+      v-model="threadOpen"
+      size="min(760px, 94vw)"
+      :label="t('oipDrugs.heart.associations.detail.debateThread')"
+      :close-label="dateLang === 'en' ? 'Close' : 'Fermer'"
+    >
+      <template #header>
+        <div class="oip-drugs oip_list gap-4">
+          <p class="oip_heading">
+            {{ selectedTranscription?.brand || t("oipDrugs.heart.associations.detail.debate") }}
+          </p>
+          <div class="oip_row v-center gap-8 wrap">
+            <span class="oip_label">
+              <RmDate :date="selectedTranscription?.session_date" :lang="dateLang" />
+            </span>
+            <RmTag v-if="selectedTranscription?.has_code" variant="gray">
+              {{ selectedTranscription.has_code }}
+            </RmTag>
+          </div>
+        </div>
+      </template>
+
+      <div class="oip-drugs">
+        <RmLoadingState v-if="threadLoading" />
+        <RmEmptyState
+          v-else-if="threadBlocks.length === 0"
+          :title="t('oipDrugs.heart.associations.detail.noThread')"
+          icon="Prohibit"
+        />
+        <div v-else class="oip_list gap-16">
+          <div v-for="block in threadBlocks" :key="block.block_index" class="oip_list gap-2">
+            <p v-if="block.speaker" class="oip_label">{{ block.speaker }}</p>
+            <p class="assoc_field_text oip_body">{{ block.block_text }}</p>
+          </div>
+        </div>
+      </div>
+
+      <template v-if="selectedTranscription?.transcription_url" #footer>
+        <div class="oip-drugs oip_row gap-8 wrap">
+          <RmButton
+            variant="secondary"
+            prefix-icon="ArrowSquareOut"
+            @click="openLink(selectedTranscription.transcription_url)"
+          >
+            {{ t("oipDrugs.heart.associations.detail.seeOnHas") }}
+          </RmButton>
+          <RmButton
+            v-if="selectedTranscription?.tekkare_url"
+            variant="tertiary"
+            ghost
+            prefix-icon="FilePdf"
+            @click="
+              openPdf(
+                selectedTranscription.tekkare_url,
+                selectedTranscription.brand || t('oipDrugs.heart.associations.detail.debate'),
+              )
+            "
+          >
+            {{ t("oipDrugs.heart.associations.detail.seePdf") }}
+          </RmButton>
+        </div>
+      </template>
+    </RmDrawer>
+
+    <!-- Le compte rendu d'une seance du comite d'interface ANSM. -->
+    <RmDrawer
+      v-model="minutesOpen"
+      size="min(760px, 94vw)"
+      :label="t('oipDrugs.heart.associations.detail.minutesText')"
+      :close-label="dateLang === 'en' ? 'Close' : 'Fermer'"
+    >
+      <template #header>
+        <div class="oip-drugs oip_list gap-4">
+          <p class="oip_heading">
+            {{ selectedSession?.title || t("oipDrugs.heart.associations.detail.committee") }}
+          </p>
+          <span class="oip_label">
+            <RmDate :date="selectedSession?.session_date" :lang="dateLang" />
+          </span>
+        </div>
+      </template>
+
+      <div class="oip-drugs">
+        <p class="assoc_field_text oip_body">{{ selectedSession?.minutes_text }}</p>
+      </div>
+
+      <template #footer>
+        <div class="oip-drugs oip_row gap-8 wrap">
+          <RmButton
+            v-if="selectedSession?.minutes_tekkare_url || selectedSession?.minutes_url"
+            variant="secondary"
+            prefix-icon="FilePdf"
+            @click="
+              openPdf(
+                selectedSession.minutes_tekkare_url || selectedSession.minutes_url,
+                t('oipDrugs.heart.associations.detail.minutes'),
+              )
+            "
+          >
+            {{ t("oipDrugs.heart.associations.detail.minutes") }}
+          </RmButton>
+          <RmButton
+            v-if="selectedSession?.session_url"
+            variant="tertiary"
+            ghost
+            prefix-icon="ArrowSquareOut"
+            @click="openLink(selectedSession.session_url)"
+          >
+            {{ t("oipDrugs.heart.associations.detail.seeOnAnsm") }}
+          </RmButton>
+        </div>
+      </template>
+    </RmDrawer>
+
+    <!-- Les PDF et la copie HTML d'un compte rendu de commission s'ouvrent
+         dans la visionneuse des documents du rail. -->
+    <OipDocumentPreview
+      v-model="pdfOpen"
+      :src="pdfSrc"
+      :title="pdfTitle"
+      :external-src="pdfExternal"
+      :download-src="pdfExternal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HEART_SOURCE_UUIDS } from "../../../oip-drugs/utils/sourceUuids";
+import {
+  ASSOCIATION_FIELDS,
+  ASSOCIATION_FLAG_ON,
+  NATIONAL_ASSEMBLY_FIELDS,
+  associationDomains,
+} from "../../../oip-drugs/utils/associationFields";
+import { useAssociationDetail } from "../../../oip-drugs/composables/useAssociationDetail";
+import { drugsAssociationPath, drugsBrandPath } from "../../../oip-drugs/kinds";
+
+const props = withDefaults(
+  defineProps<{
+    /** Nom regroupe de l'association, `_id` de l'annuaire (l'id de la route de fr_drugs_app). */
+    label: string;
+    /** Onglet ouvert : "1" contributions, "2" debats, "3" comites ANSM, "4" Assemblee nationale. */
+    tab?: string;
+    lang?: "fr" | "en";
+    /** Termes de recherche, surlignes dans les titres des comptes rendus. */
+    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, locale } = useI18n();
+const nav = useOipResourceNav();
+
+const label = computed(() => props.label);
+const dateLang = computed(() => props.lang ?? (locale.value === "en" ? "en" : "fr"));
+
+const {
+  directory,
+  contributions,
+  transcriptions,
+  sessions,
+  nationalAssembly,
+  sessionAttendees,
+  loading,
+  load,
+  loadBlocks,
+  brands,
+} = useAssociationDetail(label);
+
+const activeTab = ref(Number(props.tab) || 1);
+watch(
+  () => props.tab,
+  (value) => {
+    activeTab.value = Number(value) || 1;
+  },
+);
+
+function selectTab(key: string) {
+  activeTab.value = Number(key) || 1;
+  emit("update:tab", key);
+}
+
+/** Les onglets portent leur volumetrie en pastille. */
+const headerTabs = computed(() =>
+  [
+    {
+      key: "1",
+      label: t("oipDrugs.heart.associations.detail.tabs.contributions"),
+      count: contributions.value.length,
+    },
+    {
+      key: "2",
+      label: t("oipDrugs.heart.associations.detail.tabs.transcriptions"),
+      count: transcriptions.value.length,
+    },
+    {
+      key: "3",
+      label: t("oipDrugs.heart.associations.detail.tabs.sessions"),
+      count: sessions.value.length,
+    },
+    {
+      key: "4",
+      label: t("oipDrugs.heart.associations.detail.tabs.nationalAssembly"),
+      count: nationalAssembly.value.length,
+    },
+  ].map((tab) => ({ ...tab, active: String(activeTab.value) === tab.key })),
+);
+
+/** La contribution ouverte dans le tiroir. */
+const selectedContribution = ref<any>(null);
+const contributionOpen = ref(false);
+
+/** Sections depliees dans le tiroir, par cle de champ. */
+const sectionOpen = ref<Record<string, boolean>>({});
+
+/**
+ * Le chemin de l'avis auquel se rattache une contribution : la fiche marque
+ * de fr_drugs_app, ouverte sur son onglet des contributions et sur ce code.
+ */
+function opinionPath(contribution: any) {
+  const brand = brands.value[contribution?.has_code];
+  if (!brand) return null;
+  return `${drugsBrandPath(brand)}?tab=contributions&code=${encodeURIComponent(contribution.has_code)}`;
+}
+
+const linkedBrand = computed(() => brands.value[selectedContribution.value?.has_code] ?? null);
+
+const linkedOpinionUrl = computed(() => opinionPath(selectedContribution.value));
+
+function openContribution(contribution: any) {
+  selectedContribution.value = contribution;
+  sectionOpen.value = Object.fromEntries(
+    contributionSections(contribution).map((section, index) => [section.key, index === 0]),
+  );
+  contributionOpen.value = true;
+}
+
+const openSections = computed(() =>
+  selectedContribution.value ? contributionSections(selectedContribution.value) : [],
+);
+
+const description = computed(() => directory.value?.[ASSOCIATION_FIELDS.description] || "");
+
+const otherNames = computed(() => {
+  const raw = directory.value?.[ASSOCIATION_FIELDS.labelVariants];
+  if (typeof raw !== "string") return "";
+  const seen = new Set<string>([label.value.toLowerCase()]);
+  const variants: string[] = [];
+  raw.split(";").forEach((value) => {
+    const name = value.trim();
+    if (!name || seen.has(name.toLowerCase())) return;
+    seen.add(name.toLowerCase());
+    variants.push(name);
+  });
+  return variants.join(", ");
+});
+
+const tags = computed(() => {
+  const out: { label: string; variant: "blue" | "violet" | "teal" | "amber" | "gray" }[] = [];
+  if (isOn(ASSOCIATION_FIELDS.fasMember)) {
+    out.push({ label: t("oipDrugs.heart.associations.tags.fasMember"), variant: "blue" });
+  }
+  if (isOn(ASSOCIATION_FIELDS.fasBoard)) {
+    out.push({ label: t("oipDrugs.heart.associations.tags.fasBoard"), variant: "violet" });
+  }
+  if (isOn(ASSOCIATION_FIELDS.fasExecutive)) {
+    out.push({ label: t("oipDrugs.heart.associations.tags.fasExecutive"), variant: "teal" });
+  }
+  if (isOn(ASSOCIATION_FIELDS.ansmCommittee)) {
+    out.push({ label: t("oipDrugs.heart.associations.card.ansmCommittee"), variant: "amber" });
+  }
+  // Les domaines d'intervention France Assos Sante, en gris apres les statuts.
+  associationDomains(directory.value).forEach((domain: string) => out.push({ label: domain, variant: "gray" }));
+  return out;
+});
+
+function isOn(field: string) {
+  return directory.value?.[field] === ASSOCIATION_FLAG_ON;
+}
+
+/** Les champs renseignes d'une contribution, dans l'ordre du questionnaire HAS. */
+function contributionSections(contribution: any) {
+  const field = (key: string, value: unknown) => ({
+    key,
+    label: t(`oipDrugs.heart.associations.detail.fields.${key}`),
+    value,
+  });
+  return [
+    field("synthesis", contribution.synthesis),
+    field("drugIndication", contribution.drug_indication),
+    field("method", contribution.method),
+    field("experienceDrug", contribution.experience_drug),
+    field("experienceCurrentTreatment", contribution.experience_current_treatment),
+    field("impact", contribution.impact),
+    field("additionalInfo", contribution.additional_info),
+  ].filter((entry) => typeof entry.value === "string" && entry.value.trim());
+}
+
+/** Le fil d'un debat : les blocs ne partent qu'a l'ouverture du tiroir. */
+const selectedTranscription = ref<any>(null);
+const threadOpen = ref(false);
+const threadBlocks = ref<any[]>([]);
+const threadLoading = ref(false);
+
+async function openThread(transcription: any) {
+  selectedTranscription.value = transcription;
+  threadBlocks.value = [];
+  threadOpen.value = true;
+  threadLoading.value = true;
+  threadBlocks.value = await loadBlocks(
+    transcription.has_code,
+    transcription.transcription_url,
+  );
+  threadLoading.value = false;
+}
+
+/** Le dernier mouvement de l'onglet ouvert, pour la ligne source. */
+const lastActivity = computed(() => {
+  if (activeTab.value === 1) {
+    return {
+      label: t("oipDrugs.heart.sources.lastContribution"),
+      dates: contributions.value.map((row: any) => row?.contribution_date),
+    };
+  }
+  if (activeTab.value === 2) {
+    return {
+      label: t("oipDrugs.heart.sources.lastDebate"),
+      dates: transcriptions.value.map((row: any) => row?.session_date),
+    };
+  }
+  if (activeTab.value === 4) {
+    return {
+      label: t("oipDrugs.heart.sources.lastSession"),
+      dates: nationalAssembly.value.map((row: any) => row?.[NATIONAL_ASSEMBLY_FIELDS.sessionDate]),
+    };
+  }
+  return {
+    label: t("oipDrugs.heart.sources.lastSession"),
+    dates: sessions.value.map((row: any) => row?.session_date),
+  };
+});
+
+/** Les autres associations presentes a une seance, par nom regroupe. */
+function otherAttendees(session: any) {
+  return sessionAttendees.value[session?.session_url] ?? [];
+}
+
+/** Le Ctrl/Cmd-clic garde le lien : il ouvre un onglet. */
+function openAssociation(event: MouseEvent, name: string) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+  event.preventDefault();
+  nav.openApp("fr_drugs_app", drugsAssociationPath(name));
+}
+
+/** Le compte rendu d'une seance de comite : un seul bloc de texte, deja charge. */
+const selectedSession = ref<any>(null);
+const minutesOpen = ref(false);
+
+function openMinutes(session: any) {
+  selectedSession.value = session;
+  minutesOpen.value = true;
+}
+
+/**
+ * Apercu d'un PDF, par le proxy du layer qui le sert en `application/pdf`.
+ * Les sorties de l'entete pointent le document chez son producteur.
+ */
+const pdfOpen = ref(false);
+const pdfSrc = ref<string | null>(null);
+const pdfTitle = ref("");
+const pdfExternal = ref<string | null>(null);
+
+function openPdf(url: string, title: string) {
+  if (!url) return;
+  pdfExternal.value = url;
+  pdfSrc.value = `/api/oip/pdf?url=${encodeURIComponent(url)}`;
+  pdfTitle.value = title;
+  pdfOpen.value = true;
+}
+
+/** Un compte rendu de commission : la copie HTML de Tekkare s'affiche telle quelle. */
+function openReport(report: any) {
+  const src = report?.[NATIONAL_ASSEMBLY_FIELDS.tekkareUrl];
+  if (!src) return;
+  pdfExternal.value = report[NATIONAL_ASSEMBLY_FIELDS.htmlUrl] || null;
+  pdfSrc.value = src;
+  pdfTitle.value =
+    report[NATIONAL_ASSEMBLY_FIELDS.agenda] ||
+    t("oipDrugs.heart.associations.nationalAssembly.card.untitled");
+  pdfOpen.value = true;
+}
+
+function openLink(url: string) {
+  if (url) window.open(url, "_blank");
+}
+
+/** La fiche marque, sur son onglet Contributions ; le tiroir se ferme au passage. */
+function goToOpinion(path: string | null) {
+  if (!path) return;
+  contributionOpen.value = false;
+  nav.openApp("fr_drugs_app", path);
+}
+
+watch(label, () => load(), { immediate: true });
+
+// La page de fr_drugs_app declare l'export du cadre depuis son script : elle
+// relit ici les listes deja chargees plutot que de les redemander.
+defineExpose({
+  directory,
+  contributions,
+  transcriptions,
+  sessions,
+  nationalAssembly,
+  sessionAttendees,
+  brands,
+  activeTab,
+});
+</script>
+
+<style scoped>
+.oip-drugs-fiche__title {
+  display: block;
+}
+
+.assoc_detail {
+  padding-left: 24px;
+}
+
+/* Le slot par defaut du bandeau ne porte aucune typo : l'identite prend
+   celle du corps de page. */
+.assoc_identity {
+  gap: 2px;
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 160%;
+  max-width: 900px;
+}
+
+.assoc_muted {
+  color: var(--dark, #6c6c8a);
+  font-size: 13px;
+}
+
+/* Les participants d'une seance : des liens discrets, poses en ligne. */
+.assoc_attendee {
+  color: var(--text-primary);
+  font-size: 13px;
+  text-decoration: none;
+  border-bottom: 1px solid var(--border-default);
+}
+
+.assoc_attendee:hover {
+  color: var(--primary);
+  border-bottom-color: currentColor;
+}
+
+/* Le resume d'une contribution, borne dans la liste. */
+.assoc_clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Les textes arrivent en un seul bloc, avec leurs retours a la ligne. */
+.assoc_field_text {
+  white-space: pre-line;
+}
+</style>