feat(catalog-ui): add create favorite form dailog

Author: Adrien

apps/catalog-ui/docs/i18n.md

@@ -372,17 +372,18 @@ The `FormDialog` component uses the following keys for internationalization:
 
 **File:** apps/catalog-ui/src/pages/GenericTablePage.vue
 
-| Key                               | Description                                                            | Usage                | Parameters |
-|-----------------------------------| ---------------------------------------------------------------------- | -------------------- | ---------- |
-| `[INSTANCE_ID].title`             | Title displayed at the top of the page (if present)                    | Page header          | -          |
-| `[INSTANCE_ID].error`             | Error message when data loading fails.                                 | Page toaster         | -          |
-| `[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 | -          |
+| Key                                | Description                                                            | Usage                | Parameters |
+| ---------------------------------- | ---------------------------------------------------------------------- | -------------------- | ---------- |
+| `[INSTANCE_ID].title`              | Title displayed at the top of the page (if present)                    | Page header          | -          |
+| `[INSTANCE_ID].error`              | Error message when data loading fails.                                 | Page toaster         | -          |
+| `[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].DeleteDialog`      | Base translation scope for the delete-favorite ConfirmationDialog      | Page dialog section  | -          |
-| `[INSTANCE_ID].OverrideDialog`    | 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  | -          |
+| `[INSTANCE_ID].DeleteDialog`       | Base translation scope for the delete-favorite ConfirmationDialog      | Page dialog section  | -          |
+| `[INSTANCE_ID].OverrideDialog`     | Base translation scope for the override-favorite FormDialog            | Page dialog section  | -          |
+| `[INSTANCE_ID].CreateDialog`       | Base translation scope for the create-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  | -          |
 
 **Example:**
 
@@ -425,6 +426,16 @@ The `FormDialog` component uses the following keys for internationalization:
         }
       }
     },
+    "CreateDialog": {
+      "title": "Create a favorite?",
+      "content": "Name of the favorite.",
+      "duplicateName": "A favorite with the name \"{name}\" already exists.",
+      "ButtonsCard": {
+        "cancel": "Cancel",
+        "confirm": "Create",
+        "confirmLoading": "Creating..."
+      }
+    },
     "LinidSmartFilter": {
       //(...) see next section
     }
@@ -807,6 +818,16 @@ export default {
         },
       },
     },
+    CreateDialog: {
+      title: 'Create a favorite?',
+      content: 'Name of the favorite.',
+      duplicateName: 'A favorite with the name "{name}" already exists.',
+      ButtonsCard: {
+        cancel: 'Cancel',
+        confirm: 'Create',
+        confirmLoading: 'Creating...',
+      },
+    },
     LinidSmartFilter: {
       label: 'Search',
       hint: 'Enter your search criteria',

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

@@ -197,6 +197,8 @@ Each active filter is serialized to a query param using `filter.toString()`, key
   - `DeleteDialog.content` — body of the delete-favorite confirmation dialog (`{label}` placeholder available)
   - `OverrideDialog.title` — title of the override-favorite form dialog
   - `OverrideDialog.content` — body of the override-favorite form dialog
+  - `CreateDialog.title` — title of the create-favorite form dialog
+  - `CreateDialog.content` — body of the create-favorite form dialog
 
 ---
 

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

@@ -80,6 +80,7 @@
       @apply:favorite="onFavoriteApply"
       @delete:favorite="openDeleteFavoriteDialog"
       @override:favorite="openOverrideFavoriteDialog"
+      @create:favorite="openCreateFavoriteDialog"
     />
 
     <GenericEntityTable
@@ -344,6 +345,70 @@ function openOverrideFavoriteDialog(): void {
   });
 }
 
+/**
+ * Generates a unique favorite ID by looping on crypto.randomUUID until an ID is found.
+ * @returns A unique UUID string that is not already used in favorites.
+ */
+function generateUniqueFavoriteId(): string {
+  let newId = crypto.randomUUID();
+  while (favorites.value.some((fav) => fav.id === newId)) {
+    newId = crypto.randomUUID();
+  }
+  return newId;
+}
+
+/**
+ * Opens a form dialog to create a favorite filter set with the current filters.
+ */
+function openCreateFavoriteDialog(): void {
+  uiEventSubject.next({
+    key: 'form',
+    data: {
+      type: 'open',
+      title: t('CreateDialog.title'),
+      content: t('CreateDialog.content'),
+      uiNamespace: uiNamespace.value,
+      i18nScope: `${i18nScope.value}.CreateDialog`,
+      formFields: [
+        {
+          name: 'favoriteName',
+          type: 'String',
+          input: 'Text',
+          required: true,
+          inputSettings: {},
+        },
+      ],
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onSubmit: (formData: { favoriteName: string }) => {
+        const trimmedFavoriteName = formData.favoriteName.trim();
+        if (favorites.value.some((fav) => fav.label === trimmedFavoriteName)) {
+          Notify({
+            type: 'negative',
+            message: t('CreateDialog.duplicateName', {
+              name: trimmedFavoriteName,
+            }),
+          });
+          return;
+        }
+
+        const favoriteId = generateUniqueFavoriteId();
+        saveUserPreference(
+          `${favoritesBaseConfigurationKey.value}${favoriteId}`,
+          JSON.stringify({
+            id: favoriteId,
+            label: trimmedFavoriteName,
+            value: new LinidFilterSet(
+              favoriteId,
+              trimmedFavoriteName,
+              filters.value
+            ).toString(),
+          })
+        );
+      },
+    },
+  });
+}
+
 /**
  * Parses a serialized favorite filter set from a JSON string and validates its structure.
  *