@tekkare/romulus 0.1.240 → 0.1.242

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

@@ -0,0 +1,220 @@
+<!--
+  Panneau « Documents » du rail, servi par le layer OIP (tuile Documents).
+
+  Les documents de reference du portail OIP 7 (licences de reutilisation,
+  rapports CEPS et Assurance Maladie, nomenclatures PMSI…), restreints a ceux
+  qui parlent des donnees de cette app. La selection, l'ordre et les libelles
+  des categories viennent de app.config.oip.panels.Documents ; la route
+  (`endpoint`) fait le tri, le panneau ne fait que rendre.
+
+  Une trentaine de lignes ne se parcourt pas d'un coup d'oeil : elles sont
+  regroupees par theme dans des sections repliables, chacune avec le nombre de
+  documents qu'elle porte. La premiere section est ouverte, les autres non.
+
+  Un PDF s'ouvre en apercu dans un tiroir, sans quitter la page : c'est fait
+  pour jeter un oeil, pas pour lire. Les autres formats (tableur, CSV) n'ont
+  pas d'apercu dans un navigateur et partent dans un onglet.
+
+  Lecture seule : les documents s'ajoutent dans Directus, pas ici.
+-->
+<script setup lang="ts">
+interface DocumentRow {
+  id: number;
+  category: string;
+  title: string;
+  src: string;
+  downloadSrc: string;
+  mime: string | null;
+}
+
+const props = defineProps<{
+  /** Partie de l'app qui ouvre le panneau, passee par OipShell (`appKey`). */
+  appKey?: string;
+  superAdmin?: boolean;
+  /** Remplace `appKey` pour le filtre des documents. Vide : toute la liste. */
+  app?: string;
+}>();
+
+const options = useAppConfig().oip.panels.Documents;
+const app = computed(() => props.app ?? props.appKey ?? "");
+
+const { locale } = useI18n();
+
+// Une seule requete pour toute la session : la liste ne bouge pas d'une
+// ouverture du panneau a l'autre. `lazy` evite un `await` de premier niveau,
+// qui rendrait ce composant asynchrone et ferait resuspendre la page a chaque
+// ouverture de la tuile.
+const { data, pending, error } = useAsyncData<DocumentRow[]>(
+  `oip-documents-${app.value || "all"}`,
+  () => $fetch<DocumentRow[]>(options.endpoint, { query: { app: app.value || undefined } }),
+  { server: false, lazy: true },
+);
+
+/** Libelles des categories (app.config), dans l'ordre ou le serveur les renvoie. */
+const CATEGORIES = options.categories as Record<string, { fr: string; en: string }>;
+
+const search = ref("");
+
+const shown = computed(() => {
+  const query = search.value.trim().toLowerCase();
+  const rows = data.value ?? [];
+  if (!query) return rows;
+  return rows.filter((row) => row.title.toLowerCase().includes(query));
+});
+
+/** Les documents groupes par categorie, l'ordre du serveur conserve. */
+const groups = computed(() => {
+  const out: { key: string; label: string; rows: DocumentRow[] }[] = [];
+  for (const row of shown.value) {
+    const label = CATEGORIES[row.category]?.[locale.value === "en" ? "en" : "fr"] ?? row.category;
+    const last = out[out.length - 1];
+    if (last?.key === row.category) last.rows.push(row);
+    else out.push({ key: row.category, label, rows: [row] });
+  }
+  return out;
+});
+
+/**
+ * Sections ouvertes. La premiere l'est au chargement, et une recherche ouvre
+ * tout : replier ce qui vient de repondre a la recherche n'aurait pas de sens.
+ */
+const opened = ref<Record<string, boolean>>({});
+const isOpen = (key: string, index: number) =>
+  opened.value[key] ?? (!!search.value.trim() || index === 0);
+const setOpen = (key: string, value: boolean) => {
+  opened.value[key] = value;
+};
+
+/** Seuls les PDF s'affichent dans un cadre ; le reste se telechargerait. */
+const previewable = (row: DocumentRow) => !!row.mime?.includes("pdf");
+
+const preview = ref<DocumentRow | null>(null);
+const previewOpen = computed({
+  get: () => !!preview.value,
+  set: (value: boolean) => {
+    if (!value) preview.value = null;
+  },
+});
+
+function openDocument(row: DocumentRow) {
+  if (previewable(row)) preview.value = row;
+  else window.open(row.src, "_blank", "noopener");
+}
+</script>
+
+<template>
+  <div class="documents">
+    <p class="documents_intro">
+      {{
+        locale === "en"
+          ? "Reference documents behind the data of this app: licences, reports and coding manuals."
+          : "Les documents de référence derrière les données de cette app : licences, rapports et nomenclatures."
+      }}
+    </p>
+
+    <input
+      v-model="search"
+      class="documents_search"
+      type="search"
+      :placeholder="locale === 'en' ? 'Search a document' : 'Rechercher un document'"
+    >
+
+    <p v-if="pending && !data?.length" class="documents_note">
+      {{ locale === "en" ? "Loading…" : "Chargement…" }}
+    </p>
+
+    <p v-else-if="error" class="documents_note">
+      {{
+        locale === "en"
+          ? "Documents could not be loaded."
+          : "Les documents n'ont pas pu être chargés."
+      }}
+    </p>
+
+    <template v-else-if="groups.length">
+      <RmCollapse
+        v-for="(group, index) in groups"
+        :key="group.key"
+        :title="group.label"
+        :count="group.rows.length"
+        :model-value="isOpen(group.key, index)"
+        @update:model-value="setOpen(group.key, $event)"
+      >
+        <ul class="documents_list">
+          <li v-for="row in group.rows" :key="row.id">
+            <RmFileRow
+              :name="row.title"
+              :format="row.mime ?? ''"
+              :action="previewable(row) ? 'preview' : 'open'"
+              @select="openDocument(row)"
+            />
+          </li>
+        </ul>
+      </RmCollapse>
+    </template>
+
+    <p v-else-if="search.trim()" class="documents_note">
+      {{ locale === "en" ? "No document matches that search." : "Aucun document ne correspond." }}
+    </p>
+
+    <p v-else class="documents_note">
+      {{ locale === "en" ? "No document available." : "Aucun document disponible." }}
+    </p>
+
+    <!-- L'apercu : le PDF tel quel, dans la visionneuse du navigateur. Le
+         tiroir garde les deux sorties (onglet, telechargement) sous la main,
+         parce qu'un document qu'on lit vraiment se lit en plein ecran. Le
+         dessin vit dans `OipDocumentPreview`, partage avec les ecrans qui ouvrent
+         leurs propres PDF. -->
+    <OipDocumentPreview
+      v-model="previewOpen"
+      :src="preview?.src ?? null"
+      :title="preview?.title"
+      :download-src="preview?.downloadSrc ?? null"
+    />
+  </div>
+</template>
+
+<style scoped>
+.documents {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: stretch;
+  width: 100%;
+}
+
+.documents_intro,
+.documents_note {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-12);
+  line-height: 1.5;
+}
+
+.documents_search {
+  padding: 8px 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-13);
+  outline: none;
+}
+
+.documents_search:focus {
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
+}
+
+.documents_list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+</style>

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>