From 573e1fd92cc726405b415b5214ed96fa1a0ce420 Mon Sep 17 00:00:00 2001 From: annampak Date: Tue, 31 Oct 2017 19:59:27 +0200 Subject: [PATCH] New Tables, new action buttons, new filter --- dmp-frontend/package-lock.json | 11 +- dmp-frontend/package.json | 1 + dmp-frontend/src/app/app.module.ts | 5 +- .../src/app/datasets/dataset.component.css | 39 +++ .../src/app/datasets/dataset.component.ts | 86 +++---- dmp-frontend/src/app/datasets/dataset.html | 110 ++++++--- .../src/app/datasets/dataset.module.ts | 6 +- dmp-frontend/src/app/dmps/dmp.component.css | 39 +++ dmp-frontend/src/app/dmps/dmp.component.ts | 230 +++++++++++------- dmp-frontend/src/app/dmps/dmp.module.ts | 9 +- dmp-frontend/src/app/dmps/dmps.html | 206 +++++++++------- .../app/pipes/dataset-table-filter.pipe.ts | 29 +++ .../src/app/pipes/dmp-table-filter.pipe.ts | 29 +++ .../src/app/pipes/dmp-version-filter.pipe.ts | 22 ++ dmp-frontend/src/app/services/rest-base.ts | 8 +- .../src/app/services/server.service.ts | 4 + dmp-frontend/src/app/tabs/tabs.component.ts | 2 +- 17 files changed, 549 insertions(+), 287 deletions(-) create mode 100644 dmp-frontend/src/app/datasets/dataset.component.css create mode 100644 dmp-frontend/src/app/dmps/dmp.component.css create mode 100644 dmp-frontend/src/app/pipes/dataset-table-filter.pipe.ts create mode 100644 dmp-frontend/src/app/pipes/dmp-table-filter.pipe.ts create mode 100644 dmp-frontend/src/app/pipes/dmp-version-filter.pipe.ts diff --git a/dmp-frontend/package-lock.json b/dmp-frontend/package-lock.json index d4ec05e5d..bf3c5c5d4 100644 --- a/dmp-frontend/package-lock.json +++ b/dmp-frontend/package-lock.json @@ -581,6 +581,14 @@ "typescript": "2.3.4" } }, + "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" + } + }, "ansi-escapes": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz", @@ -4900,8 +4908,7 @@ "lodash": { "version": "4.17.4", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", - "dev": true + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" }, "lodash._arraycopy": { "version": "3.0.0", diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json index 46f4eb9c6..5dc879ded 100644 --- a/dmp-frontend/package.json +++ b/dmp-frontend/package.json @@ -24,6 +24,7 @@ "angular-2-data-table": "^0.1.2", "angular-4-data-table-bootstrap-4": "^0.2.0", "angular-google-signin": "^0.1.5", + "angular2-datatable": "^0.6.0", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "jquery": "^3.2.1", diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index 5e2e28c5a..94a5697c9 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -4,7 +4,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { HttpModule } from '@angular/http'; 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 { RestBase } from './services/rest-base'; diff --git a/dmp-frontend/src/app/datasets/dataset.component.css b/dmp-frontend/src/app/datasets/dataset.component.css new file mode 100644 index 000000000..7b60f54c0 --- /dev/null +++ b/dmp-frontend/src/app/datasets/dataset.component.css @@ -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; +} \ No newline at end of file diff --git a/dmp-frontend/src/app/datasets/dataset.component.ts b/dmp-frontend/src/app/datasets/dataset.component.ts index 2bb5d26b8..6df5d094c 100644 --- a/dmp-frontend/src/app/datasets/dataset.component.ts +++ b/dmp-frontend/src/app/datasets/dataset.component.ts @@ -5,7 +5,8 @@ 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, 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 { Param } from '../entities/model/param'; @@ -14,29 +15,38 @@ declare var $: any; @Component({ selector: 'datasets-table', templateUrl: 'dataset.html', - // template: ` - //

Projects

- - // - - // - // `, + styleUrls: ['./dataset.component.css'], providers: [ServerService] }) 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; @Input() datasets: Dataset[]; @Input() datasetProfileDropDown: DropdownField; - datasetResource: DataTableResource; @Input() datasetCount = 0; @Input() dmpIdforDatasets: string; @Input() dmpLabelforDatasets: string; @@ -80,26 +90,10 @@ export class DatasetsComponent implements OnInit { ngOnInit() { //this.projects = this.serverService.getDummyProjects(); this.datasets = []; - console.log(this.dmpIdforDatasets); + console.log(this.dmpIdforDatasets);debugger; this.serverService.getDatasetForDmp({ "id": this.dmpIdforDatasets }).subscribe( response => { - - console.log("response"); - console.log(response); - response.forEach(resp => { - - let dt = new Dataset(); - dt.id = resp.id; - dt.name = resp.label; - dt.uriDataset = resp.uri; - dt.dmp = this.dmpLabelforDatasets; //to pairnw apo to datatable tou dmp - dt.profile = resp.profile.label; - dt.profileId = resp.profile.id; - this.datasets.push(dt); - var params = { limit: 8, offset: 0, sortAsc: false } - this.afterLoad(); - this.datasetResource.query(params).then(datasets => this.datasets = datasets); - }); + this.tableData = response; } ); @@ -119,16 +113,6 @@ export class DatasetsComponent implements OnInit { ) } - reloadDatasets(params) { - // this.datasetResource = new DataTableResource(this.datasets); - this.datasetResource.query(params).then(datasets => this.datasets = datasets); - } - - afterLoad() { - this.datasetResource = new DataTableResource(this.datasets); - this.datasetResource.count().then(count => this.datasetCount = count); - } - selectDataset(item) { this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profileId, datasetId:item.id, datasetProperties:item.properties}])); } @@ -183,22 +167,11 @@ export class DatasetsComponent implements OnInit { dt.profile = resp.profile.label; dt.profileId = resp.profile.id; this.datasets.push(dt); - var params = { limit: 8, offset: 0, sortAsc: false } - this.afterLoad(); - this.datasetResource.query(params).then(datasets => this.datasets = datasets); }); } ); } - // special params: - translations = { - indexColumn: 'Index column', - expandColumn: 'Expand column', - selectColumn: 'Select column', - paginationLimit: 'Max results', - paginationRange: 'Result range' - }; getDatasetForDmpMethod(dmpid) { this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe( @@ -214,9 +187,6 @@ export class DatasetsComponent implements OnInit { dt.name = resp.label; dt.uriDataset = resp.uri; this.datasets.push(dt); - var params = { limit: 8, offset: 0, sortAsc: false } - this.afterLoad(); - this.datasetResource.query(params).then(datasets => this.datasets = datasets); }); } ); diff --git a/dmp-frontend/src/app/datasets/dataset.html b/dmp-frontend/src/app/datasets/dataset.html index 7d9ef8edd..eeb3a2544 100644 --- a/dmp-frontend/src/app/datasets/dataset.html +++ b/dmp-frontend/src/app/datasets/dataset.html @@ -1,43 +1,75 @@
- - - - - - - - - - - - - - - - - - - - -
- - -
- -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+ ID + + Label + + DMP + + Uri + + Profile + + Description + + Actions +
No elements
{{dmp.id}}{{dmp?.label}}{{dmp?.version}}{{dmp?.previous}}{{dmp?.project?.label}}{{dmp?.description}} + +
+ + +
+ +