Added a floating toc panel - fixed the toc navigation on same page
This commit is contained in:
parent
bf7f6be531
commit
8e4e2667dd
|
@ -25,7 +25,8 @@
|
||||||
"scripts": [
|
"scripts": [
|
||||||
"./../node_modules/jquery/dist/jquery.min.js",
|
"./../node_modules/jquery/dist/jquery.min.js",
|
||||||
"./../node_modules/bootstrap/dist/js/bootstrap.min.js",
|
"./../node_modules/bootstrap/dist/js/bootstrap.min.js",
|
||||||
"./assets/xml2json.min.js"
|
"./assets/xml2json.min.js",
|
||||||
|
"./assets/jquery.scrollTo.min.js"
|
||||||
],
|
],
|
||||||
"environmentSource": "environments/environment.ts",
|
"environmentSource": "environments/environment.ts",
|
||||||
"environments": {
|
"environments": {
|
||||||
|
|
|
@ -248,9 +248,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "6.0.88",
|
"version": "6.0.90",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.88.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.90.tgz",
|
||||||
"integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ=="
|
"integrity": "sha512-tXoGRVdi7wZX7P1VWoV9Wfk0uYDOAHdEYXAttuWgSrN76Q32wQlSrMX0Rgyv3RTEaQY2ZLQrzYHVM2e8rfo8sA=="
|
||||||
},
|
},
|
||||||
"@types/q": {
|
"@types/q": {
|
||||||
"version": "0.0.32",
|
"version": "0.0.32",
|
||||||
|
@ -581,6 +581,21 @@
|
||||||
"typescript": "2.3.4"
|
"typescript": "2.3.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
<<<<<<< HEAD
|
||||||
|
"angular2-draggable": {
|
||||||
|
"version": "1.0.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/angular2-draggable/-/angular2-draggable-1.0.7.tgz",
|
||||||
|
"integrity": "sha1-NeH4HIzPPdljDyMmVYuILMEvDyk="
|
||||||
|
=======
|
||||||
|
"angular2-datatable": {
|
||||||
|
"version": "0.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/angular2-datatable/-/angular2-datatable-0.6.0.tgz",
|
||||||
|
"integrity": "sha1-ygCPdAh/DLh9pXCe0vLR0GF3JjI=",
|
||||||
|
"requires": {
|
||||||
|
"lodash": "4.17.4"
|
||||||
|
}
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
|
},
|
||||||
"ansi-escapes": {
|
"ansi-escapes": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz",
|
||||||
|
@ -3174,6 +3189,14 @@
|
||||||
"pinkie-promise": "2.0.1"
|
"pinkie-promise": "2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"flat": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/flat/-/flat-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-ji/WMv2jdsE+LaznpkIF9Haax0sdpTBozrz/Dtg4qSRMfbs8oVg4ypJunIRYPiMLvH/ed6OflXbnbTIKJhtgeg==",
|
||||||
|
"requires": {
|
||||||
|
"is-buffer": "1.1.5"
|
||||||
|
}
|
||||||
|
},
|
||||||
"flatten": {
|
"flatten": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
|
||||||
|
@ -4095,8 +4118,7 @@
|
||||||
"is-buffer": {
|
"is-buffer": {
|
||||||
"version": "1.1.5",
|
"version": "1.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
|
||||||
"integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
|
"integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"is-builtin-module": {
|
"is-builtin-module": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
@ -4900,8 +4922,7 @@
|
||||||
"lodash": {
|
"lodash": {
|
||||||
"version": "4.17.4",
|
"version": "4.17.4",
|
||||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
|
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
|
||||||
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
|
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"lodash._arraycopy": {
|
"lodash._arraycopy": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
|
@ -5934,7 +5955,7 @@
|
||||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz",
|
||||||
"integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=",
|
"integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/node": "6.0.88"
|
"@types/node": "6.0.90"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"parsejson": {
|
"parsejson": {
|
||||||
|
@ -6670,7 +6691,7 @@
|
||||||
"integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
|
"integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/node": "6.0.88",
|
"@types/node": "6.0.90",
|
||||||
"@types/q": "0.0.32",
|
"@types/q": "0.0.32",
|
||||||
"@types/selenium-webdriver": "2.53.42",
|
"@types/selenium-webdriver": "2.53.42",
|
||||||
"blocking-proxy": "0.0.5",
|
"blocking-proxy": "0.0.5",
|
||||||
|
|
|
@ -24,8 +24,14 @@
|
||||||
"angular-2-data-table": "^0.1.2",
|
"angular-2-data-table": "^0.1.2",
|
||||||
"angular-4-data-table-bootstrap-4": "^0.2.0",
|
"angular-4-data-table-bootstrap-4": "^0.2.0",
|
||||||
"angular-google-signin": "^0.1.5",
|
"angular-google-signin": "^0.1.5",
|
||||||
|
<<<<<<< HEAD
|
||||||
|
"angular2-draggable": "^1.0.7",
|
||||||
|
=======
|
||||||
|
"angular2-datatable": "^0.6.0",
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
"bootstrap": "^3.3.7",
|
"bootstrap": "^3.3.7",
|
||||||
"core-js": "^2.4.1",
|
"core-js": "^2.4.1",
|
||||||
|
"flat": "^4.0.0",
|
||||||
"jquery": "^3.2.1",
|
"jquery": "^3.2.1",
|
||||||
"ngx-webstorage": "^1.8.0",
|
"ngx-webstorage": "^1.8.0",
|
||||||
"rxjs": "^5.4.2",
|
"rxjs": "^5.4.2",
|
||||||
|
@ -37,7 +43,7 @@
|
||||||
"@angular/language-service": "^4.3.6",
|
"@angular/language-service": "^4.3.6",
|
||||||
"@types/jasmine": "~2.5.53",
|
"@types/jasmine": "~2.5.53",
|
||||||
"@types/jasminewd2": "~2.0.2",
|
"@types/jasminewd2": "~2.0.2",
|
||||||
"@types/node": "^6.0.88",
|
"@types/node": "^6.0.90",
|
||||||
"angular-ide": "^0.9.31",
|
"angular-ide": "^0.9.31",
|
||||||
"codelyzer": "~3.1.1",
|
"codelyzer": "~3.1.1",
|
||||||
"jasmine-core": "~2.6.2",
|
"jasmine-core": "~2.6.2",
|
||||||
|
|
|
@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
import { HttpModule } from '@angular/http';
|
import { HttpModule } from '@angular/http';
|
||||||
import { RouterModule, Routes, Router } from '@angular/router';
|
import { RouterModule, Routes, Router } from '@angular/router';
|
||||||
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
|
//import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
|
||||||
|
import { DataTableModule } from "angular2-datatable";
|
||||||
|
|
||||||
|
//import { OrganisationTableFilterPipe } from './pipes/organisation-table-filter.pipe';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { RestBase } from './services/rest-base';
|
import { RestBase } from './services/rest-base';
|
||||||
|
@ -28,6 +31,8 @@ import { GlobalInterceptor } from './services/interceptor';
|
||||||
import { DatasetsModule } from './datasets/dataset.module';
|
import { DatasetsModule } from './datasets/dataset.module';
|
||||||
import { DmpModule } from './dmps/dmp.module';
|
import { DmpModule } from './dmps/dmp.module';
|
||||||
import { TabModule } from './tabs/tab.module';
|
import { TabModule } from './tabs/tab.module';
|
||||||
|
import { AngularDraggableModule } from 'angular2-draggable';
|
||||||
|
|
||||||
|
|
||||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
|
|
||||||
|
@ -53,15 +58,15 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||||
DmpModule,
|
DmpModule,
|
||||||
DatasetsModule,
|
DatasetsModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
|
AngularDraggableModule,
|
||||||
DataTableModule
|
DataTableModule
|
||||||
|
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [{
|
||||||
// {
|
provide: HTTP_INTERCEPTORS,
|
||||||
// provide: HTTP_INTERCEPTORS,
|
useClass: GlobalInterceptor,
|
||||||
// useClass: GlobalInterceptor,
|
multi: true,
|
||||||
// multi: true,
|
},
|
||||||
// },
|
|
||||||
ServerService, dataModelBuilder, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService
|
ServerService, dataModelBuilder, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
.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;
|
||||||
|
}
|
|
@ -5,7 +5,8 @@ import { ServerService } from '../../app/services/server.service';
|
||||||
import { Project } from '../entities/model/project';
|
import { Project } from '../entities/model/project';
|
||||||
import { Dataset } from '../entities/model/dataset';
|
import { Dataset } from '../entities/model/dataset';
|
||||||
import { Dmp } from '../entities/model/dmp';
|
import { Dmp } from '../entities/model/dmp';
|
||||||
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
|
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
|
||||||
|
import {DataTable} from 'angular2-datatable';
|
||||||
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
||||||
import { Param } from '../entities/model/param';
|
import { Param } from '../entities/model/param';
|
||||||
|
|
||||||
|
@ -14,32 +15,40 @@ declare var $: any;
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'datasets-table',
|
selector: 'datasets-table',
|
||||||
templateUrl: 'dataset.html',
|
templateUrl: 'dataset.html',
|
||||||
// template: `
|
styleUrls: ['./dataset.component.css'],
|
||||||
// <h1 class="title">Projects</h1>
|
|
||||||
|
|
||||||
// <ul class="list-group col-md-4">
|
|
||||||
// <li *ngFor="let project of projects"
|
|
||||||
// class="list-group-item">
|
|
||||||
// <a [routerLink]="['/dynamic-form', project.id]" >
|
|
||||||
// {{ project.name }}
|
|
||||||
// </a>
|
|
||||||
// </li>
|
|
||||||
// </ul>
|
|
||||||
|
|
||||||
// <router-outlet></router-outlet>
|
|
||||||
// `,
|
|
||||||
providers: [ServerService]
|
providers: [ServerService]
|
||||||
})
|
})
|
||||||
|
|
||||||
export class DatasetsComponent implements OnInit {
|
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 rowsOnPage = 10;
|
||||||
|
//public sortBy = "email";
|
||||||
|
public sortOrder = "asc";
|
||||||
|
|
||||||
|
//visibility rules for containers
|
||||||
|
tableVisible: boolean = true;
|
||||||
|
editorVisible: boolean = false;
|
||||||
|
|
||||||
|
|
||||||
|
// for tableIds
|
||||||
|
showIDs : boolean = false;
|
||||||
|
// END ALTERNATIVE
|
||||||
|
|
||||||
returnUrl: string;
|
returnUrl: string;
|
||||||
@Input() datasets: Dataset[];
|
@Input() datasets: Dataset[];
|
||||||
@Input() datasetProfileDropDown: DropdownField;
|
@Input() datasetProfileDropDown: DropdownField;
|
||||||
datasetResource: DataTableResource<Dataset>;
|
|
||||||
@Input() datasetCount = 0;
|
@Input() datasetCount = 0;
|
||||||
@Input() dmpIdforDatasets: string;
|
@Input() dmpIdforDatasets: string;
|
||||||
@Input() dmpLabelforDatasets: string;
|
|
||||||
dataset: any;
|
dataset: any;
|
||||||
|
|
||||||
//@ViewChild(DataTable) projectsTable;
|
//@ViewChild(DataTable) projectsTable;
|
||||||
|
@ -80,9 +89,10 @@ export class DatasetsComponent implements OnInit {
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
//this.projects = this.serverService.getDummyProjects();
|
//this.projects = this.serverService.getDummyProjects();
|
||||||
this.datasets = [];
|
this.datasets = [];
|
||||||
console.log(this.dmpIdforDatasets);
|
console.log(this.dmpIdforDatasets);debugger;
|
||||||
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
|
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
|
||||||
response => {
|
response => {
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
console.log("response");
|
console.log("response");
|
||||||
console.log(response);
|
console.log(response);
|
||||||
|
@ -92,7 +102,7 @@ export class DatasetsComponent implements OnInit {
|
||||||
dt.id = resp.id;
|
dt.id = resp.id;
|
||||||
dt.name = resp.label;
|
dt.name = resp.label;
|
||||||
dt.uriDataset = resp.uri;
|
dt.uriDataset = resp.uri;
|
||||||
dt.dmp = this.dmpLabelforDatasets; //to pairnw apo to datatable tou dmp
|
dt.dmp = resp.dmp.label;
|
||||||
dt.profile = resp.profile.label;
|
dt.profile = resp.profile.label;
|
||||||
dt.profileId = resp.profile.id;
|
dt.profileId = resp.profile.id;
|
||||||
this.datasets.push(dt);
|
this.datasets.push(dt);
|
||||||
|
@ -100,6 +110,9 @@ export class DatasetsComponent implements OnInit {
|
||||||
this.afterLoad();
|
this.afterLoad();
|
||||||
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
|
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
|
||||||
});
|
});
|
||||||
|
=======
|
||||||
|
this.tableData = response;
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -119,8 +132,9 @@ export class DatasetsComponent implements OnInit {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
reloadDatasets(params) {
|
reloadDatasets(params) {
|
||||||
// this.datasetResource = new DataTableResource(this.datasets);
|
this.datasetResource = new DataTableResource(this.datasets);
|
||||||
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
|
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -129,7 +143,10 @@ export class DatasetsComponent implements OnInit {
|
||||||
this.datasetResource.count().then(count => this.datasetCount = count);
|
this.datasetResource.count().then(count => this.datasetCount = count);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
selectDataset(item) {debugger;
|
||||||
|
=======
|
||||||
selectDataset(item) {
|
selectDataset(item) {
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profileId, datasetId:item.id, datasetProperties:item.properties}]));
|
this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profileId, datasetId:item.id, datasetProperties:item.properties}]));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,30 +160,6 @@ export class DatasetsComponent implements OnInit {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
$("#newDatasetModal").modal("hide");
|
$("#newDatasetModal").modal("hide");
|
||||||
this.CallDatasets();
|
|
||||||
}
|
|
||||||
|
|
||||||
SaveEditedDataset(){
|
|
||||||
this.dataset.dmp = { "id": this.dmpIdforDatasets }
|
|
||||||
this.dataset.profile = { "id": this.dataset.profile }
|
|
||||||
this.serverService.updateDatsetsProfile(this.dataset).subscribe(
|
|
||||||
response => {
|
|
||||||
console.log(response);
|
|
||||||
|
|
||||||
}
|
|
||||||
)
|
|
||||||
$("#newDatasetModal").modal("hide");
|
|
||||||
this.CallDatasets();
|
|
||||||
}
|
|
||||||
|
|
||||||
SaveDataset(){debugger;
|
|
||||||
if(this.dataset.id ==null)
|
|
||||||
this.SaveNewDataset();
|
|
||||||
else
|
|
||||||
this.SaveEditedDataset();
|
|
||||||
}
|
|
||||||
|
|
||||||
CallDatasets(){
|
|
||||||
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
|
this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe(
|
||||||
response => {
|
response => {
|
||||||
|
|
||||||
|
@ -179,17 +172,12 @@ export class DatasetsComponent implements OnInit {
|
||||||
dt.id = resp.id;
|
dt.id = resp.id;
|
||||||
dt.name = resp.label;
|
dt.name = resp.label;
|
||||||
dt.uriDataset = resp.uri;
|
dt.uriDataset = resp.uri;
|
||||||
dt.dmp = resp.dmp.label;
|
|
||||||
dt.profile = resp.profile.label;
|
|
||||||
dt.profileId = resp.profile.id;
|
|
||||||
this.datasets.push(dt);
|
this.datasets.push(dt);
|
||||||
var params = { limit: 8, offset: 0, sortAsc: false }
|
|
||||||
this.afterLoad();
|
|
||||||
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
// special params:
|
// special params:
|
||||||
translations = <DataTableTranslations>{
|
translations = <DataTableTranslations>{
|
||||||
|
@ -199,6 +187,9 @@ export class DatasetsComponent implements OnInit {
|
||||||
paginationLimit: 'Max results',
|
paginationLimit: 'Max results',
|
||||||
paginationRange: 'Result range'
|
paginationRange: 'Result range'
|
||||||
};
|
};
|
||||||
|
=======
|
||||||
|
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
|
|
||||||
getDatasetForDmpMethod(dmpid) {
|
getDatasetForDmpMethod(dmpid) {
|
||||||
this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
|
this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
|
||||||
|
@ -214,20 +205,16 @@ export class DatasetsComponent implements OnInit {
|
||||||
dt.name = resp.label;
|
dt.name = resp.label;
|
||||||
dt.uriDataset = resp.uri;
|
dt.uriDataset = resp.uri;
|
||||||
this.datasets.push(dt);
|
this.datasets.push(dt);
|
||||||
var params = { limit: 8, offset: 0, sortAsc: false }
|
|
||||||
this.afterLoad();
|
|
||||||
this.datasetResource.query(params).then(datasets => this.datasets = datasets);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
editRow(item) { debugger;
|
editRow(item) {
|
||||||
this.dataset.label = item.name;
|
this.dataset.label = item.label;
|
||||||
this.dataset.uri = item.uriDataset;
|
this.dataset.uri = item.uriDataset;
|
||||||
this.dataset.dmp = item.dmp;
|
this.dataset.dmp = item.dmp;
|
||||||
this.dataset.profile = item.profileId;
|
this.dataset.profile = item.profileId;
|
||||||
this.dataset.id = item.id;
|
|
||||||
$("#newDatasetModal").modal("show");
|
$("#newDatasetModal").modal("show");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<div style="margin: auto; max-width: 1000px; margin-top:50px">
|
<div style="margin: auto; max-width: 1000px; margin-top:50px">
|
||||||
|
<<<<<<< HEAD
|
||||||
<data-table id="films-grid" headerTitle="Datasets" [items]="datasets" [itemCount]="datasetCount" (reload)="reloadDatasets($event)"
|
<data-table id="films-grid" headerTitle="Datasets" [items]="datasets" [itemCount]="datasetCount" (reload)="reloadDatasets($event)"
|
||||||
[limit]="8" [sortBy]="'name'" [sortAsc]="false" [substituteRows]="false"
|
[limit]="8" [sortBy]="'rating'" [sortAsc]="false" [substituteRows]="false"
|
||||||
[translations]="translations" >
|
[translations]="translations" >
|
||||||
|
|
||||||
<data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
|
<data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
|
||||||
|
@ -26,7 +27,7 @@
|
||||||
<i>Edit</i>
|
<i>Edit</i>
|
||||||
</template>
|
</template>
|
||||||
<template #dataTableCell let-item="item">
|
<template #dataTableCell let-item="item">
|
||||||
<a class="editGridColumn" (click) = "selectDataset(item)"><i class="fa fa-file-text fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
|
<a class="editGridColumn" (click) = "selectDataset(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
|
||||||
</template>
|
</template>
|
||||||
</data-table-column>
|
</data-table-column>
|
||||||
</data-table>
|
</data-table>
|
||||||
|
@ -38,12 +39,85 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
=======
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table class="table table-striped" [mfData]="tableData | dmpTableFilter : filterQuery"
|
||||||
|
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="1">
|
||||||
|
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
|
||||||
|
<input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' />
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-default" (click)="refreshTable($event)">
|
||||||
|
<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="dmp">DMP</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>Actions </mfDefaultSorter>
|
||||||
|
</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>
|
||||||
|
<td>{{dmp?.label}}</td>
|
||||||
|
<td>{{dmp?.version}}</td>
|
||||||
|
<td>{{dmp?.previous}}</td>
|
||||||
|
<td>{{dmp?.project?.label}}</td>
|
||||||
|
<td>{{dmp?.description}}</td>
|
||||||
|
<td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Dataset" id="editDataset"></i>
|
||||||
|
<i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete Dataset"></i>
|
||||||
|
<i class="fa fa-table 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>
|
||||||
|
|
||||||
|
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
|
|
||||||
<div class="modal fade" id="newDatasetModal" tabindex="-1" role="dialog" aria-labelledby="newDatasetModalLabel" aria-hidden="true">
|
<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-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="exampleModalLabel">Dataset</h5>
|
<h5 class="modal-title" id="exampleModalLabel">Create New DMP</h5>
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -84,7 +158,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
<button type="submit" class="btn btn-primary" (click)="SaveDataset();">Save Dmp</button>
|
<button type="submit" class="btn btn-primary" (click)="SaveNewDataset();">Save Dmp</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
|
import {DataTableModule} from 'angular2-datatable';
|
||||||
|
import { DatasetTableFilterPipe } from '../pipes/dataset-table-filter.pipe';
|
||||||
|
|
||||||
import { DatasetsComponent } from './dataset.component';
|
import { DatasetsComponent } from './dataset.component';
|
||||||
|
|
||||||
|
@ -16,7 +17,8 @@ import { DatasetRoutingModule } from './dataset-routing.module';
|
||||||
DataTableModule
|
DataTableModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
DatasetsComponent
|
DatasetsComponent,
|
||||||
|
DatasetTableFilterPipe
|
||||||
//ProjectDetailComponent
|
//ProjectDetailComponent
|
||||||
],
|
],
|
||||||
providers: [ ],
|
providers: [ ],
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
.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;
|
||||||
|
}
|
|
@ -5,7 +5,8 @@ import { ServerService } from '../../app/services/server.service';
|
||||||
import { Dmp } from '../entities/model/dmp';
|
import { Dmp } from '../entities/model/dmp';
|
||||||
import { Dataset } from '../entities/model/dataset';
|
import { Dataset } from '../entities/model/dataset';
|
||||||
import { Project } from '../entities/model/project';
|
import { Project } from '../entities/model/project';
|
||||||
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
|
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
|
||||||
|
import {DataTable} from 'angular2-datatable';
|
||||||
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
|
||||||
import { Param } from '../entities/model/param';
|
import { Param } from '../entities/model/param';
|
||||||
import { ModalComponent } from '../modal/modal.component';
|
import { ModalComponent } from '../modal/modal.component';
|
||||||
|
@ -19,40 +20,70 @@ declare var $ :any;
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'dmps',
|
selector: 'dmps',
|
||||||
templateUrl: 'dmps.html',
|
templateUrl: 'dmps.html',
|
||||||
|
styleUrls: ['./dmp.component.css'],
|
||||||
providers: [ServerService]
|
providers: [ServerService]
|
||||||
})
|
})
|
||||||
|
|
||||||
export class DmpComponent implements OnInit{
|
export class DmpComponent 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 rowsOnPage = 10;
|
||||||
|
//public sortBy = "email";
|
||||||
|
public sortOrder = "asc";
|
||||||
|
|
||||||
|
//visibility rules for containers
|
||||||
|
tableVisible: boolean = true;
|
||||||
|
editorVisible: boolean = false;
|
||||||
|
|
||||||
|
|
||||||
|
// for tableIds
|
||||||
|
showIDs : boolean = false;
|
||||||
|
// END ALTERNATIVE
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Input() dmps: Dmp[];
|
@Input() dmps: Dmp[];
|
||||||
dmp:any;
|
dmp:any;
|
||||||
dmpResource :DataTableResource<Dmp>;
|
|
||||||
dmpIdforDatasets: string;
|
|
||||||
dmpLabelforDatasets:string;
|
|
||||||
@Input() dmpCount = 0;
|
@Input() dmpCount = 0;
|
||||||
@Input() projectsDropDown:DropdownField;
|
@Input() projectsDropDown:DropdownField;
|
||||||
@Input() dataSetVisibe:boolean;
|
@Input() dataSetVisibe:boolean;
|
||||||
@Input() projects: Project[];
|
@Input() projects: Project[];
|
||||||
|
dmpIdforDatasets: string;
|
||||||
|
dmpLabelforDatasets:string;
|
||||||
|
@ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
|
||||||
|
/*dmpResource :DataTableResource<Dmp>;
|
||||||
|
|
||||||
@ViewChild(DataTable) dmpsTable;
|
@ViewChild(DataTable) dmpsTable;
|
||||||
@ViewChild(DataTable) datasetsTable;
|
@ViewChild(DataTable) datasetsTable;
|
||||||
@ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
|
|
||||||
@ViewChild('isignOutBtn') isignOutBtn;
|
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
@ViewChild('isignOutBtn') isignOutBtn;
|
||||||
constructor(
|
constructor(
|
||||||
private serverService: ServerService,
|
private serverService: ServerService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private router: Router){
|
private router: Router){
|
||||||
this.projectsDropDown = new DropdownField();
|
this.projectsDropDown = new DropdownField();
|
||||||
this.projectsDropDown.options = [];
|
this.projectsDropDown.options = [];
|
||||||
this.projects = [];
|
//this.projects = [];
|
||||||
this.dataSetVisibe = false;
|
this.dataSetVisibe = false;
|
||||||
this.dmp = {
|
this.dmp = {
|
||||||
|
id:null,
|
||||||
label: '',
|
label: '',
|
||||||
//previous:'',
|
previous:'',
|
||||||
version:'',
|
version:'',
|
||||||
profileData:'',
|
profileData:'',
|
||||||
//profile:''
|
profile:''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,25 +95,26 @@ export class DmpComponent implements OnInit{
|
||||||
this.dmps = [];
|
this.dmps = [];
|
||||||
this.serverService.getDmpOfUser().subscribe(
|
this.serverService.getDmpOfUser().subscribe(
|
||||||
response => {
|
response => {
|
||||||
|
this.tableData = response;
|
||||||
console.log(response);
|
console.log(response);
|
||||||
response.forEach(resp => {
|
response.forEach(resp => {
|
||||||
let dmp = new Dmp();
|
// let dmp = new Dmp();
|
||||||
dmp.id = resp.id;
|
// dmp.id = resp.id;
|
||||||
dmp.label = resp.label;
|
// dmp.label = resp.label;
|
||||||
dmp.version = resp.version;
|
// dmp.version = resp.version;
|
||||||
dmp.dataset = resp.dataset;
|
// dmp.dataset = resp.dataset;
|
||||||
dmp.projectLabel = resp.project.label;
|
// dmp.projectLabel = resp.project.label;
|
||||||
dmp.projectid = resp.project.id;
|
// dmp.projectid = resp.project.id;
|
||||||
dmp.previous = resp.previous;
|
// dmp.previous = resp.previous;
|
||||||
dmp.profile = resp.profile;
|
// dmp.profile = resp.profile;
|
||||||
dmp.profileData = resp.profileData;
|
// dmp.profileData = resp.profileData;
|
||||||
this.dmps.push(dmp);
|
// this.dmps.push(dmp);
|
||||||
var params = {limit:8,offset:0, sortAsc:false}
|
// var params = {limit:8,offset:0, sortAsc:false}
|
||||||
this.afterLoad();
|
//this.afterLoad();
|
||||||
this.dmpResource.query(params).then(dmps => this.dmps = dmps);
|
//this.dmpResource.query(params).then(dmps => this.dmps = dmps);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
(err: HttpErrorResponse) => {debugger;
|
(err: HttpErrorResponse) => {
|
||||||
if (err.error instanceof Error) {
|
if (err.error instanceof Error) {
|
||||||
// A client-side or network error occurred. Handle it accordingly.
|
// A client-side or network error occurred. Handle it accordingly.
|
||||||
console.log('An error occurred:', err.error.message);
|
console.log('An error occurred:', err.error.message);
|
||||||
|
@ -113,48 +145,8 @@ export class DmpComponent implements OnInit{
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
reloadDmps(params) {
|
|
||||||
//this.dmpResource = new DataTableResource(this.dmps);
|
|
||||||
this.dmpResource.query(params).then(projects => this.dmps = projects);
|
|
||||||
}
|
|
||||||
|
|
||||||
afterLoad(){
|
CallDmps(){
|
||||||
this.dmpResource = new DataTableResource(this.dmps);
|
|
||||||
this.dmpResource.count().then(count => this.dmpCount = count);
|
|
||||||
}
|
|
||||||
|
|
||||||
filterGrid() {
|
|
||||||
var input, filter, table, tr, td, i;
|
|
||||||
input = document.getElementById("myInput");
|
|
||||||
filter = input.value.toUpperCase();
|
|
||||||
table = document.getElementById("dmps-grid");
|
|
||||||
tr = table.getElementsByTagName("tr");
|
|
||||||
for (i = 0; i < tr.length; i++) {
|
|
||||||
td = tr[i].getElementsByTagName("td")[4];
|
|
||||||
if (td) {
|
|
||||||
if (td.innerText.toUpperCase().indexOf(filter) > -1) {
|
|
||||||
tr[i].style.display = "";
|
|
||||||
} else {
|
|
||||||
tr[i].style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
SaveNewDmp(){
|
|
||||||
console.log(this.dmp, this.dmp.projectsDropDownKey);
|
|
||||||
//this.http.post('http://someurl', JSON.stringify(this.project))
|
|
||||||
|
|
||||||
this.dmp.project = {"id":this.dmp.project};
|
|
||||||
this.dmp["version"] = 1;
|
|
||||||
|
|
||||||
this.serverService.createDmpForCurrentUser(this.dmp)
|
|
||||||
.subscribe(
|
|
||||||
response =>{
|
|
||||||
console.log("response");
|
|
||||||
console.log(response);
|
|
||||||
this.dmps = [];
|
|
||||||
this.serverService.getDmpOfUser().subscribe(
|
this.serverService.getDmpOfUser().subscribe(
|
||||||
response => {
|
response => {
|
||||||
response.forEach(resp => {
|
response.forEach(resp => {
|
||||||
|
@ -166,60 +158,112 @@ SaveNewDmp(){
|
||||||
dmp.projectLabel = resp.project.label;
|
dmp.projectLabel = resp.project.label;
|
||||||
this.dmps.push(dmp);
|
this.dmps.push(dmp);
|
||||||
var params = {limit:8,offset:0, sortAsc:false}
|
var params = {limit:8,offset:0, sortAsc:false}
|
||||||
this.afterLoad();
|
//this.afterLoad();
|
||||||
this.dmpResource.query(params).then(dmps => this.dmps = dmps);
|
//this.dmpResource.query(params).then(dmps => this.dmps = dmps);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
SaveNewDmp(){
|
||||||
|
console.log(this.dmp, this.dmp.projectsDropDownKey); debugger;
|
||||||
|
//this.http.post('http://someurl', JSON.stringify(this.project))
|
||||||
|
|
||||||
|
this.dmp.project = {"id":this.dmp.project};
|
||||||
|
this.dmp["version"] = 1;
|
||||||
|
|
||||||
|
this.serverService.createDmpForCurrentUser(this.dmp)
|
||||||
|
.subscribe(
|
||||||
|
response =>{
|
||||||
|
console.log("response");
|
||||||
|
console.log(response);
|
||||||
|
this.dmps = [];
|
||||||
|
this.CallDmps();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
$("#newDmpModal").modal("hide");
|
$("#newDmpModal").modal("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
// special params:
|
SaveUpdatesDmp(){
|
||||||
translations = <DataTableTranslations>{
|
console.log(this.dmp, this.dmp.projectsDropDownKey);
|
||||||
indexColumn: 'Index column',
|
//this.http.post('http://someurl', JSON.stringify(this.project))
|
||||||
expandColumn: 'Expand column',
|
|
||||||
selectColumn: 'Select column',
|
this.dmp.project = {"id":this.dmp.project};
|
||||||
paginationLimit: 'Max results',
|
this.dmp["version"] = 1;
|
||||||
paginationRange: 'Result range'
|
|
||||||
};
|
this.serverService.updateDmpForCurrentUser(this.dmp)
|
||||||
|
.subscribe(
|
||||||
|
response =>{
|
||||||
|
console.log("response");
|
||||||
|
console.log(response);
|
||||||
|
this.dmps = [];
|
||||||
|
this.CallDmps();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
$("#newDmpModal").modal("hide");
|
||||||
|
}
|
||||||
|
|
||||||
|
SaveDmp(){ debugger;
|
||||||
|
if (this.dmp.id == null)
|
||||||
|
this.SaveNewDmp();
|
||||||
|
else
|
||||||
|
this.SaveUpdatesDmp();
|
||||||
|
}
|
||||||
|
|
||||||
signOut() {
|
signOut() {
|
||||||
this.serverService.logOut();
|
this.serverService.logOut();
|
||||||
}
|
}
|
||||||
|
|
||||||
selectDmp(rowEvent){
|
selectDmp(item){
|
||||||
this.dmpIdforDatasets = rowEvent.row.item.id;
|
this.dmpIdforDatasets = item.id;
|
||||||
this.dmpLabelforDatasets = rowEvent.row.item.label;
|
this.dmpLabelforDatasets = item.label;
|
||||||
if(this.dataSetVisibe == false)
|
if(this.dataSetVisibe == false)
|
||||||
this.dataSetVisibe = true;
|
this.dataSetVisibe = true;
|
||||||
else
|
else
|
||||||
this.datasetsComponent.getDatasetForDmpMethod(rowEvent.row.item.id);
|
this.datasetsComponent.getDatasetForDmpMethod(item.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
editRow(item){
|
editRow(item, event){
|
||||||
|
if (event.toElement.id == "editDMP"){
|
||||||
this.dmp.label = item.label;
|
this.dmp.label = item.label;
|
||||||
this.dmp.previous = item.previous;
|
this.dmp.previous = item.previous;
|
||||||
this.dmp.version = item.version;
|
this.dmp.version = item.version;
|
||||||
this.dmp.profile = item.profile;
|
this.dmp.profile = item.profile;
|
||||||
this.dmp.profileData = item.profileData;
|
this.dmp.profileData = item.profileData;
|
||||||
this.dmp.id = item.id;
|
this.dmp.id = item.id;
|
||||||
this.dmp.project = item.projectid;
|
this.dmp.project = item.project.id;
|
||||||
this.dmp.projectid = item.projectid;
|
|
||||||
$("#newDmpModal").modal("show");
|
$("#newDmpModal").modal("show");
|
||||||
|
}
|
||||||
|
if(event.toElement.id == "changeVersionDMP"){
|
||||||
|
this.dmp.label = item.label;
|
||||||
|
this.dmp.previous = item.previous;
|
||||||
|
this.dmp.version = item.version;
|
||||||
|
this.dmp.profile = item.profile;
|
||||||
|
this.dmp.profileData = item.profileData;
|
||||||
|
this.dmp.id = item.id;
|
||||||
|
this.dmp.project = item.project.id;
|
||||||
|
$("#newVersionDmpModal").modal("show");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(event.toElement.id == "showDatasets"){
|
||||||
|
this.selectDmp(item);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
newDmp(item){
|
newDmp(item){
|
||||||
this.dmp.label = "";
|
this.dmp.label = "";
|
||||||
//this.dmp.previous = "";
|
this.dmp.previous = "";
|
||||||
this.dmp.version = "";
|
this.dmp.version = "";
|
||||||
// this.dmp.profile = "";
|
this.dmp.profile = "";
|
||||||
this.dmp.profileData = "";
|
this.dmp.profileData = "";
|
||||||
this.dmp.project = "";
|
this.dmp.project = "";
|
||||||
$("#newDmpModal").modal("show");
|
$("#newDmpModal").modal("show");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
refreshTable(){
|
||||||
|
this.CallDmps();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
|
//import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
|
||||||
|
import {DataTableModule} from 'angular2-datatable';
|
||||||
import { DmpComponent } from './dmp.component';
|
import { DmpComponent } from './dmp.component';
|
||||||
|
|
||||||
|
import { DmpTableFilterPipe } from '../pipes/dmp-table-filter.pipe';
|
||||||
|
import { DmpVersionFilterPipe } from '../pipes/dmp-version-filter.pipe';
|
||||||
|
|
||||||
import { DmpRoutingModule } from './dmp-routing.module';
|
import { DmpRoutingModule } from './dmp-routing.module';
|
||||||
import { DatasetsModule } from '../datasets/dataset.module';
|
import { DatasetsModule } from '../datasets/dataset.module';
|
||||||
|
|
||||||
|
@ -17,6 +20,8 @@ import { DatasetsModule } from '../datasets/dataset.module';
|
||||||
DatasetsModule
|
DatasetsModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
|
DmpTableFilterPipe,
|
||||||
|
DmpVersionFilterPipe,
|
||||||
DmpComponent
|
DmpComponent
|
||||||
],
|
],
|
||||||
providers: [ ]
|
providers: [ ]
|
||||||
|
|
|
@ -1,63 +1,131 @@
|
||||||
<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
|
<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
|
||||||
|
|
||||||
<div style="margin: auto; max-width: 1000px; margin-top:50px">
|
|
||||||
<div>
|
<table class="table table-striped" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter"
|
||||||
<span>Filter: </span>
|
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||||
<input type="text" id="myInput" (keyup)="filterGrid()" placeholder="Search for projects.." title="Type in a name">
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th colspan="1">
|
||||||
|
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
|
||||||
|
<input class="form-control" [(ngModel)]="versionFilter" placeholder='Filter' />
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<button class="btn btn-default" (click)="refreshTable($event)">
|
||||||
|
<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="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>Actions </mfDefaultSorter>
|
||||||
|
</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>
|
||||||
|
<td>{{dmp?.label}}</td>
|
||||||
|
<td>{{dmp?.version}}</td>
|
||||||
|
<td>{{dmp?.previous}}</td>
|
||||||
|
<td>{{dmp?.project?.label}}</td>
|
||||||
|
<td>{{dmp?.description}}</td>
|
||||||
|
<td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit DMP" id="editDMP"></i>
|
||||||
|
<i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i>
|
||||||
|
<i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete DMP"></i>
|
||||||
|
<i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5">
|
||||||
|
<button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
|
||||||
|
<mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
<!--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">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Create New DMP</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form #newProjectForm="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" name="label">
|
||||||
|
</div>
|
||||||
|
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||||
|
<select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.project" [name]="projectsDropDown" #datasetfield>
|
||||||
|
<option *ngFor="let opt of projectsDropDown.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" name = "previous">
|
||||||
|
</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" name = "version">
|
||||||
|
</div>
|
||||||
|
<!-- <div class="form-group">
|
||||||
|
<label for="reference-text" class="form-control-label">Profile Data:</label>
|
||||||
|
<textarea class="form-control" id="reference-text" [(ngModel)]= "dmp.profileData" name = "profileData"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="start-date" class="form-control-label">Start Date:</label>
|
||||||
|
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp.startDate" name = "startDate">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="end-date" class="form-control-label">End Date:</label>
|
||||||
|
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp.endDate" name = "endDate">
|
||||||
|
</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>
|
||||||
<data-table id="dmps-grid" headerTitle="My Dmps" [items]="dmps" [itemCount]="dmpCount" (reload)="reloadDmps($event)" [limit]="8"
|
|
||||||
[sortBy]="'label'" [sortAsc]="true" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [translations]="translations"
|
|
||||||
[indexColumnHeader]="'#'" [selectOnRowClick]="true" (rowClick)="selectDmp($event)">
|
|
||||||
|
|
||||||
<data-table-column [property]="'label'" [header]="'Label'" [sortable]="true">
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column [property]="'projectLabel'" [header]="'project'" [sortable]="true">
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column [property]="'previous'" [header]="'Previous'" [sortable]="true">
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column [property]="'version'" [header]="'Version'" [sortable]="true">
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column [property]="'profileData'" [header]="'Profile Data'" [sortable]="true">
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column [property]="'profile'" [header]="'Profile'" [sortable]="true">
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column [property]="'active'" [header]="'Status'" [width]="100" [resizable]="true">
|
|
||||||
<template #dataTableHeader let-item="item">
|
|
||||||
<span>Active</span>
|
|
||||||
</template>
|
|
||||||
<template #dataTableCell let-item="item">
|
|
||||||
<span style="color: grey">
|
|
||||||
<span class="fa fa-check" *ngIf="item.active"></span>
|
|
||||||
<span class="fa fa-times" *ngIf="!item.active"></span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</data-table-column>
|
|
||||||
<data-table-column header="Actions">
|
|
||||||
<template #dataTableHeader let-item="item">
|
|
||||||
<i>Actions</i>
|
|
||||||
</template>
|
|
||||||
<template #dataTableCell let-item="item">
|
|
||||||
<a class="editGridColumn" (click)="editRow(item)"><i class="fa fa-pencil fa-fw"></i></a>
|
|
||||||
<!--data-toggle="modal" data-target="#exampleModalDmps" -->
|
|
||||||
</template>
|
|
||||||
</data-table-column>
|
|
||||||
</data-table>
|
|
||||||
<div style="margin-top: 10px">
|
|
||||||
<b>Selected:</b>
|
|
||||||
<!-- <span *ngIf="dmpsTable.selectedRow == null"><i>No item selected</i></span>
|
|
||||||
<span [textContent]="dmpsTable.selectedRow && dmpsTable.selectedRow.item.name"></span> -->
|
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-info" (click)="newDmp(item)">New Dmp</button>
|
|
||||||
<!-- data-toggle="modal" data-target="#newDmpModal" -->
|
|
||||||
|
|
||||||
<!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
|
|
||||||
<option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
|
||||||
</select> -->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
|
|
||||||
|
<!--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-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
|
@ -68,71 +136,39 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form #newProjectForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
<form #newProjectForm="ngForm" (ngSubmit)="SaveNewDmp()">
|
||||||
|
<div class="form-group" hidden>
|
||||||
<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" name="label">
|
||||||
|
</div>
|
||||||
<label for="recipient-name" class="col-form-label">Project:</label>
|
<label for="recipient-name" class="col-form-label">Project:</label>
|
||||||
<select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.project" [name]="projectsDropDown" #datasetfield>
|
<select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.project" [name]="projectsDropDown" #datasetfield>
|
||||||
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
<option *ngFor="let opt of projectsDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group" hidden>
|
||||||
<label for="label-name" class="form-control-label">Previous:</label>
|
<label for="label-name" class="form-control-label">Previous:</label>
|
||||||
<input type="text" class="form-control" id="label-previous" [(ngModel)]="dmp.previous" name="previous">
|
<input type="text" class="form-control" id="label-previous" [(ngModel)]="dmp.previous" name="previous">
|
||||||
</div>
|
</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)]="dmp.label" name="label">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
<label for="abbreviation-text" class="form-control-label">Version:</label>
|
||||||
<input class="form-control" id="abbreviation-text" [(ngModel)]="dmp.version" name="version">
|
<input class="form-control" id="abbreviation-text" [(ngModel)]="dmp.version" name="version">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="reference-text" class="form-control-label">Profile Data:</label>
|
|
||||||
<textarea class="form-control" id="reference-text" [(ngModel)]="dmp.profileData" name="profileData"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
<span style="font-weight: bold;">Profile</span>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="uri-text" class="form-control-label">Label:</label>
|
|
||||||
<input class="form-control" id="uri-text" [(ngModel)]="dmp.profile" name="profile">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="uri-text" class="form-control-label">Definition:</label>
|
|
||||||
<input class="form-control" id="uri-text" [(ngModel)]="dmp.profileDefinition" name="profileDefinition">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="form-group">
|
|
||||||
<label for="start-date" class="form-control-label">Start Date:</label>
|
|
||||||
<input class="form-control" id="startDate-date" [(ngModel)]= "dmp.startDate" name = "startDate">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="end-date" class="form-control-label">End Date:</label>
|
|
||||||
<input class="form-control" id="endDate-date" [(ngModel)]= "dmp.endDate" name = "endDate">
|
|
||||||
</div> -->
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="code-name" class="form-control-label">Code:</label>
|
|
||||||
<input type="text" class="form-control" id="code-name" disabled>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||||
<button type="submit" class="btn btn-primary" (click)="SaveNewDmp();">Save Dmp</button>
|
<button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--Modal for DMPs-->
|
<!--Modal for DMPs-->
|
||||||
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
|
<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
|
||||||
|
|
||||||
<!--DATASET TABLE-->
|
<!--DATASET TABLE-->
|
||||||
<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets] = "dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
|
<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
|
||||||
|
|
||||||
<a href="#" (click)="signOut();" #isignOutBtn>Sign out</a>
|
<a href="#" (click)="signOut();" #isignOutBtn >Sign out</a>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
|
@ -36,17 +36,36 @@
|
||||||
<p>Form value: {{ form.value | json }}</p>
|
<p>Form value: {{ form.value | json }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div ngDraggable style="position:fixed; top:60;">
|
||||||
|
<div class="panel panel-default" >
|
||||||
|
<div class="panel-heading" data-toggle="collapse" href="#collapse-panel">
|
||||||
|
<h4>Table of contents:</h4>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body" id="collapse-panel" class="panel-collapse">
|
||||||
|
<div *ngIf="dataModel.groups.length">
|
||||||
|
<toc [dataModel]="dataModel"></toc>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<h4>On this page:</h4>
|
<h4>On this page:</h4>
|
||||||
<div *ngIf="dataModel.groups.length">
|
<div *ngIf="dataModel.groups.length">
|
||||||
<toc [dataModel]="dataModel"></toc>
|
<toc [dataModel]="dataModel"></toc>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<!-- pagination -->
|
<!-- pagination -->
|
||||||
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
|
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
|
||||||
|
|
|
@ -13,9 +13,22 @@ import { GroupBase } from './dynamic-form-group/group-base';
|
||||||
import { PaginationService } from '../../app/services/pagination.service';
|
import { PaginationService } from '../../app/services/pagination.service';
|
||||||
import { TokenService, TokenProvider } from '../services/token.service';
|
import { TokenService, TokenProvider } from '../services/token.service';
|
||||||
|
|
||||||
|
import { AngularDraggableModule } from 'angular2-draggable';
|
||||||
|
|
||||||
import './../../assets/xml2json.min.js';
|
import './../../assets/xml2json.min.js';
|
||||||
declare var X2JS: any;
|
declare var X2JS: any;
|
||||||
|
|
||||||
|
|
||||||
|
var flatten = require('flat');
|
||||||
|
|
||||||
|
|
||||||
|
import * as $ from '../../../node_modules/jquery/dist/jquery'
|
||||||
|
|
||||||
|
import * as scroll from '../../assets/jquery.scrollTo.min.js';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'dynamic-form',
|
selector: 'dynamic-form',
|
||||||
templateUrl: './dynamic-form.component.html',
|
templateUrl: './dynamic-form.component.html',
|
||||||
|
@ -31,11 +44,14 @@ export class DynamicFormComponent implements OnInit {
|
||||||
@Input() pagination: any = {};
|
@Input() pagination: any = {};
|
||||||
id:string;
|
id:string;
|
||||||
datasetId:string;
|
datasetId:string;
|
||||||
datasetProperties:string;
|
//datasetProperties:string;
|
||||||
|
|
||||||
private fragment: string;
|
private fragment: string;
|
||||||
xml2jsonOBJ: any;
|
xml2jsonOBJ: any;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
|
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
|
||||||
private route: ActivatedRoute, private pagerService: PaginationService, private tokenService : TokenService) {
|
private route: ActivatedRoute, private pagerService: PaginationService, private tokenService : TokenService) {
|
||||||
this.form = this.qcs.toFormGroup(new Array(), new Array());
|
this.form = this.qcs.toFormGroup(new Array(), new Array());
|
||||||
|
@ -57,10 +73,10 @@ export class DynamicFormComponent implements OnInit {
|
||||||
let sub = this.route.params.subscribe(params => {
|
let sub = this.route.params.subscribe(params => {
|
||||||
this.id = params.id;
|
this.id = params.id;
|
||||||
this.datasetId = params.datasetId;
|
this.datasetId = params.datasetId;
|
||||||
this.datasetProperties = params.datasetProperties
|
//this.datasetProperties = params.datasetProperties
|
||||||
});
|
});
|
||||||
|
|
||||||
this.serverService.getDatsetsProfile(this.id).subscribe(
|
this.serverService.getDatasetProfileByID(this.id).subscribe(
|
||||||
|
|
||||||
response => {
|
response => {
|
||||||
|
|
||||||
|
@ -132,8 +148,53 @@ export class DynamicFormComponent implements OnInit {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
this.serverService.getDatasetByID(this.datasetId).subscribe(
|
||||||
|
(data) => {
|
||||||
|
|
||||||
|
if(data.properties){
|
||||||
|
console.log("Found already submitted form, loading that one!");
|
||||||
|
|
||||||
|
//console.log(data.properties)
|
||||||
|
//console.log(JSON.parse(data.properties))
|
||||||
|
|
||||||
|
let formValues = JSON.parse(data.properties);
|
||||||
|
|
||||||
|
var flatList = flatten(formValues);
|
||||||
|
|
||||||
|
this.patchForm(flatList);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
(err) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
scrollToElemID(elemID){
|
||||||
|
scroll("#"+elemID);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private patchForm(flatList : any){
|
||||||
|
|
||||||
|
for (var prop in flatList) {
|
||||||
|
if (flatList.hasOwnProperty(prop)) {
|
||||||
|
if(prop.endsWith('.id')||prop.endsWith('.answer')||prop.endsWith('.value')) continue;
|
||||||
|
//console.log("updating value of "+prop +" to "+flatList[prop].valueOf())
|
||||||
|
this.form.get(prop).setValue(flatList[prop].valueOf());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//this.form.get("namingConventionGroup.nonamingConventionA213").setValue("TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ngAfterViewChecked(): void { //navigate to certain section of the page
|
ngAfterViewChecked(): void { //navigate to certain section of the page
|
||||||
try {
|
try {
|
||||||
document.querySelector('#' + this.fragment).scrollIntoView();
|
document.querySelector('#' + this.fragment).scrollIntoView();
|
||||||
|
@ -141,6 +202,30 @@ export class DynamicFormComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
|
|
||||||
|
|
||||||
|
this.serverService.getDatasetByID(this.datasetId).subscribe(
|
||||||
|
(data) => {
|
||||||
|
|
||||||
|
//is xml, so transform them to xml (it's json)
|
||||||
|
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
|
||||||
|
data.properties = JSON.stringify(this.form.value);
|
||||||
|
|
||||||
|
this.serverService.setDataset(data).subscribe( (data) => {
|
||||||
|
console.log("Updated dataset");
|
||||||
|
|
||||||
|
//VALE EDW NA SE PIGAINEI PISW KAI NA SOU VGAZEI ENA MHNYMA SUCCESS... (to success tha to valw egw an thes)
|
||||||
|
|
||||||
|
},
|
||||||
|
(err) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
(err) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
this.payLoad = JSON.stringify(this.form.value);
|
this.payLoad = JSON.stringify(this.form.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,10 +4,11 @@
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
|
<div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
|
||||||
<ul>
|
<ul>
|
||||||
<li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
|
<li>
|
||||||
|
<a (click)='scrollToElemID(group.key)'>{{group.title}}</a>
|
||||||
<ul *ngFor="let field of group.groupFields">
|
<ul *ngFor="let field of group.groupFields">
|
||||||
<li *ngIf="field.visible == 'true'">
|
<li *ngIf="field.visible == 'true'">
|
||||||
<a class="nav-link" [routerLink]="['.']" fragment="{{field.key}}">{{field.label}}</a>
|
<a (click)='scrollToElemID(field.key)'>{{field.label}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -1,12 +1,17 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
import { DataModel } from '../../entities/DataModel';
|
import { DataModel } from '../../entities/DataModel';
|
||||||
|
|
||||||
|
//import * as $ from '../../../../node_modules/jquery/dist/jquery'
|
||||||
|
|
||||||
|
import * as scroll from '../../../assets/jquery.scrollTo.min.js';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'toc',
|
selector: 'toc',
|
||||||
templateUrl: '/toc.component.html',
|
templateUrl: '/toc.component.html',
|
||||||
providers: []
|
providers: []
|
||||||
})
|
})
|
||||||
export class TocComponent implements OnInit{
|
export class TocComponent implements OnInit{
|
||||||
|
|
||||||
@Input() dataModel: DataModel;
|
@Input() dataModel: DataModel;
|
||||||
private headers = new Array();
|
private headers = new Array();
|
||||||
|
|
||||||
|
@ -18,4 +23,9 @@ export class TocComponent implements OnInit{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollToElemID(elemID){
|
||||||
|
console.log("going to id:"+elemID)
|
||||||
|
scroll("#"+elemID);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -98,6 +98,7 @@ export class ModalComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
showDatasets(dmpId, event) {
|
showDatasets(dmpId, event) {
|
||||||
|
debugger;
|
||||||
this.dataSetVisibe = true;
|
this.dataSetVisibe = true;
|
||||||
$("#exampleModalDmps").modal("hide");
|
$("#exampleModalDmps").modal("hide");
|
||||||
this.show = false;
|
this.show = false;
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
import * as _ from "lodash";
|
||||||
|
import {Pipe, PipeTransform} from "@angular/core";
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: "dmpTableFilter"
|
||||||
|
})
|
||||||
|
export class DatasetTableFilterPipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(array: any[], query: string): any {
|
||||||
|
|
||||||
|
if (query) {
|
||||||
|
|
||||||
|
return _.filter(array, row => {
|
||||||
|
if (row.uri == null) row.uri = "";
|
||||||
|
if (row.label == null) row.label = "";
|
||||||
|
if (row.id == null) row.id = "";
|
||||||
|
return (
|
||||||
|
|
||||||
|
row.label.indexOf(query) > -1 ||
|
||||||
|
|
||||||
|
//row.version == query ||
|
||||||
|
row.id.indexOf(query) > -1
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
import * as _ from "lodash";
|
||||||
|
import {Pipe, PipeTransform} from "@angular/core";
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: "dmpTableFilter"
|
||||||
|
})
|
||||||
|
export class DmpTableFilterPipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(array: any[], query: string): any {
|
||||||
|
|
||||||
|
if (query) {
|
||||||
|
|
||||||
|
return _.filter(array, row => {
|
||||||
|
if (row.uri == null) row.uri = "";
|
||||||
|
if (row.label == null) row.label = "";
|
||||||
|
if (row.id == null) row.id = "";
|
||||||
|
return (
|
||||||
|
|
||||||
|
row.label.indexOf(query) > -1 ||
|
||||||
|
|
||||||
|
//row.version == query ||
|
||||||
|
row.id.indexOf(query) > -1
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,22 @@
|
||||||
|
import * as _ from "lodash";
|
||||||
|
import {Pipe, PipeTransform} from "@angular/core";
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: "dmpVersionFilter"
|
||||||
|
})
|
||||||
|
export class DmpVersionFilterPipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(array: any[], version: number): any {
|
||||||
|
|
||||||
|
if (version) {
|
||||||
|
|
||||||
|
return _.filter(array, row => {
|
||||||
|
return (
|
||||||
|
row.version == version
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
return array;
|
||||||
|
}
|
||||||
|
}
|
|
@ -16,16 +16,24 @@ export class RestBase {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* protocol: string = "http";
|
<<<<<<< HEAD
|
||||||
|
/*
|
||||||
|
=======
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
|
protocol: string = "http";
|
||||||
hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";//
|
hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";//
|
||||||
port: number = 8080;//8080;//
|
port: number = 8080;//8080;//
|
||||||
webappname: string = "dmp-backend";//"dmp-backend-new";//*/
|
webappname: string = "dmp-backend";//"dmp-backend-new";//
|
||||||
|
<<<<<<< HEAD
|
||||||
|
*/
|
||||||
|
=======
|
||||||
|
>>>>>>> 573e1fd92cc726405b415b5214ed96fa1a0ce420
|
||||||
|
|
||||||
|
|
||||||
protocol: string = "http";
|
/*protocol: string = "http";
|
||||||
hostname: string = "dionysus.di.uoa.gr" ;
|
hostname: string = "dionysus.di.uoa.gr" ;
|
||||||
port: number = 7070;
|
port: number = 7070;
|
||||||
webappname: string = "dmp-backend";
|
webappname: string = "dmp-backend";*/
|
||||||
|
|
||||||
|
|
||||||
proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";
|
proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";
|
||||||
|
|
|
@ -46,10 +46,14 @@ export class ServerService {
|
||||||
return this.restBase.get("getAllDatasets");
|
return this.restBase.get("getAllDatasets");
|
||||||
}
|
}
|
||||||
|
|
||||||
public getAllDatasetIDs(datasetId: string){
|
public getDatasetByID(datasetId: string){
|
||||||
return this.restBase.get("dataset/"+datasetId);
|
return this.restBase.get("datasets/"+datasetId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public setDataset(dataset){
|
||||||
|
return this.restBase.post("dataset/update", dataset);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
public getAllDmps(){
|
public getAllDmps(){
|
||||||
return this.restBase.get("dmp/getAll");
|
return this.restBase.get("dmp/getAll");
|
||||||
|
@ -109,8 +113,12 @@ export class ServerService {
|
||||||
return this.restBase.post("dmp/createofuser", data);
|
return this.restBase.post("dmp/createofuser", data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public updateDmpForCurrentUser(data:any){
|
||||||
|
return this.restBase.post("dmp/update", data);
|
||||||
|
}
|
||||||
|
|
||||||
public getDatasetForDmp(data:any){
|
public getDatasetForDmp(data:any){
|
||||||
return this.restBase.post("dmp/getdatasets", data);
|
return this.restBase.post("/dmp/getdatasets", data);
|
||||||
}
|
}
|
||||||
|
|
||||||
public createDatasetForDmp(data:any){
|
public createDatasetForDmp(data:any){
|
||||||
|
@ -121,14 +129,10 @@ public getAllDatsetsProfile(){
|
||||||
return this.restBase.get("datasetprofile/getAll");
|
return this.restBase.get("datasetprofile/getAll");
|
||||||
}
|
}
|
||||||
|
|
||||||
public getDatsetsProfile(id){
|
public getDatasetProfileByID(id){
|
||||||
return this.restBase.get("datasetprofiles/"+id);
|
return this.restBase.get("datasetprofiles/"+id);
|
||||||
}
|
}
|
||||||
|
|
||||||
public updateDatsetsProfile(data:any){
|
|
||||||
return this.restBase.post("dataset/update", data);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
logOut() {
|
logOut() {
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { Component } from '@angular/core';
|
||||||
template: `
|
template: `
|
||||||
<ul class="nav nav-tabs">
|
<ul class="nav nav-tabs">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" routerLink="dmps" routerLinkActive="active">My Dmps</a>
|
<a class="nav-link" routerLink="dmps" routerLinkActive="active">DMPs</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link active" routerLink="projects" routerLinkActive="active">Projects</a>
|
<a class="nav-link active" routerLink="projects" routerLinkActive="active">Projects</a>
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
|
||||||
|
* Licensed under MIT
|
||||||
|
* @author Ariel Flesler
|
||||||
|
* @version 2.1.2
|
||||||
|
*/
|
||||||
|
;(function(f){"use strict";"function"===typeof define&&define.amd?define(["jquery"],f):"undefined"!==typeof module&&module.exports?module.exports=f(require("jquery")):f(jQuery)})(function($){"use strict";function n(a){return!a.nodeName||-1!==$.inArray(a.nodeName.toLowerCase(),["iframe","#document","html","body"])}function h(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}var p=$.scrollTo=function(a,d,b){return $(window).scrollTo(a,d,b)};p.defaults={axis:"xy",duration:0,limit:!0};$.fn.scrollTo=function(a,d,b){"object"=== typeof d&&(b=d,d=0);"function"===typeof b&&(b={onAfter:b});"max"===a&&(a=9E9);b=$.extend({},p.defaults,b);d=d||b.duration;var u=b.queue&&1<b.axis.length;u&&(d/=2);b.offset=h(b.offset);b.over=h(b.over);return this.each(function(){function k(a){var k=$.extend({},b,{queue:!0,duration:d,complete:a&&function(){a.call(q,e,b)}});r.animate(f,k)}if(null!==a){var l=n(this),q=l?this.contentWindow||window:this,r=$(q),e=a,f={},t;switch(typeof e){case "number":case "string":if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(e)){e= h(e);break}e=l?$(e):$(e,q);case "object":if(e.length===0)return;if(e.is||e.style)t=(e=$(e)).offset()}var v=$.isFunction(b.offset)&&b.offset(q,e)||b.offset;$.each(b.axis.split(""),function(a,c){var d="x"===c?"Left":"Top",m=d.toLowerCase(),g="scroll"+d,h=r[g](),n=p.max(q,c);t?(f[g]=t[m]+(l?0:h-r.offset()[m]),b.margin&&(f[g]-=parseInt(e.css("margin"+d),10)||0,f[g]-=parseInt(e.css("border"+d+"Width"),10)||0),f[g]+=v[m]||0,b.over[m]&&(f[g]+=e["x"===c?"width":"height"]()*b.over[m])):(d=e[m],f[g]=d.slice&& "%"===d.slice(-1)?parseFloat(d)/100*n:d);b.limit&&/^\d+$/.test(f[g])&&(f[g]=0>=f[g]?0:Math.min(f[g],n));!a&&1<b.axis.length&&(h===f[g]?f={}:u&&(k(b.onAfterFirst),f={}))});k(b.onAfter)}})};p.max=function(a,d){var b="x"===d?"Width":"Height",h="scroll"+b;if(!n(a))return a[h]-$(a)[b.toLowerCase()]();var b="client"+b,k=a.ownerDocument||a.document,l=k.documentElement,k=k.body;return Math.max(l[h],k[h])-Math.min(l[b],k[b])};$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(a){return $(a.elem)[a.prop]()}, set:function(a){var d=this.get(a);if(a.options.interrupt&&a._last&&a._last!==d)return $(a.elem).stop();var b=Math.round(a.now);d!==b&&($(a.elem)[a.prop](b),a._last=this.get(a))}};return p});
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -4,7 +4,8 @@
|
||||||
"outDir": "../out-tsc/app",
|
"outDir": "../out-tsc/app",
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
"module": "es2015",
|
"module": "es2015",
|
||||||
"types": []
|
"types": ["node"],
|
||||||
|
"typeRoots": [ "../node_modules/@types" ]
|
||||||
},
|
},
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"test.ts",
|
"test.ts",
|
||||||
|
|
|
@ -3,3 +3,4 @@ declare var module: NodeModule;
|
||||||
interface NodeModule {
|
interface NodeModule {
|
||||||
id: string;
|
id: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue