Merged PR 1679: #4491 Mark Shelf Children Sides Active based on view param

#4491 Mark Shelf Children Sides Active based on view param
This commit is contained in:
Nino Righi
2023-11-29 15:31:35 +00:00
committed by Lorenz Hilpert
parent b0b3fd40ce
commit 4d74b3a89e
10 changed files with 41 additions and 17 deletions

View File

@@ -100,6 +100,7 @@ export class GoodsInCleanupListComponent implements OnInit, OnDestroy {
key: this._config.get('process.ids.goodsIn'),
name: 'Abholfachbereinigungsliste',
path: '/filiale/goods/in/cleanup',
params: { view: 'cleanup' },
section: 'branch',
tags: ['goods-in', 'cleanup'],
});

View File

@@ -107,8 +107,8 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
});
}
await this.updateBreadcrumb({ queryParams: params });
await this.createBreadcrumb({ queryParams: params });
await this.updateBreadcrumb(params);
await this.createBreadcrumb(params);
await this.removeBreadcrumbs();
});
}
@@ -124,6 +124,7 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
const clean = { ...params };
delete clean['scroll_position'];
delete clean['take'];
delete clean['view'];
for (const key in clean) {
if (Object.prototype.hasOwnProperty.call(clean, key)) {
@@ -207,7 +208,7 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
name: 'Wareneingangsliste',
path: '/filiale/goods/in/list',
section: 'branch',
params: queryParams,
params: { ...queryParams, view: 'wareneingangsliste' },
tags: ['goods-in', 'list'],
});
}

View File

@@ -88,7 +88,11 @@ export class GoodsInListStore extends ComponentStore<GoodsInListState> {
const path = '/filiale/goods/in/list/';
if (!this._router.isActive(path, false)) {
this._router.navigate([path], {
queryParams: { ...this.filter.getQueryParams(), take: res.result.length + _results?.length },
queryParams: {
...this.filter.getQueryParams(),
take: res.result.length + _results?.length,
view: 'wareneingangsliste',
},
});
}
}

View File

@@ -80,6 +80,7 @@ export class GoodsInRemissionPreviewComponent implements OnInit, OnDestroy {
name: 'Abholfachremissionsvorschau',
path: '/filiale/goods/in/preview',
section: 'branch',
params: { view: 'remission' },
tags: ['goods-in', 'preview'],
});
}

View File

@@ -102,6 +102,7 @@ export class GoodsInReservationComponent implements OnInit, OnDestroy {
name: 'Reservierungen',
path: '/filiale/goods/in/reservation',
section: 'branch',
params: { view: 'reservation' },
tags: ['goods-in', 'reservation'],
});
}

View File

@@ -218,7 +218,7 @@ export abstract class PickupShelfBaseComponent implements OnInit {
const name = 'Reservierungen';
const path: NavigationRoute = {
path: ['/filiale', 'goods', 'in', 'reservation'],
queryParams: { view: undefined },
queryParams: { view: 'reservation' },
urlTree: this.router.createUrlTree(['/filiale', 'goods', 'in', 'reservation'], {}),
};
@@ -251,7 +251,7 @@ export abstract class PickupShelfBaseComponent implements OnInit {
const name = 'Abholfachbereinigungsliste';
const path: NavigationRoute = {
path: ['/filiale', 'goods', 'in', 'cleanup'],
queryParams: { view: undefined },
queryParams: { view: 'cleanup' },
urlTree: this.router.createUrlTree(['/filiale', 'goods', 'in', 'cleanup'], {}),
};
@@ -284,7 +284,7 @@ export abstract class PickupShelfBaseComponent implements OnInit {
const name = 'Wareneingangsliste';
const path: NavigationRoute = {
path: ['/filiale', 'goods', 'in', 'list'],
queryParams: { view: undefined },
queryParams: { view: 'wareneingangsliste' },
urlTree: this.router.createUrlTree(['/filiale', 'goods', 'in', 'list'], {}),
};
@@ -317,7 +317,7 @@ export abstract class PickupShelfBaseComponent implements OnInit {
const name = 'Abholfachremissionsvorschau';
const path: NavigationRoute = {
path: ['/filiale', 'goods', 'in', 'preview'],
queryParams: { view: undefined },
queryParams: { view: 'remission' },
urlTree: this.router.createUrlTree(['/filiale', 'goods', 'in', 'preview'], {}),
};

View File

@@ -62,6 +62,7 @@ export class RegexRouterLinkActiveDirective extends ComponentStore<SharedRouterL
checkActiveLink() {
const { classList, test } = this.get((s) => s);
let isActive = test?.test(this.router.url) ?? false;
this.isActiveChange.emit(isActive);

View File

@@ -38,7 +38,8 @@
@apply px-[0.438rem] py-3;
}
.side-menu-group-item.active,
.side-menu-group-item.active:not(.has-child-view),
.side-menu-group-item.active-child,
.side-menu-group-item:hover,
.side-menu-group-item:focus {
@apply bg-[#596470] text-white;
@@ -52,7 +53,8 @@
@apply rotate-180;
}
.side-menu-group-sub-items .side-menu-group-item.active,
.side-menu-group-sub-items .side-menu-group-item.active:not(.has-child-view),
.side-menu-group-sub-items .side-menu-group-item.active-child,
.side-menu-group-sub-items .side-menu-group-item:hover,
.side-menu-group-sub-items .side-menu-group-item:focus {
@apply bg-[#89949E] text-white;

View File

@@ -181,9 +181,10 @@
(click)="closeSideMenu(); focusSearchBox()"
[routerLink]="pickUpShelfInListNavigation.path"
[queryParams]="pickUpShelfInListNavigation.queryParams"
[class.has-child-view]="currentShelfView$ | async"
sharedRegexRouterLinkActive="active"
sharedRegexRouterLinkActiveTest="^\/filiale\/pickup-shelf"
(isActiveChange)="focusSearchBox()"
[sharedRegexRouterLinkActiveTest]="'^\/filiale\/pickup-shelf'"
(isActiveChange)="shelfActive($event); focusSearchBox()"
>
<span class="side-menu-group-item-icon"></span>
<span class="side-menu-group-item-label">
@@ -194,7 +195,10 @@
class="side-menu-group-item"
(click)="closeSideMenu()"
[routerLink]="['/filiale', 'goods', 'in', 'reservation']"
[queryParams]="{ view: 'reservation' }"
[class.active-child]="(currentShelfView$ | async) === 'reservation'"
routerLinkActive="active"
(isActiveChange)="shelfActive($event)"
>
<span class="side-menu-group-item-icon"></span>
<span class="side-menu-group-item-label">
@@ -205,7 +209,10 @@
class="side-menu-group-item"
(click)="closeSideMenu()"
[routerLink]="['/filiale', 'goods', 'in', 'cleanup']"
[queryParams]="{ view: 'cleanup' }"
[class.active-child]="(currentShelfView$ | async) === 'cleanup'"
routerLinkActive="active"
(isActiveChange)="shelfActive($event)"
>
<span class="side-menu-group-item-icon"></span>
<span class="side-menu-group-item-label">
@@ -216,7 +223,10 @@
class="side-menu-group-item"
(click)="closeSideMenu()"
[routerLink]="['/filiale', 'goods', 'in', 'preview']"
[queryParams]="{ view: 'remission' }"
[class.active-child]="(currentShelfView$ | async) === 'remission'"
routerLinkActive="active"
(isActiveChange)="shelfActive($event)"
>
<span class="side-menu-group-item-icon"></span>
<span class="side-menu-group-item-label">
@@ -227,7 +237,10 @@
class="side-menu-group-item"
(click)="closeSideMenu()"
[routerLink]="['/filiale', 'goods', 'in', 'list']"
[queryParams]="{ view: 'wareneingangsliste' }"
[class.active-child]="(currentShelfView$ | async) === 'wareneingangsliste'"
routerLinkActive="active"
(isActiveChange)="shelfActive($event)"
>
<span class="side-menu-group-item-icon"></span>
<span class="side-menu-group-item-label">

View File

@@ -138,6 +138,10 @@ export class ShellSideMenuComponent {
queryParams: {},
});
get currentShelfView$() {
return this._route.queryParams.pipe(map((params) => params.view));
}
shelfExpanded: boolean = false;
customerExpanded: boolean = false;
@@ -160,11 +164,7 @@ export class ShellSideMenuComponent {
private _pickUpShelfInNavigation: PickupShelfInNavigationService,
private _cdr: ChangeDetectorRef,
@Inject(DOCUMENT) private readonly _document: Document
) {
this._router.events.subscribe((event) => {
// console.log(event);
});
}
) {}
customerActive(isActive: boolean) {
if (isActive) {