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

dataset pubic page redesign

This commit is contained in:
Diamantis Tziotzios 2019-05-08 13:52:14 +03:00
parent 2fba31012a
commit 0a26948273
13 changed files with 189 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.ts
View File

@ -47,7 +47,6 @@ export class DatasetCopyDialogueComponent {
}
else if (!this.data.datasetProfileExist) {
this.data.formControl.setErrors({'incorrect': true});
console.log(this.data.formControl.invalid);
}
});
}

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

@ -18,11 +18,10 @@
<app-dataset-criteria-component></app-dataset-criteria-component>
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let last = last">
<app-dataset-listing-item-component *ngIf="!last" class="col-12" [dataset]="item" (onClick)="rowClicked($event)"></app-dataset-listing-item-component>
<app-dataset-listing-item-component *ngIf="last" class="col-12" [dataset]="item" [showDivider]="false" (onClick)="rowClicked($event)"></app-dataset-listing-item-component>
<div class="row" *ngFor="let item of listingItems; let i = index">
<app-dataset-listing-item-component class="col-12" [dataset]="item" [showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-dataset-listing-item-component>
</div>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</div>
</div>
@ -30,101 +29,3 @@
</div>
</div>
</div>
<!-- <div class="main-content">
<div class="container-fluid">
<div>
<h3>{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
<app-dataset-criteria-component [dmpSearchEnabled]="dmpSearchEnabled"></app-dataset-criteria-component>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()"> -->
<!-- Column Definition: Name -->
<!-- <ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container> -->
<!-- Column Definition: Dmp -->
<!-- <ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Dmp -->
<!-- <ng-container cdkColumnDef="dmp">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|dmp:label">{{'DATASET-LISTING.COLUMNS.DMP' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dmp}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Profile -->
<!-- <ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{enumUtils.toDatasetStatusString(row.status)}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
</ng-container> -->
<!-- Column Definition: Description -->
<!-- <ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Created -->
<!-- <ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container> -->
<!-- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row> -->
<!-- (click)="rowClick(row.id)" -->
<!-- </mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card> -->
<!-- <button *ngIf="dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new/'+dmpId] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
<button *ngIf="!dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new'] ">
<mat-icon class="mat-24">add</mat-icon>
</button>
</div>
</div>
</div> -->

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

@ -1,8 +1,6 @@
import { DataSource } from '@angular/cdk/table';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
import { MatPaginator, MatSort, PageEvent } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../core/common/base/base.component';
@ -11,7 +9,6 @@ import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing
import { DatasetCriteria } from '../../../core/query/dataset/dataset-criteria';
import { DatasetService } from '../../../core/services/dataset/dataset.service';
import { DmpService } from '../../../core/services/dmp/dmp.service';
import { EnumUtils } from '../../../core/services/utilities/enum-utils.service';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { DatasetCriteriaComponent } from './criteria/dataset-criteria.component';
@ -29,12 +26,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
breadCrumbs: Observable<BreadcrumbItem[]>;
dataSource: DatasetDataSource | null;
displayedColumns: String[] = ['label', 'project', 'dmp', 'profile', 'status', 'description', 'created'];
pageEvent: PageEvent;
titlePrefix: String;
dmpId: string;
itemId: string;
status: Number;
totalCount: number;
dmpSearchEnabled = true;
@ -43,11 +36,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
constructor(
private datasetService: DatasetService,
private router: Router,
private languageService: TranslateService,
private snackBar: MatSnackBar,
private route: ActivatedRoute,
private dmpService: DmpService,
public enumUtils: EnumUtils
) {
super();
}
@ -82,31 +72,19 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
});
}
// refresh() {
// this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria, this.dmpId);
// }
refresh() {
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array();
if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
const request = new DataTableRequest<DatasetCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
request.criteria = this.criteria.formGroup.value;
if (this.itemId) {
// request.criteria.groupIds = [this.itemId];
request.criteria.allVersions = true;
}
// if (this.itemId) {
// // request.criteria.groupIds = [this.itemId];
// request.criteria.allVersions = true;
// }
this.datasetService.getPaged(request).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;
console.log(result);
});
@ -136,69 +114,3 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
.subscribe();
}
}
export class DatasetDataSource extends DataSource<DatasetListingModel> {
totalCount = 0;
constructor(
private _service: DatasetService,
private _paginator: MatPaginator,
private _sort: MatSort,
private _languageService: TranslateService,
private _snackBar: MatSnackBar,
private _criteria: DatasetCriteriaComponent,
private dmpId: String
) {
super();
}
connect(): Observable<DatasetListingModel[]> {
const displayDataChanges = [
this._paginator.page
//this._sort.matSortChange
];
return Observable.merge(...displayDataChanges)
.startWith(null)
.switchMap(() => {
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array();
if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
const request = new DataTableRequest<DatasetCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
request.criteria = {
like: this._criteria.criteria.like,
status: this._criteria.criteria.status,
dmpIds: this._criteria.criteria.dmpIds ? this._criteria.criteria.dmpIds.map(x => x.id) : null,
tags: this._criteria.criteria.tags,
allVersions: this._criteria.criteria.allVersions
}
if (this.dmpId) { request.criteria.allVersions = true; }
return this._service.getPaged(request);
})
/*.catch((error: any) => {
this._snackBar.openFromComponent(SnackBarNotificationComponent, {
data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
duration: 3000,
extraClasses: ['snackbar-warning']
});
//this._criteria.criteria.onCallbackError(error);
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;
});
}
disconnect() {
// No-op
}
}

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

@ -1,4 +1,4 @@
<div class="dmp-listing-item row" (click)="itemClicked()">
<div class="dataset-listing-item row" (click)="itemClicked()">
<div class="col-auto">
<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
@ -6,7 +6,7 @@
<div class="col">
<h4>{{ dataset.label }}</h4>
<p>{{ dataset.description }}</p>
<div class="dmp-info">
<div class="dataset-info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.project }}</p>
</div>

4
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
View File

@ -1,11 +1,11 @@
@import "../../../dmp/listing/listing-item/dmp-listing-item.component.scss";
.dmp-info {
.dataset-info {
background-color: #f6f6f6;
padding: 8px 15px;
}
.dmp-info p {
.dataset-info p {
margin-bottom: 0px;
color: rgb(37, 35, 140);
font-weight: 600;

83
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
View File

@ -1,4 +1,41 @@
<div class="main-content">
<div class="header-image">
<div class="header-text-container">
<h3>Welcome to OpenDMP</h3>
<h4>Lorem ipsum dolor sit amet concectetum lorem ipsum</h4>
</div>
</div>
<div class="explore-dmp-content">
<div class="container-fluid">
<div class="card">
<div class="card-header card-header-blue d-flex">
<div class="card-desc d-flex flex-column justify-content-center">
<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}} {{titlePrefix}}</h4>
<p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p>
</div>
<div class="d-flex align-items-center ml-auto p-2">
<button mat-raised-button color="primary" class="text-uppercase" [routerLink]="['/datasets/new']">
<mat-icon>add</mat-icon> {{'DATASET-LISTING.ACTIONS.NEW' | translate}}
</button>
</div>
</div>
<div class="card-body table-responsive">
<div class="dmp-listing row">
<div class="col-3">
<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let i = index">
<app-explore-dataset-listing-item-component class="col-12" [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
</div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="main-content">
<div class="container-fluid">
<div class="explore-dataset">
<h3 class="text-center">{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
@ -10,80 +47,38 @@
<div>
<mat-card class="mat-card">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
</ng-container>
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="project">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROJECT' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
</ng-container>
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE'
| translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
</ng-container>
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DATAREPOSITORIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.dataRepositories}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="registries">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.REGISTRIES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.registries}} </mat-cell>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="services">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.SERVICES' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.services}} </mat-cell>
</ng-container> -->
<!-- Column Definition: Status -->
<!-- <ng-container cdkColumnDef="status">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.status}}
</mat-cell>
</ng-container> -->
<!-- Column Definition: Description -->
<ng-container cdkColumnDef="description">
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
</ng-container>
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' |
translate}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
<!-- (click)="rowClick(row.id)" -->
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->

22
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss
View File

@ -1,3 +1,25 @@
text-center {
text-align: center
}
.header-image {
background: url('/assets/images/public-datasets-bg.png') no-repeat;
background-size: cover;
margin-top: 70px;
min-height: 15em;
position: relative;
}
.header-text-container {
background: rgba(255,255,255,0.7);
position: absolute;
bottom: 0px;
padding-left: 5em;
padding-right: 10em;
padding-top: 2em;
padding-bottom: 2em;
}
.explore-dmp-content {
padding: 30px 15px;
}

114
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts
View File

@ -1,17 +1,14 @@
import { DataSource } from '@angular/cdk/table';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSnackBar, MatSort, PageEvent } from '@angular/material';
import { MatPaginator, MatSort } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
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 { DatasetListingModel } from '../../core/model/dataset/dataset-listing';
import { DatasetCriteria } from '../../core/query/dataset/dataset-criteria';
import { ExploreDatasetCriteriaModel } from '../../core/query/explore-dataset/explore-dataset-criteria';
import { DatasetService } from '../../core/services/dataset/dataset.service';
import { DmpService } from '../../core/services/dmp/dmp.service';
import { DataTableRequest } from '../../core/model/data-table/data-table-request';
@Component({
@ -23,27 +20,24 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
@ViewChild(MatPaginator) _paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
criteria: ExploreDatasetCriteriaModel = new ExploreDatasetCriteriaModel();
dataSource: DatasetDataSource | null;
displayedColumns: String[] = ['label', 'project', 'profile', 'description', 'created'];
pageEvent: PageEvent;
titlePrefix: String;
dmpId: string;
totalCount: number;
dmpSearchEnabled = true;
listingItems: DatasetListingModel[] = [];
exploreDatasetCriteriaModel: ExploreDatasetCriteriaModel;
constructor(
private datasetService: DatasetService,
private router: Router,
private languageService: TranslateService,
public snackBar: MatSnackBar,
public route: ActivatedRoute,
public dmpService: DmpService
private route: ActivatedRoute,
private dmpService: DmpService,
) {
super();
}
ngOnInit() {
this.route.params
.pipe(takeUntil(this._destroyed))
.subscribe(async (params: Params) => {
@ -58,20 +52,29 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
});
}
refresh() {
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array();
if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
const request = new DataTableRequest<ExploreDatasetCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
request.criteria = this.exploreDatasetCriteriaModel;
this.datasetService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; }
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
this.listingItems = result.data;
});
}
rowClicked(dataset: DatasetListingModel) {
this.router.navigate(['/datasets/editPublic/' + dataset.id]);
}
onCriteriaChange(event: ExploreDatasetCriteriaModel) {
console.log(event)
this.criteria = event;
this.exploreDatasetCriteriaModel = event;
this.refresh();
}
refresh() {
this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria, this.dmpId);
}
rowClick(rowId: String) {
this.router.navigate(['/datasets/publicEdit/' + rowId]);
}
getDefaultCriteria(dmpId: String): DatasetCriteria {
const defaultCriteria = new DatasetCriteria();
if (dmpId != null) {
@ -79,69 +82,4 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
}
return defaultCriteria;
}
makeItPublic(id: String) {
this.datasetService.makeDatasetPublic(id)
.pipe(takeUntil(this._destroyed))
.subscribe();
}
}
export class DatasetDataSource extends DataSource<DatasetListingModel> {
totalCount = 0;
constructor(
private _service: DatasetService,
private _paginator: MatPaginator,
private _sort: MatSort,
private _languageService: TranslateService,
private _snackBar: MatSnackBar,
private _criteria: ExploreDatasetCriteriaModel,
private dmpId: String
) {
super();
}
connect(): Observable<DatasetListingModel[]> {
const displayDataChanges = [
this._paginator.page
//this._sort.matSortChange
];
return Observable.merge(...displayDataChanges)
.startWith(null)
.switchMap(() => {
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array();
if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
const request = new DataTableRequest<ExploreDatasetCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
request.criteria = this._criteria;
//if (this.dmpId) request.criteria.allVersions = true;
return this._service.getPublicPaged(request);
})
/*.catch((error: any) => {
this._snackBar.openFromComponent(SnackBarNotificationComponent, {
data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
duration: 3000,
extraClasses: ['snackbar-warning']
});
//this._criteria.criteria.onCallbackError(error);
return Observable.of(null);
})
.map(result => {
return result;
})*/
.map(result => {
if (!result) { return []; }
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
return result.data;
});
}
disconnect() {
// No-op
}
}

5
dmp-frontend/src/app/ui/explore-dataset/explore-dataset.module.ts
View File

@ -6,7 +6,7 @@ import { ExploreDatasetListingComponent } from './explore-dataset-listing.compon
import { ExploreDatasetRoutingModule } from './explore-dataset.routing';
import { ExploreDatasetFilterItemComponent } from './filters/explore-dataset-filter-item/explore-dataset-filter-item.component';
import { ExploreDatasetFiltersComponent } from './filters/explore-dataset-filters.component';
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
import { ExploreDatasetListingItemComponent } from './listing-item/explore-dataset-listing-item.component';
@NgModule({
imports: [
@ -18,7 +18,8 @@ import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.
declarations: [
ExploreDatasetListingComponent,
ExploreDatasetFiltersComponent,
ExploreDatasetFilterItemComponent
ExploreDatasetFilterItemComponent,
ExploreDatasetListingItemComponent
]
})
export class ExploreDatasetModule { }

19
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html Normal file
View File

@ -0,0 +1,19 @@
<div class="explore-dataset-listing-item row" (click)="itemClicked()">
<div class="col-auto">
<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
</div>
<div class="col">
<h4>{{ dataset.label }}</h4>
<p>{{ dataset.description }}</p>
<div class="explore-dataset-info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.project }}</p>
</div>
<div class="template-name"><p>{{ dataset.profile }}</p></div>
</div>
<!-- <div class="col-auto">
<mat-icon>more_horiz</mat-icon>
</div> -->
</div>
<mat-divider *ngIf="showDivider"></mat-divider>

34
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss Normal file
View File

@ -0,0 +1,34 @@
.explore-dataset-info {
background-color: #f6f6f6;
padding: 8px 15px;
}
.explore-dataset-info p {
margin-bottom: 0px;
color: rgb(37, 35, 140);
font-weight: 600;
}
.template-name {
padding-left: 0px;
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
background-color: rgb(236, 241, 249);
border-radius: 10em;
justify-content: center;
text-transform: uppercase;
display: flex;
width: 25em;
height: 1.8em;
margin-top: 15px;
font-size: 13px;
font-weight: 500;
}
.draft-bookmark {
color: #e7e6e6;
}
.finalized-bookmark {
color: #92d050;
}

28
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts Normal file
View File

@ -0,0 +1,28 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing';
@Component({
selector: 'app-explore-dataset-listing-item-component',
templateUrl: './explore-dataset-listing-item.component.html',
styleUrls: ['./explore-dataset-listing-item.component.scss']
})
export class ExploreDatasetListingItemComponent implements OnInit {
@Input() dataset: DatasetListingModel;
@Input() showDivider: boolean = true;
@Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter();
draft: boolean;
constructor() { }
ngOnInit() {
if (this.dataset.status == 0) { this.draft = true }
else { this.draft = false }
}
itemClicked() {
this.onClick.emit(this.dataset);
}
}