dataset criteria --dmp&dataset delete
This commit is contained in:
parent
58ab138fe0
commit
2e611befbf
|
@ -4,7 +4,6 @@ import { PageNotFoundComponent } from './not-found.component';
|
|||
import { HomepageComponent } from './homepage/homepage.component';
|
||||
import { DynamicFormComponent } from './form/dynamic-form.component';
|
||||
import { AuthGuard } from './guards/auth.guard';
|
||||
import { DatasetsComponent } from './datasets/dataset.component';
|
||||
import { AppComponent } from './app.component';
|
||||
import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
|
||||
import { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.component';
|
||||
|
@ -19,7 +18,7 @@ import { DataManagementPlanEditorComponent } from './dmps/editor/dmp-editor.comp
|
|||
const appRoutes: Routes = [
|
||||
|
||||
{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
|
||||
{ path: 'dataset', component: DatasetsComponent },
|
||||
//{ path: 'dataset', component: DatasetsComponent },
|
||||
{ path: 'login', component: MainSignInComponent},
|
||||
{ path: 'projects', component: ProjectListingComponent},
|
||||
{ path: 'project/:id', component: ProjectEditorComponent},
|
||||
|
|
|
@ -69,7 +69,6 @@ import { CommonModule } from '@angular/common';
|
|||
|
||||
import { DatasetTableFilterPipe } from './pipes/dataset-table-filter.pipe';
|
||||
import { DatasetStatusFilterPipe } from './pipes/dataset-status-filter.pipe';
|
||||
import { DatasetsComponent } from './datasets/dataset.component';
|
||||
|
||||
import { DmpTableFilterPipe } from './pipes/dmp-table-filter.pipe';
|
||||
import { DmpStatusFilterPipe } from './pipes/dmp-status-filter.pipe';
|
||||
|
@ -136,8 +135,7 @@ import { FigurecardComponent } from './shared/components/figurecard/figurecard.c
|
|||
ModalComponent,
|
||||
ProjectListingComponent,
|
||||
DatasetListingComponent,
|
||||
DataManagementPlanListingComponent,
|
||||
DatasetsComponent,
|
||||
DataManagementPlanListingComponent,
|
||||
ConfirmationComponent,
|
||||
AutocompleteRemoteComponent,
|
||||
DynamicFieldDropdownComponent,
|
||||
|
|
|
@ -1,56 +0,0 @@
|
|||
.invisible {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display:block;
|
||||
}
|
||||
|
||||
tr.hover:hover > * {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.editor-container{
|
||||
padding-top: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.button-150px {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.ng-template{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.grayout-empty-table {
|
||||
opacity: 0.6; /* Real browsers */
|
||||
filter: alpha(opacity = 60); /* MSIE */
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btncustom{
|
||||
background-color:#337ab7;
|
||||
color:white;
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.cursor-hand{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden-keepspace{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.ui-autocomplete-multiple {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui-autocomplete-multiple-container {
|
||||
width: 100% !important;
|
||||
}
|
|
@ -1,299 +0,0 @@
|
|||
import { Component, OnInit, Input, ViewChild, NgZone, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
|
||||
import { GoogleSignInSuccess } from 'angular-google-signin';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { ServerService } from '../../app/services/server.service';
|
||||
import { Project } from '../entities/model/project';
|
||||
import { Dataset } from '../entities/model/dataset';
|
||||
import { Dmp } from '../entities/model/dmp';
|
||||
import { DataTable } from 'angular2-datatable';
|
||||
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
||||
import { Param } from '../entities/model/param';
|
||||
import { StatusToString } from '../pipes/various/status-to-string';
|
||||
import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
|
||||
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
|
||||
|
||||
declare var $: any;
|
||||
|
||||
|
||||
import '../../assets/custom.js';
|
||||
declare function simple_notifier(type: string, title: string, message: string): any;
|
||||
|
||||
@Component({
|
||||
selector: 'datasets-table',
|
||||
templateUrl: 'dataset.html',
|
||||
styleUrls: ['./dataset.component.css'],
|
||||
providers: [ServerService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class DatasetsComponent implements OnInit {
|
||||
|
||||
// Start ALTERNATIVE
|
||||
//whole dmp data model
|
||||
tableData: any[] = new Array();
|
||||
|
||||
//organisation editor data model
|
||||
editingOrganisation: any = {};
|
||||
organisationEditorForm: any;
|
||||
|
||||
//required by the table
|
||||
public filterQuery = "";
|
||||
public statusFilter = "";
|
||||
public rowsOnPage = 10;
|
||||
public sortBy = "label";
|
||||
public sortOrder = "asc";
|
||||
|
||||
dmpIdforDatasets: string;
|
||||
|
||||
|
||||
// for tableIds
|
||||
showIDs: boolean = false;
|
||||
// END ALTERNATIVE
|
||||
|
||||
returnUrl: string;
|
||||
@Input() datasets: Dataset[];
|
||||
@Input() datasetProfileDropDown: DropdownField;
|
||||
@Input() datasetCount = 0;
|
||||
|
||||
@Input() dmpLabelforDatasets: string;
|
||||
@Input() statusDropDown: DropdownField;
|
||||
dataset: any;
|
||||
saveAndDescribe: boolean;
|
||||
|
||||
dataSetValue: boolean = true;
|
||||
|
||||
uriRegex = "/^([a-z0-9+.-]+):(?://(?:((?:[a-z0-9-._~!$&'()*+,;=:]|%[0-9A-F]{2})*)@)?((?:[a-z0-9-._~!$&'()*+,;=]|%[0-9A-F]{2})*)(?::(\d*))?(/(?:[a-z0-9-._~!$&'()*+,;=:@/]|%[0-9A-F]{2})*)?|(/?(?:[a-z0-9-._~!$&'()*+,;=:@]|%[0-9A-F]{2})+(?:[a-z0-9-._~!$&'()*+,;=:@/]|%[0-9A-F]{2})*)?)(?:\?((?:[a-z0-9-._~!$&'()*+,;=:/?@]|%[0-9A-F]{2})*))?(?:#((?:[a-z0-9-._~!$&'()*+,;=:/?@]|%[0-9A-F]{2})*))?$/i";
|
||||
|
||||
filteredServices: any[];
|
||||
filteredRepositories: any[];
|
||||
filteredRegistries: any[];
|
||||
|
||||
constructor(
|
||||
|
||||
private serverService: ServerService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private ngZone: NgZone,
|
||||
private spinnerService: Ng4LoadingSpinnerService) {
|
||||
|
||||
this.dataset = this.createEmptyDataset();
|
||||
|
||||
this.datasetProfileDropDown = new DropdownField();
|
||||
this.datasetProfileDropDown.options = [];
|
||||
this.saveAndDescribe = false;
|
||||
this.statusDropDown = new DropdownField();
|
||||
this.statusDropDown.options = [{ key: '', value: null }, { key: '0', value: "Active" }, { key: '1', value: "Inactive" }]
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
|
||||
this.route
|
||||
.queryParams
|
||||
.subscribe(params => {
|
||||
this.dmpIdforDatasets = params['dmpid'];
|
||||
this.getDatasets();
|
||||
});
|
||||
|
||||
|
||||
this.serverService.getAllDatsetsProfile().subscribe(
|
||||
response => {
|
||||
response.forEach((datasetprofile) => {
|
||||
let params = new Param();
|
||||
params.key = datasetprofile.id;
|
||||
params.value = datasetprofile.label;
|
||||
this.datasetProfileDropDown.options.push(params);
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Could not load User's Dataset Profiles");
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
||||
$(function () {
|
||||
$('#status-filter').append("<option value='' style='text-color: #cccccc' selected disabled hidden>Filter by status</option>");
|
||||
//$('#status-filter').value=;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
createEmptyDataset() {
|
||||
return {
|
||||
id: null,
|
||||
label: '',
|
||||
reference: '',
|
||||
uri: '',
|
||||
status: 0,
|
||||
properties: '',
|
||||
profile: { "id": '' },
|
||||
dmp: { "id": '' },
|
||||
services: [],
|
||||
registries: [],
|
||||
dataRepositories: []
|
||||
}
|
||||
}
|
||||
|
||||
SaveDataset() {
|
||||
if (this.dataset.id == null) {
|
||||
this.dataset.dmp = { "id": this.dmpIdforDatasets }
|
||||
this.dataset.profile = { "id": this.dataset.profile }
|
||||
this.serverService.createDatasetForDmp(this.dataset).subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Created dataset");
|
||||
this.getDatasets();
|
||||
if (this.saveAndDescribe == true)
|
||||
this.describeDataset(response);
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Could not create Dataset");
|
||||
}
|
||||
)
|
||||
$("#newDatasetModal").modal("hide");
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
this.dataset.dmp = { "id": this.dmpIdforDatasets };
|
||||
this.dataset.profile = { "id": this.dataset.profile };
|
||||
this.dataset.creator = { "id": this.dataset.creator };
|
||||
|
||||
this.serverService.updateDatsetsProfile(this.dataset).subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Dataset edited");
|
||||
this.getDatasets();
|
||||
if (this.saveAndDescribe == true)
|
||||
this.describeDataset(response);
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Could not edit dataset");
|
||||
}
|
||||
)
|
||||
$("#newDatasetModal").modal("hide");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getDatasets(muted?: boolean) {
|
||||
this.spinnerService.show();
|
||||
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
|
||||
response => {
|
||||
this.tableData = response;
|
||||
if (muted && muted != true)
|
||||
simple_notifier("success", null, "Updated datasets table");
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Could not update datasets table");
|
||||
},
|
||||
() => {
|
||||
this.spinnerService.hide();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
getDatasetForDmpMethod(dmpid) {
|
||||
this.spinnerService.show();
|
||||
this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
|
||||
response => {
|
||||
this.tableData = response;
|
||||
},
|
||||
error => {
|
||||
console.log("could not retrieve dataset for dpm: " + dmpid);
|
||||
},
|
||||
() => {
|
||||
this.spinnerService.hide();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
editRow(item, event) {
|
||||
if (event.toElement.id == "editDataset") {
|
||||
this.spinnerService.show();
|
||||
this.serverService.getDatasetByID(item.id).subscribe(item => {
|
||||
this.dataset = item;
|
||||
this.dataset.profile = item.profile.id;
|
||||
$("#newDatasetModal").modal("show");
|
||||
},
|
||||
error => simple_notifier("danger", null, "Could not Open Dataset"),
|
||||
() => this.spinnerService.hide()
|
||||
)
|
||||
}
|
||||
else if (event.toElement.id == "describeDataset") {
|
||||
this.describeDataset(item);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
newDataset() {
|
||||
this.dataset = this.createEmptyDataset();
|
||||
this.dataset.dmp = this.dmpLabelforDatasets;
|
||||
this.dataset.status = 0;
|
||||
$("#newDatasetModal").modal("show");
|
||||
}
|
||||
|
||||
SaveDescribeDataset() {
|
||||
this.saveAndDescribe = true;
|
||||
this.SaveDataset();
|
||||
}
|
||||
|
||||
describeDataset(item) {
|
||||
this.router.navigate(['/dynamic-form/' + item.id]);
|
||||
//this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id, label: item.label}]));
|
||||
}
|
||||
|
||||
markDatasetForDelete(dataset) {
|
||||
this.dataset = dataset;
|
||||
}
|
||||
|
||||
deleteDataset(confirmation) {
|
||||
if (confirmation == true)
|
||||
this.deleteRow(this.dataset);
|
||||
}
|
||||
|
||||
|
||||
deleteRow(dataset) {
|
||||
this.serverService.deleteDataset(dataset).subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Deleted dataset");
|
||||
this.getDatasets();
|
||||
},
|
||||
err => {
|
||||
|
||||
if (err.status >= 200 && err.status < 300)
|
||||
simple_notifier("success", null, "Deleted dataset");
|
||||
else
|
||||
simple_notifier("danger", null, "Could not delete the dataset");
|
||||
this.getDatasets();
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
searchServices(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDatasetService(query).subscribe(services => {
|
||||
this.filteredServices = services;
|
||||
});
|
||||
}
|
||||
|
||||
searchRegistries(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDatasetRegistry(query).subscribe(registries => {
|
||||
this.filteredRegistries = registries;
|
||||
});
|
||||
}
|
||||
|
||||
searchRepositories(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDatasetRepository(query).subscribe(repos => {
|
||||
this.filteredRepositories = repos;
|
||||
});
|
||||
}
|
||||
}
|
|
@ -1,167 +0,0 @@
|
|||
<!-- <app-spinner> </app-spinner> -->
|
||||
<table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter"
|
||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1">
|
||||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
||||
</th>
|
||||
|
||||
|
||||
<th colspan="1">
|
||||
<!-- <input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' /> -->
|
||||
|
||||
|
||||
|
||||
<select [ngClass]="{'semi-visible': statusFilter==''}" class="form-control" id="status-filter" [(ngModel)]="statusFilter"
|
||||
[name]="statusDropDown" #datasetfield>
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
|
||||
</th>
|
||||
<th>
|
||||
<button class="btn btn-default" (click)="getDatasets('false')">
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
|
||||
<mfDefaultSorter by="id">ID</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="label">Label</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="uri">Uri</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="profile">Profile</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="description">Description</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="created">Created at</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="status">Status</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
Actions
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||||
<td colspan="7">No elements</td>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let dataset of mf.data" class="hover">
|
||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td>
|
||||
<td>{{(dataset?.label?.length > 80) ? (dataset?.label | slice:0:80)+'...':(dataset?.label) }}</td>
|
||||
<td>{{(dataset?.uri?.length > 40) ? (dataset?.uri | slice:0:40)+'...':(dataset?.uri) }}</td>
|
||||
<td>{{(dataset?.profile?.label?.length > 40) ? (dataset?.profile?.label | slice:0:40)+'...':(dataset?.profile?.label)
|
||||
}}
|
||||
</td>
|
||||
<td>{{(dataset?.description?.length > 40) ? (dataset?.description | slice:0:40)+'...':(dataset?.description) }}</td>
|
||||
<td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{dataset?.status | statusToString }}</td>
|
||||
<td>
|
||||
<a [ngClass]="{'hidden-keepspace': dataset.status==2 }" class="editGridColumn cursor-hand disabled" (click)="editRow(dataset, $event)">
|
||||
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i>
|
||||
</a>
|
||||
<a class="editGridColumn cursor-hand" (click)="editRow(dataset, $event)">
|
||||
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dataset-confirm" (click)="markDatasetForDelete(dataset)"
|
||||
title="delete Dataset"></i>
|
||||
</a>
|
||||
<a class="editGridColumn cursor-hand" (click)="editRow(dataset, $event)">
|
||||
<i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<button type="button" class="btn btn-info btncustom" (click)="newDataset(item)">New Dataset</button>
|
||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modalLabel">
|
||||
<b>{{ dataset?.id ? "Edit Dataset" : "New Dataset" }}</b>
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #newDatasetForm="ngForm" (ngSubmit)="SaveDataset()">
|
||||
<div class="form-group">
|
||||
<label for="recipient-name" class="col-form-label">Dataset Profile:</label>
|
||||
<select class="form-control" id="datasetProfileDropDownKey" [(ngModel)]="dataset.profile" name="datasetProfileDropDown" #datasetfield>
|
||||
<option *ngFor="let opt of datasetProfileDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [(ngModel)]="dataset.label" name="label" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="uri-text" class="form-control-label">Uri:</label>
|
||||
<input class="form-control" id="uri-text" [(ngModel)]="dataset.uri" name="uri" pattern="^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status-name" class="col-form-label">Status:</label>
|
||||
<select class="form-control" id="statusid" [(ngModel)]="dataset.status" name="statusDropDown" #datasetfield>
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="abbreviation-text" class="form-control-label">Description:</label>
|
||||
<textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dataset.description" name="description"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="services-dropdown" class="form-control-label">Services:</label>
|
||||
<p-autoComplete id="services-dropdown" [(ngModel)]="dataset.services" [suggestions]="filteredServices" (completeMethod)="searchServices($event)"
|
||||
[minLength]="1" name="services" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="registries-dropdown" class="form-control-label">Registries:</label>
|
||||
<p-autoComplete id="registries-dropdown" [(ngModel)]="dataset.registries" [suggestions]="filteredRegistries" (completeMethod)="searchRegistries($event)"
|
||||
[minLength]="1" name="registries" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="repositories-dropdown" class="form-control-label">Repositories:</label>
|
||||
<p-autoComplete id="repositories-dropdown" [(ngModel)]="dataset.dataRepositories" [suggestions]="filteredRepositories" (completeMethod)="searchRepositories($event)"
|
||||
[minLength]="1" name="repositories" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="SaveDataset();">Save</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="SaveDescribeDataset();">Save and describe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation module- do not delete -->
|
||||
<confirmation [confirmationID]="'delete-dataset-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this dataset. Are you sure you want to delete this dataset ? This is not revertable !'"
|
||||
(responseSender)="deleteDataset($event)"></confirmation>
|
|
@ -75,12 +75,12 @@ export class DatasetEditorComponent implements AfterViewInit {
|
|||
return this.formGroup.valid;
|
||||
}
|
||||
|
||||
// onSubmit(): void {
|
||||
// this.dataManagementPlanService.createDataManagementPlan(this.formGroup.value).subscribe(
|
||||
// complete => this.onCallbackSuccess(),
|
||||
// error => this.onCallbackError(error)
|
||||
// );
|
||||
// }
|
||||
onSubmit(): void {
|
||||
this.datasetService.createDataset(this.formGroup.value).subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
|
||||
onCallbackSuccess(): void {
|
||||
this.snackBar.openFromComponent(SnackBarNotificationComponent, {
|
||||
|
|
|
@ -1,158 +0,0 @@
|
|||
.invisible {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display:block;
|
||||
}
|
||||
|
||||
tr.hover:hover > * {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.editor-container{
|
||||
padding-top: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.button-150px {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.ng-template{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.grayout-empty-table {
|
||||
opacity: 0.6; /* Real browsers */
|
||||
filter: alpha(opacity = 60); /* MSIE */
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btncustom{
|
||||
background-color:#337ab7;
|
||||
color:white;
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
.btnMoreFilters{
|
||||
background-color:#337ab7;
|
||||
color:white;
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.table>thead>tr.rowFilter>th {
|
||||
border-bottom: 0px solid white;
|
||||
|
||||
}
|
||||
|
||||
.table>thead>tr>th.rowFilterTopBorder{
|
||||
border-top: 0px solid white;
|
||||
}
|
||||
|
||||
.table-button {
|
||||
font-size: 1em;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
.centered-text{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.url-like{
|
||||
color: #0645AD;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*THE BELOW CSS ARE FOR HORIZONTALLY -COLLAPSING DIVS */
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.collapse.in {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
tr.collapse.in {
|
||||
display: table-row;
|
||||
}
|
||||
tbody.collapse.in {
|
||||
display: table-row-group;
|
||||
}
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
-webkit-transition-property: height, visibility;
|
||||
transition-property: height, visibility;
|
||||
-webkit-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
-webkit-transition-timing-function: ease;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
.collapsing.width {
|
||||
-webkit-transition-property: width, visibility;
|
||||
transition-property: width, visibility;
|
||||
width: 0;
|
||||
height: auto;
|
||||
}
|
||||
/* END OF HORIZONTALLY -COLLAPSING DIVS */
|
||||
|
||||
.ui-autocomplete-multiple {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui-autocomplete-multiple-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
.modal.modal-fullscreen .modal-dialog,
|
||||
.modal.modal-fullscreen .modal-content {
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
right: 1%;
|
||||
top: 1%;
|
||||
bottom: 1%;
|
||||
}
|
||||
.modal.modal-fullscreen .modal-dialog {
|
||||
margin: 0;
|
||||
width: 98%;
|
||||
animation-duration:0.5s;
|
||||
}
|
||||
.modal.modal-fullscreen .modal-content {
|
||||
border: none;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: inherit;
|
||||
-moz-box-shadow: inherit;
|
||||
-o-box-shadow: inherit;
|
||||
box-shadow: inherit;
|
||||
|
||||
}
|
||||
.modal.modal-fullscreen.force-fullscreen {
|
||||
|
||||
}
|
||||
.modal.modal-fullscreen.force-fullscreen .modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.modal.modal-fullscreen.force-fullscreen .modal-header,
|
||||
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.modal.modal-fullscreen.force-fullscreen .modal-header {
|
||||
top: 0;
|
||||
}
|
||||
.modal.modal-fullscreen.force-fullscreen .modal-footer {
|
||||
bottom: 0;
|
||||
}
|
||||
*/
|
|
@ -1,311 +0,0 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { GoogleSignInSuccess } from 'angular-google-signin';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { ServerService } from '../../app/services/server.service';
|
||||
import { Dmp } from '../entities/model/dmp';
|
||||
import { Dataset } from '../entities/model/dataset';
|
||||
import { Project } from '../entities/model/project';
|
||||
import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
|
||||
|
||||
import { DataTable } from 'angular2-datatable';
|
||||
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
||||
import { Param } from '../entities/model/param';
|
||||
import { ModalComponent } from '../modal/modal.component';
|
||||
import { HttpErrorResponse } from '@angular/common/http';
|
||||
import { FormGroup, FormControl } from '@angular/forms'; //na dw an xreiazontai
|
||||
import { NgForm } from '@angular/forms';
|
||||
import { DatasetsComponent } from '../datasets/dataset.component';
|
||||
import { StatusToString } from '../pipes/various/status-to-string';
|
||||
import { MenuItem } from 'primeng/primeng';
|
||||
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
|
||||
|
||||
declare var $: any;
|
||||
|
||||
import '../../assets/custom.js';
|
||||
declare function simple_notifier(type: string, title: string, message: string): any;
|
||||
|
||||
@Component({
|
||||
selector: 'dmps',
|
||||
templateUrl: 'dmps.html',
|
||||
styleUrls: ['./dmp.component.css'],
|
||||
providers: [ServerService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class DmpComponent implements OnInit {
|
||||
|
||||
//whole dmp data model
|
||||
tableData: any[] = new Array();
|
||||
|
||||
//required by the table
|
||||
public filterQuery = "";
|
||||
public rowsOnPage = 10;
|
||||
public sortBy = "label";
|
||||
public sortOrder = "asc";
|
||||
|
||||
// for tableIds
|
||||
showIDs: boolean = false;
|
||||
|
||||
|
||||
dmp: any;
|
||||
|
||||
@Input() projectsDropDown: DropdownField;
|
||||
@Input() statusDropDown: DropdownField;
|
||||
|
||||
@ViewChild(DatasetsComponent) datasetsComponent: DatasetsComponent;
|
||||
|
||||
filteredResearchers: any[];
|
||||
filteredOrganizations: any[];
|
||||
|
||||
constructor(
|
||||
private serverService: ServerService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private spinnerService: Ng4LoadingSpinnerService
|
||||
) {
|
||||
this.projectsDropDown = new DropdownField();
|
||||
this.projectsDropDown.options = [];
|
||||
this.statusDropDown = new DropdownField();
|
||||
this.statusDropDown.options = [{ key: '', value: null }, { key: '0', value: "Active" }, { key: '1', value: "Inactive" }]
|
||||
//this.projects = [];
|
||||
|
||||
}
|
||||
|
||||
|
||||
clearDmp() {
|
||||
|
||||
this.dmp = {
|
||||
id: null,
|
||||
label: '',
|
||||
previous: '',
|
||||
version: '',
|
||||
organizations: [],
|
||||
researchers: []
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.getDmps();
|
||||
|
||||
this.serverService.getAllProjects().subscribe(
|
||||
response => {
|
||||
//let params = new Param();
|
||||
response.forEach((dmp) => {
|
||||
let params = new Param();
|
||||
params.key = dmp.id;
|
||||
params.value = dmp.label;
|
||||
this.projectsDropDown.options.push(params);
|
||||
});
|
||||
|
||||
},
|
||||
(err: HttpErrorResponse) => {
|
||||
simple_notifier("danger", null, "Could not load User's Projects");
|
||||
}
|
||||
)
|
||||
|
||||
this.clearDmp();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
getDmps(muted?: boolean) {
|
||||
this.serverService.getDmpOfUser().subscribe(
|
||||
response => {
|
||||
this.tableData = response;
|
||||
if (muted && muted != true)
|
||||
simple_notifier("success", null, "Refreshed DMPs");
|
||||
|
||||
this.tableData.forEach(dmp => {
|
||||
if (dmp.previous != null)
|
||||
this.serverService.getDmp(dmp.previous).subscribe(previous => { dmp.previous = previous; });
|
||||
});
|
||||
|
||||
},
|
||||
(err: HttpErrorResponse) => {
|
||||
simple_notifier("danger", null, "Could not refresh DMPs");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
newDMP() {
|
||||
|
||||
this.dmp.project = { "id": this.dmp.project };
|
||||
this.dmp["version"] = 1;
|
||||
|
||||
this.serverService.createDmpForCurrentUser(this.dmp)
|
||||
.subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "DMP created");
|
||||
this.getDmps();
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Could not create the DMP");
|
||||
}
|
||||
);
|
||||
$("#newDmpModal").modal("hide");
|
||||
}
|
||||
|
||||
updateDMP() {
|
||||
|
||||
this.dmp.project = { "id": this.dmp.project };
|
||||
this.dmp.creator = { "id": this.dmp.creator };
|
||||
if (this.dmp.previous != null)
|
||||
this.dmp.previous = this.dmp.previous.id;
|
||||
|
||||
this.serverService.updateDmp(this.dmp)
|
||||
.subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Edited the DMP");
|
||||
this.getDmps();
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Failed to edit the DMP");
|
||||
}
|
||||
);
|
||||
$("#newDmpModal").modal("hide");
|
||||
$("#newVersionDmpModal").modal("hide");
|
||||
|
||||
}
|
||||
|
||||
cloneDMP(dmp) {
|
||||
dmp = { "id": dmp.id, "label": dmp.label };
|
||||
this.serverService.cloneDmp(dmp).subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Successfully cloned the DMP");
|
||||
this.getDmps();
|
||||
},
|
||||
error => {
|
||||
simple_notifier("danger", null, "Failed to clone the DMP");
|
||||
}
|
||||
);
|
||||
$("#newVersionDmpModal").modal("hide");
|
||||
}
|
||||
|
||||
SaveDmp() {
|
||||
if (this.dmp.id == null)
|
||||
this.newDMP();
|
||||
else
|
||||
this.updateDMP();
|
||||
}
|
||||
|
||||
|
||||
editDmp(item) {
|
||||
this.spinnerService.show();
|
||||
this.serverService.getDmp(item.id).subscribe(result => {
|
||||
this.dmp = result;
|
||||
this.dmp.project = result.project.id
|
||||
$("#newDmpModal").modal("show");
|
||||
},
|
||||
error => simple_notifier("danger", null, "Failed to Open DMP"),
|
||||
() => this.spinnerService.hide()
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
cloneDmp(item) {
|
||||
this.dmp = Object.assign({}, item);
|
||||
this.dmp.project = item.project.id;
|
||||
$("#newVersionDmpModal").modal("show");
|
||||
}
|
||||
|
||||
newDmpForm(item) {
|
||||
|
||||
this.clearDmp();
|
||||
|
||||
$("#newDmpModal").modal("show");
|
||||
}
|
||||
|
||||
markDMPForDelete(dmp) {
|
||||
this.dmp = dmp;
|
||||
}
|
||||
|
||||
deleteDMP(confirmation) {
|
||||
if (confirmation == true)
|
||||
this.deleteRow(this.dmp);
|
||||
}
|
||||
|
||||
deleteRow(dmp) {
|
||||
|
||||
this.dmp = { "id": this.dmp.id }; //only id is needed to delete
|
||||
|
||||
|
||||
this.serverService.deleteDmp(this.dmp).subscribe(
|
||||
response => {
|
||||
simple_notifier("success", null, "Successfully deleted the DMP");
|
||||
this.getDmps();
|
||||
},
|
||||
(err: HttpErrorResponse) => {
|
||||
if (err.status >= 200 && err.status < 300)
|
||||
simple_notifier("success", null, "Successfully deleted the DMP");
|
||||
else
|
||||
simple_notifier("danger", null, "Failed to delete the DMP");
|
||||
this.getDmps();
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
clickFilters(element) {
|
||||
if (element.textContent == "More filters")
|
||||
element.textContent = "Less Filters";
|
||||
else
|
||||
element.textContent = "More Filters";
|
||||
}
|
||||
|
||||
SelectDMPStatus(dmp, event, oldValue) {
|
||||
console.log(dmp);
|
||||
let cannotChangeStatus: boolean;
|
||||
if (dmp.status == 2) {
|
||||
this.serverService.getDatasetForDmp({ "id": dmp.id }).subscribe(
|
||||
response => {
|
||||
response.forEach(dataset => {
|
||||
if (dataset.status !== 2 || dataset.status !== 3) {
|
||||
cannotChangeStatus = true;
|
||||
}
|
||||
return;
|
||||
});
|
||||
if (cannotChangeStatus == true) {
|
||||
dmp.status = 0;
|
||||
$("#messageForChangingStatus").modal("show");
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log("could not retrieve dataset for dpm: " + dmp.id);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
showDatasetsOfDmp(item) {
|
||||
this.router.navigate(['/dataset'], { queryParams: { "dmpid": item.id, "label": item.label } });
|
||||
}
|
||||
|
||||
viewDetailedDMP(dmp) {
|
||||
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||
this.router.navigate(['/dmps/dmp'], { queryParams: { "dmpid": dmp.id, "label": dmp.label, random: random } });
|
||||
}
|
||||
|
||||
viewDetailedProject(dmp) {
|
||||
let random = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
|
||||
this.router.navigate(['/dmps/project'], { queryParams: { "projectid": dmp.project.id, "label": dmp.project.label, random: random } });
|
||||
}
|
||||
|
||||
searchResearchers(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDMPResearchers(query).subscribe(researchers => {
|
||||
this.filteredResearchers = researchers;
|
||||
});
|
||||
}
|
||||
|
||||
searchOrganizations(event) {
|
||||
let query = event.query;
|
||||
this.serverService.searchDMPOrganizations(query).subscribe(organizations => {
|
||||
this.filteredOrganizations = organizations;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
|
@ -1,269 +0,0 @@
|
|||
<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
|
||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||
<thead>
|
||||
<tr class="rowFilter">
|
||||
<th colspan="1">
|
||||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
|
||||
</th>
|
||||
<th colspan="1">
|
||||
<button class="btn btn-default " (click)="getDmps('false')">
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
</button>
|
||||
</th>
|
||||
|
||||
<th class="rowFilterTopBorder" colspan="3">
|
||||
<button type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#demo" (click)="clickFilters($event.target)">More filters</button>
|
||||
<div id="demo" class="collapse">
|
||||
<input style="margin-top: 5px;" class="form-control" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
||||
<select style="margin-top: 5px;" class="form-control" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown"
|
||||
#datasetfield>
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<!--
|
||||
<th style="display: table-row;" class="container rowFilterTopBorder" colspan="3">
|
||||
<button style="display: table-cell;" type="button" class="btn btn-info btnMoreFilters" data-toggle="collapse" data-target="#more-filters" (click)="clickFilters($event.target)">More filters</button>
|
||||
<div style="display: table-cell;" id="more-filters" class="collapse width">
|
||||
<div style="display: table-row;">
|
||||
<input style="display: table-cell; width:45%; margin-top: 5px;" class="form-control contentwrapper" type="number" [(ngModel)]="versionFilter" placeholder='Version' />
|
||||
<select style="display: table-cell; width:45%; margin-top: 5px;" class="form-control contentwrapper" [id]="statusid" [(ngModel)]="statusFilter" [name]="statusDropDown" #datasetfield>
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
-->
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
|
||||
<mfDefaultSorter by="id">ID</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="label">Label</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="version">Version</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="previous">Previous</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="project">Project</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="description">Description</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="created">Created at</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="status">Status</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
Actions
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||||
<td colspan="5">No elements</td>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let dmp of mf.data" class="hover">
|
||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
|
||||
<!-- data-toggle="modal" data-target="#dmp-deatils-fullscreen" -->
|
||||
<td>{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}
|
||||
<span class="url-like" (click)="viewDetailedDMP(dmp)">(info)</span>
|
||||
</td>
|
||||
<td style="width:20px;">{{dmp?.version}}</td>
|
||||
<td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
|
||||
<td>{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}
|
||||
<span class="url-like" (click)="viewDetailedProject(dmp)">(info)</span>
|
||||
</td>
|
||||
<td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
|
||||
<td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
|
||||
<td>{{dmp?.status | statusToString }}</td>
|
||||
<td>
|
||||
<a class="editGridColumn cursor-link" (click)="editDmp(dmp)">
|
||||
<!--btn btn-primary btn-rounded css for button style -->
|
||||
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="Edit" id="editDMP"></i>
|
||||
</a>
|
||||
<a class="editGridColumn cursor-link" (click)="cloneDmp(dmp)">
|
||||
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="Clone" id="changeVersionDMP"></i>
|
||||
</a>
|
||||
<a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
|
||||
<i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" title="Delete"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td style="max-width:100px;">
|
||||
<button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)">
|
||||
<i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="1">
|
||||
<button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
|
||||
</td>
|
||||
<td colspan="8">
|
||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<!-- </div> -->
|
||||
|
||||
<!--Modal for new and edit DMP-->
|
||||
<div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header centered-text">
|
||||
<h4 class="modal-title" id="modalLabel">
|
||||
<b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b>
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label"
|
||||
required>
|
||||
</div>
|
||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||
<select class="form-control" id="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" name="projectsDropDown"
|
||||
required>
|
||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status-name" class="col-form-label">Status:</label>
|
||||
<select class="form-control" id="statusid" [ngModel]="dmp?.status" (ngModelChange)="dmp.status=$event" name="statusDropDown"
|
||||
(change)="SelectDMPStatus(dmp, $event, oldValue);">
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Previous:</label>
|
||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"
|
||||
name="previous" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version"
|
||||
disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="abbreviation-text" class="form-control-label">Description:</label>
|
||||
<textarea rows="3" class="form-control" id="abbreviation-text" [ngModel]="dmp?.description" (ngModelChange)="dmp.description=$event"
|
||||
name="description"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="organizations-dropdown" class="form-control-label">Organizations:</label>
|
||||
<p-autoComplete id="organizations-dropdown" [(ngModel)]="dmp.organizations" [suggestions]="filteredOrganizations" (completeMethod)="searchOrganizations($event)"
|
||||
[minLength]="1" name="organizations" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="researchers-dropdown" class="form-control-label">Researchers:</label>
|
||||
<p-autoComplete id="researchers-dropdown" [(ngModel)]="dmp.researchers" [suggestions]="filteredResearchers" (completeMethod)="searchResearchers($event)"
|
||||
[minLength]="1" name="researchers" [multiple]="true" emptyMessage="No results found!" field="name">
|
||||
</p-autoComplete>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Modal for changing version-->
|
||||
<div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modalLabel">
|
||||
<b>Clone Data Management Plan</b>
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #dmpForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||
<div class="form-group">
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [ngModel]="dmp?.label" (ngModelChange)="dmp.label=$event" name="label">
|
||||
</div>
|
||||
<div class="form-group" hidden>
|
||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||
<select class="form-control" [id]="projectsDropDownKey" [ngModel]="dmp?.project" (ngModelChange)="dmp.project=$event" [name]="projectsDropDown"
|
||||
#datasetfield>
|
||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group" hidden>
|
||||
<label for="label-name" class="form-control-label">Previous:</label>
|
||||
<input type="text" class="form-control" id="label-previous" [ngModel]="dmp?.previous" (ngModelChange)="dmp.previous=$event"
|
||||
name="previous">
|
||||
</div>
|
||||
<div class="form-group" hidden>
|
||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||
<input class="form-control" id="abbreviation-text" [ngModel]="dmp?.version" (ngModelChange)="dmp.version=$event" name="version">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Change Staus</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
|
||||
|
||||
<!-- Confirmation module- do not delete -->
|
||||
<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'"
|
||||
(responseSender)="deleteDMP($event)"></confirmation>
|
|
@ -32,4 +32,8 @@ export class DatasetService {
|
|||
getSingle(id: string): Observable<DatasetModel> {
|
||||
return this.http.get<DatasetModel>(this.actionUrl + id, { headers: this.headers });
|
||||
}
|
||||
|
||||
createDataset(datasetModel: DatasetModel): Observable<DatasetModel> {
|
||||
return this.http.post<DatasetModel>(this.actionUrl + 'add', datasetModel, { headers: this.headers });
|
||||
}
|
||||
}
|
||||
|
|
|
@ -31,39 +31,22 @@ export class DatasetCriteriaComponent extends BaseCriteriaComponent implements O
|
|||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
if (this.criteria == null) { this.criteria = new DatasetCriteria(); }
|
||||
if (this.formGroup == null) { this.formGroup = this.buildForm(); }
|
||||
}
|
||||
|
||||
setCriteria(criteria: DatasetCriteria): void {
|
||||
this.criteria = criteria;
|
||||
this.formGroup = this.buildForm();
|
||||
}
|
||||
|
||||
public fromJSONObject(item: any): DatasetCriteria {
|
||||
this.criteria = new DatasetCriteria();
|
||||
this.criteria.Name = new String(item.name);
|
||||
this.criteria.Status = new Number(item.status);
|
||||
return this.criteria;
|
||||
onCallbackError(error: any) {
|
||||
this.setErrorModel(error.error);
|
||||
}
|
||||
|
||||
buildForm(): FormGroup {
|
||||
const context: ValidationContext = this.createValidationContext();
|
||||
|
||||
return this.formBuilder.group({
|
||||
name: [this.criteria.Name, context.getValidation('name').validators],
|
||||
status: [this.criteria.Status, context.getValidation('status').validators],
|
||||
// created: [this.criteria, context.getValidation('created').validators]
|
||||
});
|
||||
}
|
||||
|
||||
createValidationContext(): ValidationContext {
|
||||
const validationContext: ValidationContext = new ValidationContext();
|
||||
const validationArray: Validation[] = new Array<Validation>();
|
||||
|
||||
validationArray.push({ key: 'name', validators: [BackendErrorValidator(this.errorModel, 'Criteria.Name')] }); //must add 'Criteria.' because the criteria validator is inside the request validator
|
||||
validationArray.push({ key: 'status', validators: [BackendErrorValidator(this.errorModel, 'Criteria.Status')] });
|
||||
|
||||
validationContext.validation = validationArray;
|
||||
return validationContext;
|
||||
controlModified(): void {
|
||||
this.clearErrorModel();
|
||||
if (this.refreshCallback != null &&
|
||||
(this.criteria.like == null || this.criteria.like.length == 0 || this.criteria.like.length > 2)
|
||||
) {
|
||||
this.refreshCallback();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue