@tekkare/romulus 0.1.240 → 0.1.242

package/layer/app/components/OipMetadataEditDialog.vue

@@ -0,0 +1,350 @@
+<template>
+  <RmModal v-model="open" size="lg" mode="free" :label="title">
+    <template #header>
+      <h2 class="meta_edit_title">{{ title }}</h2>
+    </template>
+
+    <template #tabs>
+      <div class="meta_edit_tabs">
+        <RmTabBar
+          v-model="tabLang"
+          :tabs="LANGUAGES"
+          :aria-label="isFr ? 'Langue de la fiche' : 'Card language'"
+        />
+      </div>
+    </template>
+
+    <div class="meta_edit_body">
+      <section class="meta_edit_section">
+        <p class="meta_edit_eyebrow">{{ isFr ? "Texte" : "Text" }}</p>
+        <p v-if="!activeTranslation?.id" class="meta_edit_hint">
+          {{ isFr
+            ? "Rien dans cette langue. Elle sera créée à l'enregistrement."
+            : "Nothing in this language. It will be created on save." }}
+        </p>
+        <RmInput v-model="form.name" :label="isFr ? 'Nom' : 'Name'" />
+        <RmRichText
+          v-model="form.description"
+          :label="isFr ? 'Description' : 'Description'"
+          :rows="6"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+      </section>
+
+      <section class="meta_edit_section">
+        <p class="meta_edit_eyebrow">{{ isFr ? "Fiche" : "Record" }}</p>
+        <RmDropdownSelect
+          v-model="statusLabel"
+          :label="isFr ? 'Statut' : 'Status'"
+          :options="statusLabels"
+          :search="false"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+
+        <template v-if="kind === 'application'">
+          <RmInput v-model="app.prod_url" label="URL de production" placeholder="https://" />
+          <RmInput v-model="app.staging_url" label="URL de staging" placeholder="https://" />
+          <RmInput v-model="app.github_front_url" label="GitHub (front)" placeholder="https://" />
+          <RmComplexSelect
+            v-model="app.categories"
+            :label="isFr ? 'Catégories' : 'Categories'"
+            :options="CATEGORY_OPTIONS"
+            :lang="isFr ? 'fr' : 'en'"
+          />
+        </template>
+
+        <template v-else>
+          <RmInput
+            v-model="subject.relative_path"
+            :label="isFr ? 'Chemin de l\'écran' : 'Screen path'"
+            placeholder="/hubr/..."
+          />
+          <RmTextarea
+            :model-value="subject.keywords"
+            :label="isFr ? 'Mots-clés (séparés par des virgules)' : 'Keywords (comma separated)'"
+            :rows="4"
+            @update:model-value="subject.keywords = $event"
+          />
+          <RmSwitch
+            v-model="subject.is_specialized_report"
+            :label="isFr ? 'Rapport spécialisé' : 'Specialized report'"
+            :active-text="isFr ? 'Oui' : 'Yes'"
+            :inactive-text="isFr ? 'Non' : 'No'"
+          />
+        </template>
+      </section>
+
+      <p v-if="error" class="meta_edit_error">{{ error }}</p>
+    </div>
+
+    <template #footer>
+      <RmButton variant="tertiary" @click="open = false">
+        {{ isFr ? "Annuler" : "Cancel" }}
+      </RmButton>
+      <RmButton variant="primary" :disabled="saving" @click="save">
+        {{ saving ? (isFr ? "Enregistrement..." : "Saving...") : (isFr ? "Enregistrer" : "Save") }}
+      </RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<script setup lang="ts">
+/**
+ * Correction d'une metadonnee de l'app, reservee aux superadmins : la fiche
+ * `OipApplication` ou l'un de ses `OipSubject`.
+ *
+ * Meme geste que pour une source ou une note : un crayon sur la fiche, un
+ * formulaire, une route serveur qui revalide le droit. Les deux fiches
+ * partagent leur texte traduit (nom, description, une langue par onglet) et
+ * leur statut ; le reste depend de ce qu'on corrige.
+ *
+ * Les traductions se gardent par langue en brouillon et ne partent que si
+ * elles ont change : une langue ouverte puis laissee telle quelle ne
+ * reecrit rien dans le CMS.
+ */
+import type {
+  MetadataApplication,
+  MetadataSubject,
+  MetadataTranslation,
+} from "../types/metadata";
+
+const props = defineProps<{
+  kind: "application" | "subject";
+  item: MetadataApplication | MetadataSubject;
+  lang: string;
+}>();
+const emit = defineEmits<{ saved: [] }>();
+const open = defineModel<boolean>({ default: false });
+
+const isFr = computed(() => props.lang === "fr");
+const kind = computed(() => props.kind);
+
+const title = computed(() =>
+  props.kind === "application"
+    ? isFr.value ? "Modifier l'application" : "Edit application"
+    : isFr.value ? "Modifier le sujet" : "Edit subject"
+);
+
+const LANGUAGES = [
+  { value: "fr-FR", name: "Français" },
+  { value: "en-US", name: "English" },
+];
+
+const STATUSES = [
+  { value: "published", fr: "Publié", en: "Published" },
+  { value: "draft", fr: "Brouillon", en: "Draft" },
+  { value: "archived", fr: "Archivé", en: "Archived" },
+  { value: "ai_generated", fr: "Généré par IA", en: "AI generated" },
+];
+
+/** Les choix du champ `categories` de Directus, tels que le CMS les liste. */
+const CATEGORY_OPTIONS = [
+  "Census",
+  "Clinical Trials",
+  "Drugs Reimbursement",
+  "Epidemio",
+  "Global Customer Knowledge",
+  "Hospital Activity",
+  "Market Authorization",
+  "Medical Device",
+  "Oncology",
+  "Price Tracker",
+  "Rare Disease Knowledge",
+  "Sunshine Act",
+  "Vaccination",
+].map((value) => ({ label: value, value }));
+
+const activeLang = ref("fr-FR");
+/**
+ * L'onglet de langue : changer d'onglet garde le brouillon de la langue
+ * qu'on quitte et charge celui de la langue qu'on ouvre. `reset` pose la
+ * langue directement, sans passer par ici : au moment ou il la pose, le
+ * formulaire porte encore la fiche precedente et ne doit rien garder.
+ */
+const tabLang = computed({
+  get: () => activeLang.value,
+  set: (next: string) => {
+    if (next === activeLang.value) return;
+    keepDraft(activeLang.value);
+    activeLang.value = next;
+    loadDraft(next);
+  },
+});
+const form = reactive({ name: "", description: "" });
+const drafts = reactive<Record<string, { name: string; description: string }>>({});
+const loaded = reactive<Record<string, string>>({});
+const statusLabel = ref<string | undefined>(undefined);
+const app = reactive({ prod_url: "", staging_url: "", github_front_url: "", categories: [] as string[] });
+const subject = reactive({ relative_path: "", keywords: "", is_specialized_report: false });
+
+const saving = ref(false);
+const error = ref("");
+
+const statusLabels = computed(() => STATUSES.map((s) => (isFr.value ? s.fr : s.en)));
+
+const activeTranslation = computed<MetadataTranslation | undefined>(() =>
+  props.item.translations.find((t) => t.languages_code === activeLang.value)
+);
+
+const fingerprint = (draft: { name: string; description: string }) =>
+  JSON.stringify([draft.name, draft.description]);
+
+function loadDraft(code: string) {
+  form.name = drafts[code]?.name ?? "";
+  form.description = drafts[code]?.description ?? "";
+}
+
+function keepDraft(code: string) {
+  drafts[code] = { name: form.name, description: form.description };
+}
+
+function reset() {
+  for (const code of Object.keys(drafts)) delete drafts[code];
+  for (const code of Object.keys(loaded)) delete loaded[code];
+  for (const t of props.item.translations) {
+    const draft = { name: t.name ?? "", description: t.description ?? "" };
+    drafts[t.languages_code] = draft;
+    loaded[t.languages_code] = fingerprint(draft);
+  }
+  activeLang.value = isFr.value ? "fr-FR" : "en-US";
+  loadDraft(activeLang.value);
+
+  const status = STATUSES.find((s) => s.value === props.item.status);
+  statusLabel.value = status ? (isFr.value ? status.fr : status.en) : undefined;
+
+  if (props.kind === "application") {
+    const item = props.item as MetadataApplication;
+    app.prod_url = item.prod_url ?? "";
+    app.staging_url = item.staging_url ?? "";
+    app.github_front_url = item.github_front_url ?? "";
+    app.categories = [...(item.categories ?? [])];
+  } else {
+    const item = props.item as MetadataSubject;
+    subject.relative_path = item.relative_path ?? "";
+    subject.keywords = item.keywords ?? "";
+    subject.is_specialized_report = !!item.is_specialized_report;
+  }
+  error.value = "";
+}
+
+watch(open, (value) => value && reset());
+
+const notify = useOipNotify();
+const endpoint = useAppConfig().oip.panels.Metadata.endpoint;
+
+async function save() {
+  keepDraft(activeLang.value);
+  saving.value = true;
+  error.value = "";
+
+  // Une langue vide et jamais ecrite n'est pas creee : une ligne sans nom ni
+  // description ferait une fiche muette dans le referentiel.
+  const translations = LANGUAGES.map((l) => l.value)
+    .filter((code) => {
+      const draft = drafts[code];
+      if (!draft) return false;
+      if (loaded[code] !== undefined) return fingerprint(draft) !== loaded[code];
+      return !!(draft.name || draft.description);
+    })
+    .map((code) => {
+      const existing = props.item.translations.find((t) => t.languages_code === code);
+      return {
+        ...(existing?.id ? { id: existing.id } : {}),
+        languages_code: code,
+        name: drafts[code]!.name,
+        description: drafts[code]!.description,
+      };
+    });
+
+  const status = STATUSES.find((s) => (isFr.value ? s.fr : s.en) === statusLabel.value);
+  const base = {
+    ...(status ? { status: status.value } : {}),
+    ...(translations.length ? { translations } : {}),
+  };
+
+  const body =
+    props.kind === "application"
+      ? {
+          application: {
+            ...base,
+            // L'URL de production designe la fiche cote serveur : vide, on
+            // ne l'envoie pas, sinon l'app ne se retrouverait plus.
+            ...(app.prod_url ? { prod_url: app.prod_url } : {}),
+            staging_url: app.staging_url || null,
+            github_front_url: app.github_front_url || null,
+            categories: app.categories,
+          },
+        }
+      : {
+          subject: {
+            ...base,
+            id: props.item.id,
+            relative_path: subject.relative_path,
+            keywords: subject.keywords || null,
+            is_specialized_report: subject.is_specialized_report,
+          },
+        };
+
+  try {
+    await $fetch(endpoint, { method: "PATCH", body });
+    notify(isFr.value ? "Métadonnées enregistrées" : "Metadata saved");
+    open.value = false;
+    emit("saved");
+  } catch (err: any) {
+    error.value = err?.data?.message || err?.message || (isFr.value ? "Enregistrement impossible" : "Could not save");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.meta_edit_tabs {
+  padding: 0 24px;
+}
+
+.meta_edit_tabs :deep(.rm-tabbar) {
+  max-width: 100%;
+  margin-bottom: 0;
+}
+
+.meta_edit_title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.meta_edit_body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 8px 24px 16px;
+}
+
+.meta_edit_section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.meta_edit_eyebrow {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.meta_edit_hint {
+  color: var(--text-secondary);
+  font-size: 13px;
+  margin: 0;
+}
+
+.meta_edit_error {
+  color: var(--color-danger, #d64545);
+  font-size: 13px;
+  margin: 0;
+}
+</style>