--

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

@@ -85,8 +85,6 @@
        
       <router-outlet></router-outlet> 
 
-      <!--this should be invisible -->
-
     </div>
 
 </div>

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

@@ -67,3 +67,54 @@ tr.hover:hover > * {
     color: #0645AD;
     cursor: pointer;
 }
+
+
+
+
+
+
+/* START - FOR DETAILS MODALS */
+
+  .modal.modal-fullscreen .modal-dialog, 
+  .modal.modal-fullscreen .modal-content {
+      position: absolute;
+      left: 1%;
+      right: 1%;
+      top: 1%;
+      bottom: 1%;
+  }
+  .modal.modal-fullscreen .modal-dialog {
+    margin: 0;
+    width: 98%;
+    animation-duration:0.5s;
+  }
+  .modal.modal-fullscreen .modal-content {
+    border: none;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: inherit;
+    -moz-box-shadow: inherit;
+    -o-box-shadow: inherit;
+    box-shadow: inherit;
+    /* change bg color below */
+   /* background:#1abc9c; */
+  }
+  .modal.modal-fullscreen.force-fullscreen {
+    /* Remove the padding inside the body */
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-body {
+    padding: 0;
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-header,
+  .modal.modal-fullscreen.force-fullscreen .modal-footer {
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-header {
+    top: 0;
+  }
+  .modal.modal-fullscreen.force-fullscreen .modal-footer {
+    bottom: 0;
+  }
+  /* END - FOR DETAILS MODALS */

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

@@ -265,7 +265,8 @@ export class DmpComponent implements OnInit{
 
   viewDetailedDMP(dmp){
     console.log(dmp)
-    this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
+    this.router.navigate([{ outlets: { dmpDetails: [ 'dmp' ] }}]); 
+    //this.router.navigate(['/dmp'], { queryParams: { "dmpid":dmp.id, "label":dmp.label }});
   }
 
   viewDetailedProject(dmp){

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

@@ -65,6 +65,7 @@
 
     <tr *ngFor="let dmp of mf.data" class="hover">
         <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp?.id}}</td>
+        <!--  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>
@@ -229,5 +230,41 @@
 </div>
 
 
+
+<!-- MODAL FOR DETAILS -->
+<button class="btn btn-primary" data-toggle="modal" data-target="#dmp-deatils-fullscreen" contenteditable="false">Open Fullscreen Modal</button>
+
+<div class="modal fade modal-fullscreen  footer-to-bottom" id="dmp-deatils-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog animated zoomInLeft">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h4 class="modal-title">Modal title</h4>
+            </div>
+            <div class="modal-body">
+                <p class="">One fine body…</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+
+
+
+
+
+
+<router-outlet name="dmpDetails"></router-outlet> 
+
+
+
+
 <!-- Confirmation module- do not delete -->
 <confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>

dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GooggleSignInComponent } from './googgle-sign-in.component';
-
-describe('GooggleSignInComponent', () => {
-  let component: GooggleSignInComponent;
-  let fixture: ComponentFixture<GooggleSignInComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ GooggleSignInComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GooggleSignInComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts

@@ -23,7 +23,7 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
   }
 
   ngOnInit() {
-    //this.googleInit();
+
   }
 
   ngAfterViewInit() {
@@ -48,6 +48,7 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
   
   public googleInit() {
 
+
     gapi.load('auth2', () => {
       this.auth2 = gapi.auth2.init({
         client_id: this.clientId,
@@ -56,15 +57,15 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
       });
 
       //RE-Render the button (due to known issues of google-button with angular's lifecycle)
-      gapi.signin2.render('googleBtn', {
-        'onsuccess': console.log("SUCCESSFULLY RERENDERED THE BUTTON"),
-        'onfailure': console.log("FAILED TO RERENDER THE BUTTON")
-      });
+      gapi.signin2.render('googleBtn');
 
       var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
       this.attachSignin(buttonElement);
       
+      
     });
+
+
   }
   
   public attachSignin(element) {

dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MainSignInComponent } from './main-sign-in.component';
-
-describe('MainSignInComponent', () => {
-  let component: MainSignInComponent;
-  let fixture: ComponentFixture<MainSignInComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MainSignInComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MainSignInComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -18,6 +18,8 @@ export class DmpDetailedComponent implements OnInit {
 
   ngOnInit() {
 
+    console.log("LOADING DmpDetailedComponent")
+
     let sub = this.route.queryParams.subscribe(params => {
 
       let dmpid = params.dmpid;
@@ -25,7 +27,6 @@ export class DmpDetailedComponent implements OnInit {
       this.serverService.getDmp(dmpid, getParams).subscribe(
         response => {
           this.dmp = response;
-          debugger;
         },
         error => {
           console.log("Could not load dmp");