@tekkare/romulus 0.1.243 → 0.1.244

package/layer/app/composables/useViewTemplates.ts

@@ -0,0 +1,369 @@
+/**
+ * useViewTemplates - les templates Tekkare d'une page, prets a afficher.
+ *
+ * Deux ecrans les proposent : l'onglet « Templates Tekkare » du panneau du
+ * rail, et l'etat vide des pages a selection de produits (c'est justement la
+ * qu'un panier pret a l'emploi sert le plus). Les deux les mettent en forme et
+ * les demarrent de la meme facon, donc la mise en carte et le demarrage vivent
+ * ici, pas en double.
+ *
+ * Ils viennent de deux endroits, et rien en aval ne fait la difference :
+ * - le catalogue en dur de `~/utils/viewTemplates`, socle offert a tout le
+ *   monde ;
+ * - ceux qu'un superadmin a publies depuis l'app pour des espaces clients
+ *   choisis (`GET /view-templates`).
+ *
+ * Les seconds sont convertis dans la forme des premiers des leur arrivee :
+ * mise en carte, demarrage et lien profond restent ecrits une fois.
+ */
+import {
+  normalizePage,
+  viewTemplateById,
+  viewTemplatesFor,
+  VIEW_TEMPLATE_QUERY_KEYS,
+  VIEW_TEMPLATE_QUERY_PARAM,
+  VIEW_TEMPLATE_QUERY_RESET,
+} from "../utils/viewTemplates";
+import type { ViewTemplate, ViewTemplateCriterion } from "../utils/viewTemplates";
+import { decodeCriteria } from "../utils/viewTemplateCriteria";
+import type { StoredCriterion } from "../utils/viewTemplateCriteria";
+import { useOipApi } from "#oip-app/api";
+import { PUBLISHED_TEMPLATE_NAMESPACE, resolveTemplateBrands } from "#oip-app/views";
+
+/** Icone des templates publies depuis l'app : ils n'en portent pas. */
+const PUBLISHED_ICON = "Sparkle";
+
+/**
+ * Criteres qui decrivent un panier par sa CLASSE, et non par les produits
+ * qu'elle resout aujourd'hui.
+ *
+ * Une vue du portail porte les deux : la liste de marques dépliée et la
+ * classe qui l'a produite (cf. `useDrugsViews`). Pour une vue enregistree,
+ * c'est la liste qui fait foi — son proprietaire veut retrouver la meme
+ * analyse. Pour un template, c'est l'inverse : une classe se reexpanse a
+ * chaque ouverture, une liste figee ignore la prochaine AMM.
+ */
+const SCOPE_CLASS_FILTERS = ["atc5", "atc4", "company"];
+
+/**
+ * Les templates publies pour cet espace, charges une fois par session.
+ *
+ * Tout l'espace d'un coup, et le tri par page se fait ici : une vue est
+ * enregistree sous `route.path`, donc sous `/en/...` pour qui lit en anglais.
+ * Demander la page a l'API reviendrait a ne rien rendre a la moitie des
+ * lecteurs. `normalizePage` retire ce prefixe des deux cotes, exactement
+ * comme pour le catalogue en dur.
+ *
+ * Etat partage plutot que `useAsyncData` : deux ecrans lisent la meme liste
+ * (le panneau du rail et l'etat vide), et le panneau suit la page declaree,
+ * qui change en naviguant sans qu'un composant soit remonte.
+ */
+function publishedStore() {
+  return {
+    list: useState<ViewTemplate[] | null>("viewTemplates:published", () => null),
+    pending: useState<boolean>("viewTemplates:pending", () => false),
+  };
+}
+
+/**
+ * Un template publie, dans la forme du catalogue en dur.
+ *
+ * Le titre et la description sont ranges dans une seule langue, celle de qui
+ * a publie : les deux faces pointent donc sur la meme chaine. Ce sont les
+ * CRITERES qui se traduisent, quand leur cle est connue (cf.
+ * `viewTemplateCriteria`).
+ *
+ * `deepLink` n'est pas range non plus, il se deduit : un template dont tous
+ * les criteres sont des cles de perimetre produit doit passer par l'URL, pour
+ * que le middleware `03.scope-from-query` les expanse.
+ */
+export function toTemplate(row: {
+  id: string;
+  title: string;
+  description?: string | null;
+  page: string;
+  criteria: any;
+  forWorkspace?: boolean;
+}): ViewTemplate {
+  const stored: StoredCriterion[] = Array.isArray(row.criteria) ? row.criteria : [];
+  const text = { fr: row.title, en: row.title };
+
+  return {
+    id: `published-${row.id}`,
+    page: normalizePage(row.page),
+    icon: PUBLISHED_ICON,
+    tone: "primary",
+    title: text,
+    description: { fr: row.description ?? "", en: row.description ?? "" },
+    deepLink:
+      stored.length > 0 &&
+      stored.every((item) => VIEW_TEMPLATE_QUERY_KEYS[item.filter] !== undefined),
+    forYou: row.forWorkspace === true,
+    criteria: (ctx) =>
+      decodeCriteria(stored, {
+        lang: ctx.lang,
+        t: ctx.t,
+        te: ctx.te,
+        namespace: PUBLISHED_TEMPLATE_NAMESPACE,
+      }) as ViewTemplateCriterion[],
+  };
+}
+
+/**
+ * Valeurs d'un critere de template. La periode est gardee en chaine par le
+ * selecteur de dates (c'est ce qui la garde relative), la ou les autres
+ * filtres tiennent un tableau : les deux se lisent ici.
+ *
+ * Les bornes vides sont retirees : une periode sans borne vaut `[null, null]`,
+ * que `String` rendait « null, null » sur la carte du template et repassait
+ * telle quelle dans l'URL au demarrage (`period=null,null`).
+ */
+export function viewTemplateValues(item: ViewTemplateCriterion): string[] {
+  const raw = Array.isArray(item?.values) ? item.values : item?.values ? [item.values] : [];
+  return raw
+    .map((value) => (value === null || value === undefined ? "" : String(value)))
+    .filter((value) => value !== "" && value !== "null" && value !== "undefined");
+}
+
+/**
+ * @param page chemin de la page dont on veut les templates. Relu a chaque
+ * acces : le panneau du rail suit la page declaree, qui change en naviguant.
+ */
+export function useViewTemplates(page: () => string) {
+  const { locale, t, te } = useI18n();
+  const route = useRoute();
+  const views = useViews();
+  const elysiaApi = useOipApi();
+  const filterLabel = useViewFilterLabels(() => views.current.value?.filterNamespace);
+  const published = publishedStore();
+
+  const lang = computed<"fr" | "en">(() => (locale.value === "en" ? "en" : "fr"));
+
+  /**
+   * Les criteres se construisent avec la langue de l'ecran : valeurs de
+   * filtres traduites, et sur la page Prix le nom du filtre lui-meme (cf.
+   * `viewTemplates`).
+   */
+  const context = computed(() => ({
+    lang: lang.value,
+    t,
+    te: (key: string) => te(key),
+  }));
+
+  /**
+   * Charge les templates publies. Rien au rendu serveur : la route demande la
+   * session, et le panneau ne s'ouvre que cote client.
+   */
+  async function loadPublished() {
+    if (!import.meta.client) return;
+    if (published.list.value || published.pending.value) return;
+
+    published.pending.value = true;
+    try {
+      const res = await elysiaApi.viewTemplates.list();
+      published.list.value = (res?.data ?? []).map(toTemplate);
+    } catch (err) {
+      console.error("[useViewTemplates] Templates publies indisponibles:", err);
+      published.list.value = [];
+    } finally {
+      published.pending.value = false;
+    }
+  }
+
+  onMounted(loadPublished);
+
+  /**
+   * Les publies d'abord : ce sont eux qui visent cet espace, le catalogue en
+   * dur est le socle offert a tout le monde. Parmi eux, ceux crees pour cet
+   * espace nommement passent en tete.
+   */
+  const templates = computed<ViewTemplate[]>(() => {
+    const wanted = normalizePage(page());
+    const mine = (published.list.value ?? []).filter((item) => item.page === wanted);
+    return [
+      ...mine.filter((item) => item.forYou),
+      ...mine.filter((item) => !item.forYou),
+      ...viewTemplatesFor(page()),
+    ];
+  });
+
+  /**
+   * Ce que la pastille d'un critere affiche. Un critere sans valeur utilisable
+   * se dit, plutot que de se taire : un template peut porter une periode sans
+   * borne, et une pastille « Periode » vide laisserait croire a un bug.
+   */
+  function pillValue(item: ViewTemplateCriterion) {
+    const values = viewTemplateValues(item);
+    if (values.length) return values.join(", ");
+    if (item.filter === "Period") return lang.value === "en" ? "No period" : "Aucune période";
+    return lang.value === "en" ? "None" : "Aucune valeur";
+  }
+
+  /**
+   * Un template en carte, dans la forme de `RmSavedViewCard`. Expose : l'onglet
+   * « Admin templates » met en carte des templates qui ne sont pas offerts a
+   * l'espace du lecteur, donc absents de `templates`.
+   */
+  function cardOf(template: ViewTemplate) {
+    const criteria = template.criteria(context.value);
+    return {
+      id: template.id,
+      title: template.title[lang.value],
+      description: template.description[lang.value],
+      icon: template.icon,
+      tone: template.tone ?? "primary",
+      actionLabel: lang.value === "en" ? "Start" : "Démarrer",
+      forYou: template.forYou === true,
+      // Garder le template sans le demarrer : il fallait l'ouvrir, puis le
+      // nommer et l'enregistrer comme n'importe quelle selection, et rien ne
+      // disait que c'etait possible.
+      menu: [
+        {
+          key: "save-template",
+          label: lang.value === "en" ? "Add to my views" : "Ajouter à mes vues",
+          icon: "BookmarkSimple",
+        },
+      ],
+      config: [
+        {
+          icon: "Funnel",
+          key: `${lang.value === "en" ? "Filters" : "Filtres"} (${criteria.length})`,
+          pills: criteria.map((item) => ({
+            k: filterLabel(item.filter),
+            v: pillValue(item),
+          })),
+        },
+      ],
+    };
+  }
+
+  /** Les templates de la page en cartes. */
+  const cards = computed(() => templates.value.map(cardOf));
+
+  /**
+   * Demarre un template : ses filtres passent a l'ecran, rien n'est enregistre
+   * (la vue est temporaire, cf. `useViews.applyTemporary`).
+   *
+   * Un panier de produits du portail passe, lui, par l'URL : c'est le
+   * middleware `03.scope-from-query` qui expanse un code ATC en liste de
+   * marques et remplit les listes par source, ce que la page ne sait pas faire
+   * elle-meme.
+   */
+  function start(id: string | ViewTemplate) {
+    // Un template se passe aussi tel quel : ceux de l'onglet « Admin
+    // templates » ne sont pas forcement offerts a l'espace du lecteur.
+    const template =
+      typeof id === "string" ? templates.value.find((item) => item.id === id) : id;
+    if (!template) return;
+
+    const criteria = template.criteria(context.value);
+
+    if (template.deepLink) {
+      // La classe l'emporte sur la liste qu'elle avait resolue : les deux
+      // partiraient en `should` dans la requete du perimetre, donc en union,
+      // et la liste figee ramenerait les produits que la classe a depuis
+      // perdus. Un template dit une classe, pas un etat du referentiel.
+      const byClass = criteria.some((item) => SCOPE_CLASS_FILTERS.includes(item.filter));
+      const posed = byClass
+        ? criteria.filter((item) => item.filter !== "brands")
+        : criteria;
+
+      const query: Record<string, any> = { ...route.query };
+      VIEW_TEMPLATE_QUERY_RESET.forEach((key) => delete query[key]);
+      posed.forEach((item) => {
+        const key = VIEW_TEMPLATE_QUERY_KEYS[item.filter];
+        const values = viewTemplateValues(item);
+        // Un critere sans valeur ne pose rien : `?period=` serait lu comme une
+        // borne vide par la page, pas comme une absence de filtre.
+        if (key && values.length) query[key] = values.join(",");
+      });
+      // Le template se nomme dans l'URL : la vue temporaire que le middleware
+      // pose en le lisant porte son identifiant, et la pastille le nomme.
+      query[VIEW_TEMPLATE_QUERY_PARAM] = template.id;
+      // La vue nommee active cede la place avant la navigation : le middleware
+      // garde une vue enregistree de la page (`keepsNamedView`), et le
+      // template partait sous le nom de la vue de l'utilisateur, banniere
+      // « ecraser » comprise. Meme forme que la vue qu'il posera lui-meme.
+      views.scopes.value().setSelectedScope({
+        id: null,
+        title: "",
+        template: template.id,
+        page: route.path,
+        criteria: [],
+      });
+      navigateTo({ path: route.path, query });
+      return;
+    }
+
+    views.applyTemporary(criteria, template.title[lang.value], template.id);
+  }
+
+  /**
+   * Le titre d'un template par identifiant, sur toutes les pages : une vue
+   * demarree depuis un template sur le marche mensuel garde son nom sur le
+   * KPI, alors que l'identifiant porte la page de depart.
+   */
+  function titleOf(id: unknown): string | null {
+    const wanted = String(id ?? "");
+    const template =
+      templates.value.find((item) => item.id === wanted) ??
+      (published.list.value ?? []).find((item) => item.id === wanted) ??
+      viewTemplateById(wanted);
+    return template ? template.title[lang.value] : null;
+  }
+
+  /**
+   * Enregistre un template dans les vues du lecteur, sans l'ouvrir. Il garde
+   * son titre et sa description ; la vue est rangee sous la page courante,
+   * comme une vue composee ici.
+   *
+   * Un panier du portail est une classe : la vue enregistree porte la liste de
+   * marques qu'elle resout aujourd'hui (c'est ce qu'une vue du portail sait
+   * appliquer, cf. useDrugsViews) ET la classe, pour dire comment elle a ete
+   * composee. Meme resolution que le middleware du lien profond.
+   */
+  async function save(id: string) {
+    const template = templates.value.find((item) => item.id === id);
+    if (!template) return;
+
+    const page = route.path;
+    const criteria = template.criteria(context.value);
+    let stored: any[] = criteria.map((item) => ({
+      filter: item.filter,
+      page,
+      values: Array.isArray(item.values) ? item.values : [item.values],
+    }));
+
+    if (template.deepLink) {
+      const of = (filter: string) =>
+        stored.filter((item) => item.filter === filter).flatMap((item) => item.values as string[]);
+      // Un panier est une classe : la vue porte la liste de marques qu'elle
+      // resout aujourd'hui. La resolution est propre a l'app (son repertoire
+      // de marques), cf. contrat #oip-app/views.
+      const brands = await resolveTemplateBrands(
+        {
+          // `brand` (singulier) : exception ponctuelle d'un panier, a fondre
+          // dans la meme liste resolue que `brands`.
+          brands: [...of("brands"), ...of("brand")],
+          atc5: of("atc5"),
+          atc4: of("atc4"),
+          companies: of("company"),
+        },
+        `viewTemplateSave:${id}`,
+      );
+      stored = [
+        { filter: "brands", page, values: brands },
+        ...stored.filter((item) => item.filter !== "brands"),
+      ];
+    }
+
+    await views.scopes.value().createScope({
+      title: template.title[lang.value],
+      description: template.description[lang.value],
+      criteria: stored,
+      currentPage: page,
+    });
+  }
+
+  return { lang, templates, cards, cardOf, start, save, titleOf };
+}