@tekkare/romulus 0.1.241 → 0.1.242

package/layer/app/components/OipSourceEditDialog.vue

@@ -0,0 +1,419 @@
+<template>
+  <RmModal
+    v-model="open"
+    size="lg"
+    mode="free"
+    :label="isFr ? 'Modifier la source' : 'Edit source'"
+  >
+    <template #header>
+      <h2 class="source_edit_title">{{ isFr ? "Modifier la source" : "Edit source" }}</h2>
+    </template>
+
+    <template #tabs>
+      <div class="source_edit_tabs">
+        <RmTabBar
+          v-model="activeLang"
+          :tabs="langTabs"
+          :aria-label="isFr ? 'Langue de la fiche' : 'Card language'"
+        />
+      </div>
+    </template>
+
+    <div class="source_edit_body">
+
+      <section class="source_edit_section">
+        <p class="source_edit_eyebrow">{{ isFr ? "Source" : "Source" }}</p>
+
+        <div v-if="!activeTranslation" class="source_edit_fallback">
+          <p class="source_edit_hint">
+            {{ sourceFallback
+              ? (isFr
+                ? `Rien dans cette langue. La fiche affiche la version ${langLabel(sourceFallback)}.`
+                : `Nothing in this language. The card shows the ${langLabel(sourceFallback)} version.`)
+              : (isFr
+                ? "Rien dans cette langue. Elle sera créée à l'enregistrement."
+                : "Nothing in this language. It will be created on save.") }}
+          </p>
+          <RmButton v-if="sourceFallback" variant="text" @click="copySourceFallback">
+            {{ isFr ? "Partir de cette version" : "Start from that version" }}
+          </RmButton>
+        </div>
+
+        <RmInput
+          v-model="form.source_name"
+          :label="isFr ? 'Nom de la source' : 'Source name'"
+        />
+        <RmRichText
+          v-model="form.source_description"
+          :label="isFr ? 'Description de la source' : 'Source description'"
+          :rows="6"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+        <RmInput
+          v-model="form.source_link"
+          :label="isFr ? 'Lien' : 'Link'"
+          placeholder="https://"
+        />
+        <RmDropdownSelect
+          v-model="frequencyLabel"
+          :label="isFr ? 'Fréquence de mise à jour' : 'Update frequency'"
+          :options="frequencyLabels"
+          :search="false"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+      </section>
+
+      <section class="source_edit_section">
+        <p class="source_edit_eyebrow">{{ isFr ? "Fournisseur" : "Provider" }}</p>
+        <p class="source_edit_hint">
+          {{ isFr
+            ? "Le fournisseur porte toutes ses sources : le corriger ici change le titre de chacune d'elles."
+            : "The provider carries all its sources: editing it here changes every one of their titles." }}
+        </p>
+
+        <div v-if="!activeProviderTranslation" class="source_edit_fallback">
+          <p class="source_edit_hint">
+            {{ providerFallback
+              ? (isFr
+                ? `Rien dans cette langue. La fiche affiche la version ${langLabel(providerFallback)}.`
+                : `Nothing in this language. The card shows the ${langLabel(providerFallback)} version.`)
+              : (isFr
+                ? "Rien dans cette langue. Elle sera créée à l'enregistrement."
+                : "Nothing in this language. It will be created on save.") }}
+          </p>
+          <RmButton v-if="providerFallback" variant="text" @click="copyProviderFallback">
+            {{ isFr ? "Partir de cette version" : "Start from that version" }}
+          </RmButton>
+        </div>
+
+        <RmInput
+          v-model="form.provider_name"
+          :label="isFr ? 'Nom du fournisseur' : 'Provider name'"
+        />
+        <RmRichText
+          v-model="form.provider_description"
+          :label="isFr ? 'Description du fournisseur' : 'Provider description'"
+          :rows="6"
+          :lang="isFr ? 'fr' : 'en'"
+        />
+      </section>
+
+      <p v-if="error" class="source_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">
+const sourcesEndpoint = useAppConfig().oip.panels.Sources.endpoint;
+/**
+ * Correction d'une fiche de source, reservee aux superadmins.
+ *
+ * Trois collections Directus derriere le meme formulaire : la fiche (lien,
+ * frequence), sa traduction dans la langue choisie (nom, description) et celle
+ * du fournisseur. Le rail n'affiche qu'une langue a la fois, mais la correction
+ * porte souvent sur la langue qu'on ne lit pas : le selecteur reste.
+ *
+ * La liste de langues est fermee aux deux langues que cette app sert, le
+ * francais et l'anglais. Elle ne vient pas de la table `languages` de Directus,
+ * qui porte des codes abimes (un `ja-JP` suivi d'une tabulation) qu'il ne faut
+ * pas propager, et ouvrir une langue que l'app n'affiche pas reviendrait a
+ * faire ecrire du texte que personne ne lira.
+ *
+ * Une langue sans traduction n'est pas cachee : le referentiel est presque
+ * entierement anglais (741 traductions de source sur 819), et une source
+ * internationale n'a souvent que ca. Le formulaire s'ouvre vide et la ligne
+ * est creee a l'enregistrement.
+ *
+ * Les descriptions sont du HTML redactionnel Directus : elles passent par
+ * RmRichText, qui les montre mises en forme plutot qu'en balises et en entites
+ * (`&eacute;`). Le bouton « HTML » du champ reste la pour les cas tordus.
+ */
+const props = defineProps<{ source: any; lang: string }>();
+const emit = defineEmits<{ saved: [] }>();
+
+const open = defineModel<boolean>({ default: false });
+
+const isFr = computed(() => props.lang === "fr");
+
+const FREQUENCIES: Record<string, { fr: string; en: string }> = {
+  daily: { fr: "Quotidienne", en: "Daily" },
+  weekly: { fr: "Hebdomadaire", en: "Weekly" },
+  monthly: { fr: "Mensuelle", en: "Monthly" },
+  bimonthly: { fr: "Bimestrielle", en: "Bi-monthly" },
+  quarterly: { fr: "Trimestrielle", en: "Quarterly" },
+  biannually: { fr: "Semestrielle", en: "Biannually" },
+  annually: { fr: "Annuelle", en: "Annually" },
+  irregular: { fr: "Irrégulière", en: "Irregular" },
+};
+
+/**
+ * Anglais et francais d'abord : ce sont les deux langues que les apps servent.
+ * Les quatre suivantes sont optionnelles, presentes pour les referentiels qui
+ * les portent deja.
+ */
+const LANGUAGES = [
+  { value: "fr-FR", name: "Français" },
+  { value: "en-US", name: "English" },
+];
+
+const translations = computed<any[]>(() =>
+  Array.isArray(props.source?.translations) ? props.source.translations : []
+);
+
+// Les codes de langue de Directus portent parfois une tabulation finale
+// (`ja-JP\t`) : sans nettoyage, la ligne existante reste introuvable et on en
+// creerait une seconde a cote.
+const langCode = (t: any) => String(t?.languages_code || "").trim();
+
+const langTabs = LANGUAGES;
+
+const activeLang = ref("");
+
+const form = reactive({
+  source_name: "",
+  source_description: "",
+  source_link: "",
+  provider_name: "",
+  provider_description: "",
+});
+
+const frequencyLabels = computed(() =>
+  Object.values(FREQUENCIES).map((f) => (isFr.value ? f.fr : f.en))
+);
+const frequencyLabel = ref("");
+
+function frequencyKeyOf(label: string) {
+  const entry = Object.entries(FREQUENCIES).find(
+    ([, f]) => f.fr === label || f.en === label
+  );
+  return entry?.[0] ?? null;
+}
+
+const providerTranslations = computed<any[]>(() =>
+  Array.isArray(props.source?.provider?.translations)
+    ? props.source.provider.translations
+    : []
+);
+
+const activeTranslation = computed(() =>
+  translations.value.find((t) => langCode(t) === activeLang.value)
+);
+
+const activeProviderTranslation = computed(() =>
+  providerTranslations.value.find((t) => langCode(t) === activeLang.value)
+);
+
+/**
+ * Ce que la fiche affiche a la place quand la langue choisie est vide.
+ *
+ * Le panneau retombe sur la premiere traduction venue, en pratique l'anglais :
+ * 5 fournisseurs sur 300 ont une fiche francaise, 27 sources sur 741. Sans le
+ * dire, un formulaire vide devant une carte pleine se lit comme une panne.
+ */
+function fallbackOf(rows: any[]) {
+  return (
+    rows.find((t) => langCode(t) === "en-US") ||
+    rows.find((t) => langCode(t) !== activeLang.value) ||
+    null
+  );
+}
+
+const sourceFallback = computed(() =>
+  activeTranslation.value ? null : fallbackOf(translations.value)
+);
+const providerFallback = computed(() =>
+  activeProviderTranslation.value ? null : fallbackOf(providerTranslations.value)
+);
+
+/**
+ * « la version anglaise » se lit mieux que « la version EN » dans une phrase.
+ * Les langues absentes des onglets restent listees : le referentiel est partage
+ * avec les autres apps pays, une fiche peut retomber sur une langue qu'on
+ * n'edite pas ici, et il vaut mieux la nommer que montrer un code.
+ */
+const LANG_NAMES: Record<string, { fr: string; en: string }> = {
+  "en-US": { fr: "anglaise", en: "English" },
+  "fr-FR": { fr: "française", en: "French" },
+  "es-ES": { fr: "espagnole", en: "Spanish" },
+  "de-DE": { fr: "allemande", en: "German" },
+  "ja-JP": { fr: "japonaise", en: "Japanese" },
+  "ko-KR": { fr: "coréenne", en: "Korean" },
+};
+
+const langLabel = (translation: any) => {
+  const code = langCode(translation);
+  const name = LANG_NAMES[code];
+  if (!name) return code;
+  return isFr.value ? name.fr : name.en;
+};
+
+function copySourceFallback() {
+  form.source_name = sourceFallback.value?.source_name ?? "";
+  form.source_description = sourceFallback.value?.source_description ?? "";
+}
+
+function copyProviderFallback() {
+  form.provider_name = providerFallback.value?.provider_name ?? "";
+  form.provider_description = providerFallback.value?.provider_description ?? "";
+}
+
+function loadTranslation() {
+  const t = activeTranslation.value;
+  form.source_name = t?.source_name ?? "";
+  form.source_description = t?.source_description ?? "";
+  const pt = activeProviderTranslation.value;
+  form.provider_name = pt?.provider_name ?? "";
+  form.provider_description = pt?.provider_description ?? "";
+}
+
+function reset() {
+  // La langue du rail si elle est ouverte a la saisie, l'anglais sinon : c'est
+  // celle qui porte presque toutes les fiches.
+  activeLang.value =
+    LANGUAGES.find((l) => l.value.startsWith(props.lang))?.value || "en-US";
+  loadTranslation();
+  form.source_link = props.source?.source_link ?? "";
+  const freq = String(props.source?.update_frequency || "").trim().toLowerCase();
+  frequencyLabel.value = FREQUENCIES[freq]
+    ? isFr.value
+      ? FREQUENCIES[freq].fr
+      : FREQUENCIES[freq].en
+    : "";
+  error.value = "";
+}
+
+watch(open, (value) => value && reset());
+watch(activeLang, loadTranslation);
+
+const saving = ref(false);
+const error = ref("");
+
+/** Une ligne existante se corrige par son id, une ligne absente se cree. */
+function target(translation: any) {
+  return translation?.id
+    ? { id: Number(translation.id) }
+    : { languages_code: activeLang.value };
+}
+
+async function save() {
+  saving.value = true;
+  error.value = "";
+  try {
+    await $fetch(sourcesEndpoint, {
+      method: "PATCH",
+      body: {
+        uuid: props.source?.source_uuid,
+        source: {
+          source_link: form.source_link || null,
+          update_frequency: frequencyKeyOf(frequencyLabel.value),
+        },
+        providerUuid: props.source?.provider?.provider_uuid,
+        // Une langue laissee vide n'est pas creee : une ligne sans nom ni
+        // description ferait une fiche muette dans le referentiel.
+        ...(activeTranslation.value || form.source_name || form.source_description
+          ? {
+              translation: {
+                ...target(activeTranslation.value),
+                source_name: form.source_name,
+                source_description: form.source_description,
+              },
+            }
+          : {}),
+        ...(activeProviderTranslation.value || form.provider_name || form.provider_description
+          ? {
+              providerTranslation: {
+                ...target(activeProviderTranslation.value),
+                provider_name: form.provider_name,
+                provider_description: form.provider_description,
+              },
+            }
+          : {}),
+      },
+    });
+    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>
+/*
+ * RmTabBar est dimensionne pour l'en-tete d'une page de detail : marge basse et
+ * largeur bridee pour laisser respirer le contenu autour. Dans une modale, ces
+ * marges appartiennent au conteneur, qui pose deja ses propres retraits.
+ */
+.source_edit_tabs {
+  padding: 0 24px;
+}
+
+.source_edit_tabs :deep(.rm-tabbar) {
+  max-width: 100%;
+  margin-bottom: 0;
+}
+
+.source_edit_title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.source_edit_body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.source_edit_section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.source_edit_eyebrow {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.source_edit_fallback {
+  align-items: baseline;
+  background: var(--bg-surface-2);
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 8px 12px;
+}
+
+.source_edit_hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.source_edit_error {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-danger);
+}
+</style>

package/layer/app/components/OipSourceGroups.vue

@@ -0,0 +1,107 @@
+<!--
+  OipSourceGroups (layer OIP) - la liste de sources d'un panneau « Sources », en deux
+  sections.
+
+  La liste d'uuids d'un ecran est ordonnee : la premiere source est celle qui
+  porte l'ecran, les suivantes ne font que la completer. Les separer, ouvrir la
+  principale et la cadrer en couleur evite de chercher laquelle regarder.
+
+  Quand aucune source n'est designee (`primary-uuid` vide sur une page qui les
+  agrege toutes, cf. Company dans Drug Statistics) la liste reste plate : les
+  jeux se valent.
+-->
+<template>
+  <ClientOnly>
+    <template v-if="safeUuids.length">
+      <template v-if="resolvedPrimary">
+        <section class="src_group src_primary">
+          <p class="src_group_title">
+            {{ lang === 'fr' ? 'Source principale' : 'Primary source' }}
+          </p>
+          <OipDirectusSources
+            :uuids="[resolvedPrimary]"
+            :source-to-open="resolvedPrimary"
+            :lang="lang"
+            highlight
+            :editable="editable"
+          />
+        </section>
+
+        <section v-if="resolvedSecondaries.length" class="src_group">
+          <p class="src_group_title">
+            {{ lang === 'fr' ? 'Sources secondaires' : 'Additional sources' }}
+          </p>
+          <OipDirectusSources :uuids="resolvedSecondaries" :lang="lang" :editable="editable" />
+        </section>
+      </template>
+
+      <OipDirectusSources v-else :uuids="safeUuids" :lang="lang" :editable="editable" />
+    </template>
+
+    <div v-else class="source_placeholder">
+      {{ lang === 'fr' ? 'Aucune source pour cette page' : 'No source for this page' }}
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    uuids: string[];
+    /**
+     * Source mise en avant. Par defaut la premiere de la liste ; une chaine
+     * vide explicite rend la liste plate.
+     */
+    primaryUuid?: string | null;
+    lang?: string;
+    /** Crayon de correction sur chaque fiche (superadmin). */
+    editable?: boolean;
+  }>(),
+  { primaryUuid: undefined, lang: 'en', editable: false },
+);
+
+// Les uuids viennent de tables ecrites a la main : une entree vide sortirait
+// une fiche « Chargement... » qui ne se remplit jamais.
+const safeUuids = computed<string[]>(() =>
+  (Array.isArray(props.uuids) ? props.uuids : []).filter(
+    (uuid): uuid is string => typeof uuid === 'string' && uuid.length > 0,
+  ),
+);
+
+const resolvedPrimary = computed(() =>
+  props.primaryUuid === undefined ? (safeUuids.value[0] ?? '') : (props.primaryUuid ?? ''),
+);
+
+const resolvedSecondaries = computed(() =>
+  safeUuids.value.filter((uuid) => uuid !== resolvedPrimary.value),
+);
+</script>
+
+<style scoped>
+.src_group + .src_group {
+  margin-top: 24px;
+}
+
+.src_group_title {
+  margin-bottom: 8px;
+  color: var(--medium);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* La source principale se distingue par son cadre, pas par un traitement de
+   texte : le cadre est pose par la prop `highlight` de RmSourceCard, ici il ne
+   reste que le titre de section. */
+.src_primary .src_group_title {
+  color: var(--primary);
+}
+
+.source_placeholder {
+  padding: 8px;
+  color: var(--dark);
+  font-size: 12px;
+  line-height: 14px;
+}
+</style>