-
-

{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}

- - - - - - - - - {{'DMP-LISTING.COLUMNS.NAME' | translate}} - - {{row.label}} - - - - - {{'DMP-LISTING.COLUMNS.PROJECT' | - translate}} - {{row.project}} - - - - - {{'DMP-LISTING.COLUMNS.STATUS' | translate}} - {{enumUtils.toDmpStatusString(row.status)}} - - - - - - {{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}} - {{row.creationTime | date:'shortDate'}} - - - - - {{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}} - {{row.organisations}} - - - - - - {{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}} - - - - {{row.version}} - - - - - - - - - {{'DMP-LISTING.COLUMNS.DATASETS' | translate}} - - - - - - - - {{'DMP-LISTING.COLUMNS.ACTIONS' | translate}} - - - - - - - - - - - - - - - - - - - - - +
+
+
+

{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}

+

{{'DMP-LISTING.SUBTITLE' | translate}}

+
+
+ +
+
+
+
+ +
+ +
+ +
+ + +
+
+
+ diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss index 50da3a2b9..ebbf4abba 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss @@ -3,26 +3,4 @@ .mat-card { margin: 1em 0; } - - .mat-row { - cursor: pointer; - } - - mat-row:hover { - background-color: lightgray; - } - - mat-row:nth-child(odd) { - background-color: #eef0fb; - } - - .mat-fab-bottom-right { - // top: auto !important; - // right: 20px !important; - // bottom: 10px !important; - // left: auto !important; - // position: fixed !important; - float: right; - z-index: 5; - } } diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts index 223b55850..ef974d60c 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts @@ -1,20 +1,19 @@ -import { DataSource } from '@angular/cdk/table'; import { Component, OnInit, ViewChild } from '@angular/core'; import { MatDialog, MatPaginator, MatSort } from '@angular/material'; import { ActivatedRoute, Router } from '@angular/router'; import { Observable } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { BaseComponent } from '../../../core/common/base/base.component'; +import { DataTableRequest } from '../../../core/model/data-table/data-table-request'; import { DmpListingModel } from '../../../core/model/dmp/dmp-listing'; +import { ProjectListingModel } from '../../../core/model/project/project-listing'; import { DmpCriteria } from '../../../core/query/dmp/dmp-criteria'; import { DmpService } from '../../../core/services/dmp/dmp.service'; import { EnumUtils } from '../../../core/services/utilities/enum-utils.service'; -import { DataTableRequest } from '../../../core/model/data-table/data-table-request'; import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item'; import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent'; import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation.component'; import { DmpCriteriaComponent } from './criteria/dmp-criteria.component'; -import { ProjectListingModel } from '../../../core/model/project/project-listing'; @Component({ selector: 'app-dmp-listing-component', @@ -28,12 +27,13 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread @ViewChild(DmpCriteriaComponent) criteria: DmpCriteriaComponent; breadCrumbs: Observable = Observable.of([]); - dataSource: DmpDataSource | null; - displayedColumns: String[] = ['name', 'project', 'status', 'creationTime', 'organisations', 'version', 'datasets', 'actions']; itemId: string; projectId: string; showProject: boolean; titlePrefix: string; + totalCount: number; + listingItems: DmpListingModel[] = []; + constructor( private dmpService: DmpService, private router: Router, @@ -89,11 +89,32 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread } refresh() { - this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.criteria, this.itemId); + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + let fields: Array = new Array(); + if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; } + const request = new DataTableRequest(startIndex, this._paginator.pageSize, { fields: fields }); + request.criteria = this.criteria.formGroup.value; + if (this.itemId) { + request.criteria.groupIds = [this.itemId]; + request.criteria.allVersions = true; + } + 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; + dmp.all = 'datasets/dmp/' + item.id; + return dmp; + }); + return item; + }); + this.listingItems = result.data; + }); } - rowClick(rowId: String) { - this.router.navigate(['/plans/edit/' + rowId]); + rowClicked(dmp: DmpListingModel) { + this.router.navigate(['/plans/edit/' + dmp.id]); } addDataset(rowId: String) { @@ -125,68 +146,68 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread } } -export class DmpDataSource extends DataSource { +// export class DmpDataSource extends DataSource { - totalCount = 0; +// totalCount = 0; - constructor( - private _service: DmpService, - private _paginator: MatPaginator, - private _sort: MatSort, - private _criteria: DmpCriteriaComponent, - private itemId - ) { - super(); - } +// constructor( +// private _service: DmpService, +// private _paginator: MatPaginator, +// private _sort: MatSort, +// private _criteria: DmpCriteriaComponent, +// private itemId +// ) { +// super(); +// } - connect(): Observable { - const displayDataChanges = [ - this._paginator.page - ]; +// connect(): Observable { +// const displayDataChanges = [ +// this._paginator.page +// ]; - return Observable.merge(...displayDataChanges) - .startWith(null) - .switchMap(() => { - const startIndex = this._paginator.pageIndex * this._paginator.pageSize; - let fields: Array = new Array(); - if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; } - const request = new DataTableRequest(startIndex, this._paginator.pageSize, { fields: fields }); - request.criteria = this._criteria.formGroup.value; - if (this.itemId) { - request.criteria.groupIds = [this.itemId]; - request.criteria.allVersions = true; - } - return this._service.getPaged(request, "listing"); - }) - /*.catch((error: any) => { - this._snackBar.openFromComponent(SnackBarNotificationComponent, { - data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService }, - duration: 3000, - extraClasses: ['snackbar-warning'] - }); - return Observable.of(null); - })*/ - .map(result => { - result.data = result.data; - return result; - }) - .map(result => { - return result; - }) - .map(result => { - if (!result) { return []; } - if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; } - return result.data.map(item => { - item['datasets'].map(dmp => { - dmp.url = 'datasets/edit/' + dmp.url; - dmp.all = 'datasets/dmp/' + item.id; - return dmp; - }); - return item; - }); - }); - } +// return Observable.merge(...displayDataChanges) +// .startWith(null) +// .switchMap(() => { +// const startIndex = this._paginator.pageIndex * this._paginator.pageSize; +// let fields: Array = new Array(); +// if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; } +// const request = new DataTableRequest(startIndex, this._paginator.pageSize, { fields: fields }); +// request.criteria = this._criteria.formGroup.value; +// if (this.itemId) { +// request.criteria.groupIds = [this.itemId]; +// request.criteria.allVersions = true; +// } +// return this._service.getPaged(request, "listing"); +// }) +// /*.catch((error: any) => { +// this._snackBar.openFromComponent(SnackBarNotificationComponent, { +// data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService }, +// duration: 3000, +// extraClasses: ['snackbar-warning'] +// }); +// return Observable.of(null); +// })*/ +// .map(result => { +// result.data = result.data; +// return result; +// }) +// .map(result => { +// return result; +// }) +// .map(result => { +// if (!result) { return []; } +// if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; } +// return result.data.map(item => { +// item['datasets'].map(dmp => { +// dmp.url = 'datasets/edit/' + dmp.url; +// dmp.all = 'datasets/dmp/' + item.id; +// return dmp; +// }); +// return item; +// }); +// }); +// } - disconnect() { - } -} +// disconnect() { +// } +// } diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html new file mode 100644 index 000000000..4bb2eafbc --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html @@ -0,0 +1,38 @@ +
+
+ lock +
+
+
+

{{dmp.label}}

+

{{dmp.project}}

+
+
+ storage +

4

+
TEMPLATE
+
TEMPLATE
+
TEMPLATE
+
TEMPLATE
+
TEMPLATE
+
TEMPLATE
+
+
+ settings +

OWNER

+
+
+ group +
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
JOHN DOE
+
+
+
+ more_horiz +
+
+ diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss new file mode 100644 index 000000000..524727a88 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss @@ -0,0 +1,38 @@ +.dmp-listing-item { + margin-top: 2em; + margin-bottom: 2em; + cursor: pointer; + + .title { + color: black; + } + + .project-title { + color: rgb(93, 125, 173); + } + + .type-icon { + color: rgb(191, 191, 191); + } + + .dmp-chip { + padding: 0.1em 1em; + border: 0.1em solid rgb(236, 241, 249); + border-radius: 10em; + background-color: rgb(236, 241, 249); + color: rgb(68, 114, 196); + } + + .dmp-squared-chip { + padding: 0.1em 1em; + border: 0.1em solid rgb(236, 241, 249); + border-radius: 0.5em; + background-color: rgb(246, 246, 246); + color: rgb(127, 127, 127); + } + + mat-icon { + width: auto; + height: auto; + } +} diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts new file mode 100644 index 000000000..47f112e41 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts @@ -0,0 +1,26 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { DmpListingModel } from '../../../../core/model/dmp/dmp-listing'; + +@Component({ + selector: 'app-dmp-listing-item-component', + templateUrl: './dmp-listing-item.component.html', + styleUrls: ['./dmp-listing-item.component.scss'], +}) +export class DmpListingItemComponent implements OnInit { + + @Input() dmp: DmpListingModel; + @Input() showDivider: boolean = true; + @Output() onClick: EventEmitter = new EventEmitter(); + + constructor( + + ) { + } + + ngOnInit() { + } + + itemClicked() { + this.onClick.emit(this.dmp); + } +} diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 2d70a52ff..1fb92c4aa 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -225,6 +225,7 @@ "STATUS": "Status" }, "ACTIONS": { + "NEW":"New Data Management Plan", "EDIT": "Edit", "INVITE": "Invite Contributors", "ADD-DATASET": "Add Dataset To DMP",