@tekkare/romulus 0.1.240 → 0.1.242

package/layer/app/components/OipNoteEditDialog.vue

@@ -0,0 +1,382 @@
+<template>
+  <RmModal
+    v-model="open"
+    size="lg"
+    mode="free"
+    :label="isFr ? 'Modifier la note' : 'Edit note'"
+  >
+    <template #header>
+      <h2 class="note_edit_title">{{ isFr ? "Modifier la note" : "Edit note" }}</h2>
+    </template>
+
+    <template #tabs>
+      <div class="note_edit_tabs">
+        <RmTabBar
+          v-model="activeLang"
+          :tabs="langTabs"
+          :aria-label="isFr ? 'Langue de la note' : 'Note language'"
+        />
+      </div>
+    </template>
+
+    <div v-if="loading" class="note_edit_body">
+      <RmSkeleton v-for="i in 4" :key="i" width="100%" :height="60" radius="8px" />
+    </div>
+
+    <div v-else-if="note" class="note_edit_body">
+      <section class="note_edit_section">
+        <p class="note_edit_eyebrow">{{ isFr ? "Texte" : "Text" }}</p>
+
+        <p v-if="!activeTranslation?.id" class="note_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.title"
+          :label="isFr ? 'Titre' : 'Title'"
+        />
+        <RmTextarea
+          :model-value="form.summary"
+          :label="isFr ? 'Résumé (ce qui se lit replié)' : 'Summary (read when collapsed)'"
+          :rows="2"
+          @update:model-value="form.summary = $event"
+        />
+        <RmNoteEditor
+          v-model="form.sections"
+          :label="isFr ? 'Contenu' : 'Content'"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+      </section>
+
+      <section class="note_edit_section">
+        <p class="note_edit_eyebrow">{{ isFr ? "Classement" : "Filing" }}</p>
+        <div class="note_edit_row">
+          <RmDropdownSelect
+            v-model="categoryLabel"
+            :label="isFr ? 'Catégorie' : 'Category'"
+            :options="categoryLabels"
+            :search="false"
+            :lang="isFr ? 'fr' : 'en'"
+          />
+          <RmDropdownSelect
+            v-model="statusLabel"
+            :label="isFr ? 'Statut' : 'Status'"
+            :options="statusLabels"
+            :search="false"
+            :lang="isFr ? 'fr' : 'en'"
+          />
+        </div>
+      </section>
+
+      <section class="note_edit_section">
+        <p class="note_edit_eyebrow">{{ isFr ? "Rattachements" : "Attachments" }}</p>
+        <p class="note_edit_hint">
+          {{ isFr
+            ? "Une note sort sur les écrans qu'elle cite, et partout où l'une de ses sources est affichée. Sans aucun rattachement, elle ne sort nulle part."
+            : "A note shows on the screens it lists, and wherever one of its sources is displayed. With no attachment at all, it shows nowhere." }}
+        </p>
+
+        <RmComplexSelect
+          v-model="subjects"
+          :label="isFr ? 'Écrans' : 'Screens'"
+          :options="subjectOptions"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+        <RmComplexSelect
+          v-model="sources"
+          :label="isFr ? 'Sources' : 'Sources'"
+          :options="sourceOptions"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+
+        <RmCallout v-if="!subjects.length && !sources.length" tone="warning">
+          {{ isFr
+            ? "Cette note ne sera affichée sur aucun écran."
+            : "This note will not be shown on any screen." }}
+        </RmCallout>
+      </section>
+
+      <p v-if="error" class="note_edit_error">{{ error }}</p>
+    </div>
+
+    <template #footer>
+      <RmButton variant="tertiary" @click="open = false">
+        {{ isFr ? "Annuler" : "Cancel" }}
+      </RmButton>
+      <RmButton variant="primary" :disabled="saving || loading" @click="save">
+        {{ saving ? (isFr ? "Enregistrement..." : "Saving...") : (isFr ? "Enregistrer" : "Save") }}
+      </RmButton>
+    </template>
+  </RmModal>
+</template>
+
+<script setup lang="ts">
+/**
+ * Correction d'une note du rail, reservee aux superadmins.
+ *
+ * Meme geste que pour une source : un crayon sur la fiche, un formulaire, une
+ * route serveur qui revalide le droit. Trois differences tiennent a ce qu'est
+ * une note.
+ *
+ * Le contenu n'est pas du texte libre mais des blocs typés, ceux que le
+ * panneau rend : il s'edite dans RmNoteEditor, qui montre chaque bloc comme il
+ * sortira. Le serveur seul sait passer des blocs au texte que Directus garde.
+ *
+ * Les deux langues s'editent ici, et seule celle qu'on a touchee part a
+ * l'enregistrement : reecrire la traduction qu'on n'a pas ouverte la
+ * reformaterait pour rien.
+ *
+ * Les rattachements font partie du formulaire. Une note ne sort que sur les
+ * ecrans qu'elle cite ou avec les sources qu'elle explique : les corriger
+ * depuis le CMS demandait de connaitre les identifiants, et la note restait
+ * invisible en attendant.
+ */
+import type { AdminNote, AdminNoteTranslation, NoteOptions, NoteSection } from "../notes/types";
+
+const props = defineProps<{ noteId: string; lang: string }>();
+const emit = defineEmits<{ saved: [] }>();
+
+const open = defineModel<boolean>({ default: false });
+
+const isFr = computed(() => props.lang === "fr");
+
+const LANGUAGES = [
+  { value: "fr-FR", name: "Français" },
+  { value: "en-US", name: "English" },
+];
+const langTabs = LANGUAGES;
+
+const STATUSES = [
+  { value: "published", fr: "Publiée", en: "Published" },
+  { value: "draft", fr: "Brouillon", en: "Draft" },
+  { value: "archived", fr: "Archivée", en: "Archived" },
+];
+
+const note = ref<AdminNote | null>(null);
+const options = ref<NoteOptions | null>(null);
+const loading = ref(false);
+const saving = ref(false);
+const error = ref("");
+
+const activeLang = ref("fr-FR");
+const form = reactive<{ title: string; summary: string; sections: NoteSection[] }>({
+  title: "",
+  summary: "",
+  sections: [],
+});
+
+/** Ce que chaque langue porte en cours d'edition, gardé d'un onglet a l'autre. */
+const drafts = reactive<Record<string, { title: string; summary: string; sections: NoteSection[] }>>({});
+/** L'etat charge, pour ne renvoyer que les langues touchees. */
+const loaded = reactive<Record<string, string>>({});
+
+const categoryLabel = ref<string | undefined>(undefined);
+const statusLabel = ref<string | undefined>(undefined);
+const subjects = ref<string[]>([]);
+const sources = ref<string[]>([]);
+
+const categoryLabels = computed(() =>
+  (options.value?.categories ?? []).map((item) => (isFr.value ? item.fr : item.en))
+);
+const statusLabels = computed(() => STATUSES.map((item) => (isFr.value ? item.fr : item.en)));
+
+const subjectOptions = computed(() =>
+  (options.value?.subjects ?? []).map((item) => ({ label: item.path, value: item.id }))
+);
+const sourceOptions = computed(() =>
+  (options.value?.sources ?? []).map((item) => ({ label: item.label, value: item.uuid }))
+);
+
+const activeTranslation = computed<AdminNoteTranslation | undefined>(() =>
+  note.value?.translations.find((item) => item.languages_code === activeLang.value)
+);
+
+const fingerprint = (draft: { title: string; summary: string; sections: NoteSection[] }) =>
+  JSON.stringify([draft.title, draft.summary, draft.sections]);
+
+function loadDraft(code: string) {
+  const draft = drafts[code];
+  form.title = draft?.title ?? "";
+  form.summary = draft?.summary ?? "";
+  form.sections = draft?.sections ?? [];
+}
+
+function keepDraft(code: string) {
+  drafts[code] = {
+    title: form.title,
+    summary: form.summary,
+    sections: form.sections,
+  };
+}
+
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const [row, lists] = await Promise.all([
+      $fetch<AdminNote>(endpoints.noteEndpoint, { query: { id: props.noteId } }),
+      options.value
+        ? Promise.resolve(options.value)
+        : $fetch<NoteOptions>(endpoints.optionsEndpoint),
+    ]);
+
+    note.value = row;
+    options.value = lists;
+
+    for (const translation of row.translations) {
+      const draft = {
+        title: translation.title,
+        summary: translation.summary,
+        sections: translation.sections,
+      };
+      drafts[translation.languages_code] = draft;
+      loaded[translation.languages_code] = fingerprint(draft);
+    }
+
+    // La langue du rail d'abord : c'est celle qu'on vient de relire.
+    activeLang.value = isFr.value ? "fr-FR" : "en-US";
+    loadDraft(activeLang.value);
+
+    const category = (options.value?.categories ?? []).find((item) => item.id === row.category);
+    categoryLabel.value = category ? (isFr.value ? category.fr : category.en) : undefined;
+    const status = STATUSES.find((item) => item.value === row.status);
+    statusLabel.value = status ? (isFr.value ? status.fr : status.en) : undefined;
+
+    subjects.value = row.subjects.map((link) => link.subjectId);
+    sources.value = row.sources.map((link) => link.sourceUuid);
+  } catch (err: any) {
+    error.value = err?.data?.message || err?.message || "Load failed";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(open, (value) => {
+  if (value) load();
+});
+
+watch(activeLang, (next, previous) => {
+  // Pendant le chargement, la langue est posee par `load`, qui remplit les
+  // brouillons lui-meme : garder le formulaire a ce moment ecraserait la
+  // traduction qu'on vient de lire avec un formulaire encore vide.
+  if (loading.value) return;
+  if (previous) keepDraft(previous);
+  loadDraft(next);
+});
+
+const notify = useOipNotify();
+const endpoints = useAppConfig().oip.panels.Notes;
+
+async function save() {
+  if (!note.value) return;
+  keepDraft(activeLang.value);
+
+  saving.value = true;
+  error.value = "";
+
+  const translations = note.value.translations
+    .filter((translation) => {
+      const draft = drafts[translation.languages_code];
+      return draft && fingerprint(draft) !== loaded[translation.languages_code];
+    })
+    .map((translation) => {
+      const draft = drafts[translation.languages_code]!;
+      return {
+        ...(translation.id ? { id: translation.id } : {}),
+        languages_code: translation.languages_code,
+        title: draft.title,
+        summary: draft.summary,
+        sections: draft.sections,
+      };
+    });
+
+  const category = (options.value?.categories ?? []).find(
+    (item) => (isFr.value ? item.fr : item.en) === categoryLabel.value
+  );
+  const status = STATUSES.find(
+    (item) => (isFr.value ? item.fr : item.en) === statusLabel.value
+  );
+
+  try {
+    await $fetch(endpoints.endpoint, {
+      method: "PATCH",
+      body: {
+        id: note.value.id,
+        ...(status ? { status: status.value } : {}),
+        ...(category ? { category: category.id } : {}),
+        ...(translations.length ? { translations } : {}),
+        subjects: subjects.value,
+        sources: sources.value,
+      },
+    });
+    notify(isFr.value ? "Note enregistrée" : "Note saved");
+    open.value = false;
+    emit("saved");
+  } catch (err: any) {
+    error.value = err?.data?.message || err?.message || "Save failed";
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.note_edit_title {
+  margin: 0;
+  color: var(--text-primary);
+  font-family: var(--font-serif);
+  font-size: var(--font-18);
+  font-weight: var(--weight-bold);
+}
+
+.note_edit_tabs {
+  padding: 0 var(--space-4);
+}
+
+.note_edit_body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-20);
+  padding: var(--space-4) 0;
+}
+
+.note_edit_section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+.note_edit_row {
+  display: flex;
+  gap: var(--space-12);
+}
+
+.note_edit_row > * {
+  flex: 1;
+  min-width: 0;
+}
+
+.note_edit_eyebrow {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-11);
+  font-weight: var(--weight-bold);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+
+.note_edit_hint {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+  line-height: 1.5;
+}
+
+.note_edit_error {
+  margin: 0;
+  color: var(--color-danger);
+  font-size: var(--font-13);
+}
+</style>