From 4cbaec3667183a8bf68877c24d613cb3a72d883e Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Mon, 27 Nov 2017 12:51:20 +0200
Subject: [PATCH] altered the lifecycle of the user login

---
 dmp-frontend/src/app/app.component.ts         | 36 +++++++++++++++
 dmp-frontend/src/app/dmps/dmps.html           |  2 +-
 .../googgle-sign-in.component.ts              | 46 ++++---------------
 .../dmp-detailed/dmp-detailed.component.html  |  8 ++--
 .../project-detailed.component.html           |  6 +--
 .../project-detailed.component.ts             | 17 ++++++-
 dmp-frontend/src/assets/custom.js             | 28 +++++++++++
 7 files changed, 96 insertions(+), 47 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index 9bf4b41f0..98d47dd52 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -11,6 +11,7 @@ import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
+declare const gapi: any;
 
 declare var $ :any;
 @Component({
@@ -36,10 +37,45 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
+    //this.initiateExternalProviders();
+  }
+
+  initiateExternalProviders(){
+
+
+    //initiate google
+    var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
+    var scope = [
+      'profile',
+      'email'
+    ].join(' ');
+    
+    if(gapi.auth2 == undefined){
+    
+        gapi.load('auth2', () => {
+          
+          gapi.auth2.init({
+            client_id: clientId,
+            cookiepolicy: 'single_host_origin',
+            scope: scope
+          });
+          
+          
+    
+          //RE-Render the button (due to known issues of google-button with angular's lifecycle)
+          gapi.signin2.render('googleBtn');
+    
+          //var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
+          //this.attachSignin(buttonElement);
+          
+        });
+    
+    }
 
   }
 
 
+
   slideNav(){
 
     $("#appSidebar").toggleClass("expanded");
diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html
index 23911d5db..d2d9dffef 100644
--- a/dmp-frontend/src/app/dmps/dmps.html
+++ b/dmp-frontend/src/app/dmps/dmps.html
@@ -68,7 +68,7 @@
         <!--  data-toggle="modal" data-target="#dmp-deatils-fullscreen"  -->
         <td class="url-like"  (click)="viewDetailedDMP(dmp)">{{(dmp?.label?.length > 40) ? (dmp?.label | slice:0:40)+'...':(dmp?.label) }}</td>
         <td style="width:20px;">{{dmp?.version}}</td>
-        <td style="width:300px;">{{dmp?.previous}}</td>
+        <td style="width:300px;">{{(dmp?.previous?.label?.length > 40) ? (dmp?.previous?.label | slice:0:40)+'...':(dmp?.previous?.label) }}</td>
         <td class="url-like" (click)="viewDetailedProject(dmp)">{{(dmp?.project?.label?.length > 40) ? (dmp?.project?.label | slice:0:40)+'...':(dmp?.project?.label) }}</td>
         <td>{{(dmp?.description?.length > 40) ? (dmp?.description | slice:0:40)+'...':(dmp?.description) }}</td>
         <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
index 718a431e2..d0f2dca38 100644
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
@@ -28,48 +28,19 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
 
   ngAfterViewInit() {
 
-    this.googleInit();
+
+    //RE-Render the button (due to known issues of google-button with angular's lifecycle)
+    gapi.signin2.render('googleBtn');
+    var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
+    this.attachSignin(buttonElement);
     
   }
   
 
-  private clientId:string = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
-  
-  private scope = [
-    'profile',
-    'email'
-    //,
-    //'https://www.googleapis.com/auth/plus.me',
-    //'https://www.googleapis.com/auth/contacts.readonly',
-    //'https://www.googleapis.com/auth/admin.directory.user.readonly'
-  ].join(' ');
-
-  public auth2: any;
-  
-  public googleInit() {
-
-
-    gapi.load('auth2', () => {
-      this.auth2 = gapi.auth2.init({
-        client_id: this.clientId,
-        cookiepolicy: 'single_host_origin',
-        scope: this.scope
-      });
-
-      //RE-Render the button (due to known issues of google-button with angular's lifecycle)
-      gapi.signin2.render('googleBtn');
-
-      var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
-      this.attachSignin(buttonElement);
-      
-      
-    });
-
-
-  }
   
   public attachSignin(element) {
-    this.auth2.attachClickHandler(element, {},
+
+    gapi.auth2.getAuthInstance().attachClickHandler(element, {},
       (googleUser) => {
         //simple_notifier("success",null,"Successful login");
         let profile = googleUser.getBasicProfile();
@@ -78,7 +49,8 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
       function (error) {
         //simple_notifier("danger",null,"Failed to login");
         console.log(JSON.stringify(error, undefined, 2));
-      });
+      }
+    ); 
 
   }
 
diff --git a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.html b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.html
index baf72769a..f980afb2b 100644
--- a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.html
+++ b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.html
@@ -4,7 +4,7 @@
         <div class="modal-content" id="dmp-modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-                <h4 style="text-align:center;" class="modal-title">Details</h4>
+                <h4 style="text-align:center;" class="modal-title"><b>{{dmp?.label}}</b></h4>
             </div>
             <div class="modal-body">
                 <!--
@@ -15,13 +15,13 @@
                 <div class="container-fluid">
 
                     <div class="row">
-                        <div class="col-md-6 row-cell"><b>Digital Management Plan: </b>{{dmp?.label}}</div>
-                        <div class="col-md-6 row-cell"><b>Project: </b>{{dmp?.project?.label}}</div>
+                        <!--<div class="col-md-6 row-cell"><b>Digital Management Plan: </b>{{dmp?.label}}</div>-->
+                        <div class="col-md-12 row-cell"><b>Belongs to Project: </b>{{dmp?.project?.label}}</div>
 
                     </div>
 
                     <div class="row">
-                        <div class="col-md-6 row-cell"><b>Version:</b><span class="badge">{{dmp?.version}}</span></div>
+                        <div class="col-md-6 row-cell"><b>Current version:</b><span class="badge">{{dmp?.version}}</span></div>
                         <div class="col-md-6 row-cell"><b>Previous DMPs:</b> 
                             <ul>
                                 <li *ngFor="let previous of previousDMPs">{{ previous?.label }}</li>
diff --git a/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.html b/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.html
index 3af091825..a779bd987 100644
--- a/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.html
+++ b/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.html
@@ -4,7 +4,7 @@
         <div class="modal-content" id="project-modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
-                <h4 class="modal-title" style="text-align:center;">{{project?.label}}</h4>
+                <h4 class="modal-title" style="text-align:center;"><b>{{project?.label}}</b></h4>
             </div>
             <div class="modal-body">
                 <!--
@@ -61,13 +61,13 @@
                         <div class="col-md-6 row-cell"><b>Associated DMPs:</b> 
                             <ul>
                                 <li *ngFor="let dmp of project?.dmps">
-                                    {{ dmp?.label }} (creator: {{   users.get(dmp?.creator)    }})
+                                    {{ dmp?.label }} (owner: {{   users.get(dmp?.creator)    }})
                                 </li>
                             </ul>
                         </div>
                     </div>
                     
-                    
+                    {{users | json}}
 
                     <!-- 
                         STUFF NOT USED: 
diff --git a/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.ts b/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.ts
index e7759e8ff..52d72fd26 100644
--- a/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.ts
+++ b/dmp-frontend/src/app/viewers/project-detailed/project-detailed.component.ts
@@ -38,6 +38,7 @@ export class ProjectDetailedComponent implements OnInit {
             response => {
               this.project.dmps = response;
               this.populateUsersMap(this.project);
+              //this.get
             },
             error => {
               console.log("Could not fetch project's dmps");
@@ -60,18 +61,30 @@ export class ProjectDetailedComponent implements OnInit {
     return this.serverService.getUserByID(userid); //Notice: returns Observable !
   }
 
+
+  async populateUsersMap1(project){
+    this.users.clear();
+    for(var i=0;i<project.dmps.length;i++){
+      debugger;
+      const user = await this.serverService.getUserByID(project.dmps[i].creator).toPromise();
+      this.users.set(project.dmps[i].creator, user.name);
+    }
+  }
+
+
+
   private populateUsersMap(project){
     this.users.clear();
     project.dmps.forEach(dmp => {
       if(!this.users.has(dmp.creator)){
         this.serverService.getUserByID(dmp.creator).subscribe(
           user => {
-            this.users.set(dmp.creator, dmp.name);
+            this.users.set(dmp.creator, user.name);
           },
           error => {
           }
         )
-        
+        console.log("USERS: "+JSON.stringify(this.users))
       }
     });
   }
diff --git a/dmp-frontend/src/assets/custom.js b/dmp-frontend/src/assets/custom.js
index afc973797..68147b753 100644
--- a/dmp-frontend/src/assets/custom.js
+++ b/dmp-frontend/src/assets/custom.js
@@ -1,3 +1,31 @@
+var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
+var scope = [
+  'profile',
+  'email'
+].join(' ');
+
+if(gapi.auth2 == undefined){
+
+    gapi.load('auth2', () => {
+      
+      gapi.auth2.init({
+        client_id: clientId,
+        cookiepolicy: 'single_host_origin',
+        scope: scope
+      });
+      
+      debugger;
+
+      //RE-Render the button (due to known issues of google-button with angular's lifecycle)
+      gapi.signin2.render('googleBtn');
+
+      //var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
+      //this.attachSignin(buttonElement);
+      
+    });
+
+}
+
 
 var sign_out_google = (function() {
     var auth2 = gapi.auth2.getAuthInstance();