@tekkare/romulus 0.1.241 → 0.1.243

package/layer/app/components/panels/OipPanelMetadata.vue

@@ -0,0 +1,388 @@
+<!--
+  Le volet « Métadonnées » du rail : ce que Directus sait de cette app.
+
+  La fiche `OipApplication` (nom, description, statut, URLs, catégories) et
+  ses `OipSubject`, un par écran du portail. C'est le référentiel que lisent
+  les notes, les favoris et le portail OIP 7 : le relire depuis l'app évite
+  d'ouvrir le CMS pour vérifier qu'un écran y est bien déclaré.
+
+  Réservé aux superadmins, comme la correction : la tuile n'est posée par le
+  cadre que pour eux, et la route serveur revalide le droit.
+
+  Seul le sujet de l'écran ouvert est affiché : on ouvre le volet pour
+  vérifier la page qu'on a sous les yeux.
+-->
+<template>
+  <div class="toolbar_tab_container meta_panel">
+    <div v-if="pending" class="meta_loading">
+      <RmSkeleton v-for="i in 3" :key="i" width="100%" :height="72" radius="8px" />
+    </div>
+
+    <p v-else-if="error" class="meta_error">
+      {{ isFr ? "Métadonnées illisibles : " : "Could not read metadata: " }}{{ errorMessage }}
+    </p>
+
+    <template v-else-if="data">
+      <section class="meta_section">
+        <p class="meta_section_title">Application</p>
+
+        <article v-if="data.application" class="meta_card meta_card--app">
+          <div class="meta_card_head">
+            <div class="meta_card_titles">
+              <h3 class="meta_card_title">{{ text(data.application).name || data.application.prod_url }}</h3>
+              <RmBadge :variant="statusVariant(data.application.status)">
+                {{ statusLabel(data.application.status) }}
+              </RmBadge>
+            </div>
+            <button
+              type="button"
+              class="meta_edit_btn"
+              :aria-label="isFr ? 'Modifier' : 'Edit'"
+              :title="isFr ? 'Modifier' : 'Edit'"
+              @click="edit('application', data.application)"
+            >
+              <RmIcon name="PencilSimple" :size="14" />
+            </button>
+          </div>
+
+          <div
+            v-if="text(data.application).description"
+            class="meta_card_description"
+            v-html="text(data.application).description"
+          />
+
+          <dl class="meta_facts">
+            <dt>Prod</dt>
+            <dd><a :href="data.application.prod_url" target="_blank" rel="noopener">{{ host(data.application.prod_url) }}</a></dd>
+            <dt>Staging</dt>
+            <dd>
+              <a v-if="data.application.staging_url" :href="data.application.staging_url" target="_blank" rel="noopener">{{ host(data.application.staging_url) }}</a>
+              <span v-else class="meta_empty">{{ isFr ? "non renseigné" : "not set" }}</span>
+            </dd>
+            <dt>GitHub</dt>
+            <dd>
+              <a v-if="data.application.github_front_url" :href="data.application.github_front_url" target="_blank" rel="noopener">{{ repo(data.application.github_front_url) }}</a>
+              <span v-else class="meta_empty">{{ isFr ? "non renseigné" : "not set" }}</span>
+            </dd>
+            <dt>{{ isFr ? "Catégories" : "Categories" }}</dt>
+            <dd>
+              <span v-if="data.application.categories.length" class="meta_tags">
+                <RmTag v-for="c in data.application.categories" :key="c">{{ c }}</RmTag>
+              </span>
+              <span v-else class="meta_empty">{{ isFr ? "aucune" : "none" }}</span>
+            </dd>
+            <dt>{{ isFr ? "Langues" : "Languages" }}</dt>
+            <dd>{{ langs(data.application) }}</dd>
+            <dt>{{ isFr ? "Mis à jour" : "Updated" }}</dt>
+            <dd>{{ day(data.application.date_updated) }}</dd>
+          </dl>
+        </article>
+
+        <p v-else class="meta_empty">
+          {{ isFr ? "Aucune fiche OipApplication ne porte l'URL de cette app." : "No OipApplication record carries this app's URL." }}
+        </p>
+      </section>
+
+      <section class="meta_section">
+        <p class="meta_section_title">{{ isFr ? "Écran ouvert" : "Current screen" }}</p>
+
+        <p v-if="!currentSubject" class="meta_empty">
+          {{ isFr ? "Aucun sujet déclaré pour cet écran." : "No subject declared for this screen." }}
+        </p>
+
+        <article v-for="s in currentSubject ? [currentSubject] : []" :key="s.id" class="meta_card">
+          <div class="meta_card_head">
+            <div class="meta_card_titles">
+              <h3 class="meta_card_title">{{ text(s).name || s.relative_path }}</h3>
+              <code class="meta_path">{{ s.relative_path }}</code>
+              <div class="meta_card_badges">
+                <RmBadge :variant="statusVariant(s.status)">{{ statusLabel(s.status) }}</RmBadge>
+                <RmBadge v-if="s.is_specialized_report" variant="info">
+                  {{ isFr ? "Rapport spécialisé" : "Specialized report" }}
+                </RmBadge>
+                <span class="meta_langs">{{ langs(s) }}</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="meta_edit_btn"
+              :aria-label="isFr ? 'Modifier' : 'Edit'"
+              :title="isFr ? 'Modifier' : 'Edit'"
+              @click="edit('subject', s)"
+            >
+              <RmIcon name="PencilSimple" :size="14" />
+            </button>
+          </div>
+
+          <RmCollapse v-if="text(s).description || s.keywords" :title="isFr ? 'Détails' : 'Details'">
+            <div v-if="text(s).description" class="meta_card_description" v-html="text(s).description" />
+            <p v-if="s.keywords" class="meta_keywords">
+              <span class="meta_keywords_label">{{ isFr ? "Mots-clés : " : "Keywords: " }}</span>{{ s.keywords }}
+            </p>
+          </RmCollapse>
+        </article>
+      </section>
+
+    </template>
+
+    <OipMetadataEditDialog
+      v-if="editing"
+      v-model="isEditorOpen"
+      :kind="editing.kind"
+      :item="editing.item"
+      :lang="isFr ? 'fr' : 'en'"
+      @saved="refresh()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Metadata, MetadataApplication, MetadataSubject } from "../../types/metadata";
+
+// Passee par OipShell a tous les panneaux ; la fiche est celle de l'app.
+defineProps<{ appKey?: string; superAdmin?: boolean }>();
+
+const { locale } = useI18n();
+const route = useRoute();
+const isFr = computed(() => locale.value !== "en");
+
+const { data, pending, error, refresh } = useFetch<Metadata>(useAppConfig().oip.panels.Metadata.endpoint, {
+  key: "oip-rail-metadata",
+});
+
+const errorMessage = computed(
+  () => (error.value as any)?.data?.message || error.value?.message || ""
+);
+
+/** Le texte dans la langue du rail, le francais ou l'anglais a defaut. */
+function text(item: MetadataApplication | MetadataSubject) {
+  const wanted = isFr.value ? "fr-FR" : "en-US";
+  const rows = item.translations;
+  return (
+    rows.find((t) => t.languages_code === wanted) ??
+    rows.find((t) => t.languages_code === "fr-FR") ??
+    rows[0] ?? { name: "", description: "" }
+  );
+}
+
+/**
+ * Le sujet de l'ecran ouvert : le chemin le plus long qui prefixe celui de
+ * la page, meme peigne que les notes (`/fr/hubr/x/` et `/hubr/x` se valent).
+ */
+function normalize(path: string) {
+  return (path.split("?")[0] || "").replace(/^\/(fr|en)(?=\/|$)/, "").replace(/\/+$/, "") || "/";
+}
+
+const currentSubject = computed(() => {
+  const path = normalize(route.path);
+  let best: MetadataSubject | null = null;
+  for (const s of data.value?.subjects ?? []) {
+    const target = normalize(s.relative_path);
+    if (target === "/") continue;
+    if (path === target || path.startsWith(target + "/")) {
+      if (!best || target.length > normalize(best.relative_path).length) best = s;
+    }
+  }
+  return best;
+});
+
+const STATUS: Record<string, { fr: string; en: string; variant: "active" | "pending" | "error" | "info" | "grey" }> = {
+  published: { fr: "Publié", en: "Published", variant: "active" },
+  draft: { fr: "Brouillon", en: "Draft", variant: "pending" },
+  archived: { fr: "Archivé", en: "Archived", variant: "error" },
+  ai_generated: { fr: "Généré par IA", en: "AI generated", variant: "info" },
+};
+const statusLabel = (s: string) => (STATUS[s] ? (isFr.value ? STATUS[s].fr : STATUS[s].en) : s || "?");
+const statusVariant = (s: string) => STATUS[s]?.variant ?? "grey";
+
+const langs = (item: MetadataApplication | MetadataSubject) =>
+  item.translations.map((t) => t.languages_code.slice(0, 2)).join(", ") || (isFr.value ? "aucune" : "none");
+
+const host = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+const repo = (url: string) => url.replace(/^https?:\/\/github\.com\//, "").replace(/\/$/, "");
+const day = (iso: string | null) => (iso ? iso.slice(0, 10) : isFr.value ? "jamais" : "never");
+
+const isEditorOpen = ref(false);
+const editing = ref<
+  | { kind: "application"; item: MetadataApplication }
+  | { kind: "subject"; item: MetadataSubject }
+  | null
+>(null);
+
+function edit(kind: "application", item: MetadataApplication): void;
+function edit(kind: "subject", item: MetadataSubject): void;
+function edit(kind: "application" | "subject", item: any) {
+  editing.value = { kind, item };
+  isEditorOpen.value = true;
+}
+</script>
+
+<style scoped>
+.meta_panel {
+  align-self: stretch;
+  width: 100%;
+}
+
+.meta_loading {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.meta_section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.meta_section_title {
+  align-items: center;
+  color: var(--text-secondary);
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  gap: 8px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.meta_card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+}
+
+.meta_card_head {
+  align-items: flex-start;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.meta_card_titles {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.meta_card_title {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.meta_path {
+  color: var(--text-secondary);
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.meta_card_badges {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 2px;
+}
+
+.meta_langs {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.meta_edit_btn {
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+
+.meta_edit_btn:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.meta_card_description {
+  color: var(--text-primary);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.meta_card_description :deep(p) {
+  margin: 0 0 6px;
+}
+
+.meta_facts {
+  display: grid;
+  font-size: 13px;
+  gap: 4px 10px;
+  grid-template-columns: max-content 1fr;
+  margin: 0;
+}
+
+.meta_facts dt {
+  color: var(--text-secondary);
+}
+
+.meta_facts dd {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.meta_facts a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.meta_facts a:hover {
+  text-decoration: underline;
+}
+
+.meta_tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.meta_empty {
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-style: italic;
+  margin: 0;
+}
+
+.meta_error {
+  color: var(--color-danger, #d64545);
+  font-size: 13px;
+  margin: 0;
+}
+
+.meta_keywords {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+  margin: 6px 0 0;
+}
+
+.meta_keywords_label {
+  font-weight: 600;
+}
+</style>

package/layer/app/components/panels/OipPanelNotes.vue

@@ -0,0 +1,99 @@
+<!--
+  Servi par le layer OIP (tuile Notes).
+
+  Le volet « Notes » du rail : la documentation de l'ecran ouvert.
+
+  Il remplace les anciens volets Infos, Metrics, Tips et Methodo, qui
+  decoupaient la meme documentation en quatre tuiles selon son genre. Le genre
+  est devenu une categorie qu'on filtre dans la liste.
+
+  Le titre reste vide : le cadre du panneau (RmRailPanel) porte deja
+  « Notes » dans son en-tete, l'afficher deux fois ferait doublon.
+
+  Une note sort de Directus par son sujet (le chemin de l'ecran) ou par une
+  source citee par la page. L'equipe Tekkare voit lequel des deux, en
+  etiquette : c'est le seul moyen de relire un rattachement sans ouvrir le
+  CMS. Un lecteur d'un espace client ne voit rien de tout ca.
+-->
+<template>
+  <RmNotes
+    class="full_width"
+    :notes="shownNotes"
+    :categories="categories"
+    title=""
+    :description="
+      locale === 'en'
+        ? 'Official documentation written by Tekkare: calculation methodologies, source coverage limits, reading conventions. Updated regularly.'
+        : `Documentation officielle rédigée par Tekkare : méthodologies de calcul, limites de couverture des sources, conventions d'interprétation. Mise à jour régulièrement.`
+    "
+    badge="Tekkare"
+    :lang="locale === 'en' ? 'en' : 'fr'"
+    :editable="superAdmin"
+    @navigate="go"
+    @edit="openEditor"
+  />
+
+  <OipNoteEditDialog
+    v-if="editingId"
+    v-model="isEditorOpen"
+    :note-id="editingId"
+    :lang="locale === 'en' ? 'en' : 'fr'"
+    @saved="refresh()"
+  />
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    appKey?: string;
+    /** `source_uuid` des jeux affiches par l'ecran, fournis par l'app. */
+    sourceUuids?: string[];
+    /** Superadmin : crayon de correction. Passe par OipShell. */
+    superAdmin?: boolean;
+    /**
+     * Montre d'ou vient chaque note (sujet ou source) : un outil de relecture
+     * pour l'equipe. Par defaut, les superadmins seulement ; l'app peut
+     * l'ouvrir plus largement (toute adresse @tekkare.com).
+     */
+    showOrigin?: boolean;
+  }>(),
+  { sourceUuids: () => [], superAdmin: false, showOrigin: undefined },
+);
+
+const { locale } = useI18n();
+const router = useRouter();
+const { notes, categories, refresh } = useOipNotes(() => props.sourceUuids);
+
+const showOrigin = computed(() => props.showOrigin ?? props.superAdmin);
+
+const ORIGIN = {
+  fr: { subject: "sujet", source: "source" },
+  en: { subject: "subject", source: "source" },
+} as const;
+
+const shownNotes = computed(() => {
+  if (!showOrigin.value) return notes.value;
+  const words = ORIGIN[locale.value === "en" ? "en" : "fr"];
+  return notes.value.map((note) => ({ ...note, tag: words[note.match] }));
+});
+
+const isEditorOpen = ref(false);
+const editingId = ref<string | null>(null);
+
+function openEditor(id: string) {
+  editingId.value = id;
+  isEditorOpen.value = true;
+}
+
+/** Les renvois d'une note pointent vers une page de l'app : navigation interne. */
+function go(to: string) {
+  router.push(to);
+}
+</script>
+
+<style scoped>
+.full_width {
+  align-self: stretch;
+  width: 100%;
+}
+</style>

package/layer/app/components/panels/OipPanelProjects.vue

@@ -0,0 +1,94 @@
+<!--
+  Panneau « Projets » du rail, servi par le layer OIP (tuile Projects) :
+  RmProjectPanel.
+
+  Ou partent mes ajouts : le projet actif s'y designe, et un projet cree ici
+  devient l'actif sans quitter la page. Renommer et supprimer restent sur la
+  page du projet.
+
+  Les projets vivent dans la Virtual Lab API, que chaque app interroge avec
+  son propre client : l'app passe la liste et les gestes par
+  `panelProps.Projects` (cf. les props ci-dessous), et son bouton de creation
+  assistee par `newButton` (un composant qui emet `free` pour ouvrir le
+  formulaire simple).
+-->
+<template>
+  <RmProjectPanel
+    :projects="projects"
+    :active-id="activeId"
+    :active-count="activeCount"
+    :loading="loading"
+    :failed="failed"
+    :creating="creating"
+    :all-to="allTo"
+    :lang="locale === 'en' ? 'en' : 'fr'"
+    @activate="emit('activate', $event)"
+    @open="emit('open', $event)"
+    @pin="emit('pin', $event)"
+    @create="onCreate"
+  >
+    <template v-if="newButton" #new="{ openForm }">
+      <component :is="newButton" size="sm" @free="openForm" />
+    </template>
+  </RmProjectPanel>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { RmProject } from "@tekkare/romulus/utils/projects";
+
+const props = withDefaults(
+  defineProps<{
+    appKey?: string;
+    superAdmin?: boolean;
+    projects?: RmProject[];
+    activeId?: string | null;
+    /** Elements du projet actif. */
+    activeCount?: number;
+    loading?: boolean;
+    failed?: boolean;
+    /** Lien « Tous mes projets ». Vide : pas de lien. */
+    allTo?: string;
+    /**
+     * Cree un projet a partir d'un nom ; le panneau attend la fin pour
+     * rendre la main. L'app decide si le projet cree devient l'actif.
+     */
+    create?: (title: string) => Promise<unknown>;
+    /** Bouton de creation de l'app (assistant), qui emet `free`. */
+    newButton?: Component | null;
+  }>(),
+  {
+    projects: () => [],
+    activeId: null,
+    activeCount: 0,
+    loading: false,
+    failed: false,
+    allTo: "",
+    create: undefined,
+    newButton: null,
+  },
+);
+
+const emit = defineEmits<{
+  activate: [projectId: string];
+  open: [projectId: string];
+  pin: [projectId: string];
+  /** Au montage : l'app restaure le projet actif et charge la liste. */
+  mounted: [];
+}>();
+
+const { locale } = useI18n();
+const creating = ref(false);
+
+async function onCreate(title: string) {
+  if (!props.create) return;
+  creating.value = true;
+  try {
+    await props.create(title);
+  } finally {
+    creating.value = false;
+  }
+}
+
+onMounted(() => emit("mounted"));
+</script>

package/layer/app/components/panels/OipPanelSourceTables.vue

@@ -0,0 +1,8 @@
+<!-- Tuile « Tables » : le panneau Sources sur sa vue tablegroups. -->
+<template>
+  <OipPanelSources v-bind="$attrs" view="tables" />
+</template>
+
+<script setup lang="ts">
+import OipPanelSources from "./OipPanelSources.vue";
+</script>