@tekkare/romulus 0.1.112 → 0.1.114

package/dist/module.json

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

package/dist/runtime/components/AlertCard.vue

@@ -40,6 +40,7 @@ const emit = defineEmits<{
 
 const FR = {
   view: 'Vue',
+  brands: 'Marques',
   trigger: 'Déclencheur',
   watched: 'Champs suivis',
   channel: 'Canaux',
@@ -100,6 +101,7 @@ const FR = {
 
 const EN = {
   view: 'View',
+  brands: 'Brands',
   trigger: 'Trigger',
   watched: 'Watched fields',
   channel: 'Channels',
@@ -278,8 +280,10 @@ function pick(item: RmAlertMenuItem) {
     </div>
 
     <p v-if="alert.viewTitle" class="rm-alert__view">
-      <RmIcon name="BookmarkSimple" :size="13" />
-      {{ T.view }} : {{ alert.viewTitle }}
+      <!-- Une alerte de produit ne surveille pas une vue : l'annoncer comme
+           telle ferait chercher une vue qui n'existe pas. -->
+      <RmIcon :name="alert.kind === 'product' ? 'Tag' : 'BookmarkSimple'" :size="13" />
+      {{ alert.kind === 'product' ? T.brands : T.view }} : {{ alert.viewTitle }}
       <span v-if="alert.shared" class="rm-alert__shared">{{ T.shared }}</span>
     </p>
 

package/dist/runtime/components/AlertForm.vue

@@ -20,6 +20,7 @@
 import { computed, ref, watch } from 'vue'
 import type {
   RmAlertCadence,
+  RmAlertKind,
   RmAlertDraft,
   RmAlertField,
   RmAlertTrigger,
@@ -43,6 +44,19 @@ const props = withDefaults(
     canSaveScreen?: boolean
     /** Champs surveillables de la page. Vide : seule l'apparition compte. */
     fields?: RmAlertField[]
+    /**
+     * Marques proposees au choix, pour une alerte de produit. Elles arrivent
+     * du serveur a chaque saisie : le formulaire ne filtre pas lui-meme.
+     */
+    brandOptions?: string[]
+    brandsLoading?: boolean
+    /** Plafond de marques, tel que l'API l'impose. */
+    maxBrands?: number
+    /**
+     * L'ecran permet de partir d'une vue. Faux depuis un endroit qui n'en a
+     * pas : le choix se reduit alors a l'alerte de produit.
+     */
+    canWatchView?: boolean
     /** Nombre d'elements que la vue tient a l'ecran, s'il est connu. */
     scopeCount?: number | null
     submitting?: boolean
@@ -64,6 +78,10 @@ const props = withDefaults(
   {
     views: () => [],
     canSaveScreen: false,
+    brandOptions: () => [],
+    brandsLoading: false,
+    maxBrands: 20,
+    canWatchView: true,
     fields: () => [],
     scopeCount: null,
     submitting: false,
@@ -83,9 +101,21 @@ const emit = defineEmits<{
    * la vue surveillee doivent dire la meme chose au moment de la capture.
    */
   'select-view': [id: string]
+  /** Saisie du selecteur de marques, a porter jusqu'a l'index. */
+  'search-brands': [value: string]
 }>()
 
 const FR = {
+  kind: 'Que surveiller',
+  kindView: 'Une vue',
+  kindViewHint: 'Un écran filtré, aussi fin que vous voulez, mais limité à cette page.',
+  kindProduct: 'Un produit',
+  kindProductHint: 'Une à {max} marques, suivies partout : prix, avis HAS, indications, ANSM, PUT, MITM, Journal officiel.',
+  brands: 'Marques surveillées',
+  brandsHint: 'Cherchez une marque et ajoutez-la. L’alerte couvre tout le hub pour chacune.',
+  brandsRequired: 'Choisissez au moins une marque.',
+  brandsTooMany: 'Une alerte suit {max} marques au maximum.',
+  productFields: 'Tous les champs sont suivis : une alerte de produit ne se restreint pas, elle rapporte tout ce qui bouge sur ces marques.',
   screenOption: 'Écran actuel (une vue sera créée)',
   viewSelect: 'Vue à surveiller',
   viewApplied: 'La vue choisie est appliquée à l’écran : c’est lui qui fournit la requête surveillée.',
@@ -128,6 +158,16 @@ const FR = {
 }
 
 const EN = {
+  kind: 'What to watch',
+  kindView: 'A view',
+  kindViewHint: 'A filtered screen, as precise as you like, but tied to that page.',
+  kindProduct: 'A product',
+  kindProductHint: 'One to {max} brands, watched everywhere: prices, HAS opinions, indications, ANSM, PUT, MITM, official journal.',
+  brands: 'Watched brands',
+  brandsHint: 'Search a brand and add it. The alert covers the whole hub for each one.',
+  brandsRequired: 'Pick at least one brand.',
+  brandsTooMany: 'An alert watches at most {max} brands.',
+  productFields: 'Every field is watched: a product alert does not narrow down, it reports whatever moves on those brands.',
   screenOption: 'Current screen (a view will be created)',
   viewSelect: 'View to watch',
   viewApplied: 'The chosen view is applied to the screen: the screen is what provides the watched query.',
@@ -189,6 +229,16 @@ const selectedView = computed(
 
 const editing = computed(() => props.mode === 'edit')
 
+/**
+ * Ce que l'alerte surveille. Le choix ne se pose qu'a la creation : changer
+ * une alerte de vue en alerte de produit, ce n'est plus la meme alerte.
+ */
+const kind = ref<RmAlertKind>(
+  (props.initial?.kind as RmAlertKind) ?? (props.canWatchView ? 'view' : 'product')
+)
+const brands = ref<string[]>(props.initial?.brands ?? [])
+const watchesProduct = computed(() => kind.value === 'product')
+
 const title = ref(props.initial?.title ?? props.viewTitle)
 const triggers = ref<RmAlertTrigger[]>(props.initial?.triggers ?? ['appeared'])
 const watchedFields = ref<string[]>(
@@ -212,6 +262,22 @@ watch(
   },
 )
 
+/**
+ * Le titre suit ce qu'on surveille, tant que l'utilisateur n'y a pas touche.
+ *
+ * En passant sur « un produit », garder le nom d'une vue donnerait une alerte
+ * « Suivi prix anticoagulants » qui suit en realite Opdivo.
+ */
+watch([kind, brands], () => {
+  if (titleTouched.value) return
+  if (watchesProduct.value) {
+    title.value = brands.value.length ? `Veille ${brands.value.join(', ')}` : ''
+    return
+  }
+  const view = props.views.find((entry) => entry.id === selectedViewId.value)
+  title.value = view?.title ?? props.viewTitle
+})
+
 watch(selectedViewId, (id) => {
   const view = props.views.find((entry) => entry.id === id)
   if (view && !titleTouched.value) title.value = view.title
@@ -263,8 +329,19 @@ const cadenceLabel = computed(
   () => cadenceOptions.value.find((option) => option.value === cadence.value)?.label ?? '',
 )
 
+const brandsInvalid = computed(
+  () =>
+    watchesProduct.value &&
+    (brands.value.length === 0 || brands.value.length > props.maxBrands),
+)
+
 const valid = computed(
-  () => title.value.trim().length > 0 && triggers.value.length > 0 && !missingFields.value,
+  () =>
+    title.value.trim().length > 0 &&
+    triggers.value.length > 0 &&
+    !brandsInvalid.value &&
+    // Une alerte de produit suit tout : la question des champs ne se pose pas.
+    (watchesProduct.value || !missingFields.value),
 )
 
 /**
@@ -286,15 +363,21 @@ function submit() {
   if (!valid.value) return
   emit('submit', {
     title: title.value.trim(),
-    viewId: selectedViewId.value,
+    kind: kind.value,
+    brands: watchesProduct.value ? brands.value : [],
+    viewId: watchesProduct.value ? null : selectedViewId.value,
     triggers: triggers.value,
     // Les champs ne servent qu'au declencheur « changement » : les garder
     // sans lui ferait porter a l'alerte une promesse qu'elle ne tient pas.
-    watchedFields: watchesChanges.value
-      ? anyField.value
-        ? [RM_ALERT_ANY_FIELD]
-        : watchedFields.value
-      : [],
+    // Une alerte de produit traverse sept index : une liste de champs nommes
+    // n'y voudrait rien dire, ils different d'un index a l'autre.
+    watchedFields: watchesProduct.value
+      ? [RM_ALERT_ANY_FIELD]
+      : watchesChanges.value
+        ? anyField.value
+          ? [RM_ALERT_ANY_FIELD]
+          : watchedFields.value
+        : [],
     channels: emailOn.value ? ['in_app', 'email'] : ['in_app'],
     cadence: cadence.value,
     // Le partage viendra plus tard : le schema le porte deja, l'ecran non.
@@ -315,7 +398,49 @@ function submit() {
       "
     />
 
-    <div v-if="!editing" class="rm-alert-form__view">
+    <fieldset v-if="!editing && canWatchView" class="rm-alert-form__group">
+      <legend class="rm-alert-form__label">{{ T.kind }}</legend>
+      <p class="rm-alert-form__hint">
+        {{
+          watchesProduct
+            ? T.kindProductHint.replace('{max}', String(maxBrands))
+            : T.kindViewHint
+        }}
+      </p>
+      <RmSegmented
+        v-model="kind"
+        block
+        variant="soft"
+        :options="[
+          { value: 'view', label: T.kindView },
+          { value: 'product', label: T.kindProduct },
+        ]"
+      />
+    </fieldset>
+
+    <fieldset v-if="watchesProduct" class="rm-alert-form__group">
+      <legend class="rm-alert-form__label">{{ T.brands }}</legend>
+      <p class="rm-alert-form__hint">{{ T.brandsHint }}</p>
+      <RmMultipleSelect
+        v-model="brands"
+        label=""
+        search
+        :filter-search="false"
+        :options="brandOptions"
+        :loading="brandsLoading"
+        :show-amount="true"
+        :lang="lang"
+        @search="emit('search-brands', $event)"
+      />
+      <p v-if="brands.length > maxBrands" class="rm-alert-form__error">
+        {{ T.brandsTooMany.replace('{max}', String(maxBrands)) }}
+      </p>
+      <p v-else-if="brands.length === 0" class="rm-alert-form__hint">
+        {{ T.brandsRequired }}
+      </p>
+    </fieldset>
+
+    <div v-else-if="!editing" class="rm-alert-form__view">
       <p class="rm-alert-form__label">{{ T.view }}</p>
       <p class="rm-alert-form__hint">
         <!-- L'avertissement sur l'application ne vaut que pour une vue deja
@@ -344,9 +469,9 @@ 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 v-else-if="editing" class="rm-alert-form__view-name">
+      <RmIcon :name="watchesProduct ? 'Tag' : 'BookmarkSimple'" :size="14" />
+      {{ watchesProduct ? `${T.brands} : ${brands.join(', ')}` : `${T.view} : ${viewTitle}` }}
     </p>
 
     <fieldset class="rm-alert-form__group">
@@ -366,7 +491,11 @@ function submit() {
       />
     </fieldset>
 
-    <fieldset v-if="watchesChanges" class="rm-alert-form__group">
+    <p v-if="watchesProduct && watchesChanges" class="rm-alert-form__hint">
+      {{ T.productFields }}
+    </p>
+
+    <fieldset v-if="watchesChanges && !watchesProduct" class="rm-alert-form__group">
       <legend class="rm-alert-form__label">{{ T.fields }}</legend>
       <p class="rm-alert-form__hint">{{ anyField ? T.anyFieldHint : T.fieldsHint }}</p>
       <template v-if="fields.length">

package/dist/runtime/utils/alerts.d.ts

@@ -30,7 +30,9 @@ export interface RmAlertMenuItem {
 export interface RmAlert {
     id: string;
     title: string;
-    /** Nom de la vue surveillee. */
+    /** Ce que l'alerte surveille : une vue, ou des marques. */
+    kind?: RmAlertKind;
+    /** Nom de la vue surveillee, ou les marques d'une alerte de produit. */
     viewTitle?: string | null;
     status: RmAlertStatus;
     triggers: RmAlertTrigger[];
@@ -96,9 +98,19 @@ export interface RmAlertViewOption {
     id: string;
     title: string;
 }
+/**
+ * Ce qu'une alerte surveille.
+ *
+ * `view` fige le perimetre d'un ecran : fin, mais lie a une page. `product`
+ * nomme des marques et vaut pour tout le hub, sans dependre d'aucune page.
+ */
+export type RmAlertKind = 'view' | 'product';
 /** Ce que le formulaire de creation rend a l'appelant. */
 export interface RmAlertDraft {
     title: string;
+    kind: RmAlertKind;
+    /** Marques surveillees, pour une alerte de produit. */
+    brands: string[];
     /**
      * Vue a surveiller. `null` : l'ecran actuel, que l'appelant enregistrera
      * comme vue avant de creer l'alerte.

package/package.json

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