Skip to content
Snippets Groups Projects
Commit db85062e authored by Fabien Forestier's avatar Fabien Forestier
Browse files

Merge branch...

Merge branch '134-data-accesses-button-should-be-disabled-while-a-request-is-made' into 'development'

Add loading on buttons and update disabled condition

Closes #134

See merge request refonte-data/portail-data!44
parents 9ef493ba 5b028101
No related branches found
No related tags found
2 merge requests!45Version 2.1.9,!44Add loading on buttons and update disabled condition
Pipeline #1702 passed
...@@ -68,8 +68,9 @@ ...@@ -68,8 +68,9 @@
</div> </div>
</div> </div>
<div class="action-button-wrapper"> <div class="action-button-wrapper">
<button type="button" class="button btn-blue-text" [disabled]="selectedResources(requestableResources).length <= 0" <button type="button" class="button btn-blue-text" [ngClass]="{'is-loading': isLoading}"
(click)="requestAccess()" i18n="@@userService.sendRequest"> [disabled]="selectedResources(requestableResources).length <= 0 || isLoading" (click)="requestAccess()"
i18n="@@userService.sendRequest">
Send my request Send my request
</button> </button>
</div> </div>
\ No newline at end of file
...@@ -15,6 +15,7 @@ import { AppRoutes } from '../../../../routes'; ...@@ -15,6 +15,7 @@ import { AppRoutes } from '../../../../routes';
}) })
export class AvailableDataComponent implements OnInit { export class AvailableDataComponent implements OnInit {
private _pendingRequests: number = 0;
AppRoutes = AppRoutes; AppRoutes = AppRoutes;
requestableResources: Resource[] = []; requestableResources: Resource[] = [];
openedRow: number[] = []; openedRow: number[] = [];
...@@ -30,6 +31,7 @@ export class AvailableDataComponent implements OnInit { ...@@ -30,6 +31,7 @@ export class AvailableDataComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
this._pendingRequests += 1;
forkJoin([ forkJoin([
// Get the list of the different modes (wms, ws...) // Get the list of the different modes (wms, ws...)
this._userAccessService.getServices(), this._userAccessService.getServices(),
...@@ -45,13 +47,19 @@ export class AvailableDataComponent implements OnInit { ...@@ -45,13 +47,19 @@ export class AvailableDataComponent implements OnInit {
return (e.geonetUuid && e.geonetUuid !== ''); return (e.geonetUuid && e.geonetUuid !== '');
}); });
const uuids = this.restrictedAccessDatasets.map((e) => { return e.geonetUuid; }); const uuids = this.restrictedAccessDatasets.map((e) => { return e.geonetUuid; });
this._elasticSearchService.getSlugsFromUuid(uuids).subscribe((response) => { this._elasticSearchService.getSlugsFromUuid(uuids).subscribe(
this.slugsUuids = response; (response) => {
this.initRequestableResources(); this.slugsUuids = response;
}); this.initRequestableResources();
},
(err) => { },
() => {
this._pendingRequests -= 1;
}
);
}, },
(err) => { (err) => {
this._pendingRequests -= 1;
this._notificationService.notify(new Notification({ this._notificationService.notify(new Notification({
type: 'error', type: 'error',
message: `${notificationMessages.userServices.initializationError}`, message: `${notificationMessages.userServices.initializationError}`,
...@@ -143,6 +151,7 @@ export class AvailableDataComponent implements OnInit { ...@@ -143,6 +151,7 @@ export class AvailableDataComponent implements OnInit {
this.selectedResources(this.requestableResources).forEach((e) => { this.selectedResources(this.requestableResources).forEach((e) => {
accessRequests.push({ id: e.datasetId, servicesId: e.services.map(e => e.id) }); accessRequests.push({ id: e.datasetId, servicesId: e.services.map(e => e.id) });
}); });
this._pendingRequests += 1;
this._userAccessService.requestAccessToResource(accessRequests).subscribe( this._userAccessService.requestAccessToResource(accessRequests).subscribe(
(res) => { (res) => {
// Displaying notification for each sucessful and unsuccessful request // Displaying notification for each sucessful and unsuccessful request
...@@ -172,9 +181,13 @@ export class AvailableDataComponent implements OnInit { ...@@ -172,9 +181,13 @@ export class AvailableDataComponent implements OnInit {
message: `${notificationMessages.userServices.failedToLoadUserResources}`, message: `${notificationMessages.userServices.failedToLoadUserResources}`,
})); }));
}, },
() => {
this._pendingRequests -= 1;
},
); );
}, },
(err) => { (err) => {
this._pendingRequests -= 1;
this._notificationService.notify(new Notification({ this._notificationService.notify(new Notification({
type: 'error', type: 'error',
message: `${notificationMessages.userServices.addFailed}`, message: `${notificationMessages.userServices.addFailed}`,
...@@ -270,4 +283,8 @@ export class AvailableDataComponent implements OnInit { ...@@ -270,4 +283,8 @@ export class AvailableDataComponent implements OnInit {
} }
} }
get isLoading() {
return this._pendingRequests > 0 ? true : false;
}
} }
...@@ -144,13 +144,15 @@ ...@@ -144,13 +144,15 @@
</div> </div>
<div class="action-button-wrapper"> <div class="action-button-wrapper">
<button type="button" class="button btn-red-text" [disabled]="selectedResources(userResources).length <= 0" <button type="button" class="button btn-red-text" [ngClass]="{'is-loading': isRemovingAccess}"
(click)="removeAccess()" i18n="@@userService.removeButton"> [disabled]="selectedResources(userResources).length <= 0 || isLoading" (click)="removeAccess()"
i18n="@@userService.removeButton">
Remove access Remove access
</button> </button>
<button type="button" class="button btn-blue-text" [disabled]="selectedResources(userResources).length <= 0" <button type="button" class="button btn-blue-text" [ngClass]="{'is-loading': isRenewingAccess}"
(click)="renewAccesses()" i18n="@@userService.renewButton"> [disabled]="selectedResources(userResources).length <= 0 || isLoading" (click)="renewAccesses()"
i18n="@@userService.renewButton">
Renew access Renew access
</button> </button>
</div> </div>
\ No newline at end of file
...@@ -14,8 +14,11 @@ import { AppRoutes } from '../../../../routes'; ...@@ -14,8 +14,11 @@ import { AppRoutes } from '../../../../routes';
styleUrls: ['./user-services.component.scss'], styleUrls: ['./user-services.component.scss'],
}) })
export class UserServicesComponent implements OnInit { export class UserServicesComponent implements OnInit {
AppRoutes = AppRoutes;
private _pendingRequests: number = 0;
isRemovingAccess = false;
isRenewingAccess = false;
AppRoutes = AppRoutes;
userResources: Resource[] = []; userResources: Resource[] = [];
services: IService[] = []; services: IService[] = [];
statusesTrad = userServicesStatuses; statusesTrad = userServicesStatuses;
...@@ -31,6 +34,7 @@ export class UserServicesComponent implements OnInit { ...@@ -31,6 +34,7 @@ export class UserServicesComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
this._pendingRequests += 1;
forkJoin([ forkJoin([
// Get the list of the requested services by the user // Get the list of the requested services by the user
this._userAccessService.getUserResources(), this._userAccessService.getUserResources(),
...@@ -56,6 +60,9 @@ export class UserServicesComponent implements OnInit { ...@@ -56,6 +60,9 @@ export class UserServicesComponent implements OnInit {
message: `${notificationMessages.userServices.initializationError}`, message: `${notificationMessages.userServices.initializationError}`,
})); }));
}, },
() => {
this._pendingRequests -= 1;
},
); );
} }
...@@ -205,6 +212,10 @@ export class UserServicesComponent implements OnInit { ...@@ -205,6 +212,10 @@ export class UserServicesComponent implements OnInit {
); );
} }
get isLoading() {
return this._pendingRequests > 0 ? true : false;
}
// Functions perfoming actions on user access // Functions perfoming actions on user access
removeAccess() { removeAccess() {
const accessRequests = []; const accessRequests = [];
...@@ -213,6 +224,10 @@ export class UserServicesComponent implements OnInit { ...@@ -213,6 +224,10 @@ export class UserServicesComponent implements OnInit {
this.selectedResources(this.userResources).forEach((e) => { this.selectedResources(this.userResources).forEach((e) => {
accessRequests.push({ id: e.datasetId, servicesId: e.services.map(e => e.id) }); accessRequests.push({ id: e.datasetId, servicesId: e.services.map(e => e.id) });
}); });
this._pendingRequests += 1;
this.isRemovingAccess = true;
this._userAccessService.deleteAccessToResource(accessRequests).subscribe( this._userAccessService.deleteAccessToResource(accessRequests).subscribe(
(res) => { (res) => {
// Displaying notification for each sucessful and unsuccessful request // Displaying notification for each sucessful and unsuccessful request
...@@ -241,9 +256,14 @@ export class UserServicesComponent implements OnInit { ...@@ -241,9 +256,14 @@ export class UserServicesComponent implements OnInit {
message: `${notificationMessages.userServices.failedToLoadUserResources}`, message: `${notificationMessages.userServices.failedToLoadUserResources}`,
})); }));
}, },
() => {
this._pendingRequests -= 1;
this.isRemovingAccess = false;
},
); );
}, },
(err) => { (err) => {
this._pendingRequests -= 1;
this._notificationService.notify(new Notification({ this._notificationService.notify(new Notification({
type: 'error', type: 'error',
message: `${notificationMessages.userServices.removeFailed}`, message: `${notificationMessages.userServices.removeFailed}`,
...@@ -262,6 +282,9 @@ export class UserServicesComponent implements OnInit { ...@@ -262,6 +282,9 @@ export class UserServicesComponent implements OnInit {
}, },
); );
this._pendingRequests += 1;
this.isRenewingAccess = true;
this._userAccessService.renewAccessToResource(accessRequests).subscribe( this._userAccessService.renewAccessToResource(accessRequests).subscribe(
(res) => { (res) => {
this.resetUserRessourcesState(); this.resetUserRessourcesState();
...@@ -287,6 +310,10 @@ export class UserServicesComponent implements OnInit { ...@@ -287,6 +310,10 @@ export class UserServicesComponent implements OnInit {
message: `${notificationMessages.userServices.renewFailed}`, message: `${notificationMessages.userServices.renewFailed}`,
})); }));
}, },
() => {
this._pendingRequests -= 1;
this.isRenewingAccess = false;
},
); );
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment