From a9377e6765d3c04e867d27d06e0fdd8a8ba9b3f7 Mon Sep 17 00:00:00 2001 From: Sofia Papacharalampous Date: Fri, 31 May 2024 18:26:22 +0300 Subject: [PATCH] added description breadcrumbs (in progress) and ui fixes --- .../src/app/ui/description/description.routing.ts | 5 ++++- .../editor/description-editor.component.html | 6 ++++++ .../editor/description-editor.component.scss | 4 ++-- .../editor/description-editor.component.ts | 9 +++++++-- .../description/editor/description-editor.resolver.ts | 11 +++++++++-- .../description/editor/description-editor.routing.ts | 9 --------- .../breadcrumb/navigation-breadcrumb.component.html | 10 +++++++++- .../breadcrumb/navigation-breadcrumb.component.ts | 9 +++++++-- dmp-frontend/src/app/ui/sidebar/sidebar.component.css | 2 +- 9 files changed, 45 insertions(+), 20 deletions(-) diff --git a/dmp-frontend/src/app/ui/description/description.routing.ts b/dmp-frontend/src/app/ui/description/description.routing.ts index c720f1973..b407ba71e 100644 --- a/dmp-frontend/src/app/ui/description/description.routing.ts +++ b/dmp-frontend/src/app/ui/description/description.routing.ts @@ -19,7 +19,10 @@ const routes: Routes = [ path: 'edit', loadChildren: () => import('./editor/description-editor.module').then(m => m.DescriptionEditorModule), data: { - breadcrumb: true + breadcrumb: true, + ...BreadcrumbService.generateRouteDataConfiguration({ + hideNavigationItem: true + }), } }, { diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html index b8172b527..60d772458 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html @@ -77,6 +77,12 @@
+
+
+ +
+
+
diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss b/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss index 35525b6cb..d3e4b63f0 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.scss @@ -258,7 +258,7 @@ } .stepper-options { - height: calc(100vh - 600px); + height: calc(100vh - 650px); overflow-y: auto; .main-info { // padding-left: .2rem; @@ -365,7 +365,7 @@ // left: 362px; width: calc(100% - 366px); overflow-y: auto; - height: calc(100vh - 250px); + height: calc(100vh - 270px); } } diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts index b6f468299..3c85a6167 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.ts @@ -49,6 +49,7 @@ import { ToCEntryType } from './table-of-contents/models/toc-entry-type.enum'; import { TableOfContentsValidationService } from './table-of-contents/services/table-of-contents-validation-service'; import { TableOfContentsComponent } from './table-of-contents/table-of-contents.component'; import { AnalyticsService } from '@app/core/services/matomo/analytics-service'; +import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service'; @Component({ selector: 'app-description-editor-component', @@ -103,7 +104,8 @@ export class DescriptionEditorComponent extends BaseEditor { if (result) { + this.breadcrumbService.addIdResolvedValue(`${result.dmp.id}/${result.id}`, "this is new"); this.titleService.setTitle(result.label); result.dmp = this.item.dmp; result.dmpDescriptionTemplate = this.item.dmpDescriptionTemplate; @@ -261,7 +264,9 @@ export class DescriptionEditorComponent extends BaseEditor this.prepareForm(data)); + this.getItem(this.editorModel.id, (data: Description) => { + this.prepareForm(data) + }); this.tocValidationService.validateForm(); } diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.resolver.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.resolver.ts index 8d8cf3744..7ceb3ba6c 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.resolver.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.resolver.ts @@ -15,6 +15,7 @@ import { DmpService } from '@app/core/services/dmp/dmp.service'; import { BreadcrumbService } from '@app/ui/misc/breadcrumb/breadcrumb.service'; import { BaseEditorResolver } from '@common/base/base-editor.resolver'; import { Guid } from '@common/types/guid'; +import { TranslateService } from '@ngx-translate/core'; import { concatMap, map, takeUntil, tap } from 'rxjs/operators'; import { nameof } from 'ts-simple-nameof'; @@ -24,6 +25,7 @@ export class DescriptionEditorResolver extends BaseEditorResolver { constructor( private descriptionService: DescriptionService, private breadcrumbService: BreadcrumbService, + private language: TranslateService, private dmpService: DmpService ) { super(); @@ -162,9 +164,14 @@ export class DescriptionEditorResolver extends BaseEditorResolver { const copyDmpId = route.paramMap.get('copyDmpId'); // const cloneid = route.paramMap.get('cloneid'); if (id != null && copyDmpId == null && dmpSectionId == null) { - return this.descriptionService.getSingle(Guid.parse(id), fields) + return this.descriptionService.getSingle(Guid.parse(id), fields).pipe(tap(d => this.breadcrumbService.addIdResolvedValue(d.id.toString(), d.label))); } else if (dmpId != null && dmpSectionId != null && copyDmpId == null) { - return this.dmpService.getSingle(Guid.parse(dmpId), DescriptionEditorResolver.dmpLookupFields()).pipe(tap(x => this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label)), takeUntil(this._destroyed), map(dmp => { + return this.dmpService.getSingle(Guid.parse(dmpId), DescriptionEditorResolver.dmpLookupFields()) + .pipe(tap(x => { + this.breadcrumbService.addIdResolvedValue(x.id?.toString(), x.label); + this.breadcrumbService.addIdResolvedValue(dmpSectionId, this.language.instant("DESCRIPTION-EDITOR.TITLE-NEW")); + + }), takeUntil(this._destroyed), map(dmp => { const description: Description = {}; description.dmp = dmp; diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.routing.ts b/dmp-frontend/src/app/ui/description/editor/description-editor.routing.ts index f42a4c459..a390ee97f 100644 --- a/dmp-frontend/src/app/ui/description/editor/description-editor.routing.ts +++ b/dmp-frontend/src/app/ui/description/editor/description-editor.routing.ts @@ -20,9 +20,6 @@ const routes: Routes = [ }, data: { breadcrumbs: true, - ...BreadcrumbService.generateRouteDataConfiguration({ - hideNavigationItem: true - }), getFromTitleService: true, usePrefix: false //title: 'DESCRIPTION-EDITOR.TITLE-EDIT-DESCRIPTION' @@ -62,9 +59,6 @@ const routes: Routes = [ }, data: { breadcrumbs: true, - ...BreadcrumbService.generateRouteDataConfiguration({ - hideNavigationItem: true - }), title: 'DESCRIPTION-EDITOR.TITLE-NEW', getFromTitleService: true, usePrefix: false @@ -84,9 +78,6 @@ const routes: Routes = [ }, data: { breadcrumbs: true, - ...BreadcrumbService.generateRouteDataConfiguration({ - hideNavigationItem: true - }), title: 'DESCRIPTION-EDITOR.TITLE-NEW', getFromTitleService: true, usePrefix: false diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html b/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html index 570111810..b2e3bf841 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html @@ -13,7 +13,15 @@ - {{ item.title | translate:item.translateParams }} + + + {{ titleItem | translate:item.translateParams }} + + + / + + + diff --git a/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.ts b/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.ts index a5ac88b2f..c4ee00eba 100644 --- a/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.ts +++ b/dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.ts @@ -17,6 +17,7 @@ import { BreadCrumbRouteData, BreadcrumbService } from "./breadcrumb.service"; export class NavigationBreadcrumbComponent extends BaseComponent { breadCrumbs: BreadCrumbItem[] = []; + titleReferences: string[] = []; paramToStringDictionary: Record = {}; @@ -48,6 +49,7 @@ export class NavigationBreadcrumbComponent extends BaseComponent { ) .subscribe(breadCrumbs => { this.breadCrumbs = breadCrumbs; + this.titleReferences = this.getTitleReferences(); this.cdr.markForCheck(); }); } @@ -145,8 +147,7 @@ export class NavigationBreadcrumbComponent extends BaseComponent { const title = Object.keys(pathParams) .sort((a, b) => b.length - a.length) // avoid param overlapping => :id2 (length 3) should be replaced before :id (length 2) .reduce( - (aggr, current) => this.paramToStringDictionary[pathParams[current]] ?? pathParams[current] - // return aggr.replace(`:${current}`, this.paramToStringDictionary[pathParams[current]] ?? pathParams[current]) + (aggr, current) => aggr.replace(`:${current}`, this.paramToStringDictionary[pathParams[current]] ?? pathParams[current]) , path ?? '' ); @@ -168,6 +169,10 @@ export class NavigationBreadcrumbComponent extends BaseComponent { return path; } + + getTitleReferences(): string[] { + return this.breadCrumbs[this.breadCrumbs.length-1].title.split('/'); + } } diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css index 830338434..9ad3cb83e 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css @@ -35,7 +35,7 @@ flex-direction: row; align-items: center; width: 100%; - padding: 0.5rem 1rem 0.5rem 1.2rem; + padding: 0.5rem 0.8rem 0.5rem 1.2rem; text-align: left; letter-spacing: 0px; color: #000000;