feat(catalog-ui): integrate favorites panel in smart-filter

Author: Zorin95670

apps/catalog-ui/docs/components/smart-filter/LinidSmartFilter.md

@@ -26,9 +26,13 @@ The **LinidSmartFilter** component provides a filtering interface with a toggle-
 
 ## **Events**
 
-| Event            | Payload         | Description                                                                                                                               |
-| ---------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| `update:filters` | `LinidFilter[]` | Emitted whenever the user applies or removes a filter. The payload contains only the filters that have at least one active value applied. |
+| Event               | Payload          | Description                                                                                                                               |
+| ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `update:filters`    | `LinidFilter[]`  | Emitted whenever the user applies or removes a filter. The payload contains only the filters that have at least one active value applied. |
+| `apply:favorite`    | `LinidFilterSet` | Emitted when a favorite filter set is applied. The payload contains the applied favorite filter set.                                      |
+| `delete:favorite`   | `LinidFilterSet` | Emitted when a favorite filter set is deleted. The payload contains the deleted favorite filter set.                                      |
+| `create:favorite`   | -                | Emitted when the user wants to create a new favorite filter set.                                                                          |
+| `override:favorite` | -                | Emitted when the user wants to override an existing favorite filter set.                                                                  |
 
 ---
 
@@ -107,11 +111,12 @@ Each applied filter is displayed as a chip in the search field. The chip shows t
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
-import { LinidFilter } from '@linagora/linid-im-front-corelib';
+import { LinidFilter, LinidFilterSet } from '@linagora/linid-im-front-corelib';
 
 const filters = ref([]);
 
 const filterDefinitions = [new LinidFilter('firstname', 'text', { fieldName: 'firstname' }, []), new LinidFilter('lastname', 'text', { fieldName: 'lastname' }, [])];
+const filterSet = [new LinidFilterSet('id', 'label', [])];
 
 function onUpdateFilters(updated) {
   filters.value = updated;
@@ -123,7 +128,7 @@ function onUpdateFilters(updated) {
     ui-namespace="myApp"
     i18n-scope="myScope"
     :filters="filters"
-    :options="{ filters: filterDefinitions }"
+    :options="{ filters: filterDefinitions, filterSet: filterSets }"
     @update:filters="onUpdateFilters"
   />
 </template>
@@ -134,7 +139,7 @@ function onUpdateFilters(updated) {
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
-import { LinidFilter } from '@linagora/linid-im-front-corelib';
+import { LinidFilter, LinidFilterSet } from '@linagora/linid-im-front-corelib';
 
 const filters = ref([]);
 
@@ -165,14 +170,15 @@ const filterDefinitions = [
     []
   ),
 ];
+const filterSet = [new LinidFilterSet('id', 'label', [])];
 </script>
 
 <template>
   <linid-smart-filter
     ui-namespace="myApp"
     i18n-scope="myScope"
     :filters="filters"
-    :options="{ filters: filterDefinitions }"
+    :options="{ filters: filterDefinitions, filterSet: filterSets }"
     @update:filters="filters = $event"
   />
 </template>
@@ -238,6 +244,7 @@ The component uses the LinID design system through `useUiDesign()` and applies p
 | ------------------------------------------------------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------- |
 | `{uiNamespace}.linid-smart-filter`                                                    | `q-field`        | Filter field container styling and configuration                                                            |
 | `{uiNamespace}.linid-smart-filter`                                                    | `q-menu`         | Dropdown menu styling and configuration                                                                     |
+| `{uiNamespace}.linid-smart-filter`                                                    | `q-separator`    | Separator between panel in menu.                                                                            |
 | `{uiNamespace}.linid-smart-filter.iconSearch`                                         | `q-icon`         | Search icon styling                                                                                         |
 | `{uiNamespace}.linid-smart-filter.iconMenuClose`                                      | `q-icon`         | Right dropdown icon styling (menu open)                                                                     |
 | `{uiNamespace}.linid-smart-filter.iconMenuOpen`                                       | `q-icon`         | Right dropdown icon styling (menu closed)                                                                   |

apps/catalog-ui/docs/design.md

@@ -339,6 +339,7 @@ Smart filtering component with toggle-able menu for managing active filters and
       "q-menu": {
         "autoClose": true
       },
+      "q-separator": {},
       "iconSearch": {
         "q-icon": {
           "name": "search"
@@ -773,6 +774,7 @@ A full example showing all CatalogUI components configured together:
       "linid-smart-filter": {
         "q-field": { "outlined": true, "dense": true },
         "q-menu": { "autoClose": true },
+        "q-separator": {},
         "iconSearch": {
           "q-icon": { "name": "search" }
         },

apps/catalog-ui/src/components/smart-filter/LinidSmartFilter.vue

@@ -77,7 +77,7 @@
 
       <q-menu
         v-model="isFilterMenuOpen"
-        class="linid-smart-filter--menu"
+        class="row linid-smart-filter--menu"
         data-cy="linid-smart-filter-menu"
         v-bind="uiProps.menu"
       >
@@ -102,6 +102,22 @@
             />
           </template>
         </linid-filter-panel>
+
+        <q-separator
+          v-bind="uiProps.separator"
+          vertical
+        />
+
+        <linid-favorite-panel
+          :favorites="options?.filterSets ?? []"
+          :ui-namespace="localUiNamespace"
+          :i18n-scope="localI18nScope"
+          data-cy="linid-smart-favorite-panel"
+          @apply="(data) => emit('apply:favorite', data)"
+          @delete="(data) => emit('delete:favorite', data)"
+          @create="emit('create:favorite')"
+          @override="emit('override:favorite')"
+        />
       </q-menu>
     </q-field>
   </div>
@@ -134,6 +150,7 @@ import ListSearchFilterPanel from './ListSearchFilterPanel.vue';
 import NumberSearchFilterPanel from './NumberSearchFilterPanel.vue';
 import TextSearchFilterPanel from './TextSearchFilterPanel.vue';
 import TreeSearchFilterPanel from './TreeSearchFilterPanel.vue';
+import LinidFavoritePanel from './LinidFavoritePanel.vue';
 
 const PANEL_COMPONENTS: Record<LinidFilterType, Component> = {
   text: TextSearchFilterPanel,
@@ -170,6 +187,7 @@ const uiProps = {
   field: ui<LinidQFieldProps>(`${localUiNamespace}`, 'q-field'),
   menu: ui<LinidQMenuProps>(`${localUiNamespace}`, 'q-menu'),
   iconSearch: ui<LinidQIconProps>(`${localUiNamespace}.iconSearch`, 'q-icon'),
+  separator: ui<LinidQIconProps>(`${localUiNamespace}`, 'q-separator'),
   iconMenuClose: ui<LinidQIconProps>(
     `${localUiNamespace}.iconMenuClose`,
     'q-icon'

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

@@ -60,4 +60,8 @@ export interface LinidSmartFilterProps extends CommonComponentProps {
  */
 export type LinidSmartFilterOutputs = {
   (e: 'update:filters', filters: LinidFilter[]): void;
+  (e: 'apply:favorite', favorite: LinidFilterSet): void;
+  (e: 'delete:favorite', favorite: LinidFilterSet): void;
+  (e: 'create:favorite'): void;
+  (e: 'override:favorite'): void;
 };