@tekkare/romulus 0.1.241 → 0.1.243

package/layer/app/components/panels/OipPanelSources.vue

@@ -0,0 +1,361 @@
+<!--
+  Panneau « Sources » du rail, servi par le layer OIP (tuiles Sources et
+  Tables du groupe Documentation).
+
+  Vue « sources » : les jeux Directus de l'ecran, la source principale cadree
+  et les secondaires en dessous. Les uuids viennent de l'app (panelProps),
+  qui sait ce que l'ecran affiche.
+
+  Vue « tables » : les tablegroups Directus du sujet de l'ecran. Un
+  tablegroup se lit d'un coup d'oeil (categorie, description, data packages,
+  date) ; seul le detail de ses tables se deplie.
+-->
+<template>
+  <div class="src_tabs">
+    <div v-if="!showTables" class="src_sources">
+      <p class="src_heading">Sources</p>
+      <OipSourceGroups
+        :uuids="uuids"
+        :primary-uuid="primaryUuid"
+        :lang="locale === 'en' ? 'en' : 'fr'"
+        :editable="superAdmin"
+      />
+    </div>
+
+    <div v-else class="tables_panel">
+      <div v-if="pending" class="tables_loading">
+        <RmSkeleton v-for="i in 2" :key="i" width="100%" :height="64" radius="8px" />
+      </div>
+
+      <template v-else>
+        <p v-if="!readable" class="tables_note">
+          {{ isFr
+            ? "Le jeton Directus de l'app ne lit pas les tablegroups : seuls leurs identifiants sont affichés."
+            : "The app's Directus token cannot read table groups: only their ids are shown." }}
+        </p>
+
+        <article v-for="g in groups" :key="g.id" class="tg_card">
+          <div v-if="g.category || g.status" class="tg_chips">
+            <span v-if="g.category" class="tg_chip">{{ g.category }}</span>
+            <span v-if="g.status && g.status !== 'published'" class="tg_chip">{{ g.status }}</span>
+          </div>
+
+          <h3 class="tg_title">{{ g.title || g.id }}</h3>
+          <p v-if="g.short_description" class="tg_description">{{ g.short_description }}</p>
+
+          <a
+            v-if="databankUrl(g)"
+            :href="databankUrl(g)"
+            target="_blank"
+            rel="noopener"
+            class="tg_link"
+          >
+            {{ isFr ? "Voir la page Databank" : "Open in Databank" }}
+            <RmIcon name="ArrowSquareOut" :size="12" />
+          </a>
+
+          <div v-if="g.packages.length" class="tg_row">
+            <span class="tg_label">Data packages :</span>
+            <span v-for="p in g.packages" :key="p.id" class="tg_chip" :title="p.summary || undefined">
+              {{ p.name || `#${p.id}` }}
+            </span>
+          </div>
+
+          <div v-if="g.date_updated" class="tg_row">
+            <span class="tg_label">{{ isFr ? "Mis à jour :" : "Updated:" }}</span>
+            <span class="tg_chip">{{ day(g.date_updated) }}</span>
+          </div>
+
+          <section v-for="d in g.datasets" :key="tableName(d)" class="tg_dataset">
+            <button
+              type="button"
+              class="tg_head"
+              :aria-expanded="isOpen(tableName(d))"
+              @click="toggle(tableName(d))"
+            >
+              <span class="tg_chevron">
+                <RmIcon :name="isOpen(tableName(d)) ? 'CaretUp' : 'CaretDown'" :size="12" />
+              </span>
+              <span class="tg_dataset_title">{{ d.nickname || tableName(d) }}</span>
+            </button>
+
+            <div v-if="isOpen(tableName(d))" class="tg_body">
+              <div class="tg_row">
+                <span class="tg_label">Table :</span>
+                <span class="tg_value">{{ tableName(d) }}</span>
+                <button
+                  type="button"
+                  class="tg_copy"
+                  :aria-label="isFr ? 'Copier' : 'Copy'"
+                  :title="isFr ? 'Copier' : 'Copy'"
+                  @click="copy(tableName(d))"
+                >
+                  <RmIcon name="Copy" :size="12" />
+                </button>
+              </div>
+              <p v-if="d.short_description" class="tg_description">{{ d.short_description }}</p>
+
+              <div v-if="d.last_update || d.update_frequency" class="tg_row">
+                <span class="tg_label">{{ isFr ? "Dernière mise à jour :" : "Last update:" }}</span>
+                <span v-if="d.last_update" class="tg_chip">{{ day(d.last_update) }}</span>
+                <template v-if="d.update_frequency">
+                  <span class="tg_text">{{ isFr ? "mise à jour" : "updated" }}</span>
+                  <span class="tg_chip">{{ d.update_frequency }}</span>
+                </template>
+              </div>
+
+              <div v-if="d.start_period || d.end_period" class="tg_row">
+                <span class="tg_label">{{ isFr ? "Période :" : "Date period:" }}</span>
+                <span class="tg_text">{{ isFr ? "du" : "from" }}</span>
+                <span class="tg_chip">{{ day(d.start_period) }}</span>
+                <span class="tg_text">{{ isFr ? "au" : "to" }}</span>
+                <span class="tg_chip">{{ day(d.end_period) }}</span>
+              </div>
+
+              <div v-if="d.location || d.geographical_scope || d.geographical_granularity" class="tg_geo">
+                <p class="tg_label">{{ isFr ? "Couverture géographique" : "Geographical info" }}</p>
+                <div v-if="d.location" class="tg_row">
+                  <span class="tg_text">{{ isFr ? "Zone :" : "Location:" }}</span>
+                  <span class="tg_chip">{{ d.location }}</span>
+                </div>
+                <div v-if="d.geographical_scope" class="tg_row">
+                  <span class="tg_text">{{ isFr ? "Périmètre :" : "Geographical scope:" }}</span>
+                  <span class="tg_chip">{{ d.geographical_scope }}</span>
+                </div>
+                <div v-if="d.geographical_granularity" class="tg_row">
+                  <span class="tg_text">{{ isFr ? "Granularité :" : "Geographical granularity:" }}</span>
+                  <span class="tg_chip">{{ d.geographical_granularity }}</span>
+                </div>
+              </div>
+            </div>
+          </section>
+        </article>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TableGroup, TableGroupDataset } from "../../types/tableGroups";
+
+const props = withDefaults(
+  defineProps<{
+    appKey?: string;
+    superAdmin?: boolean;
+    /** `source_uuid` des jeux affiches par l'ecran. */
+    uuids?: string[];
+    /** Source mise en avant ; absente, la premiere ; vide, liste plate. */
+    primaryUuid?: string | null;
+    /** Ce que le panneau montre : les sources, ou les tablegroups (tuile Tables). */
+    view?: "sources" | "tables";
+    /** Droit a l'onglet Tables (licence Databank, admins), connu de l'app. */
+    canSeeTables?: boolean;
+  }>(),
+  { superAdmin: false, uuids: () => [], primaryUuid: undefined, view: "sources", canSeeTables: false },
+);
+
+const { locale } = useI18n();
+const isFr = computed(() => locale.value !== "en");
+
+const { groups, pending, readable } = useOipSourceTableGroups(() => props.canSeeTables);
+const showTables = computed(() => props.view === "tables");
+
+// Les tables se lisent d'abord par leur nom : le detail se deplie a la demande.
+const opened = ref(new Set<string>());
+const isOpen = (key: string) => opened.value.has(key);
+function toggle(key: string) {
+  const next = new Set(opened.value);
+  next.has(key) ? next.delete(key) : next.add(key);
+  opened.value = next;
+}
+
+const tableName = (d: TableGroupDataset) => (d.schema_name ? `${d.schema_name}.${d.table_name}` : d.table_name);
+
+const day = (iso: string | null) =>
+  iso ? new Date(iso).toLocaleDateString(isFr.value ? "fr-FR" : "en-US", { day: "numeric", month: "long", year: "numeric" }) : "?";
+
+/**
+ * La fiche du tablegroup sur Databank, dans son premier data package :
+ * `/package/<package>/tables/<tablegroup>?details=<id package>&table=<id tablegroup>`,
+ * les deux segments etant les titres Directus mis en slug.
+ */
+const DATABANK_URL = "https://databank.openinnovationprogram.com";
+const slug = (value: string) =>
+  value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+function databankUrl(g: TableGroup) {
+  const pkg = g.packages.find((p) => p.id && p.name);
+  if (!pkg || !g.title) return "";
+  return `${DATABANK_URL}/package/${slug(pkg.name)}/tables/${slug(g.title)}?details=${pkg.id}&table=${g.id}`;
+}
+
+function copy(value: string) {
+  navigator.clipboard?.writeText(value).catch(() => {});
+}
+</script>
+
+<style scoped>
+.src_sources {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.src_heading {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-16);
+  font-weight: var(--weight-semibold);
+}
+
+.src_tabs {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.tables_panel,
+.tables_loading {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tables_note {
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-style: italic;
+  line-height: 1.45;
+  margin: 0;
+}
+
+.tg_card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 16px;
+}
+
+.tg_chips,
+.tg_row {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tg_chip {
+  background: var(--bg-surface-3, var(--bg-muted));
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 11px;
+  line-height: 1.4;
+  padding: 2px 6px;
+}
+
+.tg_head {
+  align-items: center;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  padding: 0;
+  text-align: left;
+}
+
+.tg_chevron {
+  align-items: center;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  color: var(--color-primary);
+  display: inline-flex;
+  flex: none;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+
+.tg_title {
+  color: var(--text-primary);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.tg_body,
+.tg_dataset,
+.tg_geo {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tg_dataset {
+  border-top: 1px solid var(--border-default);
+  padding-top: 10px;
+}
+
+.tg_dataset_title {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.tg_geo {
+  gap: 4px;
+}
+
+.tg_description {
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.tg_label {
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.tg_text,
+.tg_value {
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+.tg_value {
+  word-break: break-all;
+}
+
+.tg_link {
+  align-items: center;
+  align-self: flex-start;
+  color: var(--color-primary);
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 600;
+  gap: 4px;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.tg_copy {
+  background: none;
+  border: 0;
+  color: var(--color-primary);
+  cursor: pointer;
+  display: inline-flex;
+  padding: 2px;
+}
+</style>

package/layer/app/components/panels/OipPanelTopics.vue

@@ -0,0 +1,339 @@
+<!--
+  Panneau « Mes sujets » du rail, servi par le layer OIP (tuile Topics).
+
+  L'etoile au bout d'une ligne de menu, sur OIP Platform, met un sujet en
+  favori. Ce panneau liste ces favoris pour y revenir d'un clic depuis
+  n'importe quelle page de l'app. Il est en lecture seule : l'etoile reste sur
+  la plateforme, ici on ne fait que rouvrir.
+
+  Un favori vise soit un sujet (une page, avec son application et son chemin),
+  soit une entree de menu (une entree de catalogue sans adresse propre : elle
+  ouvre le sujet unique qu'elle porte, sinon le hub de la plateforme).
+-->
+<script setup lang="ts">
+// Passee par OipShell a tous les panneaux ; les favoris n'en dependent pas.
+defineProps<{ appKey?: string; superAdmin?: boolean }>();
+
+const { locale } = useI18n();
+const { rows, load, pending, unavailable } = useOipFavorites();
+/** Le hub de la plateforme, la ou s'allume l'etoile. */
+const PLATFORM_URL = useAppConfig().oip.platform.href;
+
+onMounted(() => load());
+
+/** Meme regle que les sources : la traduction Directus qui commence par la langue. */
+const pick = (list: any[] | undefined) =>
+  (list || []).find((item: any) =>
+    String(item?.languages_code?.code || item?.languages_code || "").startsWith(locale.value),
+  ) || (list || [])[0];
+
+/** Une description Directus peut porter du balisage ; un sous-titre non. */
+const plain = (value?: string | null) =>
+  (value || "").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+
+/** L'adresse d'un sujet : son application, puis son chemin dedans. */
+function subjectUrl(subject: any): string {
+  const base = typeof subject?.app === "object" ? subject.app?.prod_url : null;
+  if (!base) return "";
+  const path = subject.relative_path || "/";
+  return `${base.replace(/\/+$/, "")}${path.startsWith("/") ? path : `/${path}`}`;
+}
+
+/**
+ * Directus met dans `Emoji` soit un emoji, soit un nom d'icone Phosphor. Le
+ * nom est de l'ASCII PascalCase, un emoji jamais : on rend celui des deux
+ * qu'on a recu. La fonte Phosphor est deja chargee par le cadre.
+ */
+function iconClass(name?: string): string | null {
+  const value = name?.trim();
+  if (!value || !/^[A-Za-z][A-Za-z0-9]*$/.test(value)) return null;
+  return `ph-${value
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase()}`;
+}
+
+/**
+ * Directus ne stocke pas d'emoji de pays, seulement son code ISO-2. Le
+ * drapeau s'en deduit : deux indicateurs regionaux (U+1F1E6 + le rang de la
+ * lettre). « WW », le code du perimetre Global, n'a pas de drapeau : il prend
+ * le globe.
+ */
+function flag(iso?: string | null): string {
+  const code = (iso || "").trim().toUpperCase();
+  if (code === "WW") return "\u{1F310}";
+  if (!/^[A-Z]{2}$/.test(code)) return "";
+  return String.fromCodePoint(...[...code].map((letter) => 0x1f1e6 + letter.charCodeAt(0) - 65));
+}
+
+/** Le pays d'une ligne : son drapeau, puis son nom. */
+function country(node: any): string {
+  const label = node?.country_label;
+  if (!label) return "";
+  const mark = flag(node?.country_iso);
+  return mark ? `${mark} ${label}` : label;
+}
+
+interface TopicRow {
+  key: string;
+  emoji: string;
+  title: string;
+  subtitle: string;
+  to: string;
+}
+
+const topics = computed<TopicRow[]>(() =>
+  rows.value
+    .map((row) => {
+      const subject = row.subject;
+      if (subject?.subject_id) {
+        const translation = pick(subject.translations);
+        return {
+          key: `s-${subject.subject_id}`,
+          // Les sujets ne portent pas d'icone propre dans Directus.
+          emoji: "FileText",
+          title: translation?.subject_name ?? "",
+          subtitle:
+            country(subject.country_iso) || plain(translation?.subject_description),
+          to: subjectUrl(subject),
+        };
+      }
+
+      const item = row.menu_item;
+      if (!item?.id) return null;
+      const subjects = (item.Subjects ?? [])
+        .map((entry: any) => entry?.OipSubject_subject_id)
+        .filter((entry: any) => !!entry?.subject_id);
+      const single = subjects.length === 1 ? subjects[0] : null;
+      const translation = pick(item.translations);
+      return {
+        key: `i-${item.id}`,
+        emoji: item.Emoji || "Stack",
+        title: translation?.Title || item.Label || "",
+        subtitle: country(item.Country) || plain(translation?.Description),
+        // Une entree qui mene a plusieurs sujets ne peut pas choisir pour le
+        // lecteur : elle le renvoie au hub de la plateforme.
+        to: single ? subjectUrl(single) : PLATFORM_URL,
+      };
+    })
+    .filter((row): row is TopicRow => !!row?.title)
+    // Un sujet par destination. La meme page peut etre mise en favori deux
+    // fois, une fois comme entree de menu, une fois comme sujet.
+    .filter((row, index, all) => all.findIndex((other) => other.to === row.to) === index),
+);
+
+/** En dessous de ce nombre, l'oeil est plus rapide qu'un champ de recherche. */
+const SEARCHABLE_FROM = 6;
+
+const search = ref("");
+
+const shown = computed(() => {
+  const query = search.value.trim().toLowerCase();
+  if (!query) return topics.value;
+  // Le titre et le pays repondent tous les deux : « allemagne » est une entree
+  // aussi bonne que « obesite ».
+  return topics.value.filter((row) =>
+    `${row.title} ${row.subtitle}`.toLowerCase().includes(query),
+  );
+});
+
+/**
+ * Un favori pointant sur cette app se rouvre dans l'onglet courant, les
+ * autres dans un nouvel onglet : ils quittent l'application.
+ */
+const origin = ref("");
+onMounted(() => {
+  origin.value = window.location.origin;
+});
+const isExternal = (to: string) => !!origin.value && !to.startsWith(origin.value);
+</script>
+
+<template>
+  <div class="topics">
+    <p class="topics_intro">
+      {{
+        locale === "en"
+          ? "The topics you starred on OIP Platform, one click away from any page of the app."
+          : "Les sujets mis en favori sur OIP Platform, à un clic depuis n'importe quelle page de l'app."
+      }}
+    </p>
+
+    <input
+      v-if="topics.length >= SEARCHABLE_FROM"
+      v-model="search"
+      class="topics_search"
+      type="search"
+      :placeholder="locale === 'en' ? 'Search my topics' : 'Rechercher un sujet'"
+    >
+
+    <p v-if="pending && !topics.length" class="topics_note">
+      {{ locale === "en" ? "Loading…" : "Chargement…" }}
+    </p>
+
+    <p v-else-if="unavailable" class="topics_note">
+      {{
+        locale === "en"
+          ? "Your topics could not be loaded."
+          : "Vos sujets n'ont pas pu être chargés."
+      }}
+    </p>
+
+    <ul v-else-if="shown.length" class="topics_list">
+      <li v-for="row in shown" :key="row.key">
+        <a
+          class="topics_row"
+          :href="row.to"
+          :target="isExternal(row.to) ? '_blank' : undefined"
+          :rel="isExternal(row.to) ? 'noopener noreferrer' : undefined"
+        >
+          <span class="topics_icon">
+            <i v-if="iconClass(row.emoji)" class="ph" :class="iconClass(row.emoji)" />
+            <span v-else>{{ row.emoji }}</span>
+          </span>
+          <span class="topics_text">
+            <span class="topics_title">{{ row.title }}</span>
+            <span v-if="row.subtitle" class="topics_subtitle">{{ row.subtitle }}</span>
+          </span>
+          <i
+            class="ph topics_go"
+            :class="isExternal(row.to) ? 'ph-arrow-square-out' : 'ph-arrow-right'"
+          />
+        </a>
+      </li>
+    </ul>
+
+    <p v-else-if="search.trim()" class="topics_note">
+      {{ locale === "en" ? "No topic matches that search." : "Aucun sujet ne correspond." }}
+    </p>
+
+    <p v-else class="topics_note">
+      {{
+        locale === "en"
+          ? "No topic starred yet. Open a country menu on OIP Platform and click the star at the end of a row."
+          : "Aucun sujet en favori. Ouvrez le menu d'un pays sur OIP Platform et cliquez l'étoile au bout d'une ligne."
+      }}
+      <a class="topics_link" :href="PLATFORM_URL" target="_blank" rel="noopener noreferrer">
+        {{ locale === "en" ? "Open OIP Platform" : "Ouvrir OIP Platform" }}
+      </a>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.topics {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: stretch;
+  width: 100%;
+}
+
+.topics_intro {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-12);
+  line-height: 1.5;
+}
+
+.topics_search {
+  padding: 8px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-13);
+  outline: none;
+}
+
+.topics_search:focus {
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
+}
+
+.topics_note {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-12);
+  line-height: 1.5;
+}
+
+.topics_link {
+  color: var(--color-secondary);
+  font-weight: var(--weight-semibold);
+  text-decoration: none;
+}
+
+.topics_list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.topics_row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: border-color 0.15s ease-out;
+}
+
+.topics_row:hover {
+  border-color: var(--color-secondary);
+}
+
+.topics_icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-md);
+  background: var(--bg-surface-2);
+  font-size: var(--font-16);
+}
+
+.topics_icon .ph {
+  color: var(--color-secondary);
+  font-size: 17px;
+}
+
+.topics_text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.topics_title {
+  font-size: var(--font-13);
+  font-weight: var(--weight-semibold);
+  /* Un favori est un raccourci, pas un paragraphe. */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.topics_subtitle {
+  color: var(--text-muted);
+  font-size: var(--font-11);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.topics_go {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+</style>