Adds Dataset Tab
This commit is contained in:
parent
cae43a14db
commit
62bf286f3f
|
@ -5,8 +5,8 @@ import { ProjectListingModel } from "../project/project-listing";
|
||||||
import { ResearcherModel } from "../researcher/researcher";
|
import { ResearcherModel } from "../researcher/researcher";
|
||||||
import { UserModel } from "../user/user";
|
import { UserModel } from "../user/user";
|
||||||
import { DmpDynamicField } from "./dmp-dynamic-field";
|
import { DmpDynamicField } from "./dmp-dynamic-field";
|
||||||
import { DatasetOverviewModel } from "../dataset/dataset-overview";
|
|
||||||
import { UserInfoListingModel } from "../user/user-info-listing";
|
import { UserInfoListingModel } from "../user/user-info-listing";
|
||||||
|
import { DatasetModel } from "../dataset/dataset";
|
||||||
|
|
||||||
export interface DmpModel {
|
export interface DmpModel {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -18,7 +18,7 @@ export interface DmpModel {
|
||||||
lockable: boolean;
|
lockable: boolean;
|
||||||
description: String;
|
description: String;
|
||||||
project: ProjectListingModel;
|
project: ProjectListingModel;
|
||||||
datasets: DatasetOverviewModel[];
|
datasets: DatasetModel[];
|
||||||
profiles: DmpProfile[];
|
profiles: DmpProfile[];
|
||||||
organisations: OrganizationModel[];
|
organisations: OrganizationModel[];
|
||||||
researchers: ResearcherModel[];
|
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 { ResearcherModel } from "../../../core/model/researcher/researcher";
|
||||||
import { UserModel } from "../../../core/model/user/user";
|
import { UserModel } from "../../../core/model/user/user";
|
||||||
import { ValidJsonValidator } from "../../../library/auto-complete/auto-complete-custom-validator";
|
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 { UserInfoListingModel } from "../../../core/model/user/user-info-listing";
|
||||||
|
import { DatasetModel } from "../../../core/model/dataset/dataset";
|
||||||
|
|
||||||
export class DmpEditorModel {
|
export class DmpEditorModel {
|
||||||
public id: string;
|
public id: string;
|
||||||
|
@ -29,7 +29,7 @@ export class DmpEditorModel {
|
||||||
public organisations: OrganizationModel[] = [];
|
public organisations: OrganizationModel[] = [];
|
||||||
public researchers: ResearcherModel[] = [];
|
public researchers: ResearcherModel[] = [];
|
||||||
public profiles: DmpProfile[] = [];
|
public profiles: DmpProfile[] = [];
|
||||||
public datasets: DatasetOverviewModel[] = [];
|
public datasets: DatasetModel[] = [];
|
||||||
public associatedUsers: UserModel[] = [];
|
public associatedUsers: UserModel[] = [];
|
||||||
public users: UserInfoListingModel[] = [];
|
public users: UserInfoListingModel[] = [];
|
||||||
public definition: DmpProfileDefinition;
|
public definition: DmpProfileDefinition;
|
||||||
|
@ -74,6 +74,7 @@ export class DmpEditorModel {
|
||||||
researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
|
researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
|
||||||
profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators],
|
profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators],
|
||||||
associatedUsers: [{ value: this.associatedUsers, disabled: disabled }, context.getValidation('associatedUsers').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>();
|
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: 'researchers', validators: [BackendErrorValidator(this.validationErrorModel, 'researchers')] });
|
||||||
baseContext.validation.push({ key: 'profiles', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'profiles')] });
|
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: 'associatedUsers', validators: [BackendErrorValidator(this.validationErrorModel, 'associatedUsers')] });
|
||||||
|
baseContext.validation.push({ key: 'users', validators: [BackendErrorValidator(this.validationErrorModel, 'users')] });
|
||||||
|
|
||||||
return baseContext;
|
return baseContext;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-9 pt-4 pb-4 pl-4">
|
<div class="col-12 pt-4 pb-4 pl-4">
|
||||||
<div class="table-header col-auto d-flex mb-1">
|
<div class="table-header col-auto d-flex">
|
||||||
<span class="table-title">Collaborators</span>
|
<span class="table-title">Collaborators</span>
|
||||||
<div class="table-action" (click)="openShareDialog(dmp.id,dmp.label)">
|
<div class="table-action" (click)="openShareDialog(dmp.id,dmp.label)">
|
||||||
<mat-icon>add</mat-icon><span>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</span>
|
<mat-icon>add</mat-icon><span>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}</span>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<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>
|
<mat-form-field>
|
||||||
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
|
<app-single-auto-complete required='true' [formControl]="formGroup.get('project')"
|
||||||
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
|
placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
|
||||||
|
|
Loading…
Reference in New Issue