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

Author: Zorin95670

apps/catalog-ui/docs/design.md

@@ -795,6 +795,19 @@ A full example showing all CatalogUI components configured together:
             }
           }
         },
+        "confirmation-dialog": {
+          "q-dialog": { "persistent": false },
+          "q-card": { "flat": true, "bordered": true },
+          "buttons-card": {
+            "q-card": { "flat": true },
+            "confirm-button": {
+              "q-btn": { "color": "primary", "icon": "check" }
+            },
+            "cancel-button": {
+              "q-btn": { "color": "negative", "outline": true }
+            }
+          }
+        },
         "linid-filter-panel": {
           "header": {
             "q-icon": { "name": "filter_alt" },

apps/catalog-ui/docs/i18n.md

@@ -379,6 +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].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:**
@@ -398,6 +400,18 @@ The `FormDialog` component uses the following keys for internationalization:
       "noData": "No data available",
       "rowsPerPage": "Rows per page:",
       "paginationLabel": "{start}-{end} of {total}"
+    },
+    "ConfirmationDialog": {
+      "title": "Delete a favorite?",
+      "content": "Confirm to delete favorite \"{label}\"?",
+      "ButtonsCard": {
+        "confirm": "Save",
+        "cancel": "Cancel",
+        "confirmLoading": "Saving..."
+      }
+    },
+    "LinidSmartFilter": {
+      //(...) see next section
     }
   }
 }
@@ -755,6 +769,97 @@ export default {
       rowsPerPage: 'Rows per page:',
       paginationLabel: '{start}-{end} of {total}',
     },
+    ConfirmationDialog: {
+      title: 'Delete a favorite?',
+      content: 'Confirm to delete favorite "{label}"?',
+      ButtonsCard: {
+        confirm: 'Save',
+        cancel: 'Cancel',
+        confirmLoading: 'Saving...',
+      },
+    },
+    LinidSmartFilter: {
+      label: 'Search',
+      hint: 'Enter your search criteria',
+      prefix: '',
+      suffix: '',
+      LinidFilterChip: {
+        [FILTER]: {
+          type: 'Filter name',
+          separator: 'or',
+        },
+      },
+      LinidFilterPanel: {
+        title: 'Filter By',
+      },
+      LinidFavoritePanel: {
+        title: 'Favorites',
+        noData: 'No available favorites',
+        createFavorite: 'Create Favorite',
+        overrideFavorite: 'Override Favorite',
+        deleteButton: 'Delete',
+      },
+      TextSearchFilterPanel: {
+        inputLabel: 'Value',
+        inputHint: 'Enter a value to search',
+        inputPrefix: '~',
+        inputSuffix: '*',
+        negateLabel: 'Negate',
+        searchButton: 'Search',
+        operators: {
+          contains: 'contains',
+          startsWith: 'startsWith',
+          endsWith: 'endsWith',
+          equals: 'equals',
+          notContains: 'not contains',
+          notStartsWith: 'not startsWith',
+          notEndsWith: 'not endsWith',
+          notEquals: 'not equals',
+        },
+      },
+      NumberSearchFilterPanel: {
+        inputLabel: 'Value',
+        inputHint: 'Enter a number to search',
+        inputPrefix: '$',
+        inputSuffix: 'kg',
+        negateLabel: 'Negate',
+        searchButton: 'Search',
+        operators: {
+          inferior: 'inferior',
+          superior: 'superior',
+          equals: 'equals',
+          notInferior: 'not inferior',
+          notSuperior: 'not superior',
+          notEquals: 'not equals',
+        },
+      },
+      TreeSearchFilterPanel: {
+        searchButton: 'Search',
+      },
+      ListSearchFilterPanel: {
+        searchButton: 'Search',
+      },
+      DateSearchFilterPanel: {
+        inputLabel: 'Date',
+        inputHint: 'Select or enter a date',
+        inputPrefix: '≥',
+        inputSuffix: '(UTC)',
+        negateLabel: 'Negate',
+        close: 'Close',
+        searchButton: 'Search',
+        operators: {
+          inferior: 'inferior',
+          superior: 'superior',
+          equals: 'equals',
+          notInferior: 'not inferior',
+          notSuperior: 'not superior',
+          notEquals: 'not equals',
+        },
+        validation: {
+          invalidDate: 'Invalid date. Expected format: {format}',
+        },
+      },
+    },
   },
 };
 ```

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

@@ -32,6 +32,7 @@ import {
   BasicRemoteModule,
   getI18nInstance,
   useLinidUiStore,
+  useLinidZoneStore,
 } from '@linagora/linid-im-front-corelib';
 import type { ModulePageOptions } from '../types/ModulePageOptions';
 
@@ -73,6 +74,7 @@ class ModulePage extends BasicRemoteModule<ModulePageOptions> {
     config: ModuleHostConfig<ModulePageOptions>
   ): Promise<ModuleLifecycleResult> {
     const uiStore = useLinidUiStore();
+    const linidZoneStore = useLinidZoneStore();
     const { t } = getI18nInstance().global;
 
     uiStore.addMainNavigationMenuItems({
@@ -81,6 +83,10 @@ class ModulePage extends BasicRemoteModule<ModulePageOptions> {
       path: config.basePath,
     });
 
+    linidZoneStore.registerOnce('base-layout.dialogComponent', {
+      plugin: 'catalogUI/ConfirmationDialog',
+    });
+
     return { success: true };
   }
 }

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

@@ -78,6 +78,7 @@
       class="q-mb-md"
       @update:filters="onFiltersChange"
       @apply:favorite="onFavoriteApply"
+      @delete:favorite="openDeleteFavoriteDialog"
     />
 
     <GenericEntityTable
@@ -143,6 +144,7 @@ import {
   useScopedI18n,
   useUiDesign,
   useLinidUserPreference,
+  uiEventSubject,
 } from '@linagora/linid-im-front-corelib';
 import type { ModuleGenericTablePageOptions } from '../types/ModuleGenericTablePageOptions';
 import type { QTableColumn } from 'quasar';
@@ -163,7 +165,7 @@ const options = computed(
 );
 
 const { t, te } = useScopedI18n(i18nScope.value);
-const { userPreferenceStore } = useLinidUserPreference();
+const { userPreferenceStore, deleteUserPreference } = useLinidUserPreference();
 const items = ref<Record<string, unknown>[]>([]);
 const isLoading = ref<boolean>(false);
 const { Notify } = useNotify();
@@ -269,6 +271,32 @@ function onFavoriteApply(favorite: LinidFilterSet) {
   onFiltersChange(favorite.filters);
 }
 
+/**
+ * Opens a confirmation dialog to delete a saved favorite filter set.
+ *
+ * If the user confirms the action, the corresponding favorite is removed from
+ * the user preferences store using its identifier.
+ * @param favorite - The favorite filter set to delete.
+ */
+function openDeleteFavoriteDialog(favorite: LinidFilterSet): void {
+  uiEventSubject.next({
+    key: 'confirmation',
+    data: {
+      type: 'open',
+      title: t('ConfirmationDialog.title'),
+      content: t('ConfirmationDialog.content', {
+        label: favorite.label,
+      }),
+      uiNamespace: uiNamespace.value,
+      i18nScope: `${i18nScope.value}.ConfirmationDialog`,
+      onConfirm: () =>
+        deleteUserPreference(
+          `${favoritesBaseConfigurationKey.value}${favorite.id}`
+        ),
+    },
+  });
+}
+
 /**
  * Parses a serialized favorite filter set from a JSON string and validates its structure.
  *

apps/catalog-ui/tests/unit/federation/module-page-lifecycle.spec.js

@@ -31,11 +31,18 @@ const mockT = vi.fn((key) => `translated_${key}`);
 
 vi.mock('@linagora/linid-im-front-corelib', async () => {
   const actual = await vi.importActual('@linagora/linid-im-front-corelib');
+
   return {
     ...actual,
+
     useLinidUiStore: () => ({
       addMainNavigationMenuItems: mockAddMainNavigationMenuItems,
     }),
+
+    useLinidZoneStore: () => ({
+      registerOnce: vi.fn(),
+    }),
+
     getI18nInstance: () => ({
       global: {
         t: mockT,