@tekkare/romulus 0.1.243 → 0.1.244

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

@@ -0,0 +1,278 @@
+<!--
+  Etat vide d'une page d'analyse : aucune vue n'est active, donc aucun produit
+  n'est selectionne et il n'y a rien a interroger.
+
+  Le message seul renvoyait l'utilisateur vers le tiroir de selection, meme
+  quand il avait deja des vues gardees pour cette page : il devait les aller
+  chercher dans la tuile « Mes vues » du rail alors que l'ecran lui demandait
+  d'en composer une. Les vues applicables ici sont donc listees sous le
+  message, activables d'un clic (`RmSavedViewCard`, les memes cartes que le
+  panneau du rail).
+
+  Les templates Tekkare de la page viennent ensuite : un panier pret a
+  l'emploi depanne quand l'utilisateur n'a rien garde, mais ses propres vues
+  passent devant, comme dans le panneau du rail ou l'onglet « Mes vues » est le
+  premier. Leur mise en carte et leur demarrage viennent de
+  `useViewTemplates`.
+
+  Le composant lit la page declaree par `useViews` : c'est elle qui porte le
+  magasin de scopes de l'app affichee, pas ce composant.
+-->
+<script setup lang="ts">
+import { VIEW_BRAND_FILTERS } from "#oip-app/views";
+import { sameViewPage } from "../../utils/viewPages";
+
+const { locale } = useI18n();
+const route = useRoute();
+const views = useViews();
+
+const emit = defineEmits<{ create: [] }>();
+
+const fr = computed(() => locale.value !== "en");
+const source = computed(() => views.current.value);
+
+/** Page cote API : les vues y sont rangees, comme dans le panneau du rail. */
+const page = computed(() => (source.value?.page ?? route.path).replace(/\/$/, ""));
+
+/**
+ * Le magasin de scopes de la page affichee. Un appel par acces : ces
+ * composables creent leurs refs a chaque fois, donc rien ne se garde ici.
+ */
+const store = () => views.scopes.value();
+
+/**
+ * Chemins acceptes. Les vues des delivrances hospitalieres enregistrees par
+ * l'ancienne page de selection portent son chemin (`/doutpatient/drug/scope`)
+ * et non celui de l'analyse : sans les deux, elles disparaitraient de la liste
+ * (cf. le tiroir de selection, meme lecture).
+ */
+const pages = computed(() => [page.value, `${page.value}/scope`]);
+/** La vue vaut ici : meme page, meme famille (cf. viewPages), ou ancienne page de selection. */
+const forThisPage = (scope: any) =>
+  sameViewPage(scope.page, page.value) ||
+  pages.value.includes(String(scope.page).replace(/\/$/, ""));
+
+const { cards: templates, start, save: saveTemplate } = useViewTemplates(() => page.value);
+const filterLabel = useViewFilterLabels(() => source.value?.filterNamespace);
+
+/**
+ * Menu des cartes (renommer, alerte, export, partager...) : le meme que dans
+ * le panneau « Mes vues », sans devoir aller l'y chercher.
+ */
+const {
+  menuOf,
+  onAction,
+  rename,
+  sharing,
+  shareTarget,
+  shareMembers,
+  isSuperAdmin,
+  workspaces,
+  templateNote,
+  onShareSearch,
+  confirmShare,
+} = useViewCardActions(apply);
+
+function onTemplateAction(key: string, id: string) {
+  if (key === "save-template") void saveTemplate(id);
+}
+
+/** Les criteres qui portent des produits : cites en premier. */
+const PRODUCT_FILTERS = VIEW_BRAND_FILTERS;
+
+const dateFormat = computed(
+  () => new Intl.DateTimeFormat(locale.value === "en" ? "en-GB" : "fr-FR", { dateStyle: "medium" }),
+);
+
+/**
+ * Ce que porte la vue, valeurs comprises : les marques une a une, puis la
+ * classe ou le laboratoire qui l'ont composee. Meme lecture que les templates
+ * juste en dessous ; un nombre de produits ne disait pas lesquels.
+ */
+function shownCriteria(scope: any): any[] {
+  const criteria = parseViewCriteria(scope).filter(
+    (item: any) => item?.filter !== VIEW_PREFS_FILTER && viewFilledValues(item).length > 0,
+  );
+  return [
+    ...criteria.filter((item: any) => PRODUCT_FILTERS.includes(item?.filter)),
+    ...criteria.filter((item: any) => !PRODUCT_FILTERS.includes(item?.filter)),
+  ];
+}
+
+const savedViews = computed(() =>
+  store()
+    .scopeList.value.filter(forThisPage)
+    .map((scope: any) => {
+      const criteria = shownCriteria(scope);
+      const created = scope.createdAt ? new Date(scope.createdAt) : null;
+      return {
+        id: scope.id,
+        title: scope.title,
+        description: scope.description,
+        // Meme pastille pour toutes les vues gardees : elles n'ont pas de
+        // sujet declare, contrairement aux templates dont l'icone dit la
+        // classe traitee. Le signet reprend celle de l'etat vide au dessus, et
+        // le ton de marque les distingue des templates, chacun dans sa
+        // couleur.
+        icon: "BookmarkSimple",
+        tone: "primary",
+        isDefault: scope.isDefault === true,
+        menu: menuOf(scope),
+        renamable: scope.isOwner !== false,
+        starred: scope.starred === true,
+        // Les vues qu'on nous a partagees s'activent ici comme les autres : la
+        // carte dit seulement d'ou elles viennent, pour qu'on ne cherche pas
+        // qui a pose ces filtres.
+        sharedBy: scope.isOwner === false ? (scope.ownerName ?? undefined) : undefined,
+        config: criteria.length
+          ? [
+              {
+                icon: "Funnel",
+                key: `${fr.value ? "Filtres" : "Filters"} (${criteria.length})`,
+                pills: criteria.map((item: any) => ({
+                  k: filterLabel(item.filter),
+                  v: viewFilledValues(item).join(", "),
+                })),
+              },
+            ]
+          : [],
+        meta:
+          created && !Number.isNaN(created.getTime())
+            ? [
+                {
+                  icon: "Clock",
+                  label: (fr.value ? "Créée le " : "Created on ") + dateFormat.value.format(created),
+                },
+              ]
+            : [],
+      };
+    }),
+);
+
+/**
+ * Le « Ou » ne se dit que s'il y a bien une premiere liste au dessus : sans
+ * vue gardee, les templates ouvrent l'ecran et l'alternative n'existe pas.
+ */
+const templatesLabel = computed(() => {
+  if (savedViews.value.length)
+    return fr.value ? "Ou démarrer avec une vue prête à l'emploi" : "Or start from a ready-made view";
+  return fr.value ? "Démarrer avec une vue prête à l'emploi" : "Start from a ready-made view";
+});
+
+/**
+ * Active une vue : meme chemin que le panneau du rail (copie volontaire, les
+ * watchers de filtres suivent la reference de `selectedScope`).
+ *
+ * Le chemin de la vue est ramene a celui de la page : une vue venue de
+ * l'ancienne page de selection ne se dirait pas active ici, et la pastille
+ * resterait muette sur la vue qu'on vient d'appliquer.
+ */
+function apply(id: string) {
+  const scope = store().scopeList.value.find((item: any) => item.id === id);
+  if (!scope) return;
+  const applied = { ...scope, page: page.value };
+  store().setSelectedScope(applied);
+  views.applyPrefs(applied, source.value?.prefsScope);
+  source.value?.onApply?.(applied);
+}
+</script>
+
+<template>
+  <div class="vempty">
+    <RmEmptyState
+      icon="BookmarkSimple"
+      tone="primary"
+      framed
+      :title="fr ? 'Aucune vue active' : 'No active view'"
+      :text="fr
+        ? 'Une vue définit les produits de l’analyse (marque, molécule, classe ATC4 ou fabricant). Créez-en une pour commencer, vous l’enregistrerez si elle vous sert.'
+        : 'A view defines the products the analysis covers (brand, molecule, ATC4 class or company). Create one to start; save it if it proves useful.'"
+      :action-label="fr ? 'Créer une vue' : 'Create a view'"
+      action-icon="Plus"
+      @action="emit('create')"
+    />
+
+    <section v-if="savedViews.length" class="vempty_saved">
+      <p class="vempty_label">
+        {{ fr ? "Reprendre une vue enregistrée" : "Resume a saved view" }}
+      </p>
+      <div class="vempty_grid">
+        <RmSavedViewCard
+          v-for="view in savedViews"
+          :key="view.id"
+          :view="view"
+          :lang="fr ? 'fr' : 'en'"
+          @activate="apply"
+          @action="onAction"
+          @rename="rename"
+        />
+      </div>
+    </section>
+
+    <section v-if="templates.length" class="vempty_saved">
+      <p class="vempty_label">
+        {{ templatesLabel }}
+      </p>
+      <div class="vempty_grid">
+        <RmSavedViewCard
+          v-for="template in templates"
+          :key="template.id"
+          :view="template"
+          :lang="fr ? 'fr' : 'en'"
+          @activate="start"
+          @action="onTemplateAction"
+        />
+      </div>
+    </section>
+
+    <RmShareDialog
+      v-model="sharing"
+      :title="shareTarget?.title ?? ''"
+      :members="shareMembers"
+      :visibility="shareTarget?.visibility ?? 'private'"
+      :shared-with="shareTarget?.sharedWith ?? []"
+      :can-template="isSuperAdmin"
+      :is-template="shareTarget?.isTemplate ?? false"
+      :target-workspaces="shareTarget?.targetWorkspaces ?? []"
+      :workspaces="workspaces"
+      :template-note="templateNote"
+      :lang="fr ? 'fr' : 'en'"
+      @search="onShareSearch"
+      @save="confirmShare"
+    />
+  </div>
+</template>
+
+<style scoped>
+.vempty {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.vempty_saved {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Mosaique : une carte de vue ne porte qu'un nom, ses criteres et une date,
+   une pleine largeur par vue faisait defiler l'ecran pour rien. A 280px, un
+   titre long partageait sa ligne avec « Demarrer » sur trois ou quatre
+   lignes. */
+.vempty_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 12px;
+}
+
+.vempty_label {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-11);
+  font-weight: var(--weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+</style>