MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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}.
This commit is contained in:
Konstantina Galouni 2023-02-15 23:56:16 +02:00
parent 4cf5f44000
commit 38a8802d7e
9 changed files with 130 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
claims/claim-utils/claimContextSearchForm.component.html
View File

@ -1,5 +1,5 @@
<div> <div>
<div class="uk-width-xlarge@l uk-width-large"> <div class="uk-width-xlarge@l uk-width-large" [ngClass]="centerAlign ? 'uk-align-center':''">
<advanced-search-input> <advanced-search-input>
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..." <div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
[options]="showOptions.selectOptions" class="uk-width-2-5"></div> [options]="showOptions.selectOptions" class="uk-width-2-5"></div>

1
claims/claim-utils/claimContextSearchForm.component.ts
View File

@ -18,6 +18,7 @@ declare var UIkit: any;
}) })
export class ClaimContextSearchFormComponent { export class ClaimContextSearchFormComponent {
@Input() public centerAlign: boolean = false;
@Input() public results:ClaimEntity[]; @Input() public results:ClaimEntity[];
@Input() public sources; @Input() public sources;
@Input() public properties: EnvProperties; @Input() public properties: EnvProperties;

2
claims/claim-utils/claimProjectSearchForm.component.html
View File

@ -1,4 +1,4 @@
<div class="uk-width-xlarge@l uk-width-large"> <div class="uk-width-xlarge@l uk-width-large" [ngClass]="centerAlign ? 'uk-align-center':''">
<advanced-search-input (searchEmitter)="search(page,size)"> <advanced-search-input (searchEmitter)="search(page,size)">
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..." <div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
[options]="showOptions.selectOptions" class="uk-width-2-5"></div> [options]="showOptions.selectOptions" class="uk-width-2-5"></div>

1
claims/claim-utils/claimProjectSearchForm.component.ts
View File

@ -21,6 +21,7 @@ declare var UIkit:any;
}) })
export class ClaimProjectsSearchFormComponent { export class ClaimProjectsSearchFormComponent {
public query = ''; public query = '';
@Input() public centerAlign: boolean = false;
@Input() public selectedProjects:ClaimEntity[]=[] ; @Input() public selectedProjects:ClaimEntity[]=[] ;
public elementRef; public elementRef;

2
claims/claim-utils/claimResultSearchForm.component.html
View File

@ -1,4 +1,4 @@
<div *ngIf="showOptions && showOptions.linkToEntities.length > 0" class="uk-width-xlarge@l uk-width-large"> <div *ngIf="showOptions && showOptions.linkToEntities.length > 0" class="uk-width-xlarge@l uk-width-large" [ngClass]="centerAlign ? 'uk-align-center':''">
<advanced-search-input (searchEmitter)="search(true)"> <advanced-search-input (searchEmitter)="search(true)">
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..." <div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
[options]="showOptions.selectOptions" class="uk-width-2-5"></div> [options]="showOptions.selectOptions" class="uk-width-2-5"></div>

1
claims/claim-utils/claimResultSearchForm.component.ts
View File

@ -23,6 +23,7 @@ export class ClaimResultSearchFormComponent {
source: string = "datacite"; source: string = "datacite";
type: string = "dataset"; type: string = "dataset";
showSearchResults: boolean = false; showSearchResults: boolean = false;
@Input() public centerAlign: boolean = false;
@Input() public select: boolean = true; @Input() public select: boolean = true;
@Input() public keyword: string = ''; @Input() public keyword: string = '';
@Input() public selectedResults: ClaimEntity[]; @Input() public selectedResults: ClaimEntity[];

179
claims/linking/linkingGeneric.component.html
View File

@ -1,20 +1,55 @@
<ng-template #destinations_basket>
<div *ngIf="(results.length)> 0 || showOptions.show=='result'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height: 17px;">
<start-over *ngIf=" (results.length)> 0"
[results]="results" [localStoragePrefix]="localStoragePrefix+'results'"
message="all results (projects, communities, research results)"
class="uk-float-right"></start-over>
<bulk-claim *ngIf="showOptions.show=='result'" [results]="results" [properties]=properties
[localStoragePrefix]="localStoragePrefix+'results'"
[basketLimit]="basketLimit"></bulk-claim>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<div *ngIf="results.length >= basketLimit "
class="uk-alert uk-alert-warning uk-text-center">
Basket reached the size limit. No more entities can be added.
</div>
<claim-selected-results sectionTitle="Selected Results" [results]="results"
[localStoragePrefix]="localStoragePrefix+'results'" type="target">
</claim-selected-results>
<div *ngIf="(results.length) == 0 " class=" uk-text-center">
No entities to link with the sources. Start adding entities from the left panel.
</div>
</div>
</ng-template>
<div class="linking uk-background-default"> <div class="linking uk-background-default">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs *ngIf="!inlineEntity" [breadcrumbs]="breadcrumbs"></breadcrumbs>
<!-- [routerLink]="properties.searchLinkToResult.split('?')[0]"-->
<!-- [queryParams]="routerHelper.createQueryParam('id', inlineEntity.id)"-->
<a *ngIf="inlineEntity"
[routerLink]="inlineEntity.result.url.split('?')[0]"
[queryParams]="routerHelper.createQueryParam(inlineEntity.result.url.split('?')[1].split('=')[0], inlineEntity.id)"
class="uk-button uk-button-link uk-text-transform-none uk-flex uk-flex-middle">
<icon name="west" [flex]="true"></icon>
<span class="uk-margin-small-left">Back to {{getEntityName(inlineEntity.type, false)}}</span>
</a>
</div> </div>
</div> </div>
<div uk-sticky="offset: 65; bottom: #pageBottom; media: @m" class="uk-blur-background"> <div *ngIf="!inlineEntity" uk-sticky="offset: 65; bottom: #pageBottom; media: @m" class="uk-blur-background">
<div class="uk-section-xsmall"> <div class="uk-section-xsmall">
<stepper> <stepper>
<step *ngIf="!inlineEntity" [status]="stepStatus('source')" stepId="source" stepNumber="1" <step [status]="stepStatus('source')" stepId="source" stepNumber="1"
[stepText]="'Find Sources'" (stepChanged)="stepHasChanged($event)" [stepText]="'Find Sources'" (stepChanged)="stepHasChanged($event)"
[active]="this.showOptions.show" [showStepLine]="false"></step> [active]="this.showOptions.show" [showStepLine]="false"></step>
<step [status]="stepStatus('target')" stepId="target" [stepNumber]="inlineEntity?1:2" <step [status]="stepStatus('target')" stepId="target" [stepNumber]="2"
[stepText]="'Link Source' + (inlineEntity?'':'s') + ' to Entities'" [stepText]="'Link Sources to Entities'"
(stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show" (stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show"
[showStepLine]="!inlineEntity"></step> [showStepLine]="true"></step>
<step [status]="stepStatus('claim')" stepId="claim" [stepNumber]="inlineEntity?2:3" <step [status]="stepStatus('claim')" stepId="claim" [stepNumber]="3"
[stepText]="'Summarize and finish'" [stepText]="'Summarize and finish'"
(stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show" (stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show"
[showStepLine]="true"></step> [showStepLine]="true"></step>
@ -37,16 +72,18 @@
<div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '"> <div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
<div class="uk-grid basketContainer" *ngIf="showOptions.show!='claim'" uk-grid> <div class="uk-grid basketContainer" *ngIf="showOptions.show!='claim'" uk-grid>
<div class="uk-width-2-3 uk-position-z-index"> <div class="uk-width-2-3 uk-position-z-index">
<h2 *ngIf="inlineEntity" class="uk-text-center">Link source to</h2>
<div *ngIf="showOptions.show=='source'"> <div *ngIf="showOptions.show=='source'">
<claim-result-search-form [selectedResults]="sources" [properties]=properties <claim-result-search-form [selectedResults]="sources" [properties]=properties
[localStoragePrefix]="localStoragePrefix+'sources'" [localStoragePrefix]="localStoragePrefix+'sources'"
[basketLimit]="basketLimit" [basketLimit]="basketLimit" [centerAlign]="!!inlineEntity"
></claim-result-search-form> ></claim-result-search-form>
</div> </div>
<div *ngIf="showOptions.show=='project'"> <div *ngIf="showOptions.show=='project'">
<claim-projects-search-form [selectedProjects]="results" [properties]=properties <claim-projects-search-form [selectedProjects]="results" [properties]=properties
[localStoragePrefix]="localStoragePrefix+'results'" [localStoragePrefix]="localStoragePrefix+'results'"
[basketLimit]="basketLimit" [showOptions]="showOptions" [basketLimit]="basketLimit" [showOptions]="showOptions"
[centerAlign]="!!inlineEntity"
></claim-projects-search-form> ></claim-projects-search-form>
</div> </div>
<div *ngIf="showOptions.show=='context'"> <div *ngIf="showOptions.show=='context'">
@ -54,12 +91,14 @@
[properties]=properties [properties]=properties
[localStoragePrefix]="localStoragePrefix+'results'" [localStoragePrefix]="localStoragePrefix+'results'"
[basketLimit]="basketLimit" [showOptions]="showOptions" [basketLimit]="basketLimit" [showOptions]="showOptions"
[centerAlign]="!!inlineEntity"
></claim-contexts-search-form> ></claim-contexts-search-form>
</div> </div>
<div *ngIf="showOptions.show=='result'"> <div *ngIf="showOptions.show=='result'">
<claim-result-search-form [selectedResults]="results" [properties]=properties <claim-result-search-form [selectedResults]="results" [properties]=properties
[localStoragePrefix]="localStoragePrefix+'results'" [localStoragePrefix]="localStoragePrefix+'results'"
[basketLimit]="basketLimit" [showOptions]="showOptions" [basketLimit]="basketLimit" [showOptions]="showOptions"
[centerAlign]="!!inlineEntity"
></claim-result-search-form> ></claim-result-search-form>
</div> </div>
</div> </div>
@ -69,78 +108,70 @@
<div class="uk-card uk-card-default linkingBasket"> <div class="uk-card uk-card-default linkingBasket">
<div class="uk-card-body uk-padding-small"> <div class="uk-card-body uk-padding-small">
<div class="uk-margin-right"> <div class="uk-margin-right">
<ul class="uk-tab" uk-tab> <ng-container *ngIf="inlineEntity">
<li [class.uk-active]="showOptions.basketShowSources" <div class="uk-margin-small-bottom">
(click)="showOptions.basketswitchToSources()"> <div class="uk-text-emphasis uk-text-bolder">Source</div>
<a> <claim-selected-results [results]="[inlineEntity]"
Sources to link ({{(sources.length + (inlineEntity ? 1 : 0)) |number}}) [localStoragePrefix]="localStoragePrefix+'sources'" class=""
</a> [enableRemove]="false" type="source">
</li> </claim-selected-results>
<li [class.uk-disabled]="sources.length == 0 && !inlineEntity" </div>
[class.uk-active]="showOptions.basketShowLinksTo"> <div class="uk-padding-small uk-padding-remove-horizontal"><hr class="uk-margin-remove"/></div>
<a (click)="showOptions.basketswitchToLinkTo()">Link to <span <div class="uk-margin-small-top">
*ngIf="results.length> 0">({{(results.length) | number}})</span> <div class="uk-text-emphasis uk-text-bolder">Link source to <span *ngIf="results.length> 0">({{(results.length) | number}})</span></div>
</a> <ng-container *ngTemplateOutlet="destinations_basket"></ng-container>
</li> </div>
</ul> </ng-container>
<div *ngIf="showOptions.basketShowSources">
<div class="uk-height-medium uk-overflow-auto"> <ng-container *ngIf="!inlineEntity">
<div *ngIf="showOptions.show == 'source'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height:17px;"> <ul class="uk-tab" uk-tab>
<start-over *ngIf="showOptions.show == 'source' && sources.length> 0" <li [class.uk-active]="showOptions.basketShowSources"
[results]="sources" (click)="showOptions.basketswitchToSources()">
[localStoragePrefix]="localStoragePrefix+'sources'" <a>
message="all sources" class="uk-float-right"></start-over> Sources to link ({{(sources.length) |number}})
<bulk-claim *ngIf="showOptions.show == 'source'" [results]="sources" </a>
[properties]=properties </li>
[localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit" <li [class.uk-disabled]="sources.length == 0"
> [class.uk-active]="showOptions.basketShowLinksTo">
</bulk-claim> <a (click)="showOptions.basketswitchToLinkTo()">Link to <span
*ngIf="results.length> 0">({{(results.length) | number}})</span>
</a>
</li>
</ul>
<div *ngIf="showOptions.basketShowSources">
<div class="uk-height-medium uk-overflow-auto">
<div *ngIf="showOptions.show == 'source'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height:17px;">
<start-over *ngIf="showOptions.show == 'source' && sources.length> 0"
[results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'"
message="all sources" class="uk-float-right"></start-over>
<bulk-claim *ngIf="showOptions.show == 'source'" [results]="sources"
[properties]=properties
[localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit"
>
</bulk-claim>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<div *ngIf="sources.length == 0 && !inlineEntity " class="uk-text-center uk-text-meta">
No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
</div> </div>
<div *ngIf="sources.length >= basketLimit " class="uk-alert uk-alert-warning uk-text-center"> <div class="uk-padding-small uk-padding-remove-horizontal">
Basket reached the size limit. No more sources can be added. <div *ngIf="sources.length == 0" class="uk-text-center uk-text-meta">
No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
</div>
<div *ngIf="sources.length >= basketLimit " class="uk-alert uk-alert-warning uk-text-center">
Basket reached the size limit. No more sources can be added.
</div>
<claim-selected-results *ngIf="sources.length > 0" [results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="true" type="source">
</claim-selected-results>
</div> </div>
<claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="false" type="source">
</claim-selected-results>
<claim-selected-results *ngIf="sources.length > 0" [results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="true" type="source">
</claim-selected-results>
</div> </div>
</div> </div>
</div> <div *ngIf="showOptions.basketShowLinksTo">
<div *ngIf="showOptions.basketShowLinksTo"> <div class="uk-height-medium uk-overflow-auto">
<div class="uk-height-medium uk-overflow-auto"> <ng-container *ngTemplateOutlet="destinations_basket"></ng-container>
<div *ngIf="(results.length)> 0 || showOptions.show=='result'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height: 17px;">
<start-over *ngIf=" (results.length)> 0"
[results]="results" [localStoragePrefix]="localStoragePrefix+'results'"
message="all results (projects, communities, research results)"
class="uk-float-right"></start-over>
<bulk-claim *ngIf="showOptions.show=='result'" [results]="results" [properties]=properties
[localStoragePrefix]="localStoragePrefix+'results'"
[basketLimit]="basketLimit"></bulk-claim>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<div *ngIf="results.length >= basketLimit "
class="uk-alert uk-alert-warning uk-text-center">
Basket reached the size limit. No more entities can be added.
</div>
<claim-selected-results sectionTitle="Selected Results" [results]="results"
[localStoragePrefix]="localStoragePrefix+'results'" type="target">
</claim-selected-results>
<div *ngIf="(results.length) == 0 " class=" uk-text-center">
No entities to link with the sources. Start adding entities from the left panel.
</div>
</div> </div>
</div> </div>
</div> </ng-container>
</div> </div>
</div> </div>
<div *ngIf="showOptions.show == 'source'" <div *ngIf="showOptions.show == 'source'"
@ -164,7 +195,7 @@
<button class="uk-flex uk-flex-middle uk-button uk-button-text" <button class="uk-flex uk-flex-middle uk-button uk-button-text"
[class.uk-disabled]="results.length == 0" [disabled]="results.length == 0"> [class.uk-disabled]="results.length == 0" [disabled]="results.length == 0">
<icon *ngIf="inlineEntity" name="link" visuallyHidden="link" [flex]="true"></icon> <icon *ngIf="inlineEntity" name="link" visuallyHidden="link" [flex]="true"></icon>
<div class="uk-width-expand uk-margin-small-left">STEP {{inlineEntity ? '2' : '3'}} - FINALISE AND FINISH</div> <div class="uk-width-expand uk-margin-small-left"><ng-container *ngIf="!inlineEntity">STEP {{inlineEntity ? '2' : '3'}} - </ng-container>SUMMARISE</div>
</button> </button>
</div> </div>
</div> </div>

9
claims/linking/linkingGeneric.component.ts
View File

@ -13,6 +13,8 @@ import {Subscriber} from "rxjs";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component"; import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
import {OpenaireEntities} from "../../utils/properties/searchFields"; import {OpenaireEntities} from "../../utils/properties/searchFields";
import {StringUtils} from "../../utils/string-utils.class";
import {RouterHelper} from "../../utils/routerHelper.class";
@Component({ @Component({
selector: 'linking-generic', selector: 'linking-generic',
@ -44,6 +46,7 @@ export class LinkingGenericComponent {
@ViewChild(AlertModal) alert; @ViewChild(AlertModal) alert;
public pageContents = null; public pageContents = null;
@Input() breadcrumbs: Breadcrumb[] = []; @Input() breadcrumbs: Breadcrumb[] = [];
public routerHelper: RouterHelper = new RouterHelper();
constructor (private _router: Router, private route: ActivatedRoute, private entitySearch:EntitiesSearchService, constructor (private _router: Router, private route: ActivatedRoute, private entitySearch:EntitiesSearchService,
private _meta: Meta, private _title: Title, private _piwikService:PiwikService, private _meta: Meta, private _title: Title, private _piwikService:PiwikService,
@ -161,6 +164,7 @@ export class LinkingGenericComponent {
this.showOptions.show = 'claim'; this.showOptions.show = 'claim';
} }
this.cdr.detectChanges(); this.cdr.detectChanges();
HelperFunctions.scroll(true);
console.log('stepHasChanged', stepId, this.showOptions.show) 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);
}
} }

14
utils/HelperFunctions.class.ts
View File

@ -2,13 +2,21 @@ import {UrlMatcher, UrlSegment} from "@angular/router";
export class HelperFunctions { export class HelperFunctions {
public static scroll() { public static scroll(smooth: boolean = false) {
HelperFunctions.scrollTo(0,0); HelperFunctions.scrollTo(0,0);
} }
public static scrollTo(x,y) { public static scrollTo(x,y, smooth: boolean = false) {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
window.scrollTo(x,y); if(!smooth) {
window.scrollTo(x, y);
} else {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
})
}
} }
} }