Adds Dataset Tab
This commit is contained in:
apapachristou
parent
cae43a14db
commit
62bf286f3f
|
|
@ -5,8 +5,8 @@ import { ProjectListingModel } from "../project/project-listing";
|
|||
import { ResearcherModel } from "../researcher/researcher";
|
||||
import { UserModel } from "../user/user";
|
||||
import { DmpDynamicField } from "./dmp-dynamic-field";
|
||||
import { DatasetOverviewModel } from "../dataset/dataset-overview";
|
||||
import { UserInfoListingModel } from "../user/user-info-listing";
|
||||
import { DatasetModel } from "../dataset/dataset";
|
||||
|
||||
export interface DmpModel {
|
||||
id: string;
|
||||
|
|
@ -18,7 +18,7 @@ export interface DmpModel {
|
|||
lockable: boolean;
|
||||
description: String;
|
||||
project: ProjectListingModel;
|
||||
datasets: DatasetOverviewModel[];
|
||||
datasets: DatasetModel[];
|
||||
profiles: DmpProfile[];
|
||||
organisations: OrganizationModel[];
|
||||
researchers: ResearcherModel[];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row d-flex">
|
||||
<div class="col-12 add-dataset" (click)="addDataset(dmp.id)">
|
||||
<mat-icon>add</mat-icon><span>Add Dataset to Dmp</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-2 pb-4" *ngIf="dmp.datasets">
|
||||
<div *ngFor="let dataset of dmp.datasets" class="col-3">
|
||||
<div class="dataset-card" (click)="datasetClicked(dataset.id)">
|
||||
<mat-icon *ngIf="isDraft(dataset)" class="draft-bookmark">bookmark</mat-icon>
|
||||
<mat-icon *ngIf="!isDraft(dataset)" class="finalized-bookmark">bookmark</mat-icon>
|
||||
<h4 *ngIf="isDraft(dataset)"><span>DRAFT:</span> {{ dataset.label }}</h4>
|
||||
<h4 *ngIf="!isDraft(dataset)">{{ dataset.label }}</h4>
|
||||
<div matTooltip="{{ dataset.profile }}" class="chip">
|
||||
{{ dataset.profile }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
|
||||
<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
|
||||
<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
.draft-bookmark {
|
||||
color: #e7e6e6;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.finalized-bookmark {
|
||||
color: #92d050;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.dataset-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
border-radius: 6px;
|
||||
color: #333333;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
min-height: 90%;
|
||||
max-height: 90%;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.dataset-card h4 {
|
||||
padding-left: 1em;
|
||||
margin: 1em 1.5em;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
background-color: #ffffff00;
|
||||
color: #4687f0;
|
||||
font-weight: 700;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 0.1em 1em;
|
||||
margin-top: auto;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 2.5em;
|
||||
margin-right: 2.5em;
|
||||
border-radius: 10em;
|
||||
background-color: #0070c0;
|
||||
// background-color: rgb(70, 135, 230);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
max-width: 160px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.add-dataset {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5em;
|
||||
padding-right: 2em;
|
||||
cursor: pointer;
|
||||
color: #0070c0;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { DmpEditorModel } from '../dmp-editor.model';
|
||||
import { Router } from '@angular/router';
|
||||
import { DatasetOverviewModel } from '../../../../core/model/dataset/dataset-overview';
|
||||
|
||||
@Component({
|
||||
selector: 'app-datasets-tab',
|
||||
templateUrl: './datasets-tab.component.html',
|
||||
styleUrls: ['./datasets-tab.component.scss']
|
||||
})
|
||||
export class DatasetsTabComponent implements OnInit {
|
||||
|
||||
@Input() dmp: DmpEditorModel;
|
||||
|
||||
constructor(
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
datasetClicked(datasetId: String) {
|
||||
this.router.navigate(['/datasets/edit/' + datasetId]);
|
||||
}
|
||||
|
||||
datasetsClicked(dmpId: String) {
|
||||
this.router.navigate(['/datasets'], { queryParams: { dmpId: dmpId } });
|
||||
}
|
||||
|
||||
isDraft(dataset: DatasetOverviewModel) {
|
||||
if (dataset.status == 0) { return true }
|
||||
else { return false }
|
||||
}
|
||||
|
||||
addDataset(rowId: String) {
|
||||
this.router.navigate(['/datasets/new/' + rowId]);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -12,8 +12,8 @@ import { ProjectListingModel } from "../../../core/model/project/project-listing
|
|||
import { ResearcherModel } from "../../../core/model/researcher/researcher";
|
||||
import { UserModel } from "../../../core/model/user/user";
|
||||
import { ValidJsonValidator } from "../../../library/auto-complete/auto-complete-custom-validator";
|
||||
import { DatasetOverviewModel } from "../../../core/model/dataset/dataset-overview";
|
||||
import { UserInfoListingModel } from "../../../core/model/user/user-info-listing";
|
||||
import { DatasetModel } from "../../../core/model/dataset/dataset";
|
||||
|
||||
export class DmpEditorModel {
|
||||
public id: string;
|
||||
|
|
@ -29,7 +29,7 @@ export class DmpEditorModel {
|
|||
public organisations: OrganizationModel[] = [];
|
||||
public researchers: ResearcherModel[] = [];
|
||||
public profiles: DmpProfile[] = [];
|
||||
public datasets: DatasetOverviewModel[] = [];
|
||||
public datasets: DatasetModel[] = [];
|
||||
public associatedUsers: UserModel[] = [];
|
||||
public users: UserInfoListingModel[] = [];
|
||||
public definition: DmpProfileDefinition;
|
||||
|
|
@ -74,6 +74,7 @@ export class DmpEditorModel {
|
|||
researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
|
||||
profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators],
|
||||
associatedUsers: [{ value: this.associatedUsers, disabled: disabled }, context.getValidation('associatedUsers').validators],
|
||||
users: [{ value: this.users, disabled: disabled }, context.getValidation('users').validators]
|
||||
});
|
||||
|
||||
const dynamicFields = new Array<FormGroup>();
|
||||
|
|
@ -97,6 +98,7 @@ export class DmpEditorModel {
|
|||
baseContext.validation.push({ key: 'researchers', validators: [BackendErrorValidator(this.validationErrorModel, 'researchers')] });
|
||||
baseContext.validation.push({ key: 'profiles', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'profiles')] });
|
||||
baseContext.validation.push({ key: 'associatedUsers', validators: [BackendErrorValidator(this.validationErrorModel, 'associatedUsers')] });
|
||||
baseContext.validation.push({ key: 'users', validators: [BackendErrorValidator(this.validationErrorModel, 'users')] });
|
||||
|
||||
return baseContext;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-9 pt-4 pb-4 pl-4">
|
||||
<div class="table-header col-auto d-flex mb-1">
|
||||
<div class="col-12 pt-4 pb-4 pl-4">
|
||||
<div class="table-header col-auto d-flex">
|
||||
<span class="table-title">Collaborators</span>
|
||||
<div class="table-action" (click)="openShareDialog(dmp.id,dmp.label)">
|
||||
<mat-icon>add</mat-icon><span>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-9 pt-4 pb-4 pl-4">
|
||||
<div class="col-6 pt-4 pb-4 pl-4">
|
||||
<mat-form-field>
|
||||
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
|
||||
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
|
||||
|
|
|
|||
Loading…
Reference in New Issue