--

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

@@ -21,7 +21,7 @@ const appRoutes: Routes = [
   { path: 'projects', component: ProjectsComponent},
   { path: 'project', component: ProjectDetailedComponent},
   { path: 'dmps', component: DmpComponent},
-  { path: 'dmp', component: DmpDetailedComponent },
+  { path: 'dmp', component: DmpDetailedComponent},
   { path: 'welcome', component: HomepageComponent},
   { path: '',   redirectTo: '/login', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent },

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

@@ -1,7 +1,7 @@
 
 <table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
-    #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
+#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
-    <thead>
+<thead>
     <tr class="rowFilter">
         <th colspan="1">
             <input class="form-control" [(ngModel)]="filterQuery" placeholder='Search in Labels' />
@@ -57,14 +57,15 @@
         </th>
 
     </tr>
-    </thead>
+</thead>
-    <tbody>
+<tbody>
     <tr class="grayout-empty-table" *ngIf="!mf.data[0]">
         <td colspan="5">No elements</td>
     </tr>
 
     <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>
@@ -88,8 +89,8 @@
             <button type="button" class="btn btn-default table-button" (click)="showDatasetsOfDmp(dmp)"> <i class="fa fa-folder-o" aria-hidden="true"></i> Datasets</button>
         </td>
     </tr>
-    </tbody>
+</tbody>
-    <tfoot>
+<tfoot>
     <tr>
         <td colspan="1">
             <button type="button" class="btn btn-info btncustom" (click)="newDmpForm(item)">Create New</button>
@@ -98,13 +99,13 @@
             <mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
         </td>
     </tr>
-    </tfoot>
+</tfoot>
 </table>
 <!-- </div> -->
 
 <!--Modal for new and edit DMP-->
 <div class="modal fade" id="newDmpModal" tabindex="-1" role="dialog" aria-labelledby="newDmpModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
+<div class="modal-dialog" role="document">
     <div class="modal-content">
         <div class="modal-header centered-text">
             <h4 class="modal-title" id="modalLabel"><b>{{ dmp?.id ? "Edit Data Management Plan" : "New Data Management Plan" }}</b></h4>
@@ -163,13 +164,13 @@
             <button type="submit" class="btn btn-primary" (click)="SaveDmp();">Save Dmp</button>
         </div>
     </div>
-    </div>
+</div>
 </div>
 
 
 <!--Modal for changing version-->
 <div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
+<div class="modal-dialog" role="document">
     <div class="modal-content">
         <div class="modal-header">
             <h4 class="modal-title" id="modalLabel"><b>Clone Data Management Plan</b></h4>
@@ -206,11 +207,11 @@
             <button type="submit" class="btn btn-primary" [disabled]="!dmpForm.form.valid" (click)="cloneDMP(dmp);">Save Dmp</button>
         </div>
     </div>
-    </div>
+</div>
 </div>
 
 <div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
-    <div class="modal-dialog" role="document">
+<div class="modal-dialog" role="document">
     <div class="modal-content">
     <div class="modal-header">
         <h5 class="modal-title">Change Staus</h5>
@@ -225,8 +226,44 @@
         <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
     </div>
     </div>
-    </div>
 </div>
+</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 -->

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', {
+      gapi.signin2.render('googleBtn');
-        'onsuccess': console.log("SUCCESSFULLY RERENDERED THE BUTTON"),
-        'onfailure': console.log("FAILED TO RERENDER THE BUTTON")
-      });
 
       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");