Merge pull request #221 from digital-plant-guard/fix/navigation-menu-…

…empty-search-results-position

fix/navigation menu empty search results position

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]'
+ }"
  ></prizm-navigation-menu>
  </section>
+ <section>
+ <button prizmButton (click)="toggleLoading()">
+ {{ items.length ? 'Подставить пустой массив' : 'Подставить список данных' }}
+ </button>
+ </section>
 </div>

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();
+ }
 }

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 }'

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"
  ></prizm-navigation-menu>
@@ -130,12 +131,20 @@
  settingsConfig
  </ng-template>
  <ng-template
- documentationPropertyName="emptyMessageConfig"
+ documentationPropertyName="emptySearchResultMessageConfig"
  documentationPropertyType="PrizmNavigationMenuEmptyMessageConfig"
  documentationPropertyMode="input"
- [(documentationPropertyValue)]="emptyMessageConfig"
+ [(documentationPropertyValue)]="emptySearchResultMessageConfig"
  >
- emptyMessageConfig
+ Will be displayed when search is enabled and where are no search entires
+ </ng-template>
+ <ng-template
+ documentationPropertyName="emptyDataMessageConfig"
+ documentationPropertyType="PrizmNavigationMenuEmptyMessageConfig"
+ documentationPropertyMode="input"
+ [(documentationPropertyValue)]="emptyDataMessageConfig"
+ >
+ Will be displayed when incoming data is empty (for example not loaded yet)
  </ng-template>
  <ng-template
  documentationPropertyName="searchConfig"

apps/doc/src/app/components/navigation-menu/navigation-menu-example.component.ts

@@ -78,7 +78,8 @@ export class NavigationMenuExampleComponent {
  itemKeyName = 'id';
  expandedItemsMap = new Map<any, boolean>();
  expandedGroupsMap = new Map<string, boolean>();
- emptyMessageConfig: PrizmNavigationMenuEmptyMessageConfig = null;
+ emptySearchResultMessageConfig: PrizmNavigationMenuEmptyMessageConfig = null;
+ emptyDataMessageConfig: PrizmNavigationMenuEmptyMessageConfig = null;
  searchConfig: PrizmNavigationMenuSearchConfig = null;
  settingsConfig: PrizmNavigationMenuSettingsConfig = {};
  headerConfig: PrizmNavigationMenuHeaderConfig = null;

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)"
  ></prizm-navigation-menu-items>
 
- <div
- class="prizm-navigation-menu-group__no-items-content"
- *ngIf="emptyMessageConfig$ | async as emptyMessageConfig"
- >
- <div class="empty-message" *ngIf="!groupItems.length">
- <span class="empty-message__main">{{ emptyMessageConfig.title }}</span>
- <span class="empty-message__sub">{{ emptyMessageConfig.subtitle }}</span>
+ <ng-container *ngIf="!groupItems.length">
+ <div
+ class="prizm-navigation-menu-group__no-items-content"
+ *ngIf="emptyMessageConfig$ | async as emptyMessageConfig"
+ >
+ <div class="empty-message">
+ <span class="empty-message__main">{{ emptyMessageConfig.title }}</span>
+ <span class="empty-message__sub">{{ emptyMessageConfig.subtitle }}</span>
+ </div>
  </div>
- </div>
+ </ng-container>
  </ng-container>
 </ng-template>

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);
  }
  }
 

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<PrizmNavigationMenuSearchConfig> = this.groupService.searchConfig$;
 
  emptyMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
- this.groupService.emptyMessageConfig$;
+ this.groupService.searchEnabled$.pipe(
+ withLatestFrom(
+ this.groupService.emptySearchResultMessageConfig$,
+ this.groupService.emptyDataMessageConfig$
+ ),
+ map(([searchEnabled, emptySearchResultMessageConfig, emptyDataMessageConfig]) => {
+ return searchEnabled ? emptySearchResultMessageConfig : emptyDataMessageConfig;
+ })
+ );
 
  activeItem$: Observable<InternalPrizmNavigationMenuItem<UserItem>> = this.menuService.activeItem$;
 

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"
  ></prizm-navigation-menu-group>
  </div>
  </ng-template>

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 {

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<PrizmNavigationMenuSearchConfig> = this.menuService.searchConfig$;
 
- emptyMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
- this.menuService.emptyMessageConfig$;
+ emptySearchResultMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
+ this.menuService.emptySearchResultMessageConfig$;
+
+ emptyDataMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
+ this.menuService.emptyDataMessageConfig$;
 
  settingsConfiguration: PrizmNavigationMenuSettingsConfig = this.menuService.settingsConfig;
 

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<string | null>(null);
 
- private emptyMessageConfig$$ = new BehaviorSubject<PrizmNavigationMenuEmptyMessageConfig>(
+ private emptySearchResultMessageConfig$$ = new BehaviorSubject<PrizmNavigationMenuEmptyMessageConfig>(
  DEFAULT_EMPTY_MESSAGE_CONFIG
  );
 
+ private emptyDataMessageConfig$$ = new BehaviorSubject<PrizmNavigationMenuEmptyMessageConfig>({
+ title: '',
+ subtitle: '',
+ });
+
  private toolbarConfig$$ = new BehaviorSubject<PrizmNavigationMenuToolbarConfig>(DEFAULT_TOOLBAR_CONFIG);
 
  private searchConfig$$ = new BehaviorSubject<PrizmNavigationMenuSearchConfig>({
@@ -126,12 +131,17 @@ export class PrizmNavigationMenuGroupService<
 
  closeAll$ = new Subject();
 
+ searchEnabled$: Observable<boolean> = this.searchState$$.pipe(map(s => s.enabled));
+
  searchConfig$: Observable<PrizmNavigationMenuSearchConfig> = this.searchConfig$$.asObservable();
 
  toolbarConfig$: Observable<PrizmNavigationMenuToolbarConfig> = this.toolbarConfig$$.asObservable();
 
- emptyMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
- this.emptyMessageConfig$$.asObservable();
+ emptySearchResultMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
+ this.menuService.emptySearchResultMessageConfig$;
+
+ emptyDataMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
+ 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 {

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<PrizmNavigationMenuEmptyMessageConfig>(
+ private emptySearchResultMessageConfig$$ = new BehaviorSubject<PrizmNavigationMenuEmptyMessageConfig>(
  DEFAULT_EMPTY_MESSAGE_CONFIG
  );
 
+ private emptyDataMessageConfig$$ = new BehaviorSubject<PrizmNavigationMenuEmptyMessageConfig>({
+ title: '',
+ subtitle: '',
+ });
+
  get settingsConfig(): PrizmNavigationMenuSettingsConfig {
  return this.settingsConfig$$.value;
  }
@@ -82,8 +87,11 @@ export class PrizmNavigationMenuService<
 
  toolbarConfig$: Observable<PrizmNavigationMenuToolbarConfig> = this.toolbarConfig$$.asObservable();
 
- emptyMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
- this.emptyMessageConfig$$.asObservable();
+ emptySearchResultMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
+ this.emptySearchResultMessageConfig$$.asObservable();
+
+ emptyDataMessageConfig$: Observable<PrizmNavigationMenuEmptyMessageConfig> =
+ 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 */