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)" > -
-
- {{ emptyMessageConfig.title }} - {{ emptyMessageConfig.subtitle }} + +
+
+ {{ emptyMessageConfig.title }} + {{ emptyMessageConfig.subtitle }} +
-
+ diff --git a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.less b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.less index 10702908a9..0237750b56 100644 --- a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.less +++ b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.less @@ -1,7 +1,14 @@ :host { + &:last-of-type { + flex: 1; + height: 100%; + } + .prizm-navigation-menu-group { --prizm-empty-message__padding: 16px 32px; + height: 100%; + ::ng-deep { prizm-accordion { border: none; @@ -44,6 +51,11 @@ &__no-items-content { background: var(--prizm-grey-g11-g3); + height: 100%; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px solid var(--prizm-grey-g10-g4); } } diff --git a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.ts b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.ts index f13edc8215..b9a48a6514 100644 --- a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.ts +++ b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.ts @@ -11,7 +11,7 @@ import { } from '@angular/core'; import { PrizmDestroyService } from '@prizm-ui/helpers'; import { BehaviorSubject, merge, Observable } from 'rxjs'; -import { debounceTime, takeUntil } from 'rxjs/operators'; +import { debounceTime, map, takeUntil, withLatestFrom } from 'rxjs/operators'; import { InternalPrizmNavigationMenuItem, PrizmNavigationMenuEmptyMessageConfig, @@ -65,8 +65,12 @@ export class PrizmNavigationMenuGroupComponent< this.groupService.setToolbarConfig(toolbarConfig); } - @Input() set emptyMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig) { - this.groupService.setEmptyMessageConfig(config); + @Input() set emptySearchResultMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig) { + this.groupService.setEmptySearchResultMessageConfig(config); + } + + @Input() set emptyDataMessageConfig(config: PrizmNavigationMenuEmptyMessageConfig) { + this.groupService.setEmptyDataMessageConfig(config); } @Input() set searchConfig(config: PrizmNavigationMenuSearchConfig) { @@ -90,7 +94,15 @@ export class PrizmNavigationMenuGroupComponent< searchConfig$: Observable = this.groupService.searchConfig$; emptyMessageConfig$: Observable = - this.groupService.emptyMessageConfig$; + this.groupService.searchEnabled$.pipe( + withLatestFrom( + this.groupService.emptySearchResultMessageConfig$, + this.groupService.emptyDataMessageConfig$ + ), + map(([searchEnabled, emptySearchResultMessageConfig, emptyDataMessageConfig]) => { + return searchEnabled ? emptySearchResultMessageConfig : emptyDataMessageConfig; + }) + ); activeItem$: Observable> = this.menuService.activeItem$; diff --git a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.html b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.html index 375333d2ff..c38cb4804c 100644 --- a/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.html +++ b/libs/components/src/lib/components/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.html @@ -57,7 +57,8 @@ [itemExtraTemplate]="itemExtraTemplate" [searchConfig]="menuSearchConfig$ | async" [toolbarConfig]="menuToolbarConfig$ | async" - [emptyMessageConfig]="emptyMessageConfig$ | async" + [emptySearchResultMessageConfig]="emptySearchResultMessageConfig$ | async" + [emptyDataMessageConfig]="emptyDataMessageConfig$ | async" >
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 */