MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Add filters on the side on dmp listing

This commit is contained in:
apapachristou 2020-07-07 13:12:57 +03:00
parent a8528ee5b1
commit 2ab58f2926
10 changed files with 98 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/app.component.html
View File

@ -5,7 +5,7 @@
<app-sidebar></app-sidebar>
</mat-sidenav>
<mat-sidenav-content class="sidenav-content">
<div>
<div id="main-page">
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div>
</mat-sidenav-content>

2
dmp-frontend/src/app/ui/dataset/dataset-wizard/external-references/dataset-external-references-editor.component.ts
View File

@ -247,12 +247,10 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
}
removeTag(tag: any) {
console.log((<FormArray>this.formGroup.get('tags')).value);
(<FormArray>this.formGroup.get('tags')).removeAt(((<FormArray>this.formGroup.get('tags')).value as any[]).indexOf(tag));
}
addTag(ev: MatChipInputEvent) {
console.log((<FormArray>this.formGroup.get('tags')).value);
if (ev.value !== '' && isNullOrUndefined(((<FormArray>this.formGroup.get('tags')).value as ExternalTagEditorModel[]).find(tag => tag.name === ev.value))) {
(<FormArray>this.formGroup.get('tags')).push(new ExternalTagEditorModel('', ev.value).buildForm());
}

2
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.html
View File

@ -1,2 +1,2 @@
<a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" class="col-auto"></app-dmp-criteria-component>
<app-dmp-criteria-component [showGrant]="data.showGrant" [isPublic]="data.isPublic" (filtersChanged)="onFiltersChanged($event)" class="col-auto"></app-dmp-criteria-component>

22
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria-dialog.component.ts
View File

@ -1,17 +1,27 @@
import { Inject, Component } from '@angular/core';
import { Inject, Component, ViewChild, OnInit, Output, EventEmitter } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { DmpCriteriaComponent } from './dmp-criteria.component';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
@Component({
selector: 'dmp-criteria-dialog-component',
templateUrl: './dmp-criteria-dialog.component.html',
})
export class DmpCriteriaDialogComponent {
export class DmpCriteriaDialogComponent implements OnInit {
@ViewChild(DmpCriteriaComponent, { static: true }) criteria: DmpCriteriaComponent;
constructor(
public dialogRef: MatDialogRef<DmpCriteriaDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: { showGrant: boolean, isPublic: boolean }
) { }
@Inject(MAT_DIALOG_DATA) public data: { showGrant: boolean, isPublic: boolean, criteria: DmpCriteria, updateDataFn: Function }
) {
}
ngOnInit() {
this.criteria.setCriteria(this.data.criteria);
// this.data.updateDataFn(this.criteria);
}
onNoClick(): void {
this.dialogRef.close();
@ -21,4 +31,8 @@ export class DmpCriteriaDialogComponent {
this.dialogRef.close();
}
onFiltersChanged(event) {
this.data.updateDataFn(this.criteria);
}
}

4
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
View File

@ -16,7 +16,7 @@
<div *ngIf="!isPublic" class="col-10 gray-container">
<h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
<mat-list-item><mat-radio-button value="null" checked>{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('status').value">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="2">{{ 'TYPES.DMP-VISIBILITY.PUBLIC' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DMP-VISIBILITY.FINALIZED' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DMP-VISIBILITY.DRAFT' | translate }}</mat-radio-button></mat-list-item>
@ -81,7 +81,7 @@
<div *ngIf="isAuthenticated()" class="col-10 gray-container">
<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('role')">
<mat-list-item><mat-radio-button value="null" checked>{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="null" [checked]="!formGroup.get('role').value">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
</mat-radio-group>

10
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -8,18 +8,18 @@
<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <u>{{'DMP-LISTING.LINK-ZENODO' | translate}}</u> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
</div>
</div>
<div class="filter-btn"><button mat-raised-button><mat-icon class="mr-2" (click)="openFiltersDialog()">filter_alt</mat-icon></button></div>
<div class="filter-btn" [style.right]="dialog.openDialogs.length > 0 ? '456px' : '0px'" [style.width]="hasScrollbar() ? '52px' : '37px'" (click)="openFiltersDialog()"><button mat-raised-button class="p-0"><mat-icon class="mr-4">filter_alt</mat-icon></button></div>
</div>
<div>
<div class="listing row pb-2">
<div class="col-12 col-sm-12 col-md-3">
<!-- <div class="col-12 col-sm-12 col-md-3">
<app-dmp-criteria-component [showGrant]="showGrant" [isPublic]="isPublic" class="col-auto"></app-dmp-criteria-component>
</div>
<div class="col-12 col-sm-12 col-md-9 pt-4">
</div> -->
<div class="col-md-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>
</div>
<div *ngIf="listingItems && listingItems.length > 0" class="d-flex justify-content-center">
<div *ngIf="listingItems && listingItems.length > 0 && this.startIndex < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</div>

3
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
View File

@ -189,12 +189,13 @@
position: fixed;
right: 0px;
z-index: 100;
width: 37px;
}
.filter-btn button {
color: white;
background-color: #23BCBA;
width: 52px;
width: 37px;
height: 45px;
}

138
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -35,7 +35,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(DmpCriteriaComponent, { static: true }) criteria: DmpCriteriaComponent;
// @ViewChild(DmpCriteriaComponent, { static: true }) criteria: DmpCriteriaComponent;
breadCrumbs: Observable<BreadcrumbItem[]> = observableOf([{ parentComponentName: null, label: 'DMPs', url: "/plans" }]);
itemId: string;
@ -52,11 +52,13 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
startIndex: number = 0;
pageSize: number = 5;
criteria: DmpCriteria;
constructor(
private dmpService: DmpService,
private router: Router,
private route: ActivatedRoute,
private dialog: MatDialog,
public dialog: MatDialog,
public enumUtils: EnumUtils,
private language: TranslateService,
private grantService: GrantService,
@ -83,12 +85,14 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
// const grant: GrantListingModel = {
// id: this.grantId
// }
this.criteria.setCriteria({ like: null, grants: [grant], groupIds: null, allVersions: false });
// this.breadCrumbs = Observable.of([{ parentComponentName: 'GrantEditorComponent', label: grantLabel, url: '/grants/edit/' + this.grantId }]);
grantLabel = this.route.snapshot.queryParams.grantLabel;
this.criteria = { like: null, grants: [grant], groupIds: null, allVersions: false }
// this.criteria.setCriteria({ like: null, grants: [grant], groupIds: null, allVersions: false });
this.refresh();
grantLabel = this.route.snapshot.queryParams.grantLabel;
// this.breadCrumbs = Observable.of([{ parentComponentName: 'GrantEditorComponent', label: grantLabel, url: '/grants/edit/' + this.grantId }]);
this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
// this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
})
} else if (params['groupId']) {
@ -106,10 +110,12 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
}]
);
})
this.criteria.setCriteria(this.getDefaultCriteria());
this.groupLabel = this.route.snapshot.queryParams.groupLabel;
// this.criteria.setCriteria(this.getDefaultCriteria());
this.criteria = this.getDefaultCriteria();
this.refresh();
this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
// this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
} else {
this.itemId = params['groupId'];
this.showGrant = true;
@ -134,9 +140,10 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
}]
);
})
this.criteria.setCriteria(this.getDefaultCriteria());
// this.criteria.setCriteria(this.getDefaultCriteria());
this.criteria = this.getDefaultCriteria();
this.refresh();
this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
// this.criteria.setRefreshCallback((resetPages) => this.refresh(resetPages));
}
if (this.grantId != null) {
@ -148,7 +155,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
});
}
refresh(resetPages = false) {
public refresh(resetPages = false) {
// if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
// if (resetPages) this._paginator.pageIndex = 0;
// const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
@ -158,36 +165,10 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
fields.push('-modified');
const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
let value = this.criteria.formGroup.value;
request.criteria = {
like: value.like,
grants: value.grants,
role: value.role
}
if (value.status == 2) {
request.criteria.isPublic = true;
} else {
request.criteria.status = value.status;
request.criteria.isPublic = false;
}
request.criteria.onlyPublic = this.isPublic;
if (this.isPublic) {
request.criteria.isPublic = true;
}
if (value.datasetTemplates)
request.criteria.datasetTemplates = value.datasetTemplates.map(x => x.id);
if (value.collaborators)
request.criteria.collaborators = value.collaborators.map(x => x.id);
if (value.organisations)
request.criteria.organisations = value.organisations.map(x => x.id);
if (this.itemId) {
request.criteria.groupIds = [this.itemId];
request.criteria.allVersions = true;
}
request.criteria.grantStatus = value.grantStatus;
request.criteria = this.criteria;
this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; }
// if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
result.data.map(item => {
item['datasets'].map(dmp => {
dmp.url = 'datasets/edit/' + dmp.url;
@ -197,6 +178,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
return item;
});
this.listingItems = result.data;
this.totalCount = result.totalCount;
});
}
@ -204,37 +186,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
// request.criteria = new DmpCriteria();
// request.criteria.like = "";
let value = this.criteria.formGroup.value;
request.criteria = {
like: value.like,
grants: value.grants,
role: value.role
}
if (value.status == 2) {
request.criteria.isPublic = true;
} else {
request.criteria.status = value.status;
request.criteria.isPublic = false;
}
request.criteria.onlyPublic = this.isPublic;
if (this.isPublic) {
request.criteria.isPublic = true;
}
if (value.datasetTemplates)
request.criteria.datasetTemplates = value.datasetTemplates.map(x => x.id);
if (value.collaborators)
request.criteria.collaborators = value.collaborators.map(x => x.id);
if (value.organisations)
request.criteria.organisations = value.organisations.map(x => x.id);
if (this.itemId) {
request.criteria.groupIds = [this.itemId];
request.criteria.allVersions = true;
}
request.criteria.grantStatus = value.grantStatus;
request.criteria = this.criteria;
this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; }
@ -281,8 +233,6 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
openShareDialog(rowId: any, rowName: any) {
const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {
// height: '250px',
// width: '700px',
data: {
dmpId: rowId,
dmpName: rowName
@ -324,7 +274,10 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
restoreFocus: false,
data: {
showGrant: this.showGrant,
isPublic: this.isPublic
isPublic: this.isPublic,
criteria: this.criteria,
// criteria: this.grantId ? this.criteria : this.getDefaultCriteria(),
updateDataFn: this.updateDataFn.bind(this)
},
position: { right: '0px;' }
});
@ -332,6 +285,45 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
dialogRef.afterClosed().subscribe(result => {
});
}
updateDataFn(criteria: DmpCriteriaComponent): void {
this.toDmpCriteria(criteria);
this.refresh();
}
toDmpCriteria(criteria: DmpCriteriaComponent): void {
let formGroup = criteria.formGroup;
this.criteria = {
like: formGroup.get('like').value,
grants: formGroup.get('grants').value,
role: formGroup.get('role').value
}
this.criteria.status = formGroup.get('status').value;
if (formGroup.get('status').value == 2) {
this.criteria.isPublic = true;
} else {
this.criteria.isPublic = false;
}
this.criteria.onlyPublic = this.isPublic;
if (this.isPublic) {
this.criteria.isPublic = true;
}
if (formGroup.get('datasetTemplates').value)
this.criteria.datasetTemplates = formGroup.get('datasetTemplates').value.map(x => x.id);
if (formGroup.get('collaborators').value)
this.criteria.collaborators = formGroup.get('collaborators').value.map(x => x.id);
if (formGroup.get('organisations').value)
this.criteria.organisations = formGroup.get('organisations').value.map(x => x.id);
if (this.itemId) {
this.criteria.groupIds = [this.itemId];
this.criteria.allVersions = true;
}
this.criteria.grantStatus = formGroup.get('grantStatus').value;
}
hasScrollbar(): boolean {
return document.getElementById("main-page").scrollHeight > document.documentElement.clientHeight;
}
}
// export class DmpDataSource extends DataSource<DmpListingModel> {

10
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -187,7 +187,6 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
this.router.navigate(['/datasets/publicEdit/' + datasetId]);
} else {
this.router.navigate(['/datasets/edit/' + datasetId]);
console.log('inhere')
}
}
@ -585,16 +584,15 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
}
});
}
copyDoi(doi) {
console.log(doi.nativeElement.innerHTML);
let domElement = doi.nativeElement as HTMLInputElement;
domElement.select();
document.execCommand('copy');
domElement.setSelectionRange(0, 0);
alert('Doi Copied to Clipboard');
}
public getOrcidPath(): string {
return this.configurationService.orcidPath;
}
@ -610,7 +608,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
return this.dmp.users.find(x => x.id === principal.id);
}
}
createOrUpdate(id: string): void {
if (!this.lockStatus) {
this.lock = new LockModel(id, this.getUserFromDMP());
@ -629,7 +627,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
// this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => this.lock.id = Guid.parse(result));
// }
// advancedClicked() {
// const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
// maxWidth: '500px',

1
dmp-frontend/src/app/ui/misc/oauth2-dialog/oauth2-dialog.component.ts
View File

@ -29,7 +29,6 @@ export class Oauth2DialogComponent extends BaseComponent implements OnInit{
}
private loadUrl(url: string ) {
console.log(url);
window.location.href = url;
}