[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:
parent
4cf5f44000
commit
38a8802d7e
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
|
||||
[options]="showOptions.selectOptions" class="uk-width-2-5"></div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)">
|
||||
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
|
||||
[options]="showOptions.selectOptions" class="uk-width-2-5"></div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ declare var UIkit:any;
|
|||
})
|
||||
export class ClaimProjectsSearchFormComponent {
|
||||
public query = '';
|
||||
@Input() public centerAlign: boolean = false;
|
||||
@Input() public selectedProjects:ClaimEntity[]=[] ;
|
||||
public elementRef;
|
||||
|
||||
|
|
|
|||
|
|
@ -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)">
|
||||
<div input type="select" [(value)]="showOptions.show" placeholder="Type" hint="Select..."
|
||||
[options]="showOptions.selectOptions" class="uk-width-2-5"></div>
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
|
|
|
|||
|
|
@ -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="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
|
||||
<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 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">
|
||||
<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)"
|
||||
[active]="this.showOptions.show" [showStepLine]="false"></step>
|
||||
<step [status]="stepStatus('target')" stepId="target" [stepNumber]="inlineEntity?1:2"
|
||||
[stepText]="'Link Source' + (inlineEntity?'':'s') + ' to Entities'"
|
||||
<step [status]="stepStatus('target')" stepId="target" [stepNumber]="2"
|
||||
[stepText]="'Link Sources to Entities'"
|
||||
(stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show"
|
||||
[showStepLine]="!inlineEntity"></step>
|
||||
<step [status]="stepStatus('claim')" stepId="claim" [stepNumber]="inlineEntity?2:3"
|
||||
[showStepLine]="true"></step>
|
||||
<step [status]="stepStatus('claim')" stepId="claim" [stepNumber]="3"
|
||||
[stepText]="'Summarize and finish'"
|
||||
(stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show"
|
||||
[showStepLine]="true"></step>
|
||||
|
|
@ -37,16 +72,18 @@
|
|||
<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-width-2-3 uk-position-z-index">
|
||||
<h2 *ngIf="inlineEntity" class="uk-text-center">Link source to</h2>
|
||||
<div *ngIf="showOptions.show=='source'">
|
||||
<claim-result-search-form [selectedResults]="sources" [properties]=properties
|
||||
[localStoragePrefix]="localStoragePrefix+'sources'"
|
||||
[basketLimit]="basketLimit"
|
||||
[basketLimit]="basketLimit" [centerAlign]="!!inlineEntity"
|
||||
></claim-result-search-form>
|
||||
</div>
|
||||
<div *ngIf="showOptions.show=='project'">
|
||||
<claim-projects-search-form [selectedProjects]="results" [properties]=properties
|
||||
[localStoragePrefix]="localStoragePrefix+'results'"
|
||||
[basketLimit]="basketLimit" [showOptions]="showOptions"
|
||||
[centerAlign]="!!inlineEntity"
|
||||
></claim-projects-search-form>
|
||||
</div>
|
||||
<div *ngIf="showOptions.show=='context'">
|
||||
|
|
@ -54,12 +91,14 @@
|
|||
[properties]=properties
|
||||
[localStoragePrefix]="localStoragePrefix+'results'"
|
||||
[basketLimit]="basketLimit" [showOptions]="showOptions"
|
||||
[centerAlign]="!!inlineEntity"
|
||||
></claim-contexts-search-form>
|
||||
</div>
|
||||
<div *ngIf="showOptions.show=='result'">
|
||||
<claim-result-search-form [selectedResults]="results" [properties]=properties
|
||||
[localStoragePrefix]="localStoragePrefix+'results'"
|
||||
[basketLimit]="basketLimit" [showOptions]="showOptions"
|
||||
[centerAlign]="!!inlineEntity"
|
||||
></claim-result-search-form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,78 +108,70 @@
|
|||
<div class="uk-card uk-card-default linkingBasket">
|
||||
<div class="uk-card-body uk-padding-small">
|
||||
<div class="uk-margin-right">
|
||||
<ul class="uk-tab" uk-tab>
|
||||
<li [class.uk-active]="showOptions.basketShowSources"
|
||||
(click)="showOptions.basketswitchToSources()">
|
||||
<a>
|
||||
Sources to link ({{(sources.length + (inlineEntity ? 1 : 0)) |number}})
|
||||
</a>
|
||||
</li>
|
||||
<li [class.uk-disabled]="sources.length == 0 && !inlineEntity"
|
||||
[class.uk-active]="showOptions.basketShowLinksTo">
|
||||
<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>
|
||||
<ng-container *ngIf="inlineEntity">
|
||||
<div class="uk-margin-small-bottom">
|
||||
<div class="uk-text-emphasis uk-text-bolder">Source</div>
|
||||
<claim-selected-results [results]="[inlineEntity]"
|
||||
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
|
||||
[enableRemove]="false" type="source">
|
||||
</claim-selected-results>
|
||||
</div>
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal"><hr class="uk-margin-remove"/></div>
|
||||
<div class="uk-margin-small-top">
|
||||
<div class="uk-text-emphasis uk-text-bolder">Link source to <span *ngIf="results.length> 0">({{(results.length) | number}})</span></div>
|
||||
<ng-container *ngTemplateOutlet="destinations_basket"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!inlineEntity">
|
||||
<ul class="uk-tab" uk-tab>
|
||||
<li [class.uk-active]="showOptions.basketShowSources"
|
||||
(click)="showOptions.basketswitchToSources()">
|
||||
<a>
|
||||
Sources to link ({{(sources.length) |number}})
|
||||
</a>
|
||||
</li>
|
||||
<li [class.uk-disabled]="sources.length == 0"
|
||||
[class.uk-active]="showOptions.basketShowLinksTo">
|
||||
<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 *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 class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<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>
|
||||
<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 *ngIf="showOptions.basketShowLinksTo">
|
||||
<div class="uk-height-medium uk-overflow-auto">
|
||||
<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 *ngIf="showOptions.basketShowLinksTo">
|
||||
<div class="uk-height-medium uk-overflow-auto">
|
||||
<ng-container *ngTemplateOutlet="destinations_basket"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showOptions.show == 'source'"
|
||||
|
|
@ -164,7 +195,7 @@
|
|||
<button class="uk-flex uk-flex-middle uk-button uk-button-text"
|
||||
[class.uk-disabled]="results.length == 0" [disabled]="results.length == 0">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue