feat(desktop-ui): support queryParams in list route support

deepkit · Mar 17, 2024 · 6f33804 · 6f33804
1 parent 9c98f8b
commit 6f33804
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/packages/desktop-ui/src/components/list/list.component.ts b/packages/desktop-ui/src/components/list/list.component.ts
@@ -23,7 +23,7 @@ import {
     Optional,
     Output,
     SimpleChanges,
-    SkipSelf
+    SkipSelf,
 } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, UrlTree } from '@angular/router';
 import { ngValueAccessor, ValueAccessorBase } from '../../core/form';
@@ -35,7 +35,7 @@ import { isRouteActive } from '../../core/utils';
     selector: 'dui-list-title',
     template: `
         <ng-content></ng-content>`,
-    styleUrls: ['./list-title.component.scss']
+    styleUrls: ['./list-title.component.scss'],
 })
 export class ListTitleComponent {
     constructor() {
@@ -54,7 +54,7 @@ export class ListTitleComponent {
         '[class.focusable]': 'focusable',
         '[class.delimiter-line]': 'delimiterLine !== false',
     },
-    providers: [ngValueAccessor(ListComponent)]
+    providers: [ngValueAccessor(ListComponent)],
 })
 @Injectable()
 export class ListComponent extends ValueAccessorBase<any> {
@@ -114,7 +114,7 @@ export class ListComponent extends ValueAccessorBase<any> {
 
         if (event.key === 'ArrowUp') {
             event.preventDefault();
-            const selectedItem = this.getSelectedItem()
+            const selectedItem = this.getSelectedItem();
             if (selectedItem) {
                 const items = this.getSortedList();
                 const position = items.indexOf(selectedItem);
@@ -147,7 +147,7 @@ export class ListComponent extends ValueAccessorBase<any> {
         '[attr.list-id]': 'list.id',
         '[attr.list-item-id]': 'id',
     },
-    styleUrls: ['./list-item.component.scss']
+    styleUrls: ['./list-item.component.scss'],
 })
 export class ListItemComponent implements OnChanges, OnDestroy {
     static ids: number = 0;
@@ -156,6 +156,7 @@ export class ListItemComponent implements OnChanges, OnDestroy {
     @Input() value: any;
     @Input() routerLink?: string | UrlTree | any[];
     @Input() routerLinkExact?: boolean;
+    @Input() queryParams?: { [name: string]: any };
     @Input() active?: boolean;
 
     /**
@@ -173,7 +174,7 @@ export class ListItemComponent implements OnChanges, OnDestroy {
         public element: ElementRef,
         @SkipSelf() public cd: ChangeDetectorRef,
         @Optional() public router?: Router,
-        @Optional() activatedRoute?: ActivatedRoute
+        @Optional() activatedRoute?: ActivatedRoute,
     ) {
         this.element.nativeElement.removeAttribute('tabindex');
         list.register(this);
@@ -205,7 +206,7 @@ export class ListItemComponent implements OnChanges, OnDestroy {
             if ('string' === typeof this.routerLink) {
                 await this.router.navigateByUrl(this.routerLink);
             } else if (Array.isArray(this.routerLink)) {
-                await this.router.navigate(this.routerLink);
+                await this.router.navigate(this.routerLink, { queryParams: this.queryParams });
             } else {
                 await this.router.navigateByUrl(this.router.serializeUrl(this.routerLink!));
             }

diff --git a/packages/desktop-ui/src/core/utils.ts b/packages/desktop-ui/src/core/utils.ts
@@ -211,13 +211,24 @@ export function focusWatcher(target: HTMLElement, allowedFocuses: HTMLElement[]
     });
 }
 
-export function isRouteActive(route: { routerLink?: string | UrlTree | any[]; routerLinkExact?: boolean; router?: Router, activatedRoute?: ActivatedRoute }): boolean {
+interface RouteLike {
+    routerLink?: string | UrlTree | any[];
+    routerLinkExact?: boolean;
+    router?: Router,
+    activatedRoute?: ActivatedRoute;
+    queryParams?: { [name: string]: any };
+}
+
+export function isRouteActive(route: RouteLike): boolean {
     if (!route.router) return false;
 
     if ('string' === typeof route.routerLink) {
         return route.router.isActive(route.routerLink, route.routerLinkExact === true);
     } else if (Array.isArray(route.routerLink)) {
-        return route.router.isActive(route.router.createUrlTree(route.routerLink, { relativeTo: route.activatedRoute }), route.routerLinkExact === true);
+        return route.router.isActive(route.router.createUrlTree(route.routerLink, {
+            queryParams: route.queryParams,
+            relativeTo: route.activatedRoute,
+        }), route.routerLinkExact === true);
     } else {
         return route.router.isActive(route.routerLink!, route.routerLinkExact === true);
     }