diff --git a/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.html b/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.html
index 226175b846..99f750aaa5 100644
--- a/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.html
+++ b/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.html
@@ -4,6 +4,16 @@
[title]="'Basic props'"
[toolbarConfig]="toolbarConfig"
[items]="items"
+ [emptyDataMessageConfig]="{
+ title: 'Нет никаких данных',
+ subtitle:
+ 'По дефолту это сообщение не выводится. Но при желании можно сконфигурировать. \n\n А за сообщение поиска отличает свойство [emptySearchResultMessageConfig]'
+ }"
>
+
+
+
diff --git a/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.ts b/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.ts
index 8cce34b536..f1ab94dbfa 100644
--- a/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.ts
+++ b/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-basic-example/navigation-menu-basic-example.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { PrizmNavigationMenuItem, PrizmNavigationMenuToolbarConfig } from '@prizm-ui/components';
import { PrizmIconsSvgRegistry, PRIZM_ICONS_SVG_SET } from '@prizm-ui/icons';
import { MOKED_ITEMS } from './navigation-menu.constants';
@@ -19,7 +19,12 @@ export class NavigationMenuBasicExampleComponent {
items: PrizmNavigationMenuItem[] = MOKED_ITEMS;
- constructor(private readonly iconRegistry: PrizmIconsSvgRegistry) {
+ constructor(private readonly iconRegistry: PrizmIconsSvgRegistry, private cdr: ChangeDetectorRef) {
this.iconRegistry.registerIcons(PRIZM_ICONS_SVG_SET);
}
+
+ public toggleLoading(): void {
+ this.items.length ? (this.items = []) : (this.items = MOKED_ITEMS);
+ this.cdr.detectChanges();
+ }
}
diff --git a/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-groups-example/navigation-menu-groups-example.component.html b/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-groups-example/navigation-menu-groups-example.component.html
index 087f0b5f18..a6c08da391 100644
--- a/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-groups-example/navigation-menu-groups-example.component.html
+++ b/apps/doc/src/app/components/navigation-menu/examples/navigation-menu-groups-example/navigation-menu-groups-example.component.html
@@ -45,7 +45,7 @@
[itemExtraTemplate]="itemExtraTemplate"
[toolbarConfig]="group.toolbarConfig"
[searchConfig]="{ searchSource: 'group' }"
- [emptyMessageConfig]="{
+ [emptySearchResultMessageConfig]="{
title: 'This could be configured',
subtitle:
'Current group has { searchSource: \'group\' and will not filter items on top toolbar search query change }'
diff --git a/apps/doc/src/app/components/navigation-menu/navigation-menu-example.component.html b/apps/doc/src/app/components/navigation-menu/navigation-menu-example.component.html
index a568f56cd7..2de7366c90 100644
--- a/apps/doc/src/app/components/navigation-menu/navigation-menu-example.component.html
+++ b/apps/doc/src/app/components/navigation-menu/navigation-menu-example.component.html
@@ -35,7 +35,8 @@
[expandedItemsMap]="expandedItemsMap"
[expandedGroupsMap]="expandedGroupsMap"
[settingsConfig]="settingsConfig"
- [emptyMessageConfig]="emptyMessageConfig"
+ [emptySearchResultMessageConfig]="emptySearchResultMessageConfig"
+ [emptyDataMessageConfig]="emptyDataMessageConfig"
[headerConfig]="headerConfig"
[searchConfig]="searchConfig"
>
@@ -130,12 +131,20 @@
settingsConfig
- emptyMessageConfig
+ Will be displayed when search is enabled and where are no search entires
+
+
+ Will be displayed when incoming data is empty (for example not loaded yet)
();
expandedGroupsMap = new Map();
- emptyMessageConfig: PrizmNavigationMenuEmptyMessageConfig = null;
+ emptySearchResultMessageConfig: PrizmNavigationMenuEmptyMessageConfig = null;
+ emptyDataMessageConfig: PrizmNavigationMenuEmptyMessageConfig = null;
searchConfig: PrizmNavigationMenuSearchConfig = null;
settingsConfig: PrizmNavigationMenuSettingsConfig = {};
headerConfig: PrizmNavigationMenuHeaderConfig = null;
diff --git a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.html b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.html
index aa28638743..df0d5bf18c 100644
--- a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.html
+++ b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.html
@@ -38,14 +38,16 @@
(goToRootItem)="handleGoToRootItem($event)"
>
-
diff --git a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less
index 5e8b1ece23..a3c267c893 100644
--- a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less
+++ b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less
@@ -79,6 +79,8 @@
&__top {
flex: 1;
overflow: auto;
+ display: flex;
+ flex-direction: column;
}
&__bottom {
diff --git a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts
index a640d4d117..0783a9ba67 100644
--- a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts
+++ b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts
@@ -70,8 +70,11 @@ export class PrizmNavigationMenuComponent<
@Input() set settingsConfig(settings: PrizmNavigationMenuSettingsConfig) {
this.menuService.setSettingsConfiguration(settings);
}
- @Input() set emptyMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig) {
- this.menuService.setEmptyMessageConfig(config);
+ @Input() set emptySearchResultMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig) {
+ this.menuService.setEmptySearchResultMessageConfig(config);
+ }
+ @Input() set emptyDataMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig) {
+ this.menuService.setEmptyDataMessageConfig(config);
}
@Input() set headerConfig(config: PrizmNavigationMenuHeaderConfig) {
this.headerConfiguration = { ...config, showSettings: false };
@@ -87,8 +90,11 @@ export class PrizmNavigationMenuComponent<
menuSearchConfig$: Observable = this.menuService.searchConfig$;
- emptyMessageConfig$: Observable =
- this.menuService.emptyMessageConfig$;
+ emptySearchResultMessageConfig$: Observable =
+ this.menuService.emptySearchResultMessageConfig$;
+
+ emptyDataMessageConfig$: Observable =
+ this.menuService.emptyDataMessageConfig$;
settingsConfiguration: PrizmNavigationMenuSettingsConfig = this.menuService.settingsConfig;
diff --git a/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu-group.service.ts b/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu-group.service.ts
index 23b163c467..4496e62cdd 100644
--- a/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu-group.service.ts
+++ b/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu-group.service.ts
@@ -26,10 +26,15 @@ export class PrizmNavigationMenuGroupService<
{
private groupId$$ = new BehaviorSubject(null);
- private emptyMessageConfig$$ = new BehaviorSubject(
+ private emptySearchResultMessageConfig$$ = new BehaviorSubject(
DEFAULT_EMPTY_MESSAGE_CONFIG
);
+ private emptyDataMessageConfig$$ = new BehaviorSubject({
+ title: '',
+ subtitle: '',
+ });
+
private toolbarConfig$$ = new BehaviorSubject(DEFAULT_TOOLBAR_CONFIG);
private searchConfig$$ = new BehaviorSubject({
@@ -126,12 +131,17 @@ export class PrizmNavigationMenuGroupService<
closeAll$ = new Subject();
+ searchEnabled$: Observable = this.searchState$$.pipe(map(s => s.enabled));
+
searchConfig$: Observable = this.searchConfig$$.asObservable();
toolbarConfig$: Observable = this.toolbarConfig$$.asObservable();
- emptyMessageConfig$: Observable =
- this.emptyMessageConfig$$.asObservable();
+ emptySearchResultMessageConfig$: Observable =
+ this.menuService.emptySearchResultMessageConfig$;
+
+ emptyDataMessageConfig$: Observable =
+ this.menuService.emptyDataMessageConfig$;
get groupId(): string {
return this.groupId$$.value;
@@ -191,8 +201,12 @@ export class PrizmNavigationMenuGroupService<
});
}
- public setEmptyMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig): void {
- this.emptyMessageConfig$$.next(config);
+ public setEmptySearchResultMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig): void {
+ this.emptySearchResultMessageConfig$$.next(config);
+ }
+
+ public setEmptyDataMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig): void {
+ this.emptyDataMessageConfig$$.next(config);
}
public applySearchState(value: { enabled: boolean; value: string }): void {
diff --git a/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu.service.ts b/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu.service.ts
index 9cc26df533..48838d0199 100644
--- a/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu.service.ts
+++ b/libs/components/src/lib/components/navigation-menu/services/prizm-navigation-menu.service.ts
@@ -62,10 +62,15 @@ export class PrizmNavigationMenuService<
selectionMode: 'single',
});
- private emptyMessageConfig$$ = new BehaviorSubject(
+ private emptySearchResultMessageConfig$$ = new BehaviorSubject(
DEFAULT_EMPTY_MESSAGE_CONFIG
);
+ private emptyDataMessageConfig$$ = new BehaviorSubject({
+ title: '',
+ subtitle: '',
+ });
+
get settingsConfig(): PrizmNavigationMenuSettingsConfig {
return this.settingsConfig$$.value;
}
@@ -82,8 +87,11 @@ export class PrizmNavigationMenuService<
toolbarConfig$: Observable = this.toolbarConfig$$.asObservable();
- emptyMessageConfig$: Observable =
- this.emptyMessageConfig$$.asObservable();
+ emptySearchResultMessageConfig$: Observable =
+ this.emptySearchResultMessageConfig$$.asObservable();
+
+ emptyDataMessageConfig$: Observable =
+ this.emptyDataMessageConfig$$.asObservable();
toolbarIsNotEmpty: boolean;
@@ -223,8 +231,12 @@ export class PrizmNavigationMenuService<
this.itemKeyName = itemKeyName;
}
- public setEmptyMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig): void {
- this.emptyMessageConfig$$.next(config);
+ public setEmptySearchResultMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig): void {
+ this.emptySearchResultMessageConfig$$.next(config);
+ }
+
+ public setEmptyDataMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig): void {
+ this.emptyDataMessageConfig$$.next(config);
}
/** PRIVATE */