107685: menu-component re-render section on store update

This commit is contained in:
Kristof De Langhe
2023-10-25 11:20:39 +02:00
committed by Tim Donohue
parent 0a3502e9cc
commit e293f3db52
2 changed files with 7 additions and 5 deletions

View File

@@ -6,7 +6,6 @@ import { GenericConstructor } from '../../core/shared/generic-constructor';
import { hasValue, isNotEmptyOperator } from '../empty.util'; import { hasValue, isNotEmptyOperator } from '../empty.util';
import { MenuSectionComponent } from './menu-section/menu-section.component'; import { MenuSectionComponent } from './menu-section/menu-section.component';
import { getComponentForMenu } from './menu-section.decorator'; import { getComponentForMenu } from './menu-section.decorator';
import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/item-relationships-utils';
import { MenuSection } from './menu-section.model'; import { MenuSection } from './menu-section.model';
import { MenuID } from './menu-id.model'; import { MenuID } from './menu-id.model';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
@@ -86,7 +85,7 @@ export class MenuComponent implements OnInit, OnDestroy {
this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID); this.menuCollapsed = this.menuService.isMenuCollapsed(this.menuID);
this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID); this.menuPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
this.menuVisible = this.menuService.isMenuVisible(this.menuID); this.menuVisible = this.menuService.isMenuVisible(this.menuID);
this.sections = this.menuService.getMenuTopSections(this.menuID).pipe(distinctUntilChanged(compareArraysUsingIds())); this.sections = this.menuService.getMenuTopSections(this.menuID);
this.subs.push( this.subs.push(
this.sections.pipe( this.sections.pipe(

View File

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store'; import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
import { AppState, keySelector } from '../../app.reducer'; import { AppState, keySelector } from '../../app.reducer';
import { combineLatest as observableCombineLatest, Observable } from 'rxjs'; import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
import { filter, map, switchMap, take } from 'rxjs/operators'; import { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators';
import { import {
ActivateMenuSectionAction, ActivateMenuSectionAction,
AddMenuSectionAction, AddMenuSectionAction,
@@ -23,6 +23,7 @@ import { MenuSections } from './menu-sections.model';
import { MenuSection } from './menu-section.model'; import { MenuSection } from './menu-section.model';
import { MenuID } from './menu-id.model'; import { MenuID } from './menu-id.model';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { compareArraysUsingIds } from '../../item-page/simple/item-types/shared/item-relationships-utils';
export function menuKeySelector<T>(key: string, selector): MemoizedSelector<MenuState, T> { export function menuKeySelector<T>(key: string, selector): MemoizedSelector<MenuState, T> {
return createSelector(selector, (state) => { return createSelector(selector, (state) => {
@@ -81,8 +82,10 @@ export class MenuService {
return this.store.pipe( return this.store.pipe(
select(menuByIDSelector(menuID)), select(menuByIDSelector(menuID)),
select(menuSectionStateSelector), select(menuSectionStateSelector),
map((sections: MenuSections) => { map((sections: MenuSections) => Object.values(sections)),
return Object.values(sections) distinctUntilChanged(compareArraysUsingIds()),
map((sections: MenuSection[]) => {
return sections
.filter((section: MenuSection) => hasNoValue(section.parentID)) .filter((section: MenuSection) => hasNoValue(section.parentID))
.filter((section: MenuSection) => !mustBeVisible || section.visible); .filter((section: MenuSection) => !mustBeVisible || section.visible);
} }