[Library | Trunk]

Claims: update UI for display claims component

Dashboard - connect: update notification settings component




git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60403 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2021-02-10 10:24:52 +00:00
parent b3e5a0a947
commit 82be5a6e52
11 changed files with 313 additions and 596 deletions

View File

@ -3,225 +3,132 @@
</div>
<div class="uk-grid helper-grid">
<!-- <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>-->
<div class="uk-width-expand uk-margin-top uk-card uk-card-default uk-padding-small">
<div class="uk-width-expand ">
<div
class="uk-card-body uk-padding-remove-bottom uk-padding-remove-top " [class.portal-hr]="
!pageLoading && claims && claims.length > 0">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
<form class="">
<div class=" ">
<span class="uk-text-muted">Filter by</span>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search links"
[bordered]="true" colorClass="uk-text-secondary"></div>
</div>
<div class="uk-margin-small-top ">
<label class="uk-margin-small-right"> <input [(ngModel)]="projectCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="project"/>
Projects </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="publicationCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="publication"/>
Publications </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="datasetCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="dataset"/>
Research Data </label>
<label class="uk-margin-small-right"> <input [(ngModel)]="softwareCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="software"/>
Software
</label>
<label class="uk-margin-small-right"> <input [(ngModel)]="otherCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="other"/>
Other products
</label>
<label class="uk-margin-small-right"> <input [(ngModel)]="contextCB" type="checkbox"
[disabled]="pageLoading"
(ngModelChange)="changeType()" name="context"/>
Communities </label>
<div class="uk-inline">
<span class="uk-form-icon uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle
fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000"
stroke-width="1.1"
d="M14,14 L18,18 L14,14 Z"></path></svg>
</span>
<input type="text" class=" uk-input uk-width-medium form-control" placeholder="Search links"
aria-describedby="sizing-addon2"
[(ngModel)]="inputkeyword" (keyup)="changekeyword()"
name="claims-keyword">
<span *ngIf="inputkeyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;"
(click)="inputkeyword=''; changekeyword();">
<svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" data-svg="close"><path fill="none" stroke="#000"
stroke-width="1.06"
d="M16,16 L4,4"></path><path
fill="none"
stroke="#000"
stroke-width="1.06"
d="M16,4 L4,16"></path></svg>
</span>
<div class=" uk-grid uk-flex-middle">
<div class="">Filter by: </div>
<div class="uk-width-medium uk-padding-remove uk-margin-small-left" dashboard-input
[formInput]="filterForm.get('entities')"
placeholder="Search by entities"
type="chips" [options]="allOptions" chipLabel="label">
</div>
<div class="">Sort by: </div>
<div class="uk-width-medium uk-padding-remove uk-margin-small-left" dashboard-input
[formInput]="filterForm.get('sort')"
type="select"
[options]="sortOptions">
</div>
</div>
</form>
<div *ngIf="resultsNum>0 && selected.length == 0"
class="searchPaging uk-panel uk-margin-top portal-hr uk-margin-small-bottom"
<div *ngIf="!(pageLoading || showErrorMessage || showForbiddenMessage || userValidMessage.length > 0 || (claims &&
claims.length
==0))"
class="searchPaging uk-panel uk-margin-top "
data-uk-grid-margin="">
<!-- <div *ngIf="resultsNum>10" class="uk-width-1-2 uk-margin-top uk-margin-bottom">-->
<!-- <span> Results per page-->
<!-- <mat-select class="uk-width-1-5 matSelection" [(ngModel)]="size" name="select_size"-->
<!-- (ngModelChange)="changeSize()" [disabled]="pageLoading"-->
<!-- [disableOptionCentering]="true"-->
<!-- panelClass="matSelectionPanel">-->
<!-- <mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>-->
<!-- </mat-select>-->
<!-- </span>-->
<!-- </div>-->
<div *ngIf="resultsNum>10" class="uk-margin-top uk-margin-bottom">
<mat-form-field class="matSelectionFormField">
<mat-label>Results per page:</mat-label>
<mat-select name="select_size"
[(ngModel)]="size" (ngModelChange)="changeSize()"
[disabled]="pageLoading"
[disableOptionCentering]="true"
panelClass="matSelectionPanel"
class="uk-text-bold matSelection">
<mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="uk-grid">
<div *ngIf="resultsNum>0" class="uk-width-1-2">
<span class="portal-color">{{resultsNum|number}}</span> links, page <span
class="portal-color">{{page | number}}</span> of <span
class="portal-color">{{totalPages(resultsNum)|number}}</span>
</div>
<div *ngIf="resultsNum" class="uk-width-1-2 ">
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
[loading]="pageLoading"
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
</div>
</div>
</div>
<!-- Buttons for selecting and Delete Claims -->
<div *ngIf="enableDelete && selected.length>0 && resultsNum > 0 "
class="uk-margin-top portal-hr uk-margin-small-bottom uk-grid uk-margin-small-left">
<div class=" uk-width-1-2 uk-padding-remove-left">
{{selected.length | number}} link{{(selected.length > 1) ? 's' : ''}} selected
</div>
<div class=" uk-width-1-2">
<a [class]=" 'uk-text-danger uk-float-right '+(selected.length > 0?'':'uk-disabled')" (click)="confirmOpen()">
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
<div class="uk-grid uk-flex-middle">
<div class="uk-width-1-2">
<div *ngIf="enableDelete && claims && claims.length > 0">
<span class="uk-margin-small-top">
<input id="checkAll" type="checkbox" (click)="selectAll($event)"
[ngModel]="selected.length==claims.length"/>
</span>
<a [class]=" ' grey-portal-link uk-margin-medium-left '+(selected.length > 0?'':'uk-disabled')"
(click)="confirmOpen()">
<span class="uk-icon "><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
icon="trash" ratio="1"><polyline fill="none" stroke="#000"
points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline
fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7"
width="1"
height="9"></rect><rect
x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span>
delete links
Delete <span
*ngIf="selected.length > 0 && selected.length < resultsNum">{{selected.length | number}}</span><span
*ngIf="selected.length == resultsNum"> all </span> links
</a>
</div>
</div>
<div *ngIf="resultsNum" class="uk-width-1-2 uk-grid uk-flex-right uk-flex-middle ">
<div>
<span class="portal-color">{{resultsNum|number}}</span> links, page <span
class="portal-color">{{page | number}}</span> of <span
class="portal-color">{{totalPages(resultsNum)|number}}</span>
</div>
<paging-no-load [currentPage]="page" [totalResults]="resultsNum" [size]="size"
[loading]="pageLoading"
(pageChange)="pageChange($event)" class="uk-float-right"></paging-no-load>
</div>
</div>
<div *ngIf="deleteMessage.length>0 " [innerHTML]="deleteMessage">
<!--button *ngIf="claims && claims.length > 0" class=" uk-button uk-button-default" (click)="confirmOpen()"> <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="trash" ratio="1"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Delete</button-->
</div>
</div>
<loading *ngIf="pageLoading" class="uk-padding"></loading>
<div *ngIf="!pageLoading" >
<div *ngIf="showErrorMessage " class="uk-alert uk-alert-danger ">
An Error occured.
</div>
<div *ngIf="showForbiddenMessage " class="uk-alert uk-alert-danger ">
You are not authorized to view the results.
</div>
<div *ngIf="userValidMessage.length > 0 " class="uk-alert uk-alert-danger ">
<div *ngIf=" userValidMessage.length > 0 " class="uk-alert uk-alert-danger ">
User session is not valid. Please login again.
</div>
<div *ngIf="claims && claims.length == 0" class="uk-margin-top">
<div *ngIf=" claims && claims.length == 0" class="uk-margin-top">
<div class="uk-alert uk-alert-primary ">No entries found.</div>
</div>
<div class="">
<table *ngIf="claims && claims.length > 0" class="uk-table uk-table-small uk-table-striped dataTable">
<thead class="uk-text-capitalize">
<tr>
<th *ngIf="enableDelete" class="uk-padding-remove-right" title="Select all">
<input id="checkAll" type="checkbox" (click)="selectAll($event)"
[ngModel]="selected.length==claims.length"/>
</th>
<th [class]="'uk-width-1-3 '+(sortby != 'target'?'sorting':(descending?'sorting_desc':'sorting_asc'))"
(click)="changeOrderby('target')"> Source
</th>
<th [class]="'uk-width-1-3 '+(sortby != 'source'?'sorting':(descending?'sorting_desc':'sorting_asc'))"
(click)="changeOrderby('source')">
Link to
</th>
<th *ngIf=" showUserEmail
" [class]="sortby != 'user'?'sorting':(descending?'sorting_desc':'sorting_asc')"
(click)="changeOrderby('user')">
Claimed by
</th>
<th [class]="sortby != 'date'?'sorting':(descending?'sorting_desc':'sorting_asc')"
(click)="changeOrderby('date')">
Claim Date
</th>
<th>Status
<span class="uk-icon"
[attr.uk-tooltip]="'title:<div class=\'uk-margin uk-padding-small\'>Status declares if the link information is available in the portal and the APIs<br> If it is pending, the information will be added in the next content provision workflow.</div>'">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="info" ratio="1"><path
d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let claim of claims ">
<td *ngIf="enableDelete"><input [id]="claim.id" type="checkbox" (click)="select(claim,$event)"
[ngModel]="isSelected(claim.id)"/></td>
<!-- <td></td>-->
<td>
<claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
[externalPortalUrl]=externalPortalUrl></claim-entity>
</td>
<td>
<claim-entity [entity]="claim.source" [type]="claim.sourceType" [properties]=properties
[externalPortalUrl]=externalPortalUrl></claim-entity>
</td>
<td *ngIf="showUserEmail">{{claim.userMail}}</td>
<td>{{claim.date}}</td>
<td>
<span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success">available</span>
<ng-template #notAvailable><span class="uk-label uk-label-warning">pending</span></ng-template>
<!-- <span class="uk-icon"-->
<!-- [attr.uk-tooltip]="'title:<div class=\'uk-margin-small\'>'+isClaimAvailable(claim)+'</div>'">-->
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="question"-->
<!-- ratio="1">-->
<!-- <circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle><circle cx="10.44"-->
<!-- cy="14.42"-->
<!-- r="1.05"></circle><path-->
<!-- fill="none" stroke="#000" stroke-width="1.2"-->
<!-- d="M8.17,7.79 C8.17,4.75 12.72,4.73 12.72,7.72 C12.72,8.67 11.81,9.15 11.23,9.75 C10.75,10.24 10.51,10.73 10.45,11.4 C10.44,11.53 10.43,11.64 10.43,11.75"></path></svg>-->
<!-- </span>-->
</td>
</tr>
</tbody>
</table>
<div *ngFor="let claim of claims "
class="uk-card uk-card-default uk-card-body uk-margin-bottom ng-star-inserted">
<div class="uk-grid">
<div *ngIf="enableDelete">
<input [id]="claim.id" type="checkbox" (click)="select(claim,$event)"
[ngModel]="isSelected(claim.id)"/>
</div>
<div class="portal-hr uk-margin-top">
<div class="uk-width-expand">
<div class="uk-margin-bottom">
<claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
[externalPortalUrl]=externalPortalUrl [source]="true"></claim-entity>
</div>
<div class="uk-margin-small-bottom">
<span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success">available</span>
<ng-template #notAvailable><span class="uk-label uk-label-danger">pending</span></ng-template>
</div>
<div class="uk-margin-small-bottom"><span *ngIf="showUserEmail" class="uk-margin-right"><span class="title">Claimed by:</span>
{{claim.userMail}}</span>
<span
class="title">Claimed date:</span> {{claim.date}}</div>
<div class="uk-margin-small-bottom uk-margin-top">
<!-- <span class="title">Link to:</span> -->
<claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
[externalPortalUrl]=externalPortalUrl></claim-entity>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!( showErrorMessage || showForbiddenMessage || userValidMessage.length > 0 || (claims
&& claims.length
==0))" class="portal-hr uk-margin-top">
<div class="uk-grid ">
<div *ngIf="resultsNum>0" class="uk-width-1-2">
<span class="portal-color">{{resultsNum|number}}</span> links, page <span
@ -235,25 +142,11 @@
</div>
</div>
</div>
</div>
</div>
<helper *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
[texts]="pageContents['right']" class="uk-width-1-5"></helper>
<!-- <div class="uk-width-1-5">
<div class="uk-card portal-card uk-padding" *ngIf="externalPortalUrl || claimsInfoURL">
<h6 *ngIf="!externalPortalUrl || externalPortalUrl.indexOf('http')==-1" class="uk-h6">
<a class="el-content uk-link-text" routerLink="/participate/claim">Claim more links?</a>
</h6>
<h6 *ngIf="externalPortalUrl && externalPortalUrl.indexOf('http')!=-1" class="uk-h6">
<a class="el-content uk-link-text" [href]="externalPortalUrl+'/participate/claim'"
target="_blank">Claim more links?</a>
</h6>
<h6 *ngIf="claimsInfoURL" class="uk-h6 uk-margin-small-top">
<a class="el-content uk-link-text" [href]="claimsInfoURL" target="_blank">Learn more</a>
</h6>
</div>
<helper position="right" styleName=" uk-width-1-5"></helper>
</div>-->
</div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>

View File

@ -10,15 +10,17 @@ import {Session, User} from '../../../login/utils/helper.class';
import {EnvProperties} from '../../../utils/properties/env-properties';
import {LoginErrorCodes} from '../../../login/utils/guardHelper.class';
import {SEOService} from '../../../sharedComponents/SEO/SEO.service';
import {IndexInfoService} from "../../../utils/indexInfo.service";
import {ClaimDBRecord} from "../claimHelper.class";
import {Dates} from "../../../utils/string-utils.class";
import {HelperService} from "../../../utils/helper/helper.service";
import {Meta, Title} from "@angular/platform-browser";
import {PiwikService} from "../../../utils/piwik/piwik.service";
import {properties} from "../../../../../environments/environment";
import {IndexInfoService} from '../../../utils/indexInfo.service';
import {ClaimDBRecord} from '../claimHelper.class';
import {Dates} from '../../../utils/string-utils.class';
import {HelperService} from '../../../utils/helper/helper.service';
import {Meta, Title} from '@angular/platform-browser';
import {PiwikService} from '../../../utils/piwik/piwik.service';
import {properties} from '../../../../../environments/environment';
import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
import {Option} from '../../../sharedComponents/input/input.component';
declare var UIkit;
@Component({
selector: 'displayClaims',
templateUrl: 'displayClaims.component.html',
@ -37,7 +39,8 @@ export class DisplayClaimsComponent {
@Input() myClaims: boolean = false;
@Input() isAdmin: boolean = false;
page: number = 1;
size: number = 10;
size: number = 50;
defaultSize:number = 50;
sizes = [10, 20, 30, 50];
keyword: string; // the keyword string to give to the request as parameter
inputkeyword: string; // the string written in the input field (keyword=inputkeyword when its length is bigger than 3 and the user stops typing)
@ -53,21 +56,26 @@ export class DisplayClaimsComponent {
lastIndexDate = null;
@ViewChild(ModalLoading) loading: ModalLoading;
public filterForm: FormGroup;
public entitiesCtrl: FormArray;
allOptions: Option[] = [{label: "Projects", value: {id:"project", label: "Projects"}},{label: "Publications", value:{id:"publication", label: "Publications"}},{label: "Research data", value: {id:"dataset", label: "Research data"}},
{label: "Software", value: {id:"software", label: "Software"}},{label: "Other reserch products", value: {id:"other", label: "Other reserch products"}},{label: "Communities", value: {id:"community", label: "Communities"}}];
sortOptions: Option[] = [
{label:"Date (recent) ", value:{ sort: "date", descending: true }}, {label:"Date (oldest) ", value:{ sort: "date",descending:false }},
// {label:"User (desc) ", value:{ sort: "user",descending: true }}, {label:"User (asc) ", value:{ sort: "user",descending:false }},
// {label:"Title (desc) ", value:{ sort: "source",descending: true }}, {label:"Title (asc) ", value:{ sort: "source",descending:false }},
{label:"Title (desc) ", value:{ sort: "target",descending: true }}, {label:"Title (asc) ", value: { sort: "target",descending:false }},
];
//checkboxes:
publicationCB = false;
datasetCB = false;
softwareCB = false;
otherCB = false;
contextCB = false;
projectCB = false;
entityTypes: string[] = [];
descending = true;
sortby = "date";
// descending = true;
// sortby = "date";
selected = [];
deleteMessage: string = "";
// deleteMessage: string = "";
showErrorMessage: boolean = false;
showForbiddenMessage: boolean = false;
userValidMessage: string = "";
@ -84,14 +92,23 @@ export class DisplayClaimsComponent {
constructor(private _claimService: ClaimsService, private route: ActivatedRoute, private _router: Router, private location: Location,
private _meta: Meta, private _title: Title, private _piwikService: PiwikService,
private seoService: SEOService, private indexInfoService: IndexInfoService, private helper: HelperService) {
private seoService: SEOService, private indexInfoService: IndexInfoService, private helper: HelperService, private _fb: FormBuilder) {
}
ngOnInit() {
this.entitiesCtrl = this._fb.array([]);
this.filterForm = this._fb.group({
keyword: [''],
entities: this.entitiesCtrl,
sort: this._fb.control(this.sortOptions[0].value)
});
this.properties = properties;
this.url = properties.domain + properties.baseLink + this._router.url;
if(!this.myClaims){
this.sortOptions.push({label:"User (desc) ", value:{ sort: "user",descending: true }});
this.sortOptions.push( {label:"User (asc) ", value:{ sort: "user",descending:false }})
}
var description = "Openaire, linking, claim, publication, research data, software, other research product, project, community";
this.updateTitle(this.title);
this.updateDescription(description);
@ -113,7 +130,6 @@ export class DisplayClaimsComponent {
this.fetchBy = "User";
this.fetchId = this.user.email;
} else {
this.fetchBy = (this.fetchBy) ? this.fetchBy : params['fetchBy'];
this.fetchBy = (this.types.indexOf(this.fetchBy) != -1) ? this.fetchBy : 'All';
this.fetchId = (this.fetchId) ? this.fetchId : params['fetchId'];
@ -121,14 +137,14 @@ export class DisplayClaimsComponent {
}
let page = (params['page'] === undefined) ? 1 : +params['page'];
let size = (params['size'] === undefined) ? 10 : +params['size'];
let size = (params['size'] === undefined) ? this.defaultSize : +params['size'];
this.keyword = (params['keyword'] ? params['keyword'] : "");
this.inputkeyword = this.keyword;
this.page = (page <= 0) ? 1 : page;
this.size = (size <= 0) ? 10 : size;
this.size = (size <= 0) ? this.defaultSize : size;
this.entityTypes = [];//(params['types']?params['types']:[]);
this.setTypes(params['types']); // check the appropriate checkboxes
// this.setTypes(params['types']); // check the appropriate checkboxes
this.setSortby(params['sort']);
this.getClaims();
this.subscriptions.push(this.searchTermStream
@ -138,11 +154,17 @@ export class DisplayClaimsComponent {
this.page = 1;
this.goTo();
}));
this.subscriptions.push(this.filterForm.get('entities').valueChanges.subscribe(value => {
this.goTo();
}));
this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
this.changekeyword();
}));
this.subscriptions.push(this.filterForm.get('sort').valueChanges.subscribe(value => {
console.log(value);
this.goTo();
}));
}));
}
ngOnDestroy() {
@ -167,12 +189,13 @@ export class DisplayClaimsComponent {
let types = '';
this.showErrorMessage = false;
this.showForbiddenMessage = false;
for (let type of this.entityTypes) {
types += (types.length > 0 ? '&' : '') + "types=" + type;
for (let type of this.entitiesCtrl.getRawValue()) {
types += (this.entitiesCtrl.getRawValue().length > 0 ? '&' : '') + "types=" + type.id;
}
console.log( this.fetchBy, this.fetchId)
this.pageLoading = true;
if (this.fetchBy == "Project") {
this.subscriptions.push(this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
this.subscriptions.push(this._claimService.getClaimsByProject(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
data => {
this.manageAPIData(data);
this.pageLoading = false;
@ -182,7 +205,7 @@ export class DisplayClaimsComponent {
}
));
} else if (this.fetchBy == "User") {
this.subscriptions.push(this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
this.subscriptions.push(this._claimService.getClaimsByUser(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
data => {
this.manageAPIData(data);
this.pageLoading = false;
@ -193,7 +216,7 @@ export class DisplayClaimsComponent {
}
));
} else if (this.fetchBy == "Result") {
this.subscriptions.push(this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
this.subscriptions.push(this._claimService.getClaimsByResult(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
data => {
this.manageAPIData(data);
this.pageLoading = false;
@ -204,7 +227,7 @@ export class DisplayClaimsComponent {
}
));
} else if (this.fetchBy == "Context") {
this.subscriptions.push(this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
this.subscriptions.push(this._claimService.getClaimsBycontext(this.size, this.page, this.fetchId, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
data => {
this.manageAPIData(data);
this.pageLoading = false;
@ -215,7 +238,7 @@ export class DisplayClaimsComponent {
}
));
} else {
this.subscriptions.push(this._claimService.getClaims(this.size, this.page, this.keyword, this.sortby, this.descending, types, this.properties.claimsAPIURL).subscribe(
this.subscriptions.push(this._claimService.getClaims(this.size, this.page, this.keyword, this.filterForm.get("sort").value.sort, this.filterForm.get("sort").value.descending, types, this.properties.claimsAPIURL).subscribe(
data => {
this.manageAPIData(data);
this.pageLoading = false;
@ -230,21 +253,6 @@ export class DisplayClaimsComponent {
}
manageAPIData(data) {
// let d = new Date();
// let dateTomillis = d.getTime();
// let millis24h: number = 24 * 3600000;
// if(this.showLatestClaims && this.recentClaims.length == 0){
// this.recentClaims = [];
// for(var i=0;i<data.data.length;i++){
// var claimDate = new Date(data.data[i].date);
// var claimDateToMillis = claimDate.getTime()
// // console.log("Claim Date is:"+claimDateToMillis + " "+(dateTomillis - claimDateToMillis));
// if((dateTomillis - claimDateToMillis)<millis24h){
// // console.log("Claim in:"+ " "+(dateTomillis - claimDateToMillis)+" < " +(millis24h));
// this.recentClaims.push(data.data[i]);
// }
// }
// }
this.claims = data.data;
this.resultsNum = data.total;
@ -277,59 +285,26 @@ export class DisplayClaimsComponent {
}
// private static handleError(message: string, error) {
// console.error("Dispaly Claims (component): " + message, error);
// }
goTo(page: number = 1) {
this.page = page;
this.location.go(location.pathname, this.getParametersString());
this.getClaims();
}
/*
getParameters() {
var params = {}
if (this.myClaims) {
params = {
page: this.page,
size: this.size,
types: this.entityTypes,
keyword: this.keyword,
sort: this.getSortby()
};
} else {
params = {
page: this.page,
size: this.size,
types: this.entityTypes,
fetchBy: this.fetchBy,
fetchId: this.fetchId,
keyword: this.keyword,
sort: this.getSortby()
};
}
return params;
}*/
getParametersString() {
let params = '';
params += (this.page == 1 ? "" : (params.length > 0 ? '&' : '') + "page=" + this.page);
params += (this.size == 10 ? "" : (params.length > 0 ? '&' : '') + "size=" + this.size);
// params+=(this.validEntityTypes==''?"":(params.length>0?'&':'')+"types="+this.validEntityTypes);
let types = "";
for (let type of this.entityTypes) {
types += (types.length > 0 ? ',' : '') + type;
for (let type of this.entitiesCtrl.getRawValue()) {
types += (this.entitiesCtrl.getRawValue().length > 0 ? ',' : '') + type.id;
}
params += (types.length > 0) ? (params.length > 0 ? '&' : '') + "types=" + types : "";
params += (this.entitiesCtrl.getRawValue().length > 0) ? (params.length > 0 ? '&' : '') + "types=" + types : "";
if (this.isAdmin) {
params += (this.fetchBy == 'All' ? "" : (params.length > 0 ? '&' : '') + "fetchBy=" + this.fetchBy);
params += (this.fetchId == '' ? "" : (params.length > 0 ? '&' : '') + "fetchId=" + this.fetchId);
}
params += (this.getSortby() == 'datedesc' ? "" : (params.length > 0 ? '&' : '') + "sort=" + this.getSortby());
params += (this.filterForm.get("sort").value.sort == 'date' && this.filterForm.get("sort").value.descending ? "" : (params.length > 0 ? '&' : '') + "sort=" +this.filterForm.get("sort").value.sort + "-" + this.filterForm.get("sort").value.descending);
params += (this.keyword == '' ? "" : (params.length > 0 ? '&' : '') + "keyword=" + this.keyword);
if (this.communityId != null) {
params += "&communityId=" + this.communityId;
@ -337,130 +312,26 @@ export class DisplayClaimsComponent {
return params;
}
changeSize() {
this.goTo();
}
changeOrderby(sortby: string) {
if (sortby == this.sortby) {
this.descending = !this.descending;
} else {
this.sortby = sortby;
this.descending = false;
}
this.goTo();
}
setSortby(sortby: string) {
if (!sortby || sortby == "datedesc") {
this.descending = true;
this.sortby = "date";
} else if (sortby == "dateasc") {
this.descending = false;
this.sortby = "date";
} else if (sortby == "userasc") {
this.descending = false;
this.sortby = "user";
} else if (sortby == "userdesc") {
this.descending = true;
this.sortby = "user";
}
if (sortby == "sourceasc") {
this.descending = false;
this.sortby = "source";
} else if (sortby == "sourcedesc") {
this.descending = true;
this.sortby = "source";
} else if (sortby == "targetasc") {
this.descending = false;
this.sortby = "target";
} else if (sortby == "targetdesc") {
this.descending = true;
this.sortby = "target";
}
let sort = "date";
let desc = "desc";
if(sortby && sortby.split("-").length == 2){
sort = sortby.split("-")[0];
desc = sortby.split("-")[1];
}
getSortby(): string {
if (this.descending) {
return this.sortby + "desc";
} else {
return this.sortby + "asc";
}
}
changeType() {
this.entityTypes = [];
if (this.publicationCB) {
this.entityTypes.push('publication');
}
if (this.datasetCB) {
this.entityTypes.push('dataset');
}
if (this.softwareCB) {
this.entityTypes.push('software');
}
if (this.otherCB) {
this.entityTypes.push('other');
}
if (this.projectCB) {
this.entityTypes.push('project');
}
if (this.contextCB) {
this.entityTypes.push('context');
}
this.goTo();
}
setTypes(types: string) {
if (!types) {
return;
}
if (types.length > 0) {
this.entityTypes = [];
if (types.indexOf("publication") != -1) {
this.publicationCB = true;
this.entityTypes.push("publication");
}
if (types.indexOf("dataset") != -1) {
this.datasetCB = true;
this.entityTypes.push("dataset");
}
if (types.indexOf("software") != -1) {
this.softwareCB = true;
this.entityTypes.push("software");
}
if (types.indexOf("other") != -1) {
this.otherCB = true;
this.entityTypes.push("other");
}
if (types.indexOf("project") != -1) {
this.projectCB = true;
this.entityTypes.push("project");
}
if (types.indexOf("context") != -1) {
this.contextCB = true;
this.entityTypes.push("context");
}
}
if (this.publicationCB && this.datasetCB && this.softwareCB && this.otherCB && this.contextCB && this.projectCB) {
this.entityTypes = [];
}
let option = this.sortOptions.find( option => option.value.sort == sort && ((option.value.descending && desc=="desc") || (!option.value.descending && desc=="asc")));
this.filterForm.get("sort").setValue(option?option.value:this.sortOptions[0].value);
}
changekeyword() {
if (this.inputkeyword.length >= 3 || this.inputkeyword.length == 0) {
this.searchTermStream.next(this.inputkeyword);
if (this.filterForm.get("keyword").value.length >= 3 || this.filterForm.get("keyword").value.length == 0) {
this.searchTermStream.next(this.filterForm.get("keyword").value);
}
}
select(item: any, event) {
this.deleteMessage = "";
let value = event.currentTarget.checked;
if (value) {
this.selected.push(item);
@ -484,10 +355,8 @@ export class DisplayClaimsComponent {
let claim = this.claims[_i];
this.selected.push(claim);
}
this.deleteMessage = "";
} else {
this.selected = [];
this.deleteMessage = "";
}
}
@ -522,7 +391,6 @@ export class DisplayClaimsComponent {
}
delete() {
this.deleteMessage = "";
this.loading.open();
this.claimsDeleted = 0;
let ids = [];
@ -570,11 +438,20 @@ export class DisplayClaimsComponent {
this.resultsNum = this.resultsNum - res.deletedIds.length;
this.loading.close();
if (res.deletedIds.length > 0) {
this.deleteMessage = this.deleteMessage + '<div class = "uk-alert uk-alert-primary " >' + res.deletedIds.length + ' link(s) successfully deleted.</div>';
UIkit.notification('<div class = " " >' + res.deletedIds.length + ' link(s) successfully deleted.</div>', {
status: 'success',
timeout: 6000,
pos: 'bottom-right'
});
}
if (res.notFoundIds.length > 0) {
this.deleteMessage = this.deleteMessage + '<div class = "uk-alert uk-alert-warning " >' + res.notFoundIds.length + ' link(s) couldn\'t be deleted.</div>';
UIkit.notification('<div class = " " >' + res.notFoundIds.length + ' link(s) couldn\'t be deleted.</div>', {
status: 'danger',
timeout: 6000,
pos: 'bottom-right'
});
}
let goToPage = this.page;
if (this.totalPages(this.resultsNum) < this.page && this.page > 0) {
goToPage = this.page - 1;

View File

@ -2,7 +2,7 @@ import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MatSelectModule } from "@angular/material";
import {MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule} from '@angular/material';
import {ClaimServiceModule} from '../service/claimsService.module';
import {DisplayClaimsComponent} from './displayClaims.component';
import {LoadingModalModule} from '../../../utils/modal/loadingModal.module';
@ -14,12 +14,15 @@ import {Schema2jsonldModule} from '../../../sharedComponents/schema2jsonld/schem
import { SEOServiceModule } from '../../../sharedComponents/SEO/SEOService.module';
import {IndexInfoServiceModule} from "../../../utils/indexInfoService.module";
import {PiwikServiceModule} from "../../../utils/piwik/piwikService.module";
import {SearchInputModule} from '../../../sharedComponents/search-input/search-input.module';
import {InputModule} from '../../../sharedComponents/input/input.module';
import {LoadingModule} from '../../../utils/loading/loading.module';
@NgModule({
imports: [
CommonModule, FormsModule, RouterModule, ClaimServiceModule, LoadingModalModule, AlertModalModule,
ClaimEntityFormatterModule, PagingModule, HelperModule, Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
IndexInfoServiceModule, MatSelectModule
IndexInfoServiceModule, MatSelectModule, SearchInputModule, MatAutocompleteModule, MatChipsModule, MatFormFieldModule, MatSlideToggleModule, InputModule, LoadingModule
],
declarations: [

View File

@ -8,82 +8,23 @@ import {ClaimDBContext, ClaimDBProject, ClaimDBResult} from "../claimHelper.clas
@Component({
selector: 'claim-entity',
template: `
<div *ngIf="type == 'publication'" title="Publication">
<div class="uk-text-muted">publication</div>
<!-- <span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" ratio="1"><rect fill="none"
stroke="#000"
x="3.5"
y="2.5"
width="12"
height="16"></rect><polyline
fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>-->
<publication-title [entity]="entity" param="id"
path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
</div>
<div *ngIf="type == 'dataset'" title="Dataset">
<div class="uk-text-muted">research data</div>
<!--<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" ratio="1"><ellipse fill="none"
stroke="#000"
cx="10"
cy="4.64"
rx="7.5"
ry="3.14"></ellipse><path
fill="none" stroke="#000" d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path><path
fill="none" stroke="#000"
d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path><path fill="none"
stroke="#000"
d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path></svg></span>-->
<publication-title [entity]="entity" param="id"
path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
</div>
<div *ngIf="type == 'software'" title="Software">
<div class="uk-text-muted">software</div>
<!-- <span class="uk-margin-small-right uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"> <circle
fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle> <path fill="none" stroke="#000"
d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
</span>-->
<publication-title [entity]="entity" param="id"
path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
</div>
<div *ngIf="type == 'other'" title="Other reserch product">
<div class="uk-text-muted">other</div>
<!--<span class="uk-margin-small-right uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polygon fill="none"
stroke="#000"
points="2.5,5.7 10,1.3 17.5,5.7 17.5,14.3 10,18.7 2.5,14.3"></polygon> <circle
fill="none" stroke="#000" cx="10" cy="10" r="3.5"></circle></svg>
</span>-->
<div *ngIf="type == 'publication' || type == 'dataset' || type == 'software' || type == 'other'"
[title]="(type == 'publication'?'Publication':(type == 'dataset'?'research data':(type == 'other'?'other research product':'software')))">
<div *ngIf="source" class="uk-text-muted title">{{type == 'publication'?'publication':(type == 'dataset'?'research data':(type == 'other'?'other':'software'))}}</div>
<span *ngIf="!source" class="title">Link to {{type == 'publication'?'publication':(type == 'dataset'?'research data':(type == 'other'?'other':'software'))}}: </span>
<publication-title [entity]="entity" param="id"
path="/search/result" [externalPortalUrl]=externalPortalUrl></publication-title>
</div>
<div *ngIf="type == 'project' " title="Project">
<div class="uk-text-muted">project</div>
<!--<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" ratio="1"><rect x="5" y="2"
width="10"
height="1"></rect><rect
x="3" y="4" width="14" height="1"></rect><rect fill="none" stroke="#000" x="1.5" y="6.5" width="17"
height="11"></rect></svg></span>-->
<span class="uk-text-muted title">Link to project: </span>
<project-title [project]="entity" [searchLink]=properties.searchLinkToProject
[externalPortalUrl]=externalPortalUrl></project-title>
</div>
<div *ngIf="type == 'context' " title="Concept">
<div class="uk-text-muted">community</div>
<!--<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none"
stroke="#000"
stroke-width="1.1"
cx="7.7"
cy="8.6"
r="3.5"></circle><path
fill="none" stroke="#000" stroke-width="1.1"
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path><path fill="none" stroke="#000"
stroke-width="1.1"
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg></span>-->
<span>{{entity.title}}</span>
<span class="uk-text-muted title">Link to community: </span> <span class="uk-text-large">{{entity.title}}</span>
</div>
`
})
@ -93,6 +34,7 @@ export class ClaimEntityFormatter {
@Input() type: string;
@Input() properties: EnvProperties;
@Input() externalPortalUrl: string = null;
@Input() source: boolean = true;
constructor() {
}

View File

@ -7,19 +7,19 @@ import {properties} from "../../../../../environments/environment";
@Component({
selector: 'project-title',
template: `
<span *ngIf="externalPortalUrl" class="project-title">
<span *ngIf="externalPortalUrl" class="project-title uk-text-large">
<span><a
[href]="externalPortalUrl + projectUrl + '?projectId='+project['openaireId']">{{(project['acronym'] ? ('[' + project['acronym'] + '] ') : '')}}{{project['name']}}</a></span>
</span>
<span *ngIf="!externalPortalUrl" class="project-title">
<span *ngIf="!externalPortalUrl" class="project-title uk-text-large">
<span><a [queryParams]="routerHelper.createQueryParam('projectId',project['openaireId'])"
routerLinkActive="router-link-active"
[routerLink]="projectUrl">{{(project['acronym'] ? ('[' + project['acronym'] + '] ') : '')}}{{project['name']}} </a></span>
</span>
<div *ngIf="project['funderName']">
<span class="uk-text-muted">Funder </span>{{project['funderName']}}
</div>
<span *ngIf="project['funderName']">
<span class="uk-text-muted title"> Funder: </span>{{project['funderName']}}
</span>
`
})

View File

@ -6,14 +6,14 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
@Component({
selector: 'publication-title',
template: `
<span *ngIf="!externalPortalUrl" class="publication-title">
<span *ngIf="!externalPortalUrl" class="publication-title uk-text-large">
<span *ngIf="entity.openaireId"><a [queryParams]="routerHelper.createQueryParam(param,entity.openaireId)" routerLinkActive="router-link-active"
[routerLink]="path"> {{entity.title?entity.title:"[No title available]"}}</a></span>
<!--span *ngIf="url" class="uk-margin-small-left" ><a target="_blank" href="{{url}}" >
(<span class="custom-external custom-icon" ></span>link)</a></span-->
</span>
<span *ngIf="externalPortalUrl" class="publication-title">
<span *ngIf="externalPortalUrl" class="publication-title uk-text-large">
<span *ngIf="entity.openaireId"><a [href]="externalPortalUrl + path+'?'+param+'='+entity.openaireId"> {{entity.title}}</a></span>
</span>

View File

@ -12,17 +12,13 @@ import {Subscriber} from "rxjs";
template: `
<div id="tm-main" [class]="((isConnect)?'':'uk-section') +' uk-padding-remove-top tm-middle'">
<div uk-grid uk-grid>
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container">
<div class="uk-article-title custom-article-title">
<div [class.uk-container]="!isConnect">
<div *ngIf="!isConnect" class="uk-article-title custom-article-title">
Manage links
</div>
<div>
<!--div class="uk-text-right">
<a *ngIf="!fetchBy || fetchBy != 'Context'" routerLink="/participate/claim">Claim more links?</a>
<a *ngIf="isConnect && fetchBy && fetchBy == 'Context' && externalPortalUrl" [href]="externalPortalUrl+'/participate/claim'" target="_blank">Claim more links?</a>
</div-->
<displayClaims *ngIf="user" [user]="user" [enableDelete]=true [myClaims]=false
[isAdmin]=true [fetchBy]="(fetchId=='openaire')?null:fetchBy"
[fetchId]="(fetchId=='openaire')?null:fetchId"
@ -49,16 +45,7 @@ export class ClaimsAdminComponent {
sub;
constructor(private _meta: Meta, private _title: Title,
private userManagementService: UserManagementService, private _router: Router) {
var titleConnect = "OpenAIRE Connect | Manage links ";
var title = "OpenAIRE | Manage links ";
if (this.isConnect) {
this._title.setTitle(titleConnect);
} else {
this._title.setTitle(title);
}
this._title.setTitle(this.isConnect?"OpenAIRE Connect | Manage links ":"OpenAIRE | Manage links ");
}
ngOnDestroy() {
if (this.sub instanceof Subscriber) {

View File

@ -1,6 +1,35 @@
export class CustomizationOptions {
mainColor: string;
secondaryColor: string;
backgrounds:{
panels: {
onDarkBackground: boolean,
background: {
color: string; //background
borderStyle: string;
borderColor: string;
borderWidth: number;
}
}
homeBanner:{
onDarkBackground: boolean,
background: {
color: string; //background
borderStyle: string;
borderColor: string;
borderWidth: number;
}
}
lightPageBackground:{
background: {
color: string; //background
borderStyle: string;
borderColor: string;
borderWidth: number;
}
}
};
panel: {
onDarkBackground: boolean,
background: {
@ -8,7 +37,8 @@ export class CustomizationOptions {
borderStyle: string;
borderColor: string;
borderWidth: number;
}, fonts: {
}
, fonts: {
color: string;
family: string;
size: number;
@ -20,20 +50,20 @@ export class CustomizationOptions {
size: number;
weight: number;
},
panelElements: {
/* panelElements: {
backgroundColor: string;
borderColor: string;
color: string;
}
}*/
};
box: {
/* box: {
borderColor: string;
borderStyle: string;
borderWidth: number;
borderRadius: number;
}
;
;*/
links: {
darkBackground: {
family: string;
@ -106,19 +136,19 @@ export class CustomizationOptions {
weight: 700
},
panelElements: {
/* panelElements: {
backgroundColor: 'rgba(255, 255, 255, 0.5)',
borderColor: 'rgba(255, 255, 255, 0.5)',
color: '#ffffff'
}
}*/
};
this.box = {
/* this.box = {
borderColor: '#4C9CD5',
borderStyle: 'solid',
borderWidth: 2,
borderRadius: 6,
};
};*/
this.links = {
darkBackground: {
family: 'Open Sans',

View File

@ -1,8 +1,6 @@
<!-- <div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first"> -->
<div *ngIf="!hidden" class="uk-container uk-margin-top">
<div class="uk-article-title custom-article-title">
<div *ngIf="!hidden" class="">
<div *ngIf="showSaveResetButtons" class="uk-article-title custom-article-title">
User Email Preferences for Claims Notifications
</div>
@ -14,34 +12,23 @@
</div>
<errorMessages [status]="[status]" [type]="'notification preferences'"></errorMessages>
<ul class="custom-accordion" uk-accordion>
<!-- class="uk-open" -->
<!-- uk-card uk-card-default uk-card-body -->
<li *ngFor="let notification of notifications; let i=index" [class]="i==0 ? 'uk-open' : ''">
<div class="uk-accordion-title">Email preferences for {{preferencesFor}}: <strong>{{notification.openaireName}}</strong></div>
<div class="uk-accordion-content">
<div *ngFor="let notification of notifications; let i=index" >
<!-- <div class="uk-accordion-title">Email preferences for {{preferencesFor}}: <strong>{{notification.openaireName}}</strong></div>-->
<!-- <div class="uk-accordion-content">-->
<form class="uk-form-horizontal"><!-- [formGroup]="myForm"-->
<!--[ngClass]="{'has-error':!myForm.controls.notify.valid && myForm.controls.notify.dirty}"-->
<div class="uk-margin">
<div class="uk-form-label inherit-color">Notify for claims:</div>
<!-- <div class="uk-form-controls uk-form-controls-text">
<label>Yes <input class="uk-radio" type="radio" name="radio2" [checked]="notification.notify" (click)="changeNotify(notification, true)"></label>
<label>No <input class="uk-radio" type="radio" name="radio2" [checked]="!notification.notify" (click)="changeNotify(notification, false)"></label>
</div> -->
<div class="uk-form-controls uk-form-controls-text" data-uk-button-group>
<button *ngIf="notification.notify" class="uk-button uk-button-primary uk-button-small"
data-uk-button>ON</button>
<button *ngIf="!notification.notify" class="uk-button uk-button-default uk-button-small"
(click)="changeNotify(notification, true, i)" data-uk-button>ON</button>
<button *ngIf="!notification.notify" class="uk-button uk-button-danger uk-button-small"
data-uk-button>OFF</button>
<button *ngIf="notification.notify" class="uk-button uk-button-default uk-button-small"
(click)="changeNotify(notification, false, i)" data-uk-button>OFF</button>
</div>
<div class="uk-margin uk-grid">
<div class=" inherit-color uk-width-medium"
title="Get e-mail notification when there are new user links related your community">Notify
for new user links:</div>
<mat-slide-toggle [checked]="notification.notify"
(change)="($event.source.checked = notification.notify);changeNotify(notification, !notification.notify, i)"></mat-slide-toggle>
</div>
<!-- [ngClass]="{'has-error':!myForm.controls.frequency.valid && myForm.controls.frequency.dirty}" -->
<div [class]="notification.notify ? 'uk-margin' : 'uk-margin cursor-not-allowed'">
<div *ngIf="notification.notify" [class]="notification.notify ? 'uk-margin' :
'uk-margin cursor-not-allowed'">
<div class="uk-form-label inherit-color">Frequency:</div>
<div class="uk-form-controls">
<select [class]="notification.notify ? 'uk-select' : 'uk-select uk-disabled'" id="form-horizontal-select"
@ -57,20 +44,12 @@
<button type="submit" class="uk-button uk-button-primary" (click)="saveNotification(i)">Save Changes</button>
<button type="submit" class="uk-button" (click)="restoreNotification(i)">Reset</button>
</div>
<!-- <span class="uk-margin">
<button class="uk-width-1-1 uk-button uk-button-primary uk-button-small" type="submit" (click)="saveNotification(notifications, i)">Save</button>
<button class="uk-width-1-1 uk-button uk-button-small" (click)="restoreNotification(notifications, i)">Restore</button>
</span> -->
<!-- {{notification.notify}} -- {{notification.frequency}} -->
</form>
</div>
</li>
</ul>
<!-- </div>-->
<!-- </ul>-->
<!-- {{notifications | json}} -->
</div>
<!-- </div>
</div>
</div> -->

View File

@ -22,7 +22,7 @@ declare var UIkit: any;
export class MailPrefsComponent {
properties:EnvProperties;
subscriptions = [];
public communityId: string;
@Input() communityId: string;
public preferencesFor: string = "community";
public status: number;
@ -48,13 +48,16 @@ export class MailPrefsComponent {
ngOnInit() {
this.properties = properties;
this.subscriptions.push(this.route.queryParams.subscribe(params => {
this.subscriptions.push(this.route.params.subscribe(params => {
this.hidden = true;
console.debug(this.communityId);
if(!this.communityId){
this.communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
if(!this.communityId) {
this.communityId = params['communityId'];
}
if(!this.communityId) {
this.communityId = params['community'];
}
console.debug(this.communityId, params)
this.getEmailPreferences();
}));
@ -77,13 +80,15 @@ export class MailPrefsComponent {
data => {
if(data.code == "204") {
this.status = this.errorCodes.NONE;
this.initialNotifications = [{notify: true, frequency:24, openaireId: this.communityId}];
} else {
this.initialNotifications = data.data;
}
this.notifications = JSON.parse(JSON.stringify( this.initialNotifications ));
this.status = this.errorCodes.DONE;
this.hidden = false;
}
},
err => {
this.hidden = false;

View File

@ -6,10 +6,11 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MailPrefsComponent } from './mailPrefs.component';
import { MailPrefsService } from './mailPrefs.service';
import {ErrorMessagesModule} from '../../utils/errorMessages.module';
import {MatSlideToggleModule} from '@angular/material';
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, ReactiveFormsModule, ErrorMessagesModule
CommonModule, RouterModule, FormsModule, ReactiveFormsModule, ErrorMessagesModule, MatSlideToggleModule
],
declarations: [
MailPrefsComponent