@tekkare/romulus 0.1.105 → 0.1.107

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.104",
+  "version": "0.1.106",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/AlertForm.vue

@@ -46,6 +46,14 @@ const props = withDefaults(
     /** Nombre d'elements que la vue tient a l'ecran, s'il est connu. */
     scopeCount?: number | null
     submitting?: boolean
+    /**
+     * `edit` prefixe le formulaire avec une alerte existante et retire le
+     * choix de la vue : changer de vue voudrait dire recapturer une requete,
+     * ce qui n'est possible que depuis la page. On en cree une autre.
+     */
+    mode?: 'create' | 'edit'
+    /** Alerte a modifier, en mode `edit`. */
+    initial?: Partial<RmAlertDraft>
     lang?: 'fr' | 'en'
   }>(),
   {
@@ -54,6 +62,8 @@ const props = withDefaults(
     fields: () => [],
     scopeCount: null,
     submitting: false,
+    mode: 'create',
+    initial: undefined,
     lang: 'fr',
   },
 )
@@ -102,6 +112,8 @@ const FR = {
   cadenceHint:
     'Un plafond, pas un rythme : rien ne part quand rien n’a bougé, et la détection suit celle des données.',
   submit: 'Créer l’alerte',
+  save: 'Enregistrer',
+  reseed: 'Changer les champs suivis repart d’une nouvelle référence : vous ne serez prévenu que de ce qui bouge ensuite.',
   cancel: 'Annuler',
   baseline:
     'À la création, la référence est capturée sans rien signaler : vous ne serez prévenu que de ce qui bouge ensuite.',
@@ -141,6 +153,8 @@ const EN = {
   cadenceHint:
     'A cap, not a rhythm: nothing goes out when nothing moved, and detection follows the data.',
   submit: 'Create the alert',
+  save: 'Save',
+  reseed: 'Changing the watched fields restarts from a new baseline: you are only told about what moves afterwards.',
   cancel: 'Cancel',
   baseline:
     'On creation the baseline is captured silently: you are only told about what moves afterwards.',
@@ -165,16 +179,23 @@ const selectedView = computed(
   () => viewOptions.value.find((option) => option.id === selectedViewId.value) ?? viewOptions.value[0],
 )
 
-const title = ref(props.viewTitle)
-const triggers = ref<RmAlertTrigger[]>(['appeared'])
-const watchedFields = ref<string[]>([])
+const editing = computed(() => props.mode === 'edit')
+
+const title = ref(props.initial?.title ?? props.viewTitle)
+const triggers = ref<RmAlertTrigger[]>(props.initial?.triggers ?? ['appeared'])
+const watchedFields = ref<string[]>(
+  (props.initial?.watchedFields ?? []).filter((field) => field !== RM_ALERT_ANY_FIELD),
+)
 /** Surveiller le document entier plutot qu'une liste de champs. */
-const anyField = ref(false)
-const emailOn = ref(false)
-const cadence = ref<RmAlertCadence>('weekly')
+const anyField = ref(!!props.initial?.watchedFields?.includes(RM_ALERT_ANY_FIELD))
+const emailOn = ref(!!props.initial?.channels?.includes('email'))
+const cadence = ref<RmAlertCadence>(props.initial?.cadence ?? 'weekly')
+
+/** Champs suivis au chargement, pour dire quand la reference va repartir. */
+const initialFields = JSON.stringify([...(props.initial?.watchedFields ?? [])].sort())
 
 /** Titre libre des que l'utilisateur y touche : on ne l'ecrase plus. */
-const titleTouched = ref(false)
+const titleTouched = ref(props.mode === 'edit')
 
 watch(
   () => props.viewTitle,
@@ -235,6 +256,21 @@ const valid = computed(
   () => title.value.trim().length > 0 && triggers.value.length > 0 && !missingFields.value,
 )
 
+/**
+ * Les champs suivis ont bouge depuis l'ouverture.
+ *
+ * C'est le seul changement qui fait repartir l'alerte d'une nouvelle
+ * reference cote API : le hachage ne couvre plus les memes valeurs.
+ */
+const fieldsChanged = computed(() => {
+  const next = anyField.value
+    ? [RM_ALERT_ANY_FIELD]
+    : watchesChanges.value
+      ? watchedFields.value
+      : []
+  return JSON.stringify([...next].sort()) !== initialFields
+})
+
 function submit() {
   if (!valid.value) return
   emit('submit', {
@@ -268,10 +304,12 @@ function submit() {
       "
     />
 
-    <div class="rm-alert-form__view">
+    <div v-if="!editing" class="rm-alert-form__view">
       <p class="rm-alert-form__label">{{ T.view }}</p>
       <p class="rm-alert-form__hint">
-        {{ viewOptions.length > 1 ? T.viewApplied : T.viewHint }}
+        <!-- L'avertissement sur l'application ne vaut que pour une vue deja
+             enregistree : « ecran actuel », lui, part de ce qui est deja la. -->
+        {{ viewOptions.length > 1 && selectedViewId ? T.viewApplied : T.viewHint }}
       </p>
 
       <RmDropdownSelect
@@ -295,6 +333,11 @@ function submit() {
       <p v-if="!selectedViewId" class="rm-alert-form__hint">{{ T.screenNote }}</p>
     </div>
 
+    <p v-else class="rm-alert-form__view-name">
+      <RmIcon name="BookmarkSimple" :size="14" />
+      {{ T.view }} : {{ viewTitle }}
+    </p>
+
     <fieldset class="rm-alert-form__group">
       <legend class="rm-alert-form__label">{{ T.triggers }}</legend>
       <p class="rm-alert-form__hint">{{ T.triggersHint }}</p>
@@ -350,9 +393,12 @@ function submit() {
       </div>
     </fieldset>
 
-    <p class="rm-alert-form__baseline">
+    <p
+      v-if="!editing || fieldsChanged"
+      class="rm-alert-form__baseline"
+    >
       <RmIcon name="Info" :size="14" />
-      {{ T.baseline }}
+      {{ editing ? T.reseed : T.baseline }}
     </p>
 
     <div class="rm-alert-form__actions">
@@ -363,7 +409,7 @@ function submit() {
         :disabled="!valid || submitting"
         :loading="submitting"
       >
-        {{ T.submit }}
+        {{ editing ? T.save : T.submit }}
       </RmButton>
     </div>
   </form>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.105",
+  "version": "0.1.107",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",