Tabs Projects+Dmps v0.1 , dmp component, sign out bug fix, project-modal-dataset

dmp-frontend/src/app/app.component.ts

@@ -7,7 +7,6 @@ import { JsonObjest } from '../app/entities/JsonObject.class';
 @Component({
   selector: 'app-root',
   template: `
-  <!-- <h1 class="title">Angular Router</h1>-->
 
   <router-outlet></router-outlet>
 `,

dmp-frontend/src/app/app.module.ts

@@ -25,6 +25,8 @@ import { ProjectsModule } from './projects/project.module';
 import { PaginationService } from './services/pagination.service';
 import { EestoreService } from './services/eestore.service';
 import { DatasetsModule } from './datasets/dataset.module';
+import { DmpModule } from './dmps/dmp.module';
+import { TabModule } from './tabs/tab.module';
 
 @NgModule({
   declarations: [
@@ -43,7 +45,9 @@ import { DatasetsModule } from './datasets/dataset.module';
     FormsModule,
     HttpModule,
     HttpClientModule,
+    TabModule,
     ProjectsModule,
+    DmpModule,
     DatasetsModule,
     AppRoutingModule,
     DataTableModule 

dmp-frontend/src/app/datasets/dataset.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, NgZone  } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, NgZone ,Output ,EventEmitter} from '@angular/core';
 import {GoogleSignInSuccess} from 'angular-google-signin';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../app/services/server.service';
@@ -36,6 +36,19 @@ export class DatasetsComponent implements OnInit{
 
   @ViewChild(DataTable) projectsTable;
 
+  dataSetValue:boolean
+  @Input()
+  get dataSetVisibe(){
+    return this.dataSetValue;
+  }
+  @Output()
+  public dataSetValueChange = new EventEmitter();
+  
+  set dataSetVisibe(value:any){
+    this.dataSetValue = value 
+    this.dataSetValueChange.emit(this.dataSetValue)
+  }
+
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
@@ -47,7 +60,7 @@ export class DatasetsComponent implements OnInit{
   ngOnInit() {
     //this.projects = this.serverService.getDummyProjects();
     this.datasets = [];
-    this.serverService.getAllDatasets().subscribe( 
+    this.serverService.getAllDataSet().subscribe( 
       response => {
 
         console.log("response");

dmp-frontend/src/app/dmps/dmp-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DmpComponent }    from './dmp.component';
+import { DynamicFormComponent } from '../form/dynamic-form.component';
+import { AuthGuard } from '../guards/auth.guard';
+
+const projectsRoutes: Routes = [
+  { path: 'tabs/dmps', component: DmpComponent },
+  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(projectsRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class DmpRoutingModule { }

dmp-frontend/src/app/dmps/dmp.component.ts

@@ -0,0 +1,160 @@
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild  } from '@angular/core';
+import {GoogleSignInSuccess} from 'angular-google-signin';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ServerService } from '../../app/services/server.service';
+import { Dmp } from '../entities/model/Dmp';
+import { Dataset } from '../entities/model/dataset';
+import { Project } from '../entities/model/project';
+import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
+import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
+import { Param } from '../entities/model/param';
+import { ModalComponent } from '../modal/modal.component';
+import { HttpErrorResponse } from '@angular/common/http';
+import { FormGroup, FormControl }                 from '@angular/forms'; //na dw an xreiazontai
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'dmps',
+  templateUrl: 'dmps.html',
+  providers:  [ServerService]
+})
+
+export class DmpComponent implements OnInit{
+  @Input() dmps: Dmp[];
+  dmp:any;
+  dmpResource :DataTableResource<Dmp>;
+  @Input() dmpCount = 0;
+  @Input() projectsDropDown:DropdownField;
+  //@Input() dataSetVisibe:boolean;
+  @Input() projects: Project[];  
+
+  @ViewChild(DataTable) dmpsTable;
+  @ViewChild(DataTable) datasetsTable;
+  @ViewChild('isignOutBtn') isignOutBtn;
+
+  constructor( 
+    private serverService: ServerService,
+    private route: ActivatedRoute,
+    private router: Router){
+      this.projectsDropDown = new DropdownField();
+      this.projectsDropDown.options = [];
+      this.projects = [];
+      this.dmp = {
+        label: '',
+        abbreviation:'',
+        reference:'',
+        uri:'',
+        definition:''
+      }
+  }
+
+  ngOnInit() {
+    //this.projects = this.serverService.getDummyProjects();
+    gapi.load('auth2', function() {
+      gapi.auth2.init({});
+    });
+    this.dmps = [];
+    this.serverService.getDmpOfUser().subscribe( 
+      response => {
+        debugger;
+        
+        response.forEach(resp => {
+          let pr = new Dmp();
+          pr.id = resp.id;
+          pr.id = resp.label;
+          pr.name = resp.abbreviation;
+          pr.dataset = resp.definition;
+          this.dmps.push(pr);
+          var params = {limit:8,offset:0, sortAsc:false}
+          this.afterLoad();   
+          this.dmpResource.query(params).then(dmps => this.dmps = dmps);      
+        }        
+      );
+      },
+      (err: HttpErrorResponse) => {
+        if (err.error instanceof Error) {
+          // A client-side or network error occurred. Handle it accordingly.
+          console.log('An error occurred:', err.error.message);
+        } else {
+          // The backend returned an unsuccessful response code.
+          // The response body may contain clues as to what went wrong,
+          if(err.status == 401){
+            this.isignOutBtn.nativeElement.click();
+          }
+          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
+        }
+      }      
+    ); 
+
+    this.serverService.getAllProjects().subscribe(
+      response => {
+        console.log("response");
+        console.log(response);
+        //let params = new Param();
+        response.forEach((dmp) => {
+          let params = new Param();
+          params.key = dmp.id;
+          params.value = dmp.label;
+          this.projectsDropDown.options.push(params);
+        });
+
+      }
+    )
+  }
+
+reloadDmps(params) {
+    this.dmpResource = new DataTableResource(this.dmps);
+    this.dmpResource.query(params).then(projects => this.dmps = projects);
+}
+
+afterLoad(){
+  this.dmpResource = new DataTableResource(this.dmps);
+  this.dmpResource.count().then(count => this.dmpCount = count);
+}
+
+myFunction() {
+  var input, filter, table, tr, td, i;
+  input = document.getElementById("myInput");
+  filter = input.value.toUpperCase();
+  table = document.getElementById("projects-grid");
+  tr = table.getElementsByTagName("tr");
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName("td")[3];
+    if (td) {
+      if (td.innerText.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }       
+  }
+}
+
+
+SaveNewDmp(){ debugger;
+  console.log(this.dmp, this.dmp.projectsDropDownKey);  
+  //this.http.post('http://someurl', JSON.stringify(this.project))
+  this.serverService.createDmpForProject(this.dmp, this.dmp.projectsDropDownKey)
+  .subscribe(
+    response =>{
+      console.log("response");
+      console.log(response);      
+    }
+  );
+}
+
+  // special params:
+  translations = <DataTableTranslations>{
+    indexColumn: 'Index column',
+    expandColumn: 'Expand column',
+    selectColumn: 'Select column',
+    paginationLimit: 'Max results',
+    paginationRange: 'Result range'
+};
+
+signOut() {
+      this.serverService.logOut();
+}
+
+
+}

dmp-frontend/src/app/dmps/dmp.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 { DmpComponent }  from './dmp.component';
+
+import { DmpRoutingModule } from './dmp-routing.module';
+import { DatasetsModule } from '../datasets/dataset.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    DmpRoutingModule,
+    DataTableModule,
+    DatasetsModule
+  ],
+  declarations: [
+    DmpComponent
+  ],
+  providers: [  ]
+})
+export class DmpModule {}

dmp-frontend/src/app/dmps/dmps.html

@@ -0,0 +1,116 @@
+<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="dmps-grid" headerTitle="My Dmps" [items]="dmps" [itemCount]="dmpCount" (reload)="reloadDmps($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="dmpsTable.selectedRow == null"><i>No item selected</i></span>
+        <span [textContent]="dmpsTable.selectedRow && dmpsTable.selectedRow.item.name"></span> -->
+    </div>
+    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">New Dmp</button>
+
+    <!-- <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey">
+                <option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
+                </select> -->
+
+</div>
+
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+                <form #newProjectForm="ngForm" (ngSubmit)="SaveNewDmp()">
+                        <div class="form-group">
+                                <label for="recipient-name" class="col-form-label">Project:</label>
+                                <select class="form-control" [id]="projectsDropDownKey" [(ngModel)]="dmp.projectsDropDownKey" [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">Label:</label>
+                        <input type="text" class="form-control" id="label-name" [(ngModel)]= "dmp.label" name = "label">
+                    </div>
+                    <div class="form-group">
+                        <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
+                        <input class="form-control" id="abbreviation-text" [(ngModel)]= "dmp.abbreviation" name = "abbreviation">
+                    </div>
+                    <div class="form-group">
+                        <label for="reference-text" class="form-control-label">Reference:</label>
+                        <input class="form-control" id="reference-text" [(ngModel)]= "dmp.reference" name = "reference">
+                    </div>
+                    <div class="form-group">
+                        <label for="uri-text" class="form-control-label">Uri:</label>
+                        <input class="form-control" id="uri-text" [(ngModel)]= "dmp.uri" name = "uri">
+                    </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>
+            </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)="SaveNewDmp();">Save Dmp</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!--Modal for DMPs-->
+<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
+
+<!--DATASET TABLE-->
+<!--<datasets-table *ngIf="dataSetVisibe"  [(dataSetVisibe)]="dataSetVisibe"></datasets-table> *ngIf="dataSetVisibe == true"-->
+
+<a href="#" (click)="signOut();" #isignOutBtn >Sign out</a>
+<router-outlet></router-outlet>

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -179,7 +179,6 @@ signOut2() {
     }
 
   onValueChanged(data?: any) {    
-    debugger;
     if (!this.form) { return; }
     const form = this.form;
 

dmp-frontend/src/app/guards/auth.guard.ts

@@ -1,16 +1,18 @@
 import { Injectable } from '@angular/core';
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { TokenService, TokenProvider } from '../services/token.service';
 
 @Injectable()
 export class AuthGuard implements CanActivate {
 
-    constructor(private router: Router) { }
+    constructor(private router: Router, private tokenService: TokenService) { }
 
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-        if (localStorage.getItem('currentUser')) {
+        //if (localStorage.getItem('currentUser')) { it always returns true
+            if(this.tokenService.getToken()!=null){
             // logged in so return true
             return true;
-        }
+            }
 
         // not logged in so redirect to login page with the return url
         this.router.navigate(['/login-page'], { queryParams: { returnUrl: state.url }});

dmp-frontend/src/app/login/login-page.ts

@@ -66,7 +66,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
         this.tokenService.setUsername(profile.getName());
         this.tokenService.setEmail(profile.getEmail());
 
-        this.ngZone.run(() => this.router.navigateByUrl('projects'));
+        this.ngZone.run(() => this.router.navigateByUrl('tabs'));
         
         window.location.reload();
 

dmp-frontend/src/app/modal/modal.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input,Output,EventEmitter, ViewChild, ElementRef, NgZone } from '@angular/core';
 import { ServerService } from '../../app/services/server.service';
 import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
 import { Param } from '../entities/model/param';
 import { Dataset } from '../entities/model/dataset';
 import { Project } from '../entities/model/project';
 import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
+import { Router, ActivatedRoute } from '@angular/router';
+
 declare var jquery:any;
 declare var $ :any;
 
@@ -16,21 +18,49 @@ declare var $ :any;
 export class ModalComponent implements OnInit {
 
   @Input() datasetDropDown: DropdownField;
-  @Input() dataSetVisibe:boolean;
+ // public dataSetVisibe:boolean;
   @Input() datasets: Dataset[]; 
-  @Input() project: Project; 
+  public project: Project; 
   datasetResource :DataTableResource<Dataset>; 
   @Input() datasetCount = 0;
-  @Input('show-modal') showModal: boolean;
+   @ViewChild('modalDmps') modalDmps;
 
-  @ViewChild('modalDmps') modalDmps;
+  @Input()
+  public item:any
+  showValue:boolean
+  @Input()
+  get show(){
+    return this.showValue;
+  }
+  @Output()
+  public showChange = new EventEmitter();
   
-  constructor(private serverService: ServerService) {
+  set show(value:any){
+    this.showValue = value 
+    this.showChange.emit(this.showValue)
+  }
+
+  dataSetValue:boolean
+  @Input()
+  get dataSetVisibe(){
+    return this.dataSetValue;
+  }
+  @Output()
+  public dataSetValueChange = new EventEmitter();
+  
+  set dataSetVisibe(value:any){
+    this.dataSetValue = value; 
+    this.dataSetValueChange.emit(this.dataSetValue)
+  }
+
+  constructor(private serverService: ServerService, private router: Router, private ngZone: NgZone) {
     this.datasetDropDown = new DropdownField();
     this.datasetDropDown.options = [];
-    this.dataSetVisibe= false;
+    //this.dataSetVisibe= false;
     this.datasets = [];
     this.project = new Project();
+
+  
   }
 
   ngOnInit() {
@@ -49,38 +79,33 @@ export class ModalComponent implements OnInit {
 
       }
     )
-
+    if(this.show) this.showModal()
   }
 
-  show(gridRow){
+  
-  this.project.label = gridRow.label;
+
-  this.project.abbreviation = gridRow.abbreviation;
+  showModal(){
-  this.project.uri = gridRow.uri;
+    this.project.label = this.item.label;
+    this.project.abbreviation = this.item.abbreviation;
+    this.project.uri = this.item.uri;
+    this.project.id = this.item.id;
     $("#exampleModalDmps").modal("show");
   }
 
-  showDatasets(dmpId, event) {
+  closeModal(){
-    debugger;
+    $("#exampleModalDmps").modal("hide");
-    this.dataSetVisibe = true;
+    this.show = false;
-    this.serverService.getAllDatasets().subscribe(
-      response => {
-        console.log("response");
-        console.log(response);
-        //let params = new Param();
-        response.forEach((dataset) => {
-          let dt = new Dataset();
-          dt.id = dataset.id;
-          dt.name = dataset.label;
-          dt.uriDataset = dataset.uri;
-          this.datasets.push(dt);
-          var params = { limit: 8, offset: 0, sortAsc: false }
-          this.afterLoad();
-          this.datasetResource.query(params).then(datasets => this.datasets = datasets);
-        });
-      });
-
   }
 
+   showDatasets(dmpId, event) {
+     debugger;
+     this.dataSetVisibe = true;
+     $("#exampleModalDmps").modal("hide");
+     this.show = false;
+    // this.ngZone.run(() => this.router.navigateByUrl('dataset')); //change router
+    
+   }
+
   afterLoad(){
     this.datasetResource = new DataTableResource(this.datasets);
     this.datasetResource.count().then(count => this.datasetCount = count);

dmp-frontend/src/app/modal/modal.html

@@ -16,37 +16,37 @@
                 </select>
             </div>
            <div class="form-group">
-                        <label for="label-name" class="form-control-label">Label:</label>
+                        <label for="label-name" class="form-control-label">Label:{{project.label}}</label>
-                        <input type="text" class="form-control" id="label-name" [(ngModel)]= "project.label" name = "label">
+                        <input type="text" class="form-control" id="label" [(ngModel)]= "project.label" name = "label">
                     </div>
                     <div class="form-group">
                         <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
-                        <input class="form-control" id="abbreviation-text" [(ngModel)]= "project.abbreviation" name = "abbreviation">
+                        <input class="form-control" id="abbreviation" [(ngModel)]= "project.abbreviation" name = "abbreviation">
                     </div>
                     <div class="form-group">
                         <label for="reference-text" class="form-control-label">Reference:</label>
-                        <input class="form-control" id="reference-text" [(ngModel)]= "project.reference" name = "reference">
+                        <input class="form-control" id="reference" [(ngModel)]= "project.reference" name = "reference">
                     </div>
                     <div class="form-group">
                         <label for="uri-text" class="form-control-label">Uri:</label>
-                        <input class="form-control" id="uri-text" [(ngModel)]= "project.uri" name = "uri">
+                        <input class="form-control" id="uri" [(ngModel)]= "project.uri" name = "uri">
                     </div>
                     <div class="form-group">
                         <label for="start-date" class="form-control-label">Start Date:</label>
-                        <input class="form-control" id="startDate-date" [(ngModel)]= "project.startDate" name = "startDate">
+                        <input class="form-control" id="startDate" [(ngModel)]= "project.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)]= "project.endDate" name = "endDate">
+                        <input class="form-control" id="endDate" [(ngModel)]= "project.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>
+                        <input type="text" class="form-control" id="code" [(ngModel)]= "project.id" name = "id" disabled>
                     </div>
           </form>
         </div>
         <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" (click)= "closeModal()">Close</button>
           <button type="button" class="btn btn-primary">Save</button>
           <button type="button" class="btn btn-primary" (click)= "showDatasets(datasetfield.value, exampleModalDmps)" >Show Datasets</button>
         </div>
@@ -55,4 +55,4 @@
   </div>
 
    <!--DATASET TABLE-->
-   <datasets-table *ngIf="dataSetVisibe == true"></datasets-table>
+   <!-- <datasets-table *ngIf="dataSetVisibe == true"></datasets-table> -->

dmp-frontend/src/app/projects/project-routing.module.ts

@@ -7,7 +7,7 @@ import { DynamicFormComponent } from '../form/dynamic-form.component';
 import { AuthGuard } from '../guards/auth.guard';
 
 const projectsRoutes: Routes = [
-  { path: 'projects', component: ProjectsComponent },
+  { path: 'tabs/projects', component: ProjectsComponent }, // canActivate: [AuthGuard]
   { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
 ];
 

dmp-frontend/src/app/projects/project.html

@@ -1,3 +1,10 @@
+<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
+
+<nav>
+    <a routerLink="projects" routerLinkActive="active">Projects</a>
+    <a routerLink="dmps" routerLinkActive="active">My Dmps</a>
+  </nav>
+  
 <div style="margin: auto; max-width: 1000px; margin-top:50px">
     <div>
         <span>Filter: </span>
@@ -99,10 +106,10 @@
 </div>
 
 <!--Modal for DMPs-->
-<modal></modal>
+<modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal>
 
 <!--DATASET TABLE-->
-<datasets-table *ngIf="dataSetVisibe == true"></datasets-table>
+<datasets-table *ngIf="dataSetVisibe"  [(dataSetVisibe)]="dataSetVisibe"></datasets-table> <!--*ngIf="dataSetVisibe == true"-->
 
-<a href="#" (click)="signOut2();" #isignOutBtn >Sign out</a>
+<a href="#" (click)="signOut();" #isignOutBtn >Sign out</a>
 <router-outlet></router-outlet>

dmp-frontend/src/app/projects/projects.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild  } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild  } from '@angular/core';
 import {GoogleSignInSuccess} from 'angular-google-signin';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../app/services/server.service';
@@ -12,24 +12,11 @@ import { ModalComponent } from '../modal/modal.component';
 import { HttpErrorResponse } from '@angular/common/http';
 import { FormGroup, FormControl }                 from '@angular/forms'; //na dw an xreiazontai
 import { NgForm } from '@angular/forms';
+import { TokenService, TokenProvider } from '../services/token.service';
 
 @Component({
   selector: 'projects',
   templateUrl: 'project.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]
 })
 
@@ -40,11 +27,13 @@ export class ProjectsComponent implements OnInit{
   datasetResource :DataTableResource<Dataset>;
   @Input() projectCount = 0;
   @Input() datasetDropDown:DropdownField;
-  @Input() dataSetVisibe:boolean;
+  //@Input() dataSetVisibe:boolean;
   @Input() datasets: Dataset[];  
   project: any;
   modalEditedRow: ModalComponent;
-
+  public item:any;
+  public show:boolean = false;
+  public dataSetVisibe:boolean = false;
   @ViewChild(DataTable) projectsTable;
   @ViewChild(DataTable) datasetsTable;
   @ViewChild('isignOutBtn') isignOutBtn;
@@ -52,10 +41,9 @@ export class ProjectsComponent implements OnInit{
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
-    private router: Router){
+    private router: Router, private tokenService: TokenService){
       this.datasetDropDown = new DropdownField();
       this.datasetDropDown.options = [];
-      this.dataSetVisibe= false;
       this.datasets = [];
       this.project = {
         label: '',
@@ -64,10 +52,13 @@ export class ProjectsComponent implements OnInit{
         uri:'',
         definition:''
       }
-      this.modalEditedRow = new ModalComponent(serverService);
   }
 
   ngOnInit() {
+
+    gapi.load('auth2', function() {
+      gapi.auth2.init({});
+    });
     //this.projects = this.serverService.getDummyProjects();
     this.projects = [];
     this.serverService.getProjectOfUer().subscribe(  //getProjects()
@@ -93,7 +84,7 @@ export class ProjectsComponent implements OnInit{
         }        
       );
       },
-      (err: HttpErrorResponse) => {debugger;
+      (err: HttpErrorResponse) => {
         if (err.error instanceof Error) {
           // A client-side or network error occurred. Handle it accordingly.
           console.log('An error occurred:', err.error.message);
@@ -136,35 +127,8 @@ getDMPs(){
   )
 }
 
-showDatasets(dmpId, event){debugger;
+showDatasets(){debugger; //dmpId, event
-  this.dataSetVisibe = true;
+  //this.dataSetVisibe = true;
-  this.serverService.getAllDatasets().subscribe(
-    response =>{
-      console.log("response");
-      console.log(response);        
-      //let params = new Param();
-      response.forEach((dataset) => { 
-        let dt = new Dataset();
-        dt.id = dataset.id;
-        dt.name = dataset.label;
-        dt.uriDataset = dataset.uri;
-        this.datasets.push(dt);
-        var params = {limit:8,offset:0, sortAsc:false}
-        this.afterLoad();   
-        this.datasetResource.query(params).then(datasets => this.datasets = datasets);        
-      },
-      (err: HttpErrorResponse) => {
-        if (err.error instanceof Error) {
-          // A client-side or network error occurred. Handle it accordingly.
-          console.log('An error occurred:', err.error.message);
-        } else {
-          // The backend returned an unsuccessful response code.
-          // The response body may contain clues as to what went wrong,
-          console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
-        }
-      }
-    );
-    });
       
 }
 
@@ -187,7 +151,8 @@ myFunction() {
 }
 
 editRow(item){
-  this.modalEditedRow.show(item);
+  this.show = true;  
+  this.item = item;
 }
 
 SaveNewProject(){
@@ -211,6 +176,10 @@ SaveNewProject(){
     paginationRange: 'Result range'
 };
 
+signOut() {
+      this.serverService.logOut();
+}
+     
 
 
 }

dmp-frontend/src/app/services/rest-base.ts

@@ -15,15 +15,15 @@ export class RestBase {
         this.xml2jsonOBJ = new X2JS();
     }
     
-    protocol: string = "http";
+    // 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-2";//"dmp-backend-new";//
+    // webappname: string = "dmp-backend-1";//"dmp-backend-new";//
 
-    /*protocol: string = "http";
+    protocol: string = "http";
     hostname: string ="dionysus.di.uoa.gr" ;
     port: number = 7070;
-    webappname: string = "dmp-backend-1";//"dmp-backend-new";//*/
+    webappname: string = "dmp-backend";//"dmp-backend-new";//
 
 
     proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";

dmp-frontend/src/app/services/server.service.ts

@@ -96,8 +96,23 @@ export class ServerService {
     return this.restBase.post("project/createofuser", data);
   }
 
+  public getAllDataSet(){
+    return this.restBase.get("dataset/getAll");    
+  }
 
-  signOut2() {
+  public getDmpOfUser(){
+    return this.restBase.get("dmp/getofuser");    
+  }
+
+  public createDmpForProject(data:any, projectid: string){
+    return this.restBase.post("dmp/createforproject", data);    
+    // return this.restBase.post('dmp/createforproject', data, {
+    //   params: new HttpParams().set('projectid', projectid),
+    // })
+  }
+
+
+  logOut() {
 
         var auth2 = gapi.auth2.getAuthInstance();
         auth2.signOut().then(function () {

dmp-frontend/src/app/tabs/tab.module.ts

@@ -0,0 +1,22 @@
+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 { TabComponent }  from './tabs.component';
+
+import { TabRoutingModule } from './tabs-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    TabRoutingModule,
+    DataTableModule
+  ],
+  declarations: [
+    TabComponent
+  ],
+  providers: [  ]
+})
+export class TabModule {}

dmp-frontend/src/app/tabs/tabs-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { TabComponent }    from './tabs.component';
+import { AuthGuard } from '../guards/auth.guard';
+
+const tabsRoutes: Routes = [
+  { path: 'tabs', component: TabComponent, canActivate: [AuthGuard] },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(tabsRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class TabRoutingModule { }

dmp-frontend/src/app/tabs/tabs.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+        <a routerLink="projects" routerLinkActive="active">Projects</a>
+        <a routerLink="dmps" routerLinkActive="active">My Dmps</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `
+})
+export class TabComponent {
+}