From cb6572c72eaaf2337b42a466b02f67d6ca961d5c Mon Sep 17 00:00:00 2001
From: annampak <annampak@hotmail.com>
Date: Wed, 18 Oct 2017 19:30:39 +0300
Subject: [PATCH] new page dataset, data table 4

---
 dmp-frontend/src/app/app-routing.module.ts    |  1 +
 dmp-frontend/src/app/app.module.ts            |  6 +-
 .../app/datasets/dataset-routing.module.ts    | 22 +++++
 .../src/app/datasets/dataset.component.ts     | 93 +++++++++++++++++++
 dmp-frontend/src/app/datasets/dataset.html    | 46 +++++++++
 .../src/app/datasets/dataset.module.ts        | 24 +++++
 .../src/app/entities/model/dataset.ts         |  6 ++
 .../src/app/entities/model/project.ts         |  2 +
 dmp-frontend/src/app/projects/project.css     | 16 ++++
 dmp-frontend/src/app/projects/project.html    | 13 ++-
 .../src/app/projects/project.module.ts        |  2 +-
 .../src/app/projects/projects.component.ts    |  8 +-
 12 files changed, 229 insertions(+), 10 deletions(-)
 create mode 100644 dmp-frontend/src/app/datasets/dataset-routing.module.ts
 create mode 100644 dmp-frontend/src/app/datasets/dataset.component.ts
 create mode 100644 dmp-frontend/src/app/datasets/dataset.html
 create mode 100644 dmp-frontend/src/app/datasets/dataset.module.ts
 create mode 100644 dmp-frontend/src/app/entities/model/dataset.ts
 create mode 100644 dmp-frontend/src/app/projects/project.css

diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 6bb89a47e..3ff7e5790 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -5,6 +5,7 @@ import { DynamicFormComponent } from './form/dynamic-form.component';
 import { LoginComponent } from './login/login-page';
 import { AuthGuard } from './guards/auth.guard';
 import { ProjectsComponent } from './projects/projects.component';
+import { DatasetsComponent } from './datasets/dataset.component';
 
 const appRoutes: Routes = [
   { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 531720f94..58cb2a3c7 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -4,7 +4,7 @@ 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-2-data-table';
+import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
 
 import { AppComponent } from './app.component';
 import { RestBase } from './services/rest-base';
@@ -24,6 +24,7 @@ import { TocComponent } from './form/tableOfContents/toc.component';
 import { ProjectsModule } from './projects/project.module';
 import { PaginationService } from './services/pagination.service';
 import { EestoreService } from './services/eestore.service';
+import { DatasetsModule } from './datasets/dataset.module';
 
 @NgModule({
   declarations: [
@@ -43,8 +44,9 @@ import { EestoreService } from './services/eestore.service';
     HttpModule,
     HttpClientModule,
     ProjectsModule,
+    DatasetsModule,
     AppRoutingModule,
-    DataTableModule
+    DataTableModule    
     
   ],
   providers: [ServerService, dataModelBuilder, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService],
diff --git a/dmp-frontend/src/app/datasets/dataset-routing.module.ts b/dmp-frontend/src/app/datasets/dataset-routing.module.ts
new file mode 100644
index 000000000..36b74623e
--- /dev/null
+++ b/dmp-frontend/src/app/datasets/dataset-routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DatasetsComponent }    from './dataset.component';
+//import { ProjectDetailComponent }    from './project.detail';
+import { DynamicFormComponent } from '../form/dynamic-form.component';
+import { AuthGuard } from '../guards/auth.guard';
+
+const datasetsRoutes: Routes = [
+  { path: 'dataset', component: DatasetsComponent },
+  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(datasetsRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class DatasetRoutingModule { }
\ 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
new file mode 100644
index 000000000..01d6e1f5b
--- /dev/null
+++ b/dmp-frontend/src/app/datasets/dataset.component.ts
@@ -0,0 +1,93 @@
+import { Component, OnInit, Input, ViewChild  } 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 { Dmp } from '../entities/model/Dmp';
+import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
+
+@Component({
+  selector: 'projects',
+  templateUrl: 'dataset.html',
+//   template: `
+//   <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]
+})
+
+export class DatasetsComponent implements OnInit{
+  
+  returnUrl: string;
+  @Input() projects: Project[];
+  projectResource :DataTableResource<Project>;
+  @Input() projectCount = 0;
+
+  @ViewChild(DataTable) projectsTable;
+
+  constructor( 
+    private serverService: ServerService,
+    private route: ActivatedRoute,
+    private router: Router){
+
+  }
+
+  ngOnInit() {
+    //this.projects = this.serverService.getDummyProjects();
+    this.projects = [];
+    this.serverService.getProjects().subscribe( 
+      response => {
+
+        console.log("response");
+        console.log(response);
+        response.forEach(resp => {
+          let pr = new Project();
+          pr.id = resp.id;
+          pr.name = resp.label;
+          pr.abbreviation = resp.abbreviation;
+          pr.definition = resp.definition;
+          pr.uri = resp.uri;
+          pr.dmp = new Dmp();
+        //  pr.dmp.id = resp.dmp; 
+          pr.dmp.id = resp.dmp =! null || resp.dmp ==! undefined ? resp.dmp.id : null;
+        //  pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
+          this.projects.push(pr);
+          var params = {limit:8,offset:0, sortAsc:false}
+          this.afterLoad();   
+          this.projectResource.query(params).then(projects => this.projects = projects);      
+        });
+      }      
+    );    
+  }
+
+  reloadProjects(params) {
+    this.projectResource.query(params).then(projects => this.projects = projects);
+}
+
+afterLoad(){
+  this.projectResource = new DataTableResource(this.projects);
+  this.projectResource.count().then(count => this.projectCount = count);
+}
+
+  // special params:
+  translations = <DataTableTranslations>{
+    indexColumn: 'Index column',
+    expandColumn: 'Expand column',
+    selectColumn: 'Select column',
+    paginationLimit: 'Max results',
+    paginationRange: 'Result range'
+};
+
+
+
+}
diff --git a/dmp-frontend/src/app/datasets/dataset.html b/dmp-frontend/src/app/datasets/dataset.html
new file mode 100644
index 000000000..039e985f6
--- /dev/null
+++ b/dmp-frontend/src/app/datasets/dataset.html
@@ -0,0 +1,46 @@
+<div style="margin: auto; max-width: 1000px; margin-top:50px">
+        <data-table id="films-grid" headerTitle="My Projects" [items]="projects" [itemCount]="projectCount" (reload)="reloadProjects($event)"
+            [limit]="8" [sortBy]="'rating'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false"
+            [expandableRows]="true" [translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick]="true">
+            <template #dataTableExpand let-item="item">
+                <div>
+                    <!-- <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a> -->
+                    <table class="table">
+                        <thead class="thead-inverse">
+                            <tr>
+                                
+                                <th>Dmp</th>
+                                <th>Id</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                
+                               <!-- <td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>-->
+                                <td> <a [routerLink]="['/dataset']"> {{ item.dmp.id }}</a></td>
+                                <td>{{item.dmp.id}}</td>
+                            </tr>
+                            
+                        </tbody>
+                    </table>
+    
+                </div>
+    
+            </template>
+            <data-table-column [property]="'name'" [header]="'Label'" [sortable]="true">
+            </data-table-column>
+            <data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
+            </data-table-column>
+            <data-table-column [property]="'id'" [header]="'Id'" [sortable]="true">
+            </data-table-column>
+            <data-table-column [property]="'uri'" [header]="'Uri'" [sortable]="true">
+            </data-table-column>
+            <data-table-column [property]="'definition'" [header]="'Definition'" [sortable]="true">
+            </data-table-column>
+        </data-table>
+        <div style="margin-top: 10px">
+            <b>Selected:</b>
+            <span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
+            <span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/datasets/dataset.module.ts b/dmp-frontend/src/app/datasets/dataset.module.ts
new file mode 100644
index 000000000..7439526e3
--- /dev/null
+++ b/dmp-frontend/src/app/datasets/dataset.module.ts
@@ -0,0 +1,24 @@
+import { NgModule }       from '@angular/core';
+import { CommonModule }   from '@angular/common';
+import { FormsModule }    from '@angular/forms';
+import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
+
+import { DatasetsComponent }  from './dataset.component';
+
+import { DatasetRoutingModule } from './dataset-routing.module';
+//import { ProjectDetailComponent } from './project.detail';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    DatasetRoutingModule,
+    DataTableModule
+  ],
+  declarations: [
+    DatasetsComponent
+    //ProjectDetailComponent
+  ],
+  providers: [  ]
+})
+export class DatasetsModule {}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/entities/model/dataset.ts b/dmp-frontend/src/app/entities/model/dataset.ts
new file mode 100644
index 000000000..45239a369
--- /dev/null
+++ b/dmp-frontend/src/app/entities/model/dataset.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+export class Dataset {
+  id:string;
+  name: string;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/entities/model/project.ts b/dmp-frontend/src/app/entities/model/project.ts
index 14edf51b1..c65a87a85 100644
--- a/dmp-frontend/src/app/entities/model/project.ts
+++ b/dmp-frontend/src/app/entities/model/project.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Dmp } from './dmp'
+import { Dataset } from './dataset'
 
 export class Project {
   name: string;
@@ -8,4 +9,5 @@ export class Project {
   definition: string;
   uri: string;
   dmp: Dmp;
+  dataset: Dataset;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/projects/project.css b/dmp-frontend/src/app/projects/project.css
new file mode 100644
index 000000000..320901ed8
--- /dev/null
+++ b/dmp-frontend/src/app/projects/project.css
@@ -0,0 +1,16 @@
+:host /deep/ .index-column,
+:host /deep/ .index-column-header {
+    text-align: right;
+}
+
+:host /deep/ .data-table .data-table-row.selected {
+    background-color: #E4EDF9;
+}
+
+.fa {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/projects/project.html b/dmp-frontend/src/app/projects/project.html
index e228463b3..4c3166f6c 100644
--- a/dmp-frontend/src/app/projects/project.html
+++ b/dmp-frontend/src/app/projects/project.html
@@ -8,17 +8,19 @@
                 <table class="table">
                     <thead class="thead-inverse">
                         <tr>
-                            <th>#</th>
+                            
                             <th>Dmp</th>
                             <th>Id</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
-                            <th scope="row">1</th>
-                            <td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>
+                            
+                           <!-- <td> <a [routerLink]="['/dynamic-form', item.id]"> {{ item.dmp.id }}</a></td>-->
+                            <td> <a [routerLink]="['/dataset']"> {{ item.dmp.id }}</a></td>
                             <td>{{item.dmp.id}}</td>
                         </tr>
+                        
                     </tbody>
                 </table>
 
@@ -41,4 +43,7 @@
         <span *ngIf="projectsTable.selectedRow == null"><i>No item selected</i></span>
         <span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span>
     </div>
-</div>
\ No newline at end of file
+    
+</div>
+<router-outlet></router-outlet>
+
diff --git a/dmp-frontend/src/app/projects/project.module.ts b/dmp-frontend/src/app/projects/project.module.ts
index d7e6642c1..205c44a52 100644
--- a/dmp-frontend/src/app/projects/project.module.ts
+++ b/dmp-frontend/src/app/projects/project.module.ts
@@ -1,7 +1,7 @@
 import { NgModule }       from '@angular/core';
 import { CommonModule }   from '@angular/common';
 import { FormsModule }    from '@angular/forms';
-import {DataTableModule } from 'angular-2-data-table';
+import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
 
 import { ProjectsComponent }  from './projects.component';
 
diff --git a/dmp-frontend/src/app/projects/projects.component.ts b/dmp-frontend/src/app/projects/projects.component.ts
index 9fa5334cd..46d829a04 100644
--- a/dmp-frontend/src/app/projects/projects.component.ts
+++ b/dmp-frontend/src/app/projects/projects.component.ts
@@ -4,7 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../app/services/server.service';
 import { Project } from '../entities/model/project';
 import { Dmp } from '../entities/model/Dmp';
-import { DataTable, DataTableTranslations, DataTableResource } from 'angular-2-data-table';
+import { Dataset } from '../entities/model/dataset';
+import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
 
 @Component({
   selector: 'projects',
@@ -58,8 +59,9 @@ export class ProjectsComponent implements OnInit{
           pr.uri = resp.uri;
           pr.dmp = new Dmp();
         //  pr.dmp.id = resp.dmp; 
-          pr.dmp.id = resp.dmp =! null || resp.dmp ==! undefined ? resp.dmp.id : null;
-        //  pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
+          pr.dmp.id = resp.dmp =! null || resp.dmp ==! undefined ? resp.dmp.id : null; 
+          pr.dataset = new Dataset();
+          pr.dmp.dataset = resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
           this.projects.push(pr);
           var params = {limit:8,offset:0, sortAsc:false}
           this.afterLoad();