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

Adds-Style: Dataset Listing Page

This commit is contained in:
apapachristou 2019-05-08 12:53:23 +03:00
parent be06f26bcf
commit b73638081a
9 changed files with 357 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,83 @@
<form class="dataset-criteria">
<div class="dmp-criteria">
<div class="filters">
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
<div class="row" style="justify-content: center;">
<!-- Search Filter-->
<mat-form-field class="col-11 search">
<input matInput placeholder="{{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike"
[formControl]="formGroup.get('like')" (ngModelChange)="controlModified()">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
{{formGroup.get('like').getError('backendError').message}}</mat-error>
<mat-icon matSuffix class="style-icon">search</mat-icon>
</mat-form-field>
<!-- End of Search Filter -->
<!-- Status Filter-->
<div class="col-10 filter-category" [formGroup]="options">
<h6 class="category-title">STATUS</h6>
<mat-list-item><mat-checkbox formControlName="getDrafts">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-checkbox></mat-list-item>
<mat-list-item><mat-checkbox formControlName="getFinalized">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-checkbox></mat-list-item>
<mat-list-item><mat-checkbox formControlName="getDmpStatuses">{{ 'TYPES.DATASET-STATUS.ANY' | translate }}</mat-checkbox></mat-list-item>
</div>
<!-- End of Status Filter-->
<!-- Related Project Filters -->
<div class="col-10 filter-category">
<h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6>
<mat-form-field>
<input matInput placeholder="Select Organizations">
<!-- <app-multiple-auto-complete [formControl]="formGroup.get('projects')"
placeholder="{{'CRITERIA.DMP.SELECT-PROJECTS' | translate}}"
[configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete> -->
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<!-- End of Related Projects Filters -->
<!-- Role Filter -->
<div class="col-10 filter-category">
<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
<mat-radio-group aria-label="Select an option">
<mat-list-item>
<mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="2">{{ 'TYPES.DATASET-ROLE.OWNER' | translate }}</mat-radio-button>
</mat-list-item>
<mat-list-item>
<mat-radio-button value="3">{{ 'TYPES.DATASET-ROLE.MEMBER' | translate }}</mat-radio-button>
</mat-list-item>
</mat-radio-group>
</div>
<!-- End of Role Filter -->
<!-- Related Organization Filter -->
<div class="col-10 filter-category">
<h6 class="category-title">RELATED ORGANIZATION</h6>
<mat-form-field>
<input matInput placeholder="Select Organizations">
<!-- <app-multiple-auto-complete [formControl]="formGroup.get('projects')"
placeholder="Select Organizations"
[configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete> -->
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<!-- End of Related Organization Filter -->
<!-- Import Button -->
<!-- <div class="col-10 import">
<button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)"
type="button col-auto">
{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
</button>
</div> -->
</div>
</div>
</div>
<!-- <form class="dataset-criteria">
<mat-card class="mat-card">
<mat-card-header>
<mat-card-title>
@ -34,4 +113,4 @@
</mat-form-field>
</div>
</mat-card>
</form>
</form> -->

46
dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
View File

@ -1,10 +1,38 @@
.dataset-criteria {
mat-form-field {
padding-bottom: 5px;
width: 100%;
}
mat-card {
padding-bottom: 0px;
}
.search ::ng-deep.mat-form-field-infix {
margin-left: 1em;
}
.filter-category {
background-color: #f6f6f6;
margin: 5px 0px;
}
.category-title {
color: #2e75b6;
margin-top: 8px;
margin-bottom: 12px;
}
.import {
margin: 10px;
padding: 0px;
}
.filters {
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.filters-title {
width: 90px;
color: #2e75b6;
background-color: white;
padding: 0px 20px;
margin-top: -10px;
margin-left: 20px;
text-transform: uppercase;
}
.style-icon {
color: #adadad;
}

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

@ -24,6 +24,7 @@ import { ViewChild } from '@angular/core';
import { UiNotificationService, SnackBarNotificationLevel } from '../../../../core/services/notification/ui-notification-service';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'app-dataset-criteria-component',
@ -38,6 +39,16 @@ export class DatasetCriteriaComponent extends BaseCriteriaComponent implements O
public filteredTags: ExternalSourceItemModel[];
statuses = DatasetStatus;
options: FormGroup;
public formGroup = new FormBuilder().group({
like: new FormControl()
// projects: new FormControl(),
// status: new FormControl(),
// role: new FormControl(),
// organisations: new FormControl()
});
tagsAutoCompleteConfiguration = {
filterFn: this.filterTags.bind(this),
initialItems: (excludedItems: any[]) => this.filterTags('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
@ -62,26 +73,47 @@ export class DatasetCriteriaComponent extends BaseCriteriaComponent implements O
private uiNotificationService: UiNotificationService,
private router: Router,
private language: TranslateService,
fb: FormBuilder
) {
super(new ValidationErrorModel());
this.options = fb.group({
getDrafts: false,
getFinalized: false,
getDmpStatuses: false,
floatLabel: 'auto',
});
}
ngOnInit() {
super.ngOnInit();
if (this.criteria == null) { this.criteria = {}; }
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.controlModified());
// this.formGroup.get('projects').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => this.controlModified());
// if (this.criteria == null) { this.criteria = {}; }
}
setCriteria(criteria: DatasetCriteria): void {
this.criteria = criteria;
this.formGroup.get('like').patchValue(criteria.like);
// this.formGroup.get('projects').patchValue(criteria.projects);
// this.criteria = criteria;
}
controlModified(): void {
this.clearErrorModel();
if (this.refreshCallback != null &&
(this.criteria.like == null || this.criteria.like.length === 0 || this.criteria.like.length > 2)
(this.formGroup.get('like').value == null || this.formGroup.get('like').value.length === 0 || this.formGroup.get('like').value.length > 2)
) {
this.refreshCallback();
setTimeout(() => this.refreshCallback());
}
// if (this.refreshCallback != null &&
// (this.criteria.like == null || this.criteria.like.length === 0 || this.criteria.like.length > 2)
// ) {
// this.refreshCallback();
// }
}
filterTags(value: string): Observable<ExternalSourceItemModel[]> {

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

@ -1,92 +1,125 @@
<div class="main-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-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>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</div>
</div>
</div>
</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()">
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()"> -->
<!-- Column Definition: Name -->
<ng-container cdkColumnDef="label">
<!-- 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>
</ng-container> -->
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="project">
<!-- 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>
</ng-container> -->
<!-- Column Definition: Dmp -->
<ng-container cdkColumnDef="dmp">
<!-- 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>
</ng-container> -->
<!-- Column Definition: Profile -->
<ng-container cdkColumnDef="profile">
<!-- 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>
</ng-container> -->
<!-- Column Definition: Status -->
<ng-container cdkColumnDef="status">
<!-- 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>
</ng-container> -->
<!-- Column Definition: DataRepositories -->
<!-- <ng-container cdkColumnDef="dataRepositories">
<!-- 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">
<!-- 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">
<!-- 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">
<!-- 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">
<!-- 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>
</ng-container> -->
<!-- Column Definition: Created -->
<ng-container cdkColumnDef="created">
<!-- 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>
</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-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-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</mat-card>
</mat-card> -->
<button *ngIf="dmpId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]="['/datasets/new/'+dmpId] ">
<!-- <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'] ">
@ -94,4 +127,4 @@
</button>
</div>
</div>
</div>
</div> -->

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

@ -1,41 +1,43 @@
@import "../../dmp/listing/dmp-listing.component.scss";
.mat-table {
margin: 24px;
margin: 24px;
}
.mat-fab-bottom-right {
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
// top: auto !important;
// right: 20px !important;
// bottom: 10px !important;
// left: auto !important;
// position: fixed !important;
float: right;
z-index: 5;
}
.full-width {
width: 100%;
width: 100%;
}
.mat-card {
margin: 16px 0;
margin: 16px 0;
}
.mat-row {
cursor: pointer;
cursor: pointer;
}
mat-row:hover {
background-color: lightgray;
background-color: lightgray;
}
// mat-row:nth-child(even){
// background-color:red;
// }
mat-row:nth-child(odd){
background-color:#eef0fb;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}
h3{
h3 {
margin-top: 0px;
}

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

@ -34,8 +34,11 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
pageEvent: PageEvent;
titlePrefix: String;
dmpId: string;
itemId: string;
status: Number;
totalCount: number;
dmpSearchEnabled = true;
listingItems: DatasetListingModel[] = [];
constructor(
private datasetService: DatasetService,
@ -79,12 +82,38 @@ 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() {
this.dataSource = new DatasetDataSource(this.datasetService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria, this.dmpId);
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;
}
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);
});
}
rowClick(rowId: String) {
this.router.navigate(['/datasets/edit/' + rowId]);
rowClicked(dataset: DatasetListingModel) {
this.router.navigate(['/datasets/edit/' + dataset.id]);
}
getDefaultCriteria(dmp: any = null): DatasetCriteria {

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

@ -0,0 +1,19 @@
<div class="dmp-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="dmp-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>

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

@ -0,0 +1,36 @@
@import "../../../dmp/listing/listing-item/dmp-listing-item.component.scss";
.dmp-info {
background-color: #f6f6f6;
padding: 8px 15px;
}
.dmp-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/dataset/listing/listing-item/dataset-listing-item.component.ts Normal file
View File

@ -0,0 +1,28 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DatasetListingModel } from '../../../../core/model/dataset/dataset-listing';
@Component({
selector: 'app-dataset-listing-item-component',
templateUrl: './dataset-listing-item.component.html',
styleUrls: ['./dataset-listing-item.component.scss']
})
export class DatasetListingItemComponent 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);
}
}