Button format on actions, loading spinner

This commit is contained in:
annampak 2017-11-08 10:59:07 +02:00
parent 42f002af40
commit d30d5c637f
7 changed files with 36 additions and 11 deletions

View File

@ -5509,6 +5509,16 @@
"ngx-slimscroll": "3.4.1" "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": { "ngx-slimscroll": {
"version": "3.4.1", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/ngx-slimscroll/-/ngx-slimscroll-3.4.1.tgz", "resolved": "https://registry.npmjs.org/ngx-slimscroll/-/ngx-slimscroll-3.4.1.tgz",

View File

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

View File

@ -67,7 +67,7 @@ import { NgDatepickerModule } from 'ng2-datepicker';
import { StatusToString } from './pipes/various/status-to-string'; import { StatusToString } from './pipes/various/status-to-string';
import { SidebarModule } from 'ng-sidebar'; import { SidebarModule } from 'ng-sidebar';
import { UserWorkspaceComponent } from './user-workspace/user-workspace.component'; 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, AngularDraggableModule,
DataTableModule, DataTableModule,
NgDatepickerModule, NgDatepickerModule,
Ng4LoadingSpinnerModule,
SidebarModule.forRoot() SidebarModule.forRoot()
], ],

View File

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

View File

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

View File

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

View File

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