From 3e9c5dbe0f1f2b8689b43a03d2d2cf1098724003 Mon Sep 17 00:00:00 2001
From: annampak <annampak@hotmail.com>
Date: Wed, 1 Nov 2017 11:56:35 +0200
Subject: [PATCH] project table

---
 dmp-frontend/src/app/app.module.ts            |  10 +-
 .../app/pipes/project-table-filter.pipe.ts    |  27 ++++
 dmp-frontend/src/app/projects/project.css     |  40 ++++++
 dmp-frontend/src/app/projects/project.html    | 117 +++++++++++-------
 .../src/app/projects/project.module.ts        |   6 +-
 .../src/app/projects/projects.component.ts    |  59 +++++----
 dmp-frontend/src/app/services/interceptor.ts  |   2 +-
 7 files changed, 175 insertions(+), 86 deletions(-)
 create mode 100644 dmp-frontend/src/app/pipes/project-table-filter.pipe.ts

diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 94a5697c9..5b20cd5a0 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -60,11 +60,11 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
     
   ],
   providers: [
-    // {
-    //               provide: HTTP_INTERCEPTORS,
-    //               useClass: GlobalInterceptor,
-    //               multi: true,
-    //           },
+    {
+                  provide: HTTP_INTERCEPTORS,
+                  useClass: GlobalInterceptor,
+                  multi: true,
+              },
               ServerService, dataModelBuilder, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService
             ],
   bootstrap: [AppComponent]
diff --git a/dmp-frontend/src/app/pipes/project-table-filter.pipe.ts b/dmp-frontend/src/app/pipes/project-table-filter.pipe.ts
new file mode 100644
index 000000000..0849eb6e2
--- /dev/null
+++ b/dmp-frontend/src/app/pipes/project-table-filter.pipe.ts
@@ -0,0 +1,27 @@
+import * as _ from "lodash";
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+    name: "projectTableFilter"
+})
+export class ProjectTableFilterPipe implements PipeTransform {
+
+    transform(array: any[], query: string): any {
+        
+        if (query) {
+
+            return _.filter(array, row => {
+                
+                return (
+                    
+                    row.label.indexOf(query) > -1 ||
+
+                    //row.version == query ||
+                    row.id.indexOf(query) > -1
+                )
+            });
+            
+        }
+        return array;
+    }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/projects/project.css b/dmp-frontend/src/app/projects/project.css
index 526299dad..f643122ce 100644
--- a/dmp-frontend/src/app/projects/project.css
+++ b/dmp-frontend/src/app/projects/project.css
@@ -9,4 +9,44 @@
 
 a.editGridColumn{
     color: #333;
+}
+
+.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/projects/project.html b/dmp-frontend/src/app/projects/project.html
index f3f94b406..8ebb50ec2 100644
--- a/dmp-frontend/src/app/projects/project.html
+++ b/dmp-frontend/src/app/projects/project.html
@@ -1,53 +1,76 @@
 <meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
-<div style="margin: auto; max-width: 1000px; margin-top:50px">
-    <div>
-        <span>Filter: </span>
-        <input type="text" id="myInput" (keyup)="myFunction()" placeholder="Search for labels.." title="Type in a name">
-    </div>
-    <data-table id="projects-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">
-        
-        <data-table-column [property]="'label'" [header]="'Label'" [sortable]="true">
-        </data-table-column>
-        <data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
-        </data-table-column>
-        <data-table-column [property]="'startDate'" [header]="'Start Date'" [sortable]="true">
-        </data-table-column>
-        <data-table-column [property]="'endDate'" [header]="'End Date'" [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="projectsTable.selectedRow == null"><i>No item selected</i></span>
-        <span [textContent]="projectsTable.selectedRow && projectsTable.selectedRow.item.name"></span>
-    </div>
-    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">New Project</button>
 
-    <!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
-                <option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
-                </select> -->
 
-</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' />
+            </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="abbreviation">Αbbreviation</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="startDate">Start Date</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="endDate">End Date</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="description">Description</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter by="status">Status</mfDefaultSorter>
+            </th>
+            <th>
+                <mfDefaultSorter>Actions </mfDefaultSorter>
+            </th>
+            
+        </tr>
+    </thead>
+    <tbody>
+        <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
+            <td colspan="7">No elements</td>
+        </tr>
+
+        <tr *ngFor="let project of mf.data" class="hover">
+            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.id}}</td>
+            <td>{{project?.label}}</td>
+            <td>{{project?.abbreviation}}</td>
+            <td>{{project?.startDate}}</td>
+            <td>{{project?.endDate}}</td>
+            <td>{{project?.description}}</td>
+            <td>{{project?.status}}</td>
+            <td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" 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="7">
+                    <button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
+                <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
+            </td>
+        </tr>
+    </tfoot>
+</table>
 
 
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
diff --git a/dmp-frontend/src/app/projects/project.module.ts b/dmp-frontend/src/app/projects/project.module.ts
index 7be3d4a85..6a97e1556 100644
--- a/dmp-frontend/src/app/projects/project.module.ts
+++ b/dmp-frontend/src/app/projects/project.module.ts
@@ -1,7 +1,8 @@
 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 {DataTableModule} from 'angular2-datatable';
+import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe';
 
 import { ProjectsComponent }  from './projects.component';
 
@@ -21,7 +22,8 @@ import { ModalComponent } from '../modal/modal.component';
   declarations: [
     ProjectsComponent,
     ProjectDetailComponent,
-    ModalComponent
+    ModalComponent,
+    ProjectTableFilterPipe
   ],
   providers: [  ]
 })
diff --git a/dmp-frontend/src/app/projects/projects.component.ts b/dmp-frontend/src/app/projects/projects.component.ts
index aab61dcc8..8efed8ec2 100644
--- a/dmp-frontend/src/app/projects/projects.component.ts
+++ b/dmp-frontend/src/app/projects/projects.component.ts
@@ -5,7 +5,8 @@ import { ServerService } from '../../app/services/server.service';
 import { Project } from '../entities/model/project';
 import { Dmp } from '../entities/model/dmp';
 import { Dataset } from '../entities/model/dataset';
-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';
 import { ModalComponent } from '../modal/modal.component';
@@ -21,10 +22,32 @@ import { TokenService, TokenProvider } from '../services/token.service';
 })
 
 export class ProjectsComponent 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() projects: Project[];
-  projectResource :DataTableResource<Project>;
-  datasetResource :DataTableResource<Dataset>;
   @Input() projectCount = 0;
   @Input() datasetDropDown:DropdownField;
   //@Input() dataSetVisibe:boolean;
@@ -63,7 +86,7 @@ export class ProjectsComponent implements OnInit{
     this.projects = [];
     this.serverService.getProjectOfUer().subscribe(  //getProjects()
       response => {
-
+        this.tableData = response;
         
         response.forEach(resp => {
           let pr = new Project();
@@ -72,15 +95,7 @@ export class ProjectsComponent implements OnInit{
           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.dataset = new Dataset();
-          // pr.dmp.dataset = resp.dmp !=null && 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);      
+          this.projects.push(pr);    
         }        
       );
       }
@@ -100,16 +115,6 @@ export class ProjectsComponent implements OnInit{
     ); 
   }
 
-reloadProjects(params) {
-    this.projectResource = new DataTableResource(this.projects);
-    this.projectResource.query(params).then(projects => this.projects = projects);
-}
-
-afterLoad(){
-  this.projectResource = new DataTableResource(this.projects);
-  this.projectResource.count().then(count => this.projectCount = count);
-}
-
 getDMPs(){
   this.serverService.listDmpsLabelID().subscribe(
     response =>{
@@ -167,14 +172,6 @@ SaveNewProject(){
   );
 }
 
-  // special params:
-  translations = <DataTableTranslations>{
-    indexColumn: 'Index column',
-    expandColumn: 'Expand column',
-    selectColumn: 'Select column',
-    paginationLimit: 'Max results',
-    paginationRange: 'Result range'
-};
 
 signOut() {
       this.serverService.logOut();
diff --git a/dmp-frontend/src/app/services/interceptor.ts b/dmp-frontend/src/app/services/interceptor.ts
index b2578cf80..0cffec71a 100644
--- a/dmp-frontend/src/app/services/interceptor.ts
+++ b/dmp-frontend/src/app/services/interceptor.ts
@@ -20,7 +20,7 @@ export class GlobalInterceptor implements HttpInterceptor {
         }
         */
       }, (err: any) => {
-        if (err instanceof HttpErrorResponse) {
+        if (err instanceof HttpErrorResponse) {debugger;
           if (err.status === 401) {
             var auth2 = gapi.auth2.getAuthInstance();
                 auth2.signOut().then(function () {