dataset criteria --dmp&dataset delete

This commit is contained in:
annampak 2017-12-18 17:10:34 +02:00
parent 58ab138fe0
commit 2e611befbf
11 changed files with 21 additions and 1297 deletions

View File

@ -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},

View File

@ -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,

View File

@ -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;
}

View File

@ -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;
});
}
}

View File

@ -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">&times;</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>

View File

@ -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, {

View File

@ -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;
}
*/

View File

@ -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;
});
}
}

View File

@ -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">&times;</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">&times;</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">&times;</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>

View File

@ -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 });
}
}

View File

@ -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();
}
}
}