Merge pull request #230 from netgrif/NAE-1935

renczesstefan · web-flow · commit f143a5cad6d9 · 2024-01-23T10:26:15.000+01:00
[NAE-1935] Improved breadcrumbs from menu items
diff --git a/docs/views/breadcrumbs/breadcrumbs.md b/docs/views/breadcrumbs/breadcrumbs.md
@@ -0,0 +1,42 @@
+# Breadcrumbs
+Breadcrumbs on filtered case views are automatically resolved using URI node path and filter name. However,
+if we want a nice breadcrumb with readable title and diacritics, it is important to define each menu item
+separately defining uri, identifier and title using Petriflow actions.
+
+The next action, where we define each level separately and define a title for them, will give a nice breadcrumb:
+```xml
+<caseEvents>
+    <event type="create">
+        <id>import_menu_on_create</id>
+        <actions phase="post">
+            <action id="menu_item">
+                createOrUpdateMenuItem("/", "level_1", "Level 1 title", "feedback")
+                createOrUpdateMenuItem("/level_1", "level_2", "Level 2 title", "feedback")
+                createOrUpdateMenuItem("/level_1/level_2", "level_3", "Level 3 title", "feedback")
+                def body1 = new com.netgrif.application.engine.workflow.domain.menu.MenuItemBody("/level_1/level_2/level_3", "nae_1935_1", "NAE-1935 Nice title", "text_snippet")
+                createOrUpdateMenuItemAndFilter(body1, "processIdentifier:nae_1935", "Case", "private", ["nae_1935"])
+            </action>
+        </actions>
+    </event>
+</caseEvents>
+```
+Result:
+
+![img_1.png](img_1.png)
+
+However, if we define a multilevel menu in one action:
+```xml
+<caseEvents>
+    <event type="create">
+        <id>import_menu_on_create</id>
+        <actions phase="post">
+            <action id="menu_item">
+                def body5 = new com.netgrif.application.engine.workflow.domain.menu.MenuItemBody("/level_1/level_2/level_3/custom/without_name_and_diacritics", "with_diacritics", "Nice title with diacritics.", "text_snippet")
+                createOrUpdateMenuItemAndFilter(body5, "processIdentifier:nae_1935", "Case", "private", ["nae_1935"])
+            </action>
+        </actions>
+    </event>
+</caseEvents>
+```
+The menu without a defined title will be sanitized and look like as folows:
+![img.png](img.png)
diff --git a/docs/views/breadcrumbs/img.png b/docs/views/breadcrumbs/img.png
diff --git a/docs/views/breadcrumbs/img_1.png b/docs/views/breadcrumbs/img_1.png
diff --git a/projects/netgrif-components-core/src/lib/navigation/breadcrumbs/abstract-breadcrumbs.component.ts b/projects/netgrif-components-core/src/lib/navigation/breadcrumbs/abstract-breadcrumbs.component.ts
@@ -1,41 +1,128 @@
-import {Component, Input} from '@angular/core';
+import {AfterViewInit, Component, Input, OnDestroy} from '@angular/core';
 import {UriService} from '../service/uri.service';
+import {CaseResourceService} from "../../resources/engine-endpoint/case-resource.service";
+import {CaseSearchRequestBody} from "../../filter/models/case-search-request-body";
+import {HttpParams} from "@angular/common/http";
+import {PaginationParams} from "../../utility/pagination/pagination-params";
+import {SimpleFilter} from "../../filter/models/simple-filter";
+import {take} from "rxjs/operators";
+import {BehaviorSubject, Subscription} from "rxjs";
+import {ActivatedRoute, Router} from "@angular/router";
+import {
+    DynamicNavigationRouteProviderService
+} from "../../routing/dynamic-navigation-route-provider/dynamic-navigation-route-provider.service";
+import {Case} from "../../resources/interface/case";
+import {I18nFieldValue} from "../../data-fields/i18n-field/models/i18n-field-value";
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
     selector: 'ncc-breadcrumbs-component',
     template: ''
 })
-export abstract class AbstractBreadcrumbsComponent {
+export abstract class AbstractBreadcrumbsComponent implements OnDestroy, AfterViewInit {
 
     @Input() showHome: boolean = true;
+    @Input() showFilter: boolean = true;
+    @Input() redirectOnClick: boolean = true;
     @Input() lengthOfPath: number = 30;
     @Input() partsAfterDots: number = 2;
+    filterName: string;
+    breadcrumbsParts: Array<string>;
     private static DOTS: string = '...';
     private static DELIMETER: string = '/';
+    private static NODE_PATH: string = 'nodePath';
+    private static ITEM_SETTINGS: string = 'item_settings';
     private _showPaths: boolean = false;
+    private nicePath: BehaviorSubject<Array<string>>;
+    private redirectUrls: Map<string, Array<string>>;
+    private nicePathSubscription: Subscription;
 
-    protected constructor(protected _uriService: UriService) {
+    protected constructor(protected _uriService: UriService,
+                          protected _caseResourceService: CaseResourceService,
+                          protected _activatedRoute: ActivatedRoute,
+                          protected _router: Router,
+                          protected _dynamicRoutingService: DynamicNavigationRouteProviderService,
+                          protected _translateService: TranslateService) {
+        this.nicePath = new BehaviorSubject<Array<string>>(undefined);
+        this.redirectUrls = new Map<string, Array<string>>();
+        this.initNicePath();
     }
 
-    public getPath(): Array<string> {
-        const tmp = this._uriService.splitNodePath(this._uriService.activeNode);
-        if (tmp?.length > this.partsAfterDots + 1 && this._uriService.activeNode?.uriPath.length > this.lengthOfPath && !this._showPaths) {
-            const newPath = [tmp[0], AbstractBreadcrumbsComponent.DOTS];
-            for (let i = tmp.length - this.partsAfterDots; i < tmp.length; i++) {
-                newPath.push(tmp[i]);
+    ngAfterViewInit() {
+        this.resolveBreadcrumbs();
+    }
+
+    ngOnDestroy(): void {
+        if (!!this.nicePathSubscription) {
+            this.nicePathSubscription.unsubscribe();
+        }
+    }
+
+    public resolveBreadcrumbs() {
+        const filterId = this._activatedRoute.snapshot.params.filterCaseId
+        if (!!filterId) {
+            const splitPath = this._uriService.splitNodePath(this._uriService.activeNode);
+            const fullPath = this.createFullPath(splitPath);
+            const fullPathQueries = fullPath.map(p => '(processIdentifier:preference_item AND dataSet.nodePath.textValue.keyword:\"' + p + '\")')
+            fullPathQueries.push('(taskMongoIds:\"' + filterId + '\")')
+
+            const searchBody: CaseSearchRequestBody = {
+                query: fullPathQueries.join(" OR ")
+            };
+            let httpParams = new HttpParams()
+                .set(PaginationParams.PAGE_SIZE, 25)
+                .set(PaginationParams.PAGE_NUMBER, 0);
+
+            this._caseResourceService.searchCases(SimpleFilter.fromCaseQuery(searchBody), httpParams).pipe(take(1)).subscribe(result => {
+                const cases = result.content;
+                const filterCaseIndex = cases.findIndex(c => c.tasks.some(t => t.task === filterId) && !fullPath.includes(this.immediateValue(c, AbstractBreadcrumbsComponent.NODE_PATH)));
+                if (filterCaseIndex >= 0) {
+                    const filterCase = cases.splice(cases.findIndex(c => c.tasks.some(t => t.task === filterId) && !fullPath.includes(this.immediateValue(c, AbstractBreadcrumbsComponent.NODE_PATH))), 1)[0];
+                    this.filterName = this.getTranslation(this.immediateValue(filterCase, 'menu_name'));
+                }
+                cases.sort((a, b) => fullPath.indexOf(this.immediateValue(a, AbstractBreadcrumbsComponent.NODE_PATH)) - fullPath.indexOf(this.immediateValue(b, AbstractBreadcrumbsComponent.NODE_PATH)));
+                if (this.redirectOnClick) {
+                    cases.forEach(c => this.redirectUrls.set(this.immediateValue(c, AbstractBreadcrumbsComponent.NODE_PATH), [this._dynamicRoutingService.route, c.tasks.find(t => t.transition === AbstractBreadcrumbsComponent.ITEM_SETTINGS).task]))
+                }
+                this.nicePath.next(["", ...cases.map(c => this.getTranslation(this.immediateValue(c, 'menu_name')))]);
+            });
+        }
+    }
+
+    public initNicePath() {
+        this.nicePathSubscription = this.nicePath.subscribe(np => {
+            if (!!np) {
+                const path = np;
+                if (path?.length > this.partsAfterDots + 1 && this._uriService.activeNode?.uriPath.length > this.lengthOfPath && !this._showPaths) {
+                    const newPath = [path[0], AbstractBreadcrumbsComponent.DOTS];
+                    for (let i = path.length - this.partsAfterDots; i < path.length; i++) {
+                        newPath.push(path[i]);
+                    }
+                    this.breadcrumbsParts = newPath;
+                    return;
+                }
+                this.breadcrumbsParts = path === undefined ? [] : path;
             }
-            return newPath;
+        });
+    }
+
+    public redirect() {
+        if (!this.redirectOnClick) {
+            return;
         }
-        return tmp === undefined ? [] : tmp;
+        this._router.navigate(this.redirectUrls.get(this._uriService.activeNode.uriPath)).then(r => {})
     }
 
     public reset(): void {
+        this.filterName = undefined;
         this._uriService.reset();
+        this.nicePath.next([""])
     }
 
     public changePath(path: string, count: number) {
         if (path === AbstractBreadcrumbsComponent.DOTS && count === 1) {
             this._showPaths = true;
+            this.nicePath.next(this.nicePath.value);
             return;
         }
         let fullPath: string = '';
@@ -48,6 +135,9 @@ export abstract class AbstractBreadcrumbsComponent {
         }
         this._uriService.getNodeByPath(fullPath).subscribe(node => {
             this._uriService.activeNode = node;
+            this.filterName = undefined;
+            this.nicePath.next(this.nicePath.value.slice(0, control + 1))
+            this.redirect();
         })
     }
 
@@ -57,4 +147,21 @@ export abstract class AbstractBreadcrumbsComponent {
         }
         return count;
     }
+
+    private createFullPath(splitPath: Array<string>): Array<string> {
+        let tmp = '';
+        return splitPath.filter(s => s !== "").map((value) => {
+            tmp += AbstractBreadcrumbsComponent.DELIMETER + value;
+            return tmp.replace("//", AbstractBreadcrumbsComponent.DELIMETER)
+        });
+    }
+
+    private immediateValue(aCase: Case, fieldId: string): any {
+        return aCase.immediateData.find(s => s.stringId === fieldId)?.value
+    }
+
+    private getTranslation(value: I18nFieldValue): string {
+        const locale = this._translateService.currentLang.split('-')[0];
+        return locale in value.translations ? value.translations[locale] : value.defaultValue;
+    }
 }
diff --git a/projects/netgrif-components-core/src/lib/navigation/service/uri.service.ts b/projects/netgrif-components-core/src/lib/navigation/service/uri.service.ts
@@ -24,7 +24,7 @@ import {GroupNavigationConstants} from "../model/group-navigation-constants";
 })
 export class UriService implements OnDestroy {
 
-    private static ROOT: string = 'root';
+    public static ROOT: string = 'root';
     private _rootNode: UriNodeResource;
     private readonly _rootLoading$: LoadingEmitter;
     private readonly _parentLoading$: LoadingEmitter;
diff --git a/projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.html b/projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.html
@@ -2,8 +2,11 @@
     <div *ngIf="showHome">
         <span class="breadcrumbs-span" (click)="reset()">{{'toolbar.menu.home' | translate}}</span>
     </div>
-    <div *ngFor="let path of getPath();let i = index;let last = last;">
+    <div *ngFor="let path of breadcrumbsParts;let i = index;let last = last;">
         <span class="breadcrumbs-span" (click)="changePath(path, i)">{{path | titlecase}}</span>
-        <span class="delimeter" *ngIf="!last">/</span>
+        <span class="delimeter" *ngIf="!last || (showFilter && !!filterName)">/</span>
+    </div>
+    <div *ngIf="showFilter && !!filterName">
+        <span class="breadcrumbs-span">{{filterName}}</span>
     </div>
 </div>
diff --git a/projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.ts b/projects/netgrif-components/src/lib/navigation/breadcrumbs/breadcrumbs.component.ts
@@ -1,8 +1,10 @@
 import {Component} from '@angular/core';
 import {
     UriService,
-    AbstractBreadcrumbsComponent
+    AbstractBreadcrumbsComponent, CaseResourceService, DynamicNavigationRouteProviderService
 } from '@netgrif/components-core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
     selector: 'nc-breadcrumbs',
@@ -11,7 +13,12 @@ import {
 })
 export class BreadcrumbsComponent extends AbstractBreadcrumbsComponent {
 
-    constructor(protected _uriService: UriService) {
-        super(_uriService);
+    constructor(protected _uriService: UriService,
+                _caseResourceService: CaseResourceService,
+                _activatedRoute: ActivatedRoute,
+                _router: Router,
+                _dynamicRoutingService: DynamicNavigationRouteProviderService,
+                _translateService: TranslateService) {
+        super(_uriService, _caseResourceService, _activatedRoute, _router, _dynamicRoutingService, _translateService);
     }
 }
