@tekkare/romulus 0.1.243 → 0.1.244

package/layer/app/components/layout/viewPill.vue

@@ -0,0 +1,550 @@
+<!--
+  Pastille de vue du cadre, posee dans la barre de filtres de la page.
+
+  Elle ne sort que si la page a declare sa vue (cf. useViews) : ailleurs, il n'y
+  aurait rien a nommer. Elle vit dans le cadre et non dans les pages parce que
+  toutes les pages la portent : la barre de filtres reserve un emplacement, on
+  y teleporte la pastille.
+
+  Elle donne les gestes courants sans ouvrir le rail : rattraper des
+  modifications, basculer sur une autre vue de la page, et « Modifier ma vue »,
+  qui ouvre le panneau « Mes vues » en mode modification, et « Nouvelle vue »,
+  qui repart d'un ecran vierge. Le panneau garde la
+  gestion complete, ce qui evite deux ecrans qui font la meme chose.
+-->
+<template>
+  <Teleport v-if="mounted && has" to="#rm_fbar_views" defer>
+    <RmViewPill
+      :view-name="viewName"
+      :views="views"
+      :views-label="viewsLabel"
+      :dirty="dirty"
+      :temporary="!namedActive?.id"
+      :actions="actions"
+      :lang="locale === 'en' ? 'en' : 'fr'"
+      @select="apply"
+      @save="saveCurrent"
+      @action="run"
+    />
+  </Teleport>
+
+  <!-- Nommer une vue est une decision : elle s'arrete sur une modale, avec le
+       recapitulatif de ce qu'on enregistre. Le panneau du rail garde son
+       formulaire en place, pour la gestion. -->
+  <RmModal
+    v-model="saving"
+    size="md"
+    mode="free"
+    labelled-by="oip_save_view_title"
+    :close-label="fr ? 'Fermer' : 'Close'"
+  >
+    <template #header>
+      <p id="oip_save_view_title" class="sv_title">
+        <RmIcon name="BookmarkSimple" :size="20" class="sv_title_icon" />
+        {{ fr ? "Sauvegarder la vue" : "Save the view" }}
+      </p>
+    </template>
+
+    <form class="sv_form" @submit.prevent="confirmSave">
+      <label class="sv_field">
+        <span class="sv_label">{{ fr ? "Nom de la vue" : "View name" }}</span>
+        <input
+          ref="nameInput"
+          v-model="draftTitle"
+          class="sv_input"
+          :class="{ sv_input_error: titleMissing }"
+          type="text"
+          maxlength="60"
+          :placeholder="fr ? 'Ex. Suivi mensuel oncologie' : 'e.g. Monthly oncology monitoring'"
+        >
+        <span v-if="titleMissing" class="sv_error">
+          {{ fr ? "Un nom est nécessaire." : "A name is required." }}
+        </span>
+        <span v-else class="sv_hint">
+          {{
+            fr
+              ? "Choisissez un nom descriptif pour la retrouver facilement."
+              : "Pick a descriptive name so you can find it again."
+          }}
+        </span>
+      </label>
+
+      <label class="sv_field">
+        <span class="sv_label">
+          {{ fr ? "Description" : "Description" }}
+          <span class="sv_optional">{{ fr ? "(optionnel)" : "(optional)" }}</span>
+        </span>
+        <textarea
+          v-model="draftDescription"
+          class="sv_input"
+          rows="3"
+          maxlength="240"
+          :placeholder="fr ? 'Pourquoi cette vue ? Quels filtres ?' : 'Why this view? Which filters?'"
+        />
+      </label>
+
+      <!-- Ce que la vue emporte, nomme : sans ce rappel, on enregistre a
+           l'aveugle et on decouvre le contenu en la rejouant. -->
+      <div class="sv_recap">
+        <span class="sv_recap_label">{{ fr ? "Configuration capturée :" : "Captured setup:" }}</span>
+        <span v-for="chip in recap" :key="chip.k" class="sv_chip">
+          <span class="sv_chip_k">{{ chip.k }}</span>
+          <span class="sv_chip_v">{{ chip.v }}</span>
+        </span>
+        <span v-if="recap.length === 0" class="sv_recap_empty">
+          {{ fr ? "aucun filtre posé" : "no filter set" }}
+        </span>
+      </div>
+
+      <label class="sv_check">
+        <input v-model="draftDefault" type="checkbox">
+        <span>
+          <RmIcon name="PushPin" weight="fill" :size="14" class="sv_check_icon" />
+          {{ fr ? "Définir comme vue par défaut" : "Set as default view" }}
+          <span class="sv_check_hint">
+            {{ fr ? "(s'activera à chaque ouverture)" : "(applied on every visit)" }}
+          </span>
+        </span>
+      </label>
+    </form>
+
+    <template #footer>
+      <div class="sv_actions">
+        <RmButton variant="secondary" :disabled="savingBusy" @click="saving = false">
+          {{ fr ? "Annuler" : "Cancel" }}
+        </RmButton>
+        <RmButton
+          variant="primary"
+          prefix-icon="BookmarkSimple"
+          :loading="savingBusy"
+          @click="confirmSave"
+        >
+          {{ fr ? "Sauvegarder" : "Save" }}
+        </RmButton>
+      </div>
+    </template>
+  </RmModal>
+</template>
+
+<script setup lang="ts">
+import { sameViewPage } from "../../utils/viewPages";
+const emit = defineEmits<{
+  /** Ouvrir la tuile « Mes vues » du rail. */
+  openViews: [];
+}>();
+
+const { locale } = useI18n();
+const route = useRoute();
+const viewsApi = useViews();
+const brandSync = useAlertBrandSync();
+const fr = computed(() => locale.value === "fr");
+
+/**
+ * L'emplacement de la pastille est un noeud de la barre de filtres, donc du
+ * rendu de la page : on ne peut y teleporter qu'apres le premier montage, et
+ * seulement quand la page en a un.
+ */
+const mounted = ref(false);
+const hasTarget = ref(false);
+
+function findTarget() {
+  hasTarget.value =
+    typeof document !== "undefined" && document.getElementById("rm_fbar_views") !== null;
+}
+
+/**
+ * La barre de filtres ne parait qu'avec la donnee de la page : son emplacement
+ * n'existe pas encore au montage du cadre. On le cherche a l'arrivee, puis on
+ * suit le contenu de la page plutot que de deviner un delai.
+ */
+let observer: MutationObserver | null = null;
+
+onMounted(() => {
+  mounted.value = true;
+  nextTick(findTarget);
+  if (typeof MutationObserver === "undefined") return;
+  observer = new MutationObserver(findTarget);
+  observer.observe(document.body, { childList: true, subtree: true });
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  observer = null;
+});
+
+watch(() => route.fullPath, () => nextTick(findTarget));
+
+const source = computed(() => viewsApi.current.value);
+const has = computed(() => viewsApi.has.value && hasTarget.value);
+const store = () => viewsApi.scopes.value();
+
+// La vue active de cette page, pas la selection de l'app : une vue = une page
+// (cf. `active` dans useViews).
+const active = computed(() => viewsApi.active.value);
+const dirty = computed(() => viewsApi.dirty.value);
+const templates = useViewTemplates(() => source.value?.page ?? route.path);
+
+/** Les vues de cette page et des pages qui partagent son périmètre. */
+const pageViews = computed(() =>
+  store()
+    .scopeList.value.filter((scope: any) => sameViewPage(scope.page, source.value?.page ?? route.path)),
+);
+
+/**
+ * Quand une navigation recrée le scope sélectionné sans son id, retrouver la
+ * vue sauvegardée par ses critères permet de conserver son nom dans la pill.
+ */
+const namedActive = computed(() => {
+  const scope = active.value;
+  if (!scope) return null;
+  if (!isTemporaryView(scope)) return scope;
+
+  const signature = viewSignature(parseViewCriteria(scope));
+  if (!signature) return null;
+  return (
+    pageViews.value.find(
+      (saved: any) => viewSignature(parseViewCriteria(saved)) === signature,
+    ) ?? null
+  );
+});
+
+/**
+ * Nom affiche. Une vue qui n'est pas enregistree n'a pas de nom a porter (cf.
+ * `isTemporaryView`) : elle se dit temporaire plutot que de laisser la
+ * pastille vide ou de montrer le marqueur « Custom » de l'API.
+ */
+const viewName = computed(() => {
+  const scope = active.value;
+  if (!scope) return null;
+  if (namedActive.value?.title && namedActive.value.title !== "Custom") {
+    return String(namedActive.value.title);
+  }
+  // Une vue temporaire venue d'un template Tekkare porte son nom : « Vue
+  // temporaire » ne disait pas d'ou sortait la selection affichee.
+  const templateTitle = scope.template ? templates.titleOf(scope.template) : null;
+  if (templateTitle) {
+    return fr.value ? `Template Tekkare : ${templateTitle}` : `Tekkare template: ${templateTitle}`;
+  }
+  return fr.value ? "Vue temporaire" : "Temporary view";
+});
+
+/**
+ * Les autres vues de la page, favorites d'abord : la pastille sert a basculer.
+ * La vue affichee n'y figure pas, son nom est deja sur la pastille.
+ */
+const views = computed(() =>
+  pageViews.value
+    .filter((scope: any) => scope.id !== namedActive.value?.id)
+    .sort((a: any, b: any) => Number(b.starred === true) - Number(a.starred === true))
+    .slice(0, 10)
+    .map((scope: any) => ({ id: String(scope.id), title: String(scope.title) })),
+);
+const viewsLabel = computed(() => (fr.value ? "Autres vues" : "Other views"));
+
+/**
+ * Deux gestes sous la liste. « Nouvelle vue » repart d'un ecran vierge. Tout
+ * ce qu'on fait de la vue affichee (renommer, decrire, changer son contenu) se
+ * fait dans le mode modification du panneau « Mes vues ». Une vue temporaire
+ * ou recue y ouvre une creation.
+ */
+const actions = computed(() => [
+  {
+    key: "new",
+    label: fr.value ? "Nouvelle vue" : "New view",
+    icon: "Plus",
+  },
+  {
+    key: "edit",
+    label: fr.value ? "Modifier ma vue" : "Edit my view",
+    icon: "PencilSimple",
+  },
+]);
+
+function apply(id: string) {
+  const scope = pageViews.value.find((item: any) => String(item.id) === id);
+  if (!scope) return;
+  // Copie volontaire : les filtres se reappliquent sur un changement de
+  // reference de `selectedScope`, cf. le panneau du rail.
+  store().setSelectedScope({ ...scope });
+  viewsApi.applyPrefs(scope, source.value?.prefsScope);
+  source.value?.onApply?.(scope);
+}
+
+/**
+ * Ecrit l'ecran courant dans la vue active.
+ *
+ * Sans vue active il n'y a rien a ecrire, mais il y a bien quelque chose a
+ * enregistrer : la pastille pulse desormais aussi dans ce cas (cf. `dirty`
+ * dans useViews), et son bouton ouvrait alors une action sans effet. Il ouvre
+ * la modale de creation, qui est le geste que la situation demande.
+ */
+async function saveCurrent() {
+  const scope = active.value;
+  // Une vue partagee par quelqu'un d'autre est en lecture seule : ecrire
+  // l'ecran dedans reecrirait la vue d'un collegue. Le geste devient donc une
+  // creation, comme quand aucune vue n'est active.
+  if (!scope?.id || scope.isOwner === false) {
+    openSave();
+    return;
+  }
+  const criteria = viewsApi.criteriaOf();
+  await store().updateScope({
+    id: scope.id,
+    title: scope.title,
+    description: scope.description,
+    criteria,
+    currentPage: scope.page,
+  });
+  apply(String(scope.id));
+  // Meme demande que depuis le panneau « Mes vues » : l'alerte de marque de
+  // cette vue ne suit pas ses produits toute seule.
+  brandSync.ask(String(scope.id), viewBrandsFromCriteria(criteria));
+}
+
+const editing = useViewEditing();
+
+function run(key: string) {
+  if (key === "new") {
+    startNew();
+    return;
+  }
+  if (key !== "edit") return;
+  const scope = namedActive.value;
+  editing.value = { id: scope?.id && scope.isOwner !== false ? String(scope.id) : null };
+  emit("openViews");
+}
+
+/**
+ * Repart d'un ecran vierge : plus de vue, filtres et perimetre a leur defaut
+ * (cf. `resetAll`). Sur une page a selection de produits, la vue se compose
+ * dans son tiroir : on l'ouvre, sinon l'ecran reste vide sans dire quoi faire.
+ */
+function startNew() {
+  const page = source.value;
+  viewsApi.resetAll();
+  page?.onEdit?.();
+}
+
+// ------------------------------------------------------ nouvelle vue (modale)
+
+const saving = ref(false);
+const savingBusy = ref(false);
+const draftTitle = ref("");
+const draftDescription = ref("");
+const draftDefault = ref(false);
+const titleMissing = ref(false);
+const nameInput = ref<HTMLInputElement | null>(null);
+
+/** Nom propose : date du jour, deja selectionne pour etre remplace d'un mot. */
+const suggestedTitle = computed(() => {
+  const date = new Intl.DateTimeFormat(fr.value ? "fr-FR" : "en-GB", {
+    day: "numeric",
+    month: "short",
+  }).format(new Date());
+  return fr.value ? `Vue du ${date}` : `View of ${date}`;
+});
+
+const filterLabel = useViewFilterLabels(() => source.value?.filterNamespace);
+
+/**
+ * Recapitulatif de ce que la vue emporte : un jeton par filtre pose, avec le
+ * nombre de valeurs. Les filtres vides n'y figurent pas, comme ils ne partent
+ * pas dans la vue.
+ */
+const recap = computed(() =>
+  viewsApi
+    .criteriaOf()
+    .map((item: any) => ({ k: filterLabel(item.filter), v: viewFilledValues(item).length }))
+    .filter((chip: any) => chip.v > 0)
+    .map((chip: any) => ({ k: chip.k, v: String(chip.v) })),
+);
+
+function openSave() {
+  draftTitle.value = suggestedTitle.value;
+  draftDescription.value = "";
+  draftDefault.value = false;
+  titleMissing.value = false;
+  saving.value = true;
+  nextTick(() => nameInput.value?.select());
+}
+
+async function confirmSave() {
+  const title = draftTitle.value.trim();
+  if (!title) {
+    titleMissing.value = true;
+    return;
+  }
+  const page = source.value?.page ?? route.path;
+  savingBusy.value = true;
+  // Les identifiants d'avant : la creation ne rend pas la vue, elle recharge
+  // la liste. La chercher par titre appliquait une homonyme plus ancienne.
+  const before = new Set(store().scopeList.value.map((scope: any) => scope.id));
+  try {
+    await store().createScope({
+      title,
+      description: draftDescription.value.trim(),
+      criteria: viewsApi.criteriaOf(),
+      currentPage: page,
+    });
+  } finally {
+    savingBusy.value = false;
+  }
+
+  // La vue tout juste creee devient la vue active : c'est ce qui est a l'ecran.
+  const created = store()
+    .scopeList.value.filter((scope: any) => sameViewPage(scope.page, page))
+    .find((scope: any) => !before.has(scope.id));
+
+  saving.value = false;
+  if (!created) return;
+  if (draftDefault.value) await store().setDefault(created.id, true);
+  apply(String(created.id));
+}
+</script>
+
+<style scoped>
+.sv_title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.sv_title_icon {
+  color: var(--color-secondary);
+}
+
+.sv_form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sv_field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sv_label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.sv_optional {
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+.sv_input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 9px 12px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  resize: vertical;
+}
+
+.sv_input:focus {
+  outline: none;
+  border-color: var(--color-healthcare);
+  box-shadow: 0 0 0 3px var(--bg-hover);
+}
+
+.sv_input_error {
+  border-color: var(--color-danger);
+}
+
+.sv_hint,
+.sv_error {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.sv_error {
+  color: var(--color-danger);
+}
+
+/* Recapitulatif : des jetons en lecture seule, pas des filtres cliquables. */
+.sv_recap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background: var(--bg-surface-2);
+  font-size: 12px;
+}
+
+.sv_recap_label {
+  color: var(--text-muted);
+}
+
+.sv_recap_empty {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.sv_chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-pill);
+  background: var(--bg-surface);
+}
+
+.sv_chip_k {
+  color: var(--text-muted);
+}
+
+.sv_chip_v {
+  font-weight: 600;
+  color: var(--color-secondary);
+}
+
+.sv_check {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-hover);
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.sv_check input {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--color-secondary);
+  cursor: pointer;
+}
+
+.sv_check_icon {
+  color: var(--color-secondary);
+  vertical-align: -2px;
+}
+
+.sv_check_hint {
+  color: var(--text-muted);
+}
+
+.sv_actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>

package/layer/app/composables/useAdminAccess.ts

@@ -0,0 +1,86 @@
+import { useOipApi } from "#oip-app/api";
+/**
+ * useAdminAccess - a-t-on le droit de publier un template, et pour qui.
+ *
+ * Deux choses distinctes, souvent confondues :
+ * - `isPlatformAdmin`, porte par `/me/summary`, vaut pour toute adresse
+ *   @tekkare.com : il ouvre les produits, pas l'administration ;
+ * - `isSuperAdmin`, rendu par `/superadmin/me`, est attribue a la main. C'est
+ *   lui qui garde la console d'OIP 7, donc aussi `/superadmin/workspaces`.
+ *
+ * Publier un template met une vue devant des espaces clients : c'est le
+ * second portillon, le meme que la console. Rien n'est demande au chargement
+ * de la page : `ensureLoaded()` n'est appele qu'a l'ouverture du dialogue de
+ * partage, sans quoi tout le monde paierait un aller-retour pour une option
+ * que presque personne ne voit.
+ *
+ * Meme forme que le composable homonyme d'OIP 7 : un `useState` partage, une
+ * seule requete par session.
+ */
+export interface AdminWorkspace {
+  workspaceId: string;
+  name: string;
+  tier: string;
+}
+
+export const useAdminAccess = () => {
+  const isSuperAdmin = useState<boolean>("admin:isSuperAdmin", () => false);
+  const loaded = useState<boolean>("admin:loaded", () => false);
+  const workspaces = useState<AdminWorkspace[]>("admin:workspaces", () => []);
+  const workspacesLoaded = useState<boolean>("admin:workspacesLoaded", () => false);
+  const elysiaApi = useOipApi();
+  const { status } = useAuth();
+
+  async function ensureLoaded(): Promise<boolean> {
+    if (loaded.value) return isSuperAdmin.value;
+    if (status.value !== "authenticated") return false;
+    try {
+      const me = await elysiaApi.admin.me();
+      isSuperAdmin.value = !!me?.isSuperAdmin;
+    } catch {
+      isSuperAdmin.value = false;
+    } finally {
+      loaded.value = true;
+    }
+    return isSuperAdmin.value;
+  }
+
+  /**
+   * Tous les espaces, pour le selecteur de cibles d'un template.
+   *
+   * La route est paginee et rend bien plus que des noms (licences, membres,
+   * comptes) : on la deroule une fois, on ne garde que le nom, et on ecarte
+   * les espaces personnels — offrir un template a l'espace prive de
+   * quelqu'un n'a pas de sens. La recherche se fait ensuite dans le
+   * selecteur, sur la liste en memoire, comme pour les membres.
+   */
+  async function ensureWorkspaces(): Promise<AdminWorkspace[]> {
+    if (workspacesLoaded.value) return workspaces.value;
+    if (!(await ensureLoaded())) return [];
+
+    try {
+      const first = await elysiaApi.admin.workspaces({ page: 1, limit: 100 });
+      const pages = first?.pagination?.totalPages ?? 1;
+      const rest = await Promise.all(
+        Array.from({ length: Math.max(0, pages - 1) }, (_, i) =>
+          elysiaApi.admin.workspaces({ page: i + 2, limit: 100 }),
+        ),
+      );
+
+      workspaces.value = [first, ...rest]
+        .flatMap((res) => res?.workspaces ?? [])
+        .filter((ws) => !ws.isPersonal)
+        .map((ws) => ({ workspaceId: ws.workspaceId, name: ws.name, tier: ws.tier }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+    } catch (err) {
+      console.error("[useAdminAccess] Impossible de lister les espaces:", err);
+      workspaces.value = [];
+    } finally {
+      workspacesLoaded.value = true;
+    }
+
+    return workspaces.value;
+  }
+
+  return { isSuperAdmin, workspaces, ensureLoaded, ensureWorkspaces };
+};