From 38a8802d7e2f3c09255fb84cd1a96bc28b9c69cc Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Wed, 15 Feb 2023 23:56:16 +0200 Subject: [PATCH] [Explore & Library | explore-redesign]: First update for direct linking according to redesign. 1. claimContextSearchForm.component.ts & claimProjectSearchForm.component.ts & claimResultSearchForm.component.ts: Added "@Input() public centerAlign: boolean = false". 2. claimContextSearchForm.component.html & claimProjectSearchForm.component.html & claimResultSearchForm.component.html: align search form to the center if centerAlign is true (in direct linking). 3. linkingGeneric.component.ts: a. Scroll to top smoothly when changing step. b. Added method "getEntityName()" to resolve entity name from entity type. 4. linkingGeneric.component.html: Redesign in direct linking: a. Hidden stepper. b. Title before search form c. Back button instead of breadcrumb. d. Search form aligned to the center. e. In basket, no tabs, but source on top of link source to. f. Button to Step 3 renamed to "Summarise". 5. HelperFunctions.class.ts: In methods "scroll()" and "scrollTo()" added parameter "smooth: boolean = false" for smooth scroll. 6. tsconfig.json: Commented "angularCompilerOptions": { "strictTemplates": true}. --- .../claimContextSearchForm.component.html | 2 +- .../claimContextSearchForm.component.ts | 1 + .../claimProjectSearchForm.component.html | 2 +- .../claimProjectSearchForm.component.ts | 1 + .../claimResultSearchForm.component.html | 2 +- .../claimResultSearchForm.component.ts | 1 + claims/linking/linkingGeneric.component.html | 179 ++++++++++-------- claims/linking/linkingGeneric.component.ts | 9 +- utils/HelperFunctions.class.ts | 14 +- 9 files changed, 130 insertions(+), 81 deletions(-) diff --git a/claims/claim-utils/claimContextSearchForm.component.html b/claims/claim-utils/claimContextSearchForm.component.html index 2983f18a..bd7195c0 100644 --- a/claims/claim-utils/claimContextSearchForm.component.html +++ b/claims/claim-utils/claimContextSearchForm.component.html @@ -1,5 +1,5 @@
-
+
diff --git a/claims/claim-utils/claimContextSearchForm.component.ts b/claims/claim-utils/claimContextSearchForm.component.ts index bd73e074..95289d97 100644 --- a/claims/claim-utils/claimContextSearchForm.component.ts +++ b/claims/claim-utils/claimContextSearchForm.component.ts @@ -18,6 +18,7 @@ declare var UIkit: any; }) export class ClaimContextSearchFormComponent { + @Input() public centerAlign: boolean = false; @Input() public results:ClaimEntity[]; @Input() public sources; @Input() public properties: EnvProperties; diff --git a/claims/claim-utils/claimProjectSearchForm.component.html b/claims/claim-utils/claimProjectSearchForm.component.html index 658a9f93..3734b038 100644 --- a/claims/claim-utils/claimProjectSearchForm.component.html +++ b/claims/claim-utils/claimProjectSearchForm.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/claims/claim-utils/claimProjectSearchForm.component.ts b/claims/claim-utils/claimProjectSearchForm.component.ts index 1f9b3bcb..01e6d8c0 100644 --- a/claims/claim-utils/claimProjectSearchForm.component.ts +++ b/claims/claim-utils/claimProjectSearchForm.component.ts @@ -21,6 +21,7 @@ declare var UIkit:any; }) export class ClaimProjectsSearchFormComponent { public query = ''; + @Input() public centerAlign: boolean = false; @Input() public selectedProjects:ClaimEntity[]=[] ; public elementRef; diff --git a/claims/claim-utils/claimResultSearchForm.component.html b/claims/claim-utils/claimResultSearchForm.component.html index ab0c8642..eeee102f 100644 --- a/claims/claim-utils/claimResultSearchForm.component.html +++ b/claims/claim-utils/claimResultSearchForm.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/claims/claim-utils/claimResultSearchForm.component.ts b/claims/claim-utils/claimResultSearchForm.component.ts index fa31b7a2..b99f5e2a 100644 --- a/claims/claim-utils/claimResultSearchForm.component.ts +++ b/claims/claim-utils/claimResultSearchForm.component.ts @@ -23,6 +23,7 @@ export class ClaimResultSearchFormComponent { source: string = "datacite"; type: string = "dataset"; showSearchResults: boolean = false; + @Input() public centerAlign: boolean = false; @Input() public select: boolean = true; @Input() public keyword: string = ''; @Input() public selectedResults: ClaimEntity[]; diff --git a/claims/linking/linkingGeneric.component.html b/claims/linking/linkingGeneric.component.html index a5a7062d..2ac4e7f5 100644 --- a/claims/linking/linkingGeneric.component.html +++ b/claims/linking/linkingGeneric.component.html @@ -1,20 +1,55 @@ + +
+ + +
+
+
+ Basket reached the size limit. No more entities can be added. +
+ + +
+ No entities to link with the sources. Start adding entities from the left panel. +
+ +
+ + +
- + + + + + + Back to {{getEntityName(inlineEntity.type, false)}} +
-
+
- - - + @@ -37,16 +72,18 @@
+

Link source to

@@ -54,12 +91,14 @@ [properties]=properties [localStoragePrefix]="localStoragePrefix+'results'" [basketLimit]="basketLimit" [showOptions]="showOptions" + [centerAlign]="!!inlineEntity" >
@@ -69,78 +108,70 @@
- -
-
-
- - - + +
+
Source
+ + +
+
+
+
Link source to ({{(results.length) | number}})
+ +
+ + + + +
+
+
+ + + -
-
-
- No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
-
- Basket reached the size limit. No more sources can be added. +
+
+ No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file. +
+
+ Basket reached the size limit. No more sources can be added. +
+ +
- - - -
-
-
-
-
- - -
-
-
- Basket reached the size limit. No more entities can be added. -
- - -
- No entities to link with the sources. Start adding entities from the left panel. -
- +
+
+
-
+
-
STEP {{inlineEntity ? '2' : '3'}} - FINALISE AND FINISH
+
STEP {{inlineEntity ? '2' : '3'}} - SUMMARISE
diff --git a/claims/linking/linkingGeneric.component.ts b/claims/linking/linkingGeneric.component.ts index 6e184a17..7e363f9e 100644 --- a/claims/linking/linkingGeneric.component.ts +++ b/claims/linking/linkingGeneric.component.ts @@ -13,6 +13,8 @@ import {Subscriber} from "rxjs"; import {properties} from "../../../../environments/environment"; import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component"; import {OpenaireEntities} from "../../utils/properties/searchFields"; +import {StringUtils} from "../../utils/string-utils.class"; +import {RouterHelper} from "../../utils/routerHelper.class"; @Component({ selector: 'linking-generic', @@ -44,6 +46,7 @@ export class LinkingGenericComponent { @ViewChild(AlertModal) alert; public pageContents = null; @Input() breadcrumbs: Breadcrumb[] = []; + public routerHelper: RouterHelper = new RouterHelper(); constructor (private _router: Router, private route: ActivatedRoute, private entitySearch:EntitiesSearchService, private _meta: Meta, private _title: Title, private _piwikService:PiwikService, @@ -161,6 +164,7 @@ export class LinkingGenericComponent { this.showOptions.show = 'claim'; } this.cdr.detectChanges(); + HelperFunctions.scroll(true); console.log('stepHasChanged', stepId, this.showOptions.show) } @@ -193,5 +197,8 @@ export class LinkingGenericComponent { } } } - + + private getEntityName (entityType:string, plural:boolean) { + return StringUtils.getEntityName(entityType, plural); + } } diff --git a/utils/HelperFunctions.class.ts b/utils/HelperFunctions.class.ts index 872009ce..4a4b0f6e 100644 --- a/utils/HelperFunctions.class.ts +++ b/utils/HelperFunctions.class.ts @@ -2,13 +2,21 @@ import {UrlMatcher, UrlSegment} from "@angular/router"; export class HelperFunctions { - public static scroll() { + public static scroll(smooth: boolean = false) { HelperFunctions.scrollTo(0,0); } - public static scrollTo(x,y) { + public static scrollTo(x,y, smooth: boolean = false) { if (typeof document !== 'undefined') { - window.scrollTo(x,y); + if(!smooth) { + window.scrollTo(x, y); + } else { + window.scrollTo({ + top: 0, + left: 0, + behavior: "smooth" + }) + } } }