@tekkare/romulus 0.1.243 → 0.1.244

package/layer/app/components/layout/tool/export.vue

@@ -0,0 +1,590 @@
+<!--
+  Panneau Export du cadre OIP 7.
+
+  Le composant fait le pont entre ce que la page declare
+  (`useExportSource().declare`) et le wizard du design system
+  (`RmExportPanel`) : il traduit la source en formats proposes, lance la
+  generation via `useRmExport`, trace l'evenement PostHog et tient l'onglet
+  « Mes exports » (cf. useSavedExports).
+
+  Il est unique pour les trois familles de layouts : le cadre est le meme, et
+  l'export ne doit pas se presenter differemment d'une partie du hub a l'autre.
+-->
+<template>
+  <div v-if="source" class="oip_export_tool">
+    <!-- Une page d'analyse ne montre rien tant qu'aucune vue n'est posee : ses
+         onglets d'export sont donc vides, et les formats de donnees sortent
+         grises avec « aucun tableau sur cette page », ce qui laisse croire que
+         la page n'exporte jamais. Le vrai motif est dit ici. -->
+    <RmCallout v-if="needsView" tone="info" icon="BookmarkSimple" class="oip_export_notice">
+      {{ emptyText }}
+    </RmCallout>
+    <!-- La page refuse d'exporter sa donnee (selection trop large) : dit ici,
+         a l'ouverture, pas a la derniere etape du wizard. -->
+    <RmCallout v-else-if="source.blocked" tone="warning" icon="Warning" class="oip_export_notice">
+      {{ source.blocked }}
+    </RmCallout>
+
+    <RmExportPanel
+      :file-name="source.fileName"
+      :formats="formats"
+      :sections="sections"
+      :layouts="layouts"
+      :ranges="source.ranges ?? []"
+      :columns="columns"
+      :templates="templates"
+      :recent="recent"
+      :busy="busy"
+      :notice="notice"
+      :error="error"
+      :lang="locale === 'en' ? 'en' : 'fr'"
+      @export="launch"
+      @range-change="onRange"
+      @rerun="rerun"
+      @forget="forget"
+    />
+  </div>
+  <!-- Sans source declaree, le panneau dit pourquoi. Les pages d'analyse
+       retirent la leur tant qu'aucun produit n'est choisi : leur tuile Export
+       reste pourtant la, sinon le rail se reorganiserait a chaque selection et
+       personne n'apprendrait ce qui manque. -->
+  <RmCallout v-else tone="info" icon="BookmarkSimple" class="oip_export_notice">
+    {{ emptyText }}
+  </RmCallout>
+</template>
+
+<script setup lang="ts">
+import type { RmExportConfig, RmExportTemplate } from "@tekkare/romulus/utils/export";
+import { oipTrack } from "#oip-app/ui";
+import { useExportTracking } from "#oip-app/export";
+
+const { locale } = useI18n();
+const { current: source, pageSources, quick } = useExportSource();
+const { run } = useRmExport();
+const { getExportPosthogProps } = useExportTracking();
+const saved = useSavedExports();
+const permalink = usePermalink();
+
+const busy = ref(false);
+const notice = ref("");
+const error = ref("");
+
+/**
+ * Plage choisie dans le panneau. Suivie ici parce qu'elle decide de ce que le
+ * cadre propose (cf. `columns`) ; le panneau la pose lui-meme des l'ouverture,
+ * et un modele la change en passant.
+ */
+const range = ref("");
+watchEffect(() => {
+  if (!range.value) range.value = source.value?.ranges?.[0]?.key ?? "";
+});
+
+/**
+ * Graphiques a exporter, relus a chaque ouverture du panneau.
+ *
+ * A defaut de declaration, ils sont relus dans le rendu : un rapport doit
+ * ressembler a la page, et une page de tableaux de bord n'a pas a redire dans
+ * sa source d'export ce que son template affiche deja.
+ */
+function pageCharts() {
+  return source.value?.charts?.() ?? visibleExportCharts();
+}
+
+const charts = computed(() => pageCharts());
+
+/**
+ * Ce que l'ecran porte, pour les formats mis en page. Meme regle que pour les
+ * graphiques : la declaration de la page si elle existe, le rendu sinon.
+ */
+function pageScreen() {
+  return source.value?.screen?.() ?? visibleExportScreen();
+}
+
+/**
+ * Les onglets du classeur : ceux, et seulement ceux, que la page declare.
+ *
+ * Le classeur porte TOUTE la donnee, pas ce qui tient a l'ecran : lui faire
+ * relire le rendu donnerait un fichier tronque au nombre de lignes affichees.
+ * C'est le rapport mis en page, lui, qui ne montre que l'ecran.
+ */
+function pageSheets() {
+  return source.value?.sheets ?? [];
+}
+
+/**
+ * Ce que le rapport mis en page saurait capturer : les cartes du design
+ * system, ou a defaut les blocs de la page (cf. visibleExportNodes).
+ */
+function pageNodes() {
+  return visibleExportNodes();
+}
+
+const views = useViews();
+
+/**
+ * La page attend une vue pour avoir quelque chose a exporter.
+ *
+ * Trois conditions ensemble : la page declare une vue (les pages qui n'en ont
+ * pas ne demandent rien), aucun critere n'est pose (meme lecture que le
+ * permalink : un filtre vide ne compte pas), et la source est vide. Une page
+ * qui sort ses lignes sans selection, comme les prix ou les avis HAS, ne voit
+ * donc jamais ce message.
+ */
+const needsView = computed(
+  () =>
+    !!views.current.value &&
+    (source.value?.sheets.length ?? 0) === 0 &&
+    views.criteriaOf().filter((item: any) => viewFilledValues(item).length > 0).length === 0,
+);
+
+/** Le motif du panneau vide : une vue manquante, ou une page sans export. */
+const emptyText = computed(() => {
+  const fr = locale.value !== "en";
+  if (needsView.value) {
+    return fr
+      ? "Cette page exporte ce que porte la vue active : une vue définit les produits de l’analyse. Activez-en une depuis la tuile « Mes vues », puis revenez ici."
+      : "This page exports what an active view holds: a view defines the products of the analysis. Activate one from the \"My views\" tile, then come back.";
+  }
+  return fr
+    ? "Cette page ne déclare pas encore de contenu exportable."
+    : "This page does not declare anything to export yet.";
+});
+
+/**
+ * Un format que la page ne peut pas nourrir reste visible mais grise : le
+ * catalogue dit ce que la plateforme sait faire, la carte grisee dit pourquoi
+ * cette page-la ne le propose pas.
+ */
+const formats = computed(() => {
+  const base = source.value?.formats ?? RM_EXPORT_FORMATS;
+  const hasSheets = pageSheets().length > 0;
+  const hasCharts = charts.value.length > 0;
+  // Le rapport capture l'ecran : une page sans tableau ni graphique declares
+  // reste exportable tant qu'elle affiche quelque chose.
+  const hasPage = hasSheets || hasCharts || pageNodes().length > 0;
+  const noChart = locale.value === "en" ? "No chart on this page" : "Aucun graphique sur cette page";
+  const noTable = locale.value === "en" ? "No table on this page" : "Aucun tableau sur cette page";
+
+  const nothing =
+    locale.value === "en" ? "Nothing to export on this page yet" : "Rien à exporter sur cette page pour l'instant";
+
+  const blocked = source.value?.blocked;
+
+  return base.map((format) => {
+    // Un format qui emporte des enregistrements (tableau ou rapport) sort
+    // grise quand la page refuse : le motif est dans le bandeau au-dessus.
+    if (blocked && (format.tabular || format.paged)) {
+      return { ...format, disabled: true, disabledHint: blocked };
+    }
+    if (format.visual && !format.tabular && !hasCharts) {
+      return { ...format, disabled: true, disabledHint: noChart };
+    }
+    // Un format mis en page (le PDF) se nourrit des tableaux OU des
+    // graphiques : un onglet de graphiques sans tableau le proposait grise.
+    if (format.tabular && format.visual && !hasPage) {
+      return { ...format, disabled: true, disabledHint: nothing };
+    }
+    if (format.tabular && !format.visual && !hasSheets) {
+      return { ...format, disabled: true, disabledHint: noTable };
+    }
+    return format;
+  });
+});
+
+/**
+ * Colonnes proposees a l'etape « Colonnes » : celles de TOUS les onglets, dans
+ * leur ordre d'apparition.
+ *
+ * Le generateur applique la liste retenue a chaque onglet du classeur, et
+ * garde le schema entier quand aucun de ses intitules n'y figure. Ne lui
+ * donner que le premier onglet marchait tant qu'une page n'en avait qu'un :
+ * sur la fiche produit, l'onglet MITM ne partageait que « Marque » avec les
+ * avis HAS, et sortait donc reduit a cette seule colonne.
+ *
+ * Un intitule porte par deux onglets ne se coche qu'une fois : le decocher les
+ * retire des deux, ce qui est la lecture attendue (« je ne veux pas de cette
+ * colonne dans l'export »).
+ */
+const columns = computed(() => {
+  // Plage « tout » : aucune colonne proposee, donc aucune retenue, donc chaque
+  // onglet garde son schema entier a la generation.
+  if (source.value?.fullRanges?.includes(range.value)) return [];
+
+  return [
+    ...new Set(
+      pageSheets().flatMap((sheet) =>
+        (sheet.schema ?? []).map((column) => column.column),
+      ),
+    ),
+  ];
+});
+
+/**
+ * Sections cochees a l'ouverture : celles que l'ecran remplit, dans la forme
+ * qu'il leur donne.
+ *
+ * Une page qui declare sa forme garde le dernier mot (`layout`). Sinon chaque
+ * section suit le rendu : un ecran d'analyse coche son tableau et pas une
+ * fiche par ligne, qui redirait la meme chose en dix fois plus de pages ; une
+ * page de resultats coche ses fiches ; une page de tableaux de bord sans
+ * tableau ne coche que ses graphiques, plutot que de sortir en annexe les dix
+ * mille lignes que la page ne montre nulle part.
+ */
+const sections = computed(() => {
+  const declared = source.value?.layout;
+  const screen = pageScreen();
+  const hasCharts = charts.value.length > 0;
+  const hasTables = (screen.sheets?.length ?? 0) > 0;
+  const hasCards = (screen.cards?.length ?? 0) > 0;
+
+  // Ecran illisible (rendu pas encore monte, markup inconnu) : les fiches
+  // restent, c'est la forme par defaut du panneau depuis ses debuts.
+  const cards = declared ? declared === "cards" : hasCards || (!hasTables && !hasCharts);
+  const table = declared ? declared === "table" : hasTables;
+
+  return RM_EXPORT_SECTIONS.map((section) => {
+    if (section.key === "charts") return { ...section, on: hasCharts };
+    if (section.key === "cards") return { ...section, on: cards };
+    if (section.key === "table") return { ...section, on: table };
+    return section;
+  });
+});
+
+/**
+ * Colonnes du tableau le plus large de l'ecran. C'est lui qui decide
+ * l'orientation du rapport : un suivi mensuel a quatorze colonnes, illisible
+ * en portrait, et un rapport dont la couverture et le tableau n'ont pas la
+ * meme largeur se lit comme deux fichiers agrafes.
+ */
+const widestTable = computed(() =>
+  (pageScreen().sheets ?? []).reduce(
+    (widest, sheet) => Math.max(widest, sheet.schema.length),
+    0,
+  ),
+);
+
+/** Le paysage passe en tete des mises en page quand le tableau est large. */
+const layouts = computed(() =>
+  widestTable.value > 8
+    ? [...RM_EXPORT_LAYOUTS].sort((a, b) => Number(b.key === "a4-landscape") - Number(a.key === "a4-landscape"))
+    : RM_EXPORT_LAYOUTS,
+);
+
+/**
+ * Modeles : les quatre depart les plus courants, reduits a ceux que la page
+ * peut honorer. Un modele qui ouvrirait sur un format grise n'a pas lieu
+ * d'etre propose.
+ */
+const templates = computed<RmExportTemplate[]>(() => {
+  const fr = locale.value !== "en";
+  const all: RmExportTemplate[] = [
+    {
+      key: "pdf-report",
+      name: fr ? "Rapport PDF" : "PDF report",
+      meta: fr
+        ? `PDF · ${layouts.value[0]?.label ?? "A4 portrait"} · en-tête OIP`
+        : `PDF · ${layouts.value[0]?.label ?? "A4 portrait"} · OIP header`,
+      icon: "FilePdf",
+      color: "var(--color-danger)",
+      config: { format: "pdf", layout: layouts.value[0]?.key ?? "a4-portrait" },
+    },
+    {
+      key: "xlsx-raw",
+      name: fr ? "Data brute Excel" : "Raw Excel data",
+      meta: fr ? "Excel · page de garde · tous onglets" : "Excel · cover sheet · all tabs",
+      icon: "FileXls",
+      color: "var(--color-success)",
+      config: { format: "xlsx" },
+    },
+    {
+      key: "png-slides",
+      name: fr ? "Capture slides" : "Slide capture",
+      meta: fr ? "PNG · graphiques visibles · 2x" : "PNG · visible charts · 2x",
+      icon: "Image",
+      color: "var(--color-info)",
+      config: { format: "png" },
+    },
+    {
+      key: "permalink",
+      name: fr ? "Lien partageable" : "Shareable link",
+      meta: fr ? "URL · filtres compris" : "URL · filters included",
+      icon: "Link",
+      color: "var(--color-secondary)",
+      config: { format: "link" },
+    },
+  ];
+  // Les modeles de la page prennent la place de la tuile Excel generique :
+  // « Data brute Excel » ne dit pas quoi, sur un ecran qui porte dix onglets
+  // de natures differentes, part dans le fichier. La page les nomme, le cadre
+  // garde les tuiles dont le libelle ne depend pas de l'ecran (PDF, lien).
+  const declared = source.value?.templates ?? [];
+  const catalog = declared.length
+    ? all.flatMap((template) => (template.key === "xlsx-raw" ? declared : [template]))
+    : all;
+
+  // Un modele dont le format est grise reste affiche, grise lui aussi, avec
+  // le motif : cache, il disparaissait le temps du chargement des onglets et
+  // revenait ensuite, ce qui se lisait comme un export en panne.
+  return catalog.map((template) => {
+    // Un modele qui charge affiche son spinner : le griser d'un « aucun
+    // tableau » dirait l'inverse de ce qui se passe.
+    if (template.loading) return template;
+    const format = formats.value.find((item) => item.key === template.config.format);
+    return format?.disabled
+      ? { ...template, disabled: true, disabledHint: format.disabledHint }
+      : template;
+  });
+});
+
+/**
+ * Onglet « Mes exports ». Ce qui est conserve est la recette, pas le fichier :
+ * rejouer une entree repose ses filtres puis regenere le document. La liste
+ * ne montre que les exports de cet ecran (cf. `useSavedExports`) : ailleurs,
+ * ses filtres et ses colonnes ne nommeraient rien.
+ */
+const recent = computed(() =>
+  saved.list.value.map((entry) => ({
+    id: entry.id,
+    name: entry.title,
+    format: entry.format,
+    rows: entry.rows,
+    size: entry.size,
+    at: entry.at,
+  })),
+);
+
+onMounted(async () => {
+  saved.load();
+
+  // Le cadre monte ce panneau quand la tuile s'ouvre : c'est le moment ou une
+  // page qui ne garde pas ses lignes va les chercher, pour que l'etape
+  // « Colonnes » ait de quoi parler.
+  await source.value?.prepare?.();
+  await quickLaunch();
+});
+
+/**
+ * L'export demande par une autre tuile (le raccourci « Exporter en Excel »
+ * d'une carte de vue) : la recette par defaut du format, celle que le panneau
+ * proposerait, tous les onglets et toutes les colonnes. La vue vient d'etre
+ * appliquee : un tick pour que les watchers de la page aient pose ses filtres,
+ * `prepare` ci-dessus a relu les lignes, et `launch` rejoue `beforeExport`.
+ */
+async function quickLaunch() {
+  const format = quick.value;
+  if (!format) return;
+  quick.value = null;
+  if (!source.value) return;
+  if (formats.value.find((item) => item.key === format)?.disabled) return;
+  await nextTick();
+  await launch({
+    format,
+    range: source.value.ranges?.[0]?.key ?? "filtered",
+    sections: sections.value.filter((section) => section.on).map((section) => section.key),
+    columns: [],
+    options: RM_EXPORT_OPTIONS.filter((option) => option.on).map((option) => option.key),
+    fileName: source.value.fileName,
+    layout: layouts.value[0]?.key ?? "a4-portrait",
+    schedule: "once",
+    frequency: "monthly",
+    email: false,
+  });
+}
+
+/**
+ * Logo Tekkare pour la page de garde PDF. Le SVG passe par un canvas parce
+ * que jsPDF ne prend que du bitmap. Charge une fois, a la demande.
+ */
+let logo: string | null | undefined;
+
+async function logoDataUrl() {
+  if (logo !== undefined) return logo ?? undefined;
+  try {
+    const { default: url } = await import("../../../assets/tekkare_logo.svg");
+    const image = new Image();
+    image.src = url as unknown as string;
+    await new Promise<void>((resolve, reject) => {
+      image.onload = () => resolve();
+      image.onerror = () => reject(new Error("logo illisible"));
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = image.naturalWidth || 426;
+    canvas.height = image.naturalHeight || 56;
+    canvas.getContext("2d")!.drawImage(image, 0, 0, canvas.width, canvas.height);
+    logo = canvas.toDataURL("image/png");
+  } catch {
+    logo = null;
+  }
+  return logo ?? undefined;
+}
+
+/**
+ * Plage retenue a l'etape « Donnees », transmise a la page.
+ *
+ * Une plage peut changer les colonnes : l'historique des prix ajoute la
+ * variation, que le jeu « prix actuels » n'a pas. L'etape « Colonnes » lit
+ * les onglets de la page ; sans ce relais elle listerait ceux de l'autre
+ * plage, et la colonne propre a celle qu'on a choisie serait decochee
+ * d'office, donc absente du fichier.
+ */
+async function onRange(key: string) {
+  range.value = key;
+  await source.value?.onRange?.(key);
+}
+
+/**
+ * Tire le document. `replaces` nomme l'entree de « Mes exports » a mettre a
+ * jour plutot qu'a doubler : un rejeu refait la meme recette.
+ */
+async function launch(config: RmExportConfig, replaces?: string) {
+  if (!source.value) return;
+  // Le rejeu d'un export conserve arrive ici sans passer par le wizard : un
+  // format grise (page qui refuse) ne part pas davantage.
+  if (formats.value.find((item) => item.key === config.format)?.disabled) return;
+  busy.value = true;
+  notice.value = "";
+  error.value = "";
+
+  try {
+    // La page recharge d'abord ses lignes si la plage demandee n'est pas
+    // celle affichee : sans ca, « toute la base » exporterait la page courante.
+    await source.value.beforeExport?.(config.range);
+
+    // Laisser le rendu suivre avant de le relire. Les pages de resultats
+    // rechargent dans la liste affichee : demander « tous les resultats »
+    // remplit l'ecran de fiches, mais elles ne sont dans le DOM qu'au tick
+    // suivant, et le rapport sortait avec les dix fiches d'avant.
+    await nextTick();
+
+    // Relu apres le rechargement : `source` est un getter, il rend l'etat
+    // courant de la page et non celui capture a l'ouverture du panneau.
+    const now = source.value;
+
+    // Un rapport mis en page montre ce que l'ecran montre : ses tableaux, ses
+    // chiffres cles. Les formats de donnees, eux, gardent la donnee complete
+    // que la page a chargee pour eux.
+    const paged = formats.value.find((format) => format.key === config.format)?.paged === true;
+    const screen = paged ? pageScreen() : undefined;
+
+    const result = await run(
+      // Les colonnes retenues a l'etape « Colonnes » nomment celles du tableau
+      // complet ; celui de l'ecran a les siennes (des annees, un intitule
+      // different). Croiser les deux listes ne garderait que les rares noms
+      // communs : le rapport sortait avec la seule colonne « Label ».
+      screen?.sheets?.length ? { ...config, columns: [] } : config,
+      {
+        title: now.title,
+        subtitle: now.subtitle,
+        kpi: screen?.kpi?.length ? screen.kpi : now.kpi,
+        // Le referentiel Directus d'abord : c'est lui qui porte la date de
+        // notre dernier chargement. La declaration de la page ne sert que si
+        // le cadre ne cite aucune source pour cet ecran.
+        sources: pageSources.value.length ? pageSources.value : now.sources,
+        filters: now.filters,
+        sheets: screen?.sheets?.length ? screen.sheets : pageSheets(),
+        // Les fiches de l'ecran plutot que des fiches derivees des lignes : la
+        // page de resultats montre un titre, un compteur et deux lignes de
+        // resume, pas les trente colonnes que le classeur porte.
+        cards: screen?.cards?.length ? screen.cards : undefined,
+        // Relus maintenant, et non a l'ouverture du panneau : `beforeExport`
+        // a pu recharger la page, et les noeuds captures avant seraient ceux
+        // d'un rendu qui n'existe plus.
+        charts: pageCharts(),
+        // Les cartes de l'ecran, capturees telles quelles par le rapport mis
+        // en page : ses tableaux reconstruits ne ressemblaient pas a la page.
+        nodes: paged ? visibleExportNodes() : undefined,
+        // Sans permalink declare par la page, l'URL courante ne suffit pas :
+        // les filtres du hub ne sont pas dedans (cf. usePermalink).
+        permalink: now.permalink?.() ?? (await permalink.build()),
+        limit: now.limit,
+        logoDataUrl: config.options.includes("logo") ? await logoDataUrl() : undefined,
+      },
+      locale.value === "en" ? "en" : "fr",
+    );
+
+    oipTrack(
+      "download",
+      getExportPosthogProps(now.posthogName ?? now.fileName, {
+        exportType: "page",
+        format: config.format,
+        rows: result.rows,
+        sections: config.sections.join(","),
+        columns: config.columns.length,
+      }),
+    );
+
+    if (config.format === "link") {
+      notice.value =
+        locale.value === "en"
+          ? `Link copied: ${result.url}`
+          : `Lien copié : ${result.url}`;
+    } else {
+      notice.value =
+        locale.value === "en" ? `${result.fileName} ready.` : `${result.fileName} prêt.`;
+      // Garde apres coup : le fichier est deja parti, un echec
+      // d'enregistrement ne doit pas se lire comme un echec d'export.
+      await saved.save(
+        {
+          title: result.fileName,
+          pageLabel: now.title,
+          config,
+          rows: result.rows,
+          size: result.bytes ? rmExportSize(result.bytes / 1024) : undefined,
+        },
+        replaces,
+      );
+    }
+  } catch (exception: any) {
+    error.value =
+      exception?.message ||
+      (locale.value === "en" ? "Export failed." : "L'export a échoué.");
+  } finally {
+    busy.value = false;
+  }
+}
+
+/**
+ * Rejoue un export conserve : ses filtres, puis sa configuration.
+ *
+ * Le rejeu ecrit dans l'entree d'origine : la liste est l'historique des
+ * recettes tirees, pas celui des clics, et rejouer dix fois le meme export ne
+ * doit pas remplir « Mes exports » de dix lignes identiques.
+ *
+ * L'ordre compte. Les filtres reposes relancent les requetes de la page, et
+ * c'est `prepare()` qui va rechercher les lignes d'export — sans cette attente
+ * le document sortirait avec les lignes de l'ecran precedent. Les pages qui
+ * ne declarent ni `prepare` ni `beforeExport` gardent leurs lignes courantes :
+ * la leur arrive avec le rechargement de leurs propres watchers.
+ *
+ * Ce qu'on peut attendre : `onApply` (via applyFilters) est type `void` dans
+ * useViews et aucune source d'export n'expose de drapeau de chargement. On
+ * attend donc la promesse d'onApply si la page en rend une, puis un tick pour
+ * que les watchers de la page aient pose les nouveaux filtres dans le
+ * magasin : `prepare()` et `beforeExport()` relisent alors une requete a jour.
+ */
+async function rerun(id: string) {
+  const entry = saved.find(id);
+  // `find` cherche dans tous les exports du compte, la liste affichee n'en
+  // montre qu'une part et l'identifiant vient du DOM : le garde-fou reste.
+  if (!entry || !saved.isHere(entry)) return;
+
+  await saved.applyFilters(entry);
+  await nextTick();
+  await source.value?.prepare?.();
+  await launch(entry.config, entry.id);
+}
+
+function forget(id: string) {
+  saved.remove(id);
+}
+</script>
+
+<style scoped>
+.oip_export_tool {
+  padding-bottom: 24px;
+}
+
+.oip_export_notice {
+  margin-bottom: 16px;
+}
+</style>