@tekkare/romulus 0.1.242 → 0.1.244

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

@@ -0,0 +1,165 @@
+<template>
+  <aside v-if="visible && video?.src" class="first-visit-video" aria-label="Tutoriel vidéo">
+    <div class="first-visit-video__head">
+      <div class="first-visit-video__heading">
+        <RmIcon name="PlayCircle" :size="18" />
+        <strong>{{ lang === "en" ? "Getting started" : "Bien démarrer" }}</strong>
+      </div>
+      <button
+        type="button"
+        class="first-visit-video__close"
+        :aria-label="lang === 'en' ? 'Close' : 'Fermer'"
+        @click="dismiss"
+      >
+        <RmIcon name="X" :size="16" />
+      </button>
+    </div>
+
+    <video
+      class="first-visit-video__player"
+      :src="video.src"
+      autoplay
+      controls
+      muted
+      playsinline
+      preload="metadata"
+    ></video>
+
+    <div class="first-visit-video__footer">
+      <span>{{ video.title }}</span>
+      <button type="button" class="first-visit-video__dismiss" @click="dismiss">
+        {{ lang === "en" ? "Got it" : "J’ai compris" }}
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+interface TutorialVideo {
+  id: number;
+  title: string;
+  description: string;
+  src: string;
+}
+
+const props = defineProps<{
+  video: TutorialVideo | null;
+  lang: "fr" | "en";
+}>();
+
+const STORAGE_KEY = "oip-first-visit-video-seen";
+const visible = ref(false);
+
+function hasSeenVideo() {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function dismiss() {
+  visible.value = false;
+  try {
+    localStorage.setItem(STORAGE_KEY, "1");
+  } catch {
+    // Le navigateur peut refuser le stockage, la fenêtre reste fermée pour la session.
+  }
+}
+
+watch(
+  () => props.video?.src,
+  (src) => {
+    if (src && !hasSeenVideo()) visible.value = true;
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+.first-visit-video {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 1100;
+  width: min(460px, calc(100vw - 32px));
+  overflow: hidden;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
+  background: var(--bg-surface);
+  box-shadow: 0 18px 48px rgb(15 23 42 / 24%);
+}
+
+.first-visit-video__head,
+.first-visit-video__footer {
+  align-items: center;
+  display: flex;
+  gap: var(--space-8);
+  justify-content: space-between;
+  padding: var(--space-12) var(--space-16);
+}
+
+.first-visit-video__head {
+  color: var(--color-secondary);
+}
+
+.first-visit-video__heading {
+  align-items: center;
+  display: flex;
+  gap: var(--space-8);
+}
+
+.first-visit-video__close {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.first-visit-video__close:hover {
+  color: var(--text-primary);
+}
+
+.first-visit-video__player {
+  background: var(--bg-surface-3);
+  display: block;
+  max-height: 290px;
+  width: 100%;
+}
+
+.first-visit-video__footer {
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+}
+
+.first-visit-video__footer > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.first-visit-video__dismiss {
+  background: transparent;
+  border: 0;
+  color: var(--color-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  font: inherit;
+  font-weight: var(--weight-semibold);
+}
+
+.first-visit-video__dismiss:hover {
+  color: var(--color-primary);
+}
+
+@media (max-width: 600px) {
+  .first-visit-video {
+    bottom: 16px;
+    right: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,261 @@
+<!--
+  Onglet « Admin templates » du groupe Vues et alertes (superadmins seuls).
+
+  L'inventaire des templates publies sur la page, quel que soit l'espace
+  vise : qui l'a publie, a qui il est offert, quand il a bouge. Ils vivaient
+  dans « Mes vues » de l'administrateur qui les avait publies, melanges a ses
+  vues de travail, et ceux de ses collegues n'apparaissaient nulle part.
+
+  Tout template se gere ici, quel que soit qui l'a publie : changer les
+  espaces qui le recoivent, ou le retirer. Retirer ne supprime rien : la vue
+  revient dans « Mes vues » de son proprietaire. L'acces d'un template ne
+  passe que par ses espaces cibles (l'API ignore le partage nominatif sur un
+  template), d'ou un dialogue sans liste de personnes.
+-->
+<script setup lang="ts">
+import { useOipApi } from "#oip-app/api";
+import { oipSnackbar } from "#oip-app/ui";
+import { toTemplate } from "../../../composables/useViewTemplates";
+import { sameViewPage } from "../../../utils/viewPages";
+
+const { locale } = useI18n();
+const route = useRoute();
+const views = useViews();
+const elysia = useOipApi();
+const { workspaces, ensureWorkspaces } = useAdminAccess();
+
+const page = computed(() => views.current.value?.page ?? route.path);
+const { cardOf, start } = useViewTemplates(() => page.value);
+
+type Row = Awaited<ReturnType<typeof elysia.admin.viewTemplates>>["data"][number];
+
+const rows = ref<Row[]>([]);
+const loading = ref(false);
+
+/**
+ * Tout l'inventaire d'un coup, trie par page ici : une vue est rangee sous
+ * `route.path`, donc sous `/en/...` pour qui a publie en anglais (cf.
+ * `sameViewPage`). Recharge a chaque ouverture : un partage modifie depuis
+ * « Mes vues » doit s'y lire au retour.
+ */
+async function load() {
+  loading.value = true;
+  try {
+    const [res] = await Promise.all([elysia.admin.viewTemplates(), ensureWorkspaces()]);
+    rows.value = res?.data ?? [];
+  } catch (error) {
+    console.error("[adminTemplates] Inventaire indisponible:", error);
+    rows.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+const pageRows = computed(() => rows.value.filter((row) => sameViewPage(row.page, page.value)));
+
+const en = computed(() => locale.value === "en");
+
+const dateFormat = computed(
+  () => new Intl.DateTimeFormat(en.value ? "en-GB" : "fr-FR", { dateStyle: "medium" }),
+);
+
+function workspaceName(id: string) {
+  return workspaces.value.find((ws) => ws.workspaceId === id)?.name ?? id;
+}
+
+/** Qui a acces : tous les espaces quand aucune cible n'est posee. */
+function accessRow(row: Row) {
+  const targets = row.targetWorkspaces ?? [];
+  if (!targets.length) {
+    return {
+      icon: "Globe",
+      key: en.value ? "Access" : "Accès",
+      value: en.value ? "Every workspace" : "Tous les espaces",
+    };
+  }
+  return {
+    icon: "Buildings",
+    key: `${en.value ? "Access" : "Accès"} (${targets.length})`,
+    pills: targets.map((id) => ({ k: en.value ? "Workspace" : "Espace", v: workspaceName(id) })),
+  };
+}
+
+function metaOf(row: Row) {
+  const meta = [
+    {
+      icon: "User",
+      label: row.isOwner
+        ? en.value
+          ? "Published by you"
+          : "Publié par vous"
+        : `${en.value ? "Published by" : "Publié par"} ${row.ownerName ?? "?"}`,
+    },
+  ];
+  const date = new Date(row.updatedAt);
+  if (!Number.isNaN(date.getTime())) {
+    meta.push({
+      icon: "Clock",
+      label: `${en.value ? "Updated on" : "Modifié le"} ${dateFormat.value.format(date)}`,
+    });
+  }
+  return meta;
+}
+
+function menuOf(row: Row) {
+  return [
+    { key: "share", label: en.value ? "Edit access" : "Modifier l'accès", icon: "Buildings" },
+    {
+      key: "withdraw",
+      label: en.value ? "Remove from templates" : "Retirer des templates",
+      icon: "XCircle",
+      danger: true,
+      confirm: true,
+      confirmText: en.value
+        ? `« ${row.title} » will no longer be offered to any workspace. The view stays in its owner's views.`
+        : `« ${row.title} » ne sera plus proposé à aucun espace. La vue reste dans les vues de son propriétaire.`,
+    },
+  ];
+}
+
+const cards = computed(() =>
+  pageRows.value.map((row) => {
+    const card = cardOf(toTemplate(row));
+    return {
+      ...card,
+      id: row.id,
+      menu: menuOf(row),
+      config: [accessRow(row), ...card.config],
+      meta: metaOf(row),
+    };
+  }),
+);
+
+function activate(id: string) {
+  const row = rows.value.find((item) => item.id === id);
+  if (row) start(toTemplate(row));
+}
+
+/** Un mot dans la barre du bas, comme le panneau « Mes vues ». */
+function notify(text: string) {
+  oipSnackbar([
+    { attribute: "isVisible", value: true },
+    { attribute: "text", value: text },
+    { attribute: "loader", value: false },
+    { attribute: "hasTimeOut", value: true },
+  ]);
+}
+
+async function update(id: string, body: { isTemplate?: boolean; targetWorkspaces?: string[] }) {
+  try {
+    await elysia.admin.updateViewTemplate(id, body);
+    return true;
+  } catch (error) {
+    console.error("[adminTemplates] Mise a jour refusee:", error);
+    notify(en.value ? "The template could not be updated." : "Le template n'a pas pu être modifié.");
+    return false;
+  } finally {
+    await load();
+  }
+}
+
+/** Template dont on regle l'acces, ou null. */
+const editingId = ref<string | null>(null);
+const editing = computed(() => rows.value.find((row) => row.id === editingId.value) ?? null);
+const dialogOpen = computed({
+  get: () => editing.value !== null,
+  set: (open: boolean) => {
+    if (!open) editingId.value = null;
+  },
+});
+
+/**
+ * Le dialogue rend toute la portee ; seuls le drapeau et les espaces comptent
+ * ici. Choisir autre chose que « template » revient a le retirer : la
+ * visibilite et les destinataires restent l'affaire du proprietaire.
+ */
+async function confirmAccess(share: { isTemplate?: boolean; targetWorkspaces?: string[] }) {
+  const row = editing.value;
+  editingId.value = null;
+  if (!row) return;
+  if (share.isTemplate === false) {
+    if (await update(row.id, { isTemplate: false })) {
+      notify(en.value ? "Template removed." : "Template retiré.");
+    }
+    return;
+  }
+  const targets = share.targetWorkspaces ?? [];
+  if (await update(row.id, { targetWorkspaces: targets })) {
+    notify(
+      targets.length
+        ? en.value
+          ? `Template offered to ${targets.length} workspace${targets.length > 1 ? "s" : ""}.`
+          : `Template proposé à ${targets.length} espace${targets.length > 1 ? "s" : ""}.`
+        : en.value
+          ? "Template offered to every workspace."
+          : "Template proposé à tous les espaces.",
+    );
+  }
+}
+
+async function onAction(key: string, id: string) {
+  if (key === "share") editingId.value = id;
+  else if (key === "withdraw") {
+    if (await update(id, { isTemplate: false })) {
+      notify(en.value ? "Template removed." : "Template retiré.");
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="full_width">
+  <RmSavedViews
+    class="full_width"
+    :views="cards"
+    :menu="[]"
+    :renamable="false"
+    :starrable="false"
+    :loading="loading"
+    hide-tip
+    save-label=""
+    reset-label=""
+    dirty-title=""
+    :description="
+      en
+        ? 'Every template published on this page, whatever workspace it is offered to: who published it and who can see it.'
+        : 'Tous les templates publiés sur cette page, quel que soit l\'espace visé : qui l\'a publié et qui y a accès.'
+    "
+    :empty-title="en ? 'No template on this page' : 'Aucun template sur cette page'"
+    :empty-text="
+      en
+        ? 'Publish a view as a template from its Share menu in My views.'
+        : 'Publiez une vue comme template depuis son menu Partager, dans Mes vues.'
+    "
+    empty-action-label=""
+    :lang="en ? 'en' : 'fr'"
+    @activate="activate"
+    @action="onAction"
+  />
+
+  <RmShareDialog
+    v-model="dialogOpen"
+    :title="editing?.title ?? ''"
+    :members="[]"
+    can-template
+    is-template
+    :target-workspaces="editing?.targetWorkspaces ?? []"
+    :workspaces="workspaces"
+    :lang="en ? 'en' : 'fr'"
+    @save="confirmAccess"
+  />
+  </div>
+</template>
+
+<style scoped>
+.full_width {
+  align-self: stretch;
+  width: 100%;
+}
+</style>