Button format on actions, loading spinner

dmp-frontend/package-lock.json

@@ -5509,6 +5509,16 @@
         "ngx-slimscroll": "3.4.1"
       }
     },
+    "ng4-loading-spinner": {
+      "version": "1.0.27",
+      "resolved": "https://registry.npmjs.org/ng4-loading-spinner/-/ng4-loading-spinner-1.0.27.tgz",
+      "integrity": "sha1-7HrRKbXcG1VZY7WvQQc2vISmPs4=",
+      "requires": {
+        "@angular/core": "4.3.6",
+        "rxjs": "5.4.3",
+        "zone.js": "0.8.17"
+      }
+    },
     "ngx-slimscroll": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/ngx-slimscroll/-/ngx-slimscroll-3.4.1.tgz",

dmp-frontend/package.json

@@ -34,6 +34,7 @@
     "moment": "^2.19.1",
     "ng-sidebar": "^6.0.4",
     "ng2-datepicker": "^2.1.3",
+    "ng4-loading-spinner": "^1.0.27",
     "ngx-webstorage": "^1.8.0",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.17"

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

@@ -67,7 +67,7 @@ import { NgDatepickerModule } from 'ng2-datepicker';
 import { StatusToString } from './pipes/various/status-to-string';
 import { SidebarModule } from 'ng-sidebar';
 import { UserWorkspaceComponent } from './user-workspace/user-workspace.component';
-
+import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
 
 
 
@@ -114,6 +114,7 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
     AngularDraggableModule,
     DataTableModule,
     NgDatepickerModule,
+    Ng4LoadingSpinnerModule,
     SidebarModule.forRoot()
     
   ],

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

@@ -10,6 +10,7 @@ import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
 import { Param } from '../entities/model/param';
 import { StatusToString } from '../pipes/various/status-to-string';
 import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
+import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
 
 declare var $: any;
 
@@ -77,7 +78,8 @@ export class DatasetsComponent implements OnInit {
     private serverService: ServerService,
     private route: ActivatedRoute,
     private router: Router,
-    private ngZone: NgZone) {
+    private ngZone: NgZone,
+    private spinnerService: Ng4LoadingSpinnerService) {
     this.dataset = this.createEmptyDataset();
 
     this.datasetProfileDropDown = new DropdownField();
@@ -176,12 +178,17 @@ export class DatasetsComponent implements OnInit {
  
 
   getDatasetForDmpMethod(dmpid) {
+    this.spinnerService.show();
     this.serverService.getDatasetForDmp({ "id": dmpid }).subscribe(
       response => {
         this.tableData = response;
+        
       },
       error => {
         console.log("could not retrieve dataset for dpm: "+dmpid);
+      },
+      () =>{
+        this.spinnerService.hide();
       }
     );
   }

dmp-frontend/src/app/datasets/dataset.html

@@ -1,5 +1,5 @@
 
-
+<app-spinner> </app-spinner>
     <table class="table table-striped" [mfData]="tableData | datasetTableFilter : filterQuery | datasetstatusFilter: statusFilter" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"
         [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
 

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

@@ -197,9 +197,9 @@ selectDmp(item){
     this.datasetsComponent.getDatasetForDmpMethod(item.id);
 }
 
-editRow(item, event){ 
+editRow(item, elementId){ 
   this.isSelected = true;
-  if (event.toElement.id == "editDMP"){
+  if (elementId == "editDMP"){
     this.dmp.label = item.label;
     this.dmp.previous = item.previous;
     this.dmp.version = item.version;
@@ -214,7 +214,7 @@ editRow(item, event){
     },0);
     
   }
-  if(event.toElement.id == "changeVersionDMP"){
+  if(elementId == "changeVersionDMP"){
     this.dmp.label = item.label;
     this.dmp.previous = item.previous;
     this.dmp.version = item.version;
@@ -226,10 +226,12 @@ editRow(item, event){
     $("#newVersionDmpModal").modal("show");
   }
   
-  if(event.toElement.id == "showDatasets"){
+  if(elementId == "showDatasets"){
     this.selectDmp(item);
     
   }
+
+  return false; //return false will prevent browser from following the link
   
 }
 

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

@@ -70,10 +70,14 @@
             <td>{{dmp?.description}}</td>
             <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
             <td>{{dmp?.status | statusToString }}</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="modal" data-target="#delete-dmp-confirm" (click)="markDMPForDelete(dmp)" 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>
+            <td><a href="#" class="editGridColumn" (click)="editRow(dmp, 'editDMP')"> <!--btn btn-primary btn-rounded css for button style -->
+                <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
+                <a href="#" class="editGridColumn" (click)="editRow(dmp, 'changeVersionDMP')">
+                    <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
+                <a href="#" class="editGridColumn" (click)="markDMPForDelete(dmp)">
+                    <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm"  title="delete DMP"></i> </a>
+                <a href="#" class="editGridColumn" (click)="editRow(dmp, 'showDatasets')">
+                    <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
         </tr>
     </tbody>
     <tfoot>