@tekkare/romulus 0.1.251 → 0.1.252

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

@@ -0,0 +1,494 @@
+<!--
+  Tiroir d'un enregistrement de liste (alerte, P.U.T, contribution).
+
+  Meme comportement que le tiroir des avis HAS : il arrive par la droite, se
+  ferme au clic ailleurs ou sur Echap, et decoupe le detail en rubriques — seules
+  celles qui portent un texte apparaissent. La page fournit ces rubriques deja
+  redigees, le tiroir ne connait rien du metier.
+-->
+<script setup lang="ts">
+import { OIP_RESOURCE_NAV, useOipResourceNav } from "../../../../../composables/useOipResourceNav";
+
+const props = defineProps<{
+  record:
+    | {
+        typeLabel: string;
+        icon?: string;
+        date?: string | null;
+        /** Qualificatif fort, en tag a la suite du statut. */
+        badge?: string | null;
+        badgeTone?: "pre" | "post" | "good" | "warn" | "neutral";
+        title: string;
+        status?: string | null;
+        statusTone?: "good" | "bad" | "neutral";
+        url?: string | null;
+        /** « accordion » quand les rubriques sont trop nombreuses pour des
+            onglets (contributions patients) ; onglets par defaut. */
+        layout?: "tabs" | "accordion";
+        /**
+         * Renvoi vers une autre fiche du hub, quand la page en connait un pour
+         * cet enregistrement (la fiche de l'association qui signe une
+         * contribution). Le tiroir n'en sait rien d'autre que son libelle et
+         * son chemin, celui de fr_drugs_app (cf. useOipResourceNav).
+         */
+        link?: { label: string; to: string; icon?: string } | null;
+        sections?: { key: string; label: string; body: string }[];
+      }
+    | null;
+  /** Nom de la source affichee en pied. */
+  sourceLabel?: string | null;
+  checkedAt?: string | null;
+  /** Panneau elargi, pour un corps qui porte une table (tiroir LES). */
+  wide?: boolean;
+}>();
+
+const emit = defineEmits<{ (event: "close"): void }>();
+
+const { locale } = useI18n();
+
+const sections = computed(() => (props.record?.sections ?? []).filter((s) => s.body?.trim()));
+
+const accordion = computed(() => props.record?.layout === "accordion");
+
+/** Onglets : la rubrique affichee. */
+const active = ref(0);
+
+/** Accordeon : les rubriques depliees, par cle. */
+const opened = ref<Record<string, boolean>>({});
+
+function toggle(key: string) {
+  opened.value = { ...opened.value, [key]: !opened.value[key] };
+}
+
+// Un autre enregistrement s'ouvre : on repart de sa premiere rubrique, sinon le
+// tiroir s'ouvre sur une rubrique qui n'existe pas pour lui.
+watch(
+  () => props.record,
+  () => {
+    active.value = 0;
+    const first = sections.value[0]?.key;
+    opened.value = first ? { [first]: true } : {};
+  },
+  { immediate: true }
+);
+
+/**
+ * Le renvoi quitte la page, le tiroir part avec elle : pas de `close` ici.
+ * Le fermer d'abord lance sa transition de sortie, et le demontage de la page
+ * en pleine transition laissait le panneau colle dans `body` par-dessus la
+ * fiche d'arrivee (le contenu d'un `Teleport` en cours de `Transition` ne se
+ * retire pas quand son parent disparait). `to` est un chemin de fr_drugs_app :
+ * dans une page le layer navigue, dans le tiroir d'un projet il empile la fiche.
+ */
+const nav = useOipResourceNav();
+// Dans le tiroir d'un projet, la page reste : la fiche visee s'empile, et ce
+// tiroir-ci, pose au-dessus de tout, doit lui laisser la place.
+const embedded = inject(OIP_RESOURCE_NAV, null) !== null;
+
+function follow(to: string) {
+  nav.openApp("fr_drugs_app", to);
+  if (embedded) emit("close");
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") emit("close");
+}
+
+onMounted(() => document.addEventListener("keydown", onKeydown));
+onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+</script>
+
+<template>
+  <!-- Pose dans `body` : un ancetre du contenu de page etablit un bloc conteneur
+       pour les elements `fixed`, et le voile s'arretait au bord de la colonne
+       au lieu de couvrir le cadre entier. -->
+  <Teleport to="body">
+    <Transition name="drawer">
+      <div v-if="record" class="rdr oip-drugs" @click.self="emit('close')">
+        <aside class="rdr_panel" :class="{ rdr_panel_wide: wide }">
+          <header class="rdr_head">
+            <p class="rdr_type">
+              <RmIcon :name="record.icon || 'FileText'" :size="16" />
+              {{ record.typeLabel }}
+            </p>
+            <button
+              type="button"
+              class="rdr_close"
+              :aria-label="locale === 'en' ? 'Close' : 'Fermer'"
+              @click="emit('close')"
+            >
+              <RmIcon name="X" :size="16" />
+            </button>
+          </header>
+
+          <div class="rdr_body">
+            <p v-if="record.date" class="rdr_date">
+              <RmDate :date="record.date" :lang="locale" />
+            </p>
+            <h2 class="rdr_title">{{ record.title }}</h2>
+
+            <div v-if="record.status || record.badge" class="rdr_tags">
+              <span v-if="record.status" class="rdr_status" :class="`is_${record.statusTone || 'neutral'}`">
+                {{ record.status }}
+              </span>
+              <span
+                v-if="record.badge"
+                class="rdr_badge"
+                :class="`is_${record.badgeTone || 'neutral'}`"
+              >{{ record.badge }}</span>
+            </div>
+
+            <!-- Le renvoi tient sous l'identite de l'enregistrement, pas en
+                 pied : les sept rubriques d'une contribution le repoussaient a
+                 une hauteur d'ecran du titre. -->
+            <RmButton
+              v-if="record.link"
+              class="rdr_follow"
+              variant="secondary"
+              :prefix-icon="record.link.icon || 'ArrowRight'"
+              @click="follow(record.link.to)"
+            >
+              {{ record.link.label }}
+            </RmButton>
+
+            <!-- Par defaut, les rubriques redigees par la page ; un parent peut
+                 poser son propre corps a la place (tiroir LES). -->
+            <slot>
+            <template v-if="accordion">
+              <div class="rdr_sections">
+                <section
+                  v-for="section in sections"
+                  :key="section.key"
+                  class="rdr_section"
+                  :class="{ is_open: opened[section.key] }"
+                >
+                  <button type="button" class="rdr_section_head" @click="toggle(section.key)">
+                    <RmIcon name="CaretRight" :size="14" class="rdr_caret" />
+                    {{ section.label }}
+                  </button>
+                  <p v-if="opened[section.key]" class="rdr_text">{{ section.body }}</p>
+                </section>
+              </div>
+            </template>
+
+            <template v-else>
+              <div v-if="sections.length > 1" class="rdr_tabs">
+                <button
+                  v-for="(section, index) in sections"
+                  :key="section.key"
+                  type="button"
+                  class="rdr_tab"
+                  :class="{ is_active: index === active }"
+                  @click="active = index"
+                >
+                  {{ section.label }}
+                </button>
+              </div>
+
+              <p class="rdr_text rdr_text--tab">{{ sections[active]?.body }}</p>
+            </template>
+            </slot>
+
+            <a
+              v-if="record.url"
+              class="rdr_link"
+              :href="record.url"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ locale === "en" ? "Open the source document" : "Ouvrir le document source" }} →
+            </a>
+          </div>
+
+          <footer class="rdr_foot">
+            <span>Source : <b>{{ sourceLabel || "HAS" }}</b></span>
+            <span v-if="checkedAt">
+              ·
+              {{ locale === "en" ? "Last updated" : "Dernière mise à jour le" }}
+              <RmDate :date="checkedAt" :lang="locale" />
+            </span>
+          </footer>
+        </aside>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Le voile epouse le cadre de la coque (marge de 8px, coins arrondis) plutot
+   que la fenetre : sinon il deborde sur la bordure du cadre. */
+.rdr {
+  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);
+}
+
+.rdr_panel {
+  display: flex;
+  flex-direction: column;
+  /* Les textes d'avis font plusieurs paragraphes : a 560px, chaque ligne etait
+     trop courte pour se lire d'une traite. */
+  width: min(760px, 100%);
+  height: 100%;
+  background: var(--white);
+  box-shadow: var(--overlay-shadow);
+}
+
+.rdr_panel_wide {
+  width: min(1040px, 100%);
+}
+
+.rdr_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--light);
+}
+
+.rdr_type {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--primary);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.rdr_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;
+}
+
+.rdr_close:hover {
+  background: var(--lightest);
+}
+
+.rdr_body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+}
+
+/* Le texte peut faire plusieurs milliers de caracteres : sans ce garde, il
+   ecrase les blocs au-dessus de lui dans la colonne flex. */
+.rdr_date,
+.rdr_title,
+.rdr_tabs,
+.rdr_tags,
+.rdr_follow,
+.rdr_link {
+  flex: 0 0 auto;
+}
+
+.rdr_follow {
+  align-self: flex-start;
+}
+
+.rdr_date {
+  color: var(--medium);
+  font-size: 14px;
+}
+
+.rdr_title {
+  max-height: 2.6em;
+  overflow: hidden;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.rdr_tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  border-bottom: 1px solid var(--light);
+}
+
+.rdr_tab {
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--medium);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.rdr_tab.is_active {
+  border-bottom-color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 6%, transparent);
+  color: var(--primary);
+}
+
+.rdr_sections {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--light);
+}
+
+.rdr_section {
+  border-bottom: 1px solid var(--light);
+}
+
+.rdr_section_head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 4px;
+  border: none;
+  background: none;
+  color: var(--dark);
+  font-size: 14px;
+  font-weight: 700;
+  text-align: left;
+  cursor: pointer;
+}
+
+.rdr_section_head:hover,
+.rdr_section.is_open .rdr_section_head {
+  color: var(--primary);
+}
+
+.rdr_caret {
+  flex: 0 0 auto;
+  transition: transform 0.15s linear;
+}
+
+.rdr_section.is_open .rdr_caret {
+  transform: rotate(90deg);
+}
+
+.rdr_tags {
+  align-self: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.rdr_badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rdr_badge.is_pre {
+  background: rgba(245, 158, 11, 0.16);
+  color: #b45309;
+}
+
+.rdr_badge.is_post {
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+  color: var(--primary);
+}
+
+.rdr_badge.is_good {
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--system-success-hover);
+}
+
+.rdr_badge.is_warn {
+  background: rgba(245, 158, 11, 0.16);
+  color: #b45309;
+}
+
+.rdr_badge.is_neutral {
+  background: var(--lightest);
+  color: var(--dark);
+}
+
+.rdr_status {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.rdr_status.is_good {
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--system-success-hover);
+}
+
+.rdr_status.is_bad {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--system-alert-hover);
+}
+
+.rdr_status.is_neutral {
+  background: var(--lightest);
+  color: var(--dark);
+}
+
+.rdr_text {
+  padding: 0 4px 16px;
+  color: var(--dark);
+  font-size: 15px;
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+.rdr_text--tab {
+  padding: 0;
+}
+
+.rdr_link {
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.rdr_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 .rdr_panel,
+.drawer-leave-active .rdr_panel {
+  transition: transform 0.2s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from .rdr_panel,
+.drawer-leave-to .rdr_panel {
+  transform: translateX(24px);
+}
+</style>