feat(catalog-ui): override favorite from smart-filter

Related to #197

Author: jcabannes

apps/catalog-ui/docs/i18n.md

@@ -379,7 +379,8 @@ The `FormDialog` component uses the following keys for internationalization:
 | `[INSTANCE_ID].seeButton`          | Label for the “see details” action button                              | Table row action     | -          |
 | `[INSTANCE_ID].ButtonsCard`        | Base translation scope for the actions card (e.g. create button label) | Page actions section | -          |
 | `[INSTANCE_ID].GenericEntityTable` | Base translation scope for the GenericEntityTable                      | Page table section   | -          |
-| `[INSTANCE_ID].ConfirmationDialog` | Base translation scope for the ConfirmationDialog                      | Page dialog section  | -          |
+| `[INSTANCE_ID].ConfirmationDialog` | Base translation scope for the delete-favorite ConfirmationDialog      | Page dialog section  | -          |
+| `[INSTANCE_ID].FormDialog`         | Base translation scope for the override-favorite FormDialog            | Page dialog section  | -          |
 | `[INSTANCE_ID].LinidSmartFilter`   | Base translation scope for the LinidSmartFilter                        | Page search section  | -          |
 | `[INSTANCE_ID].[FIELD_LABEL]`      | Label displayed for a table column header                              | Table column header  | -          |
 
@@ -410,6 +411,20 @@ The `FormDialog` component uses the following keys for internationalization:
         "confirmLoading": "Saving..."
       }
     },
+    "FormDialog": {
+      "overrideTitle": "Override a favorite?",
+      "overrideContent": "Select the favorite to replace with the current filters.",
+      "ButtonsCard": {
+        "cancel": "Cancel",
+        "confirm": "Override",
+        "confirmLoading": "Overriding..."
+      },
+      "fields": {
+        "favorite": {
+          "label": "Favorite"
+        }
+      }
+    },
     "LinidSmartFilter": {
       //(...) see next section
     }
@@ -778,6 +793,20 @@ export default {
         confirmLoading: 'Saving...',
       },
     },
+    FormDialog: {
+      overrideTitle: 'Override a favorite?',
+      overrideContent: 'Select the favorite to replace with the current filters.',
+      ButtonsCard: {
+        cancel: 'Cancel',
+        confirm: 'Override',
+        confirmLoading: 'Overriding...',
+      },
+      fields: {
+        favorite: {
+          label: 'Favorite',
+        },
+      },
+    },
     LinidSmartFilter: {
       label: 'Search',
       hint: 'Enter your search criteria',

apps/catalog-ui/docs/pages/GenericTablePage.md

@@ -193,6 +193,10 @@ Each active filter is serialized to a query param using `filter.toString()`, key
   - `seeButton`
   - `error`
   - `ButtonsCard.create`
+  - `ConfirmationDialog.title` — title of the delete-favorite confirmation dialog
+  - `ConfirmationDialog.content` — body of the delete-favorite confirmation dialog (`{label}` placeholder available)
+  - `FormDialog.overrideTitle` — title of the override-favorite form dialog
+  - `FormDialog.overrideContent` — body of the override-favorite form dialog
 
 ---
 

apps/catalog-ui/src/federation/module-page-lifecycle.ts

@@ -87,6 +87,10 @@ class ModulePage extends BasicRemoteModule<ModulePageOptions> {
       plugin: 'catalogUI/ConfirmationDialog',
     });
 
+    linidZoneStore.registerOnce('base-layout.dialogComponent', {
+      plugin: 'catalogUI/FormDialog',
+    });
+
     return { success: true };
   }
 }

apps/catalog-ui/src/pages/GenericTablePage.vue

@@ -79,6 +79,7 @@
       @update:filters="onFiltersChange"
       @apply:favorite="onFavoriteApply"
       @delete:favorite="openDeleteFavoriteDialog"
+      @override:favorite="openOverrideFavoriteDialog"
     />
 
     <GenericEntityTable
@@ -123,34 +124,34 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router';
-import { computed, onMounted, ref } from 'vue';
 import type {
   LinidFilter,
+  LinidFilterSetUserPreference,
   LinidQBtnProps,
   QTableRequestEvent,
-  QueryFilter,
   QuasarPagination,
-  LinidFilterSetUserPreference,
+  QueryFilter,
 } from '@linagora/linid-im-front-corelib';
 import {
   getEntities,
   getModuleHostConfiguration,
-  LinidZoneRenderer,
   LinidFilterSet,
+  LinidZoneRenderer,
+  uiEventSubject,
   useLinidFilterUrl,
+  useLinidUserPreference,
   useNotify,
   usePagination,
   useScopedI18n,
   useUiDesign,
-  useLinidUserPreference,
-  uiEventSubject,
 } from '@linagora/linid-im-front-corelib';
-import type { ModuleGenericTablePageOptions } from '../types/ModuleGenericTablePageOptions';
 import type { QTableColumn } from 'quasar';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import ButtonsCard from '../components/card/ButtonsCard.vue';
-import GenericEntityTable from '../components/table/GenericEntityTable.vue';
 import LinidSmartFilter from '../components/smart-filter/LinidSmartFilter.vue';
+import GenericEntityTable from '../components/table/GenericEntityTable.vue';
+import type { ModuleGenericTablePageOptions } from '../types/ModuleGenericTablePageOptions';
 
 const router = useRouter();
 const route = useRoute();
@@ -165,7 +166,8 @@ const options = computed(
 );
 
 const { t, te } = useScopedI18n(i18nScope.value);
-const { userPreferenceStore, deleteUserPreference } = useLinidUserPreference();
+const { userPreferenceStore, deleteUserPreference, saveUserPreference } =
+  useLinidUserPreference();
 const items = ref<Record<string, unknown>[]>([]);
 const isLoading = ref<boolean>(false);
 const { Notify } = useNotify();
@@ -297,6 +299,51 @@ function openDeleteFavoriteDialog(favorite: LinidFilterSet): void {
   });
 }
 
+/**
+ * Opens a confirmation dialog to override an existing favorite filter set with the current filters.
+ */
+function openOverrideFavoriteDialog(): void {
+  uiEventSubject.next({
+    key: 'form',
+    data: {
+      type: 'open',
+      title: t('FormDialog.overrideTitle'),
+      content: t('FormDialog.overrideContent'),
+      uiNamespace: uiNamespace.value,
+      i18nScope: `${i18nScope.value}.FormDialog`,
+      formFields: [
+        {
+          name: 'favorite',
+          type: 'String',
+          input: 'List',
+          required: true,
+          inputSettings: {
+            values: favorites.value.map((f) => ({
+              label: f.label,
+              value: f,
+            })),
+            optionLabel: 'label',
+          },
+        },
+      ],
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onSubmit: (formData: { favorite: LinidFilterSet }) =>
+        saveUserPreference(
+          `${favoritesBaseConfigurationKey.value}${formData.favorite.id}`,
+          JSON.stringify({
+            id: formData.favorite.id,
+            label: formData.favorite.label,
+            value: new LinidFilterSet(
+              formData.favorite.id,
+              formData.favorite.label,
+              filters.value
+            ).toString(),
+          })
+        ),
+    },
+  });
+}
+
 /**
  * Parses a serialized favorite filter set from a JSON string and validates its structure.
  *

apps/catalog-ui/src/types/field.ts

@@ -210,6 +210,11 @@ export interface FieldListValue {
  * Settings for fields that allow selection from a predefined list of values.
  */
 export interface FieldListSettings extends FieldSettings {
+  /**
+   * Optional key used to display a label for the field in the UI.
+   * If omitted, the field's `value` property will be used as the label.
+   */
+  optionLabel?: string;
   /**
    * List of possible values for the field.
    * Use `string[]` for a flat list with no filtering.