@tekkare/romulus 0.1.251 → 0.1.253

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

@@ -0,0 +1,426 @@
+<!--
+  Liste d'enregistrements datés, en cartes groupées par année.
+
+  Meme dessin que l'historique des avis HAS (cf. hasHistory.vue), mais sur des
+  entrees deja mises en forme par la page : alertes de securite, protocoles
+  d'utilisation temporaire, contributions de patients. Chaque onglet apporte ses
+  propres champs, la carte n'en connait que la forme commune.
+-->
+<script setup lang="ts">
+export type ListRecord = {
+  key: string;
+  /** Libelle du bandeau (« Alerte », « P.U.T », « Contribution »). */
+  typeLabel: string;
+  icon?: string;
+  /** Date de reference, qui donne aussi le groupe d'annee. */
+  date?: string | null;
+  /** Reference courte affichee en puce (code HAS, CIS...). */
+  ref?: string | null;
+  /** Qualificatif fort, en tag a la suite du statut (« Pré-AMM », « Post-AMM »). */
+  badge?: string | null;
+  badgeTone?: "pre" | "post" | "good" | "warn" | "neutral";
+  /** Document d'origine, ouvert dans un nouvel onglet. */
+  url?: string | null;
+  title: string;
+  excerpt?: string | null;
+  status?: string | null;
+  statusTone?: "good" | "bad" | "neutral";
+};
+
+const props = defineProps<{
+  title: string;
+  /** Ligne de portee, au-dessus du titre. */
+  scope?: string | null;
+  subtitle?: string | null;
+  items: ListRecord[];
+  sourceUuid?: string | null;
+  /** Texte affiche quand il n'y a rien a montrer. */
+  emptyLabel?: string | null;
+}>();
+
+const emit = defineEmits<{ (event: "select", record: ListRecord): void }>();
+
+const { locale } = useI18n();
+
+const PAGE = 10;
+const shown = ref(PAGE);
+
+const visible = computed(() => props.items.slice(0, shown.value));
+
+/** Groupes par annee, dans l'ordre d'arrivee des entrees. */
+const years = computed(() => {
+  const groups = new Map<string, ListRecord[]>();
+  visible.value.forEach((record) => {
+    const year = record.date ? String(new Date(record.date).getFullYear() || "-") : "-";
+    if (!groups.has(year)) groups.set(year, []);
+    groups.get(year)!.push(record);
+  });
+  return [...groups.entries()].map(([year, items]) => ({ year, items }));
+});
+</script>
+
+<template>
+  <section class="rl oip-drugs">
+    <p v-if="scope" class="rl_scope">
+      <RmIcon name="Info" :size="14" />
+      {{ scope }}
+    </p>
+
+    <header class="rl_head">
+      <div>
+        <h2 class="rl_title">{{ title }}</h2>
+        <p class="rl_count">
+          {{ items.length }}
+          {{ subtitle }}
+          <template v-if="items.length > visible.length">
+            · {{ visible.length }} {{ locale === "en" ? "shown" : "affichés" }}
+          </template>
+        </p>
+      </div>
+      <p v-if="sourceUuid" class="rl_source">
+        <OipDrugsHeartElasticSourceContainerElastic :uuid="sourceUuid" />
+      </p>
+    </header>
+
+    <p v-if="!items.length" class="rl_empty">
+      {{ emptyLabel ?? (locale === "en" ? "Nothing to show." : "Rien à afficher.") }}
+    </p>
+
+    <div v-for="group in years" :key="group.year" class="rl_year">
+      <p class="rl_year_label">{{ group.year }}</p>
+
+      <article
+        v-for="record in group.items"
+        :key="record.key"
+        class="rl_card"
+        @click="emit('select', record)"
+      >
+        <div class="rl_card_head">
+          <p class="rl_type">
+            <span class="rl_type_icon">
+              <RmIcon :name="record.icon || 'FileText'" :size="14" />
+            </span>
+            {{ record.typeLabel }}
+          </p>
+
+          <div class="rl_meta">
+            <RmDate v-if="record.date" :date="record.date" :lang="locale" />
+            <span v-if="record.ref" class="rl_ref">{{ record.ref }}</span>
+            <a
+              v-if="record.url"
+              class="rl_link"
+              :href="record.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              :data-tip="locale === 'en' ? 'Open' : 'Ouvrir'"
+              @click.stop
+            >
+              <RmIcon name="ArrowSquareOut" :size="16" />
+            </a>
+          </div>
+        </div>
+
+        <div class="rl_card_body">
+          <h3 class="rl_card_title">{{ record.title }}</h3>
+          <p v-if="record.excerpt" class="rl_excerpt">{{ record.excerpt }}</p>
+
+          <div v-if="record.status || record.badge" class="rl_tags">
+            <span v-if="record.status" class="rl_status" :class="`is_${record.statusTone || 'neutral'}`">
+              {{ record.status }}
+            </span>
+            <span
+              v-if="record.badge"
+              class="rl_badge"
+              :class="`is_${record.badgeTone || 'neutral'}`"
+            >{{ record.badge }}</span>
+          </div>
+
+          <p class="rl_more">{{ locale === "en" ? "See the detail" : "Consulter le détail" }} →</p>
+        </div>
+      </article>
+    </div>
+
+    <button
+      v-if="shown < items.length"
+      type="button"
+      class="rl_load"
+      @click="shown += PAGE"
+    >
+      {{ locale === "en" ? "Show more" : "Voir plus" }}
+    </button>
+  </section>
+</template>
+
+<style scoped>
+.rl {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-sizing: border-box;
+  width: 100%;
+  padding-inline: 32px;
+}
+
+.rl_scope {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.rl_head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.rl_title {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.rl_count {
+  margin-top: 2px;
+  color: var(--medium);
+  font-size: 14px;
+}
+
+.rl_source {
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.rl_empty {
+  color: var(--medium);
+  font-size: 14px;
+}
+
+.rl_year {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rl_year_label {
+  margin-top: 12px;
+  color: var(--medium);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.rl_card {
+  border: 1px solid var(--light);
+  border-radius: 12px;
+  background: var(--white);
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.15s linear, box-shadow 0.15s linear;
+}
+
+.rl_card:hover {
+  border-color: color-mix(in srgb, var(--primary) 35%, var(--light));
+  box-shadow: var(--medium-shadow);
+}
+
+.rl_card_head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 16px;
+  background: color-mix(in srgb, var(--primary) 4%, transparent);
+  border-bottom: 1px solid var(--light);
+}
+
+.rl_type {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.rl_type_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+.rl_meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--medium);
+  font-size: 13px;
+}
+
+.rl_ref {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--lightest);
+  color: var(--dark);
+  font-size: 12px;
+}
+
+/* Meme action d'icone que le PDF des avis : pastille au survol et infobulle. */
+.rl_link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  color: var(--medium);
+  transition: background-color 0.15s linear, color 0.15s linear;
+}
+
+.rl_link:hover {
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+  color: var(--primary);
+}
+
+.rl_link::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 5;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--darkest);
+  color: var(--white);
+  font-size: 13px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s linear;
+}
+
+.rl_link:hover::after {
+  opacity: 1;
+}
+
+.rl_card_body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+}
+
+.rl_card_title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.35;
+}
+
+.rl_excerpt {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--dark);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* Statut et cadre du protocole (pre-AMM, post-AMM) se lisent ensemble. */
+.rl_tags {
+  align-self: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Avant l'AMM le cadre est provisoire, apres il est etabli : deux couleurs
+   valent mieux qu'un libelle a lire. */
+.rl_badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.rl_badge.is_pre {
+  background: rgba(245, 158, 11, 0.16);
+  color: #b45309;
+}
+
+.rl_badge.is_post {
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+  color: var(--primary);
+}
+
+.rl_badge.is_good {
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--system-success-hover);
+}
+
+.rl_badge.is_warn {
+  background: rgba(245, 158, 11, 0.16);
+  color: #b45309;
+}
+
+.rl_badge.is_neutral {
+  background: var(--lightest);
+  color: var(--dark);
+}
+
+.rl_status {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.rl_status.is_good {
+  background: rgba(34, 197, 94, 0.14);
+  color: var(--system-success-hover);
+}
+
+.rl_status.is_bad {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--system-alert-hover);
+}
+
+.rl_status.is_neutral {
+  background: var(--lightest);
+  color: var(--dark);
+}
+
+.rl_more {
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.rl_load {
+  align-self: center;
+  margin-top: 8px;
+  padding: 8px 16px;
+  border: 1px solid var(--light);
+  border-radius: 999px;
+  background: var(--white);
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.rl_load:hover {
+  background: var(--lightest);
+}
+</style>