add the loading spinner to the form's button

bulktrade · Feb 10, 2017 · 3ebb442 · 3ebb442
1 parent 8ea498b
commit 3ebb442
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 18 deletions.
diff --git a/modules/admin/src/app/app.component.scss b/modules/admin/src/app/app.component.scss
@@ -5,6 +5,34 @@ body {
     font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
+.primeng-primary-btn {
+    border: 1px solid #2399e5;
+    color: #fff;
+    background: #2399e5;
+    -webkit-transition: background-color .2s;
+    -moz-transition: background-color .2s;
+    transition: background-color .2s;
+
+    &:focus,
+    &:hover {
+        border: 1px solid #1f89ce;
+        background: #1f89ce;
+        outline: 0 none;
+        color: #fff;
+    }
+
+    &:active {
+        border: 1px solid #156090;
+        background: #186ba0;
+        color: #fff;
+    }
+
+    .loading-spinner {
+        font-size: 16px;
+        color: #fff;
+    }
+}
+
 .ag-material {
     .ag-cell-not-inline-editing {
         padding-top: 2px !important;

diff --git a/modules/admin/src/app/common/crud-repository.ts b/modules/admin/src/app/common/crud-repository.ts
@@ -6,6 +6,7 @@ export abstract class CrudRepository<T> {
     public abstract repositoryName: string;
     public abstract projectionName: string;
     public abstract titleColumns: string;
+    public loading: boolean = false;
     public apiUrl: string;
 
     constructor(public http: Http,
@@ -27,9 +28,11 @@ export abstract class CrudRepository<T> {
             body: data
         });
 
-        return this.http.request(this.apiUrl + '/repository/' + this.repositoryName, requestOptions)
+        this.loading = true;
+
+        return this.intercept(this.http.request(this.apiUrl + '/repository/' + this.repositoryName, requestOptions)
             .map(res => res.json())
-            .share();
+            .share());
     }
 
     /**
@@ -47,9 +50,11 @@ export abstract class CrudRepository<T> {
             body: data
         });
 
-        return this.http.request(this.apiUrl + '/repository/' + this.repositoryName + '/' + id, requestOptions)
+        this.loading = true;
+
+        return this.intercept(this.http.request(this.apiUrl + '/repository/' + this.repositoryName + '/' + id, requestOptions)
             .map(res => res.json())
-            .share();
+            .share());
     }
 
     /**
@@ -62,9 +67,11 @@ export abstract class CrudRepository<T> {
             method: RequestMethod.Delete
         });
 
-        return this.http.request(this.apiUrl + '/repository/' + this.repositoryName + '/' + id, requestOptions)
+        this.loading = true;
+
+        return this.intercept(this.http.request(this.apiUrl + '/repository/' + this.repositoryName + '/' + id, requestOptions)
             .map(res => res.json())
-            .share();
+            .share());
     }
 
     /**
@@ -109,4 +116,16 @@ export abstract class CrudRepository<T> {
             .map(res => res.json())
             .share();
     }
+
+    intercept(observable: Rx.Observable<T>): Rx.Observable<T> {
+        return Rx.Observable.create(obs => {
+            observable.subscribe(res => {
+                this.loading = false;
+                obs.next(res);
+            }, err => {
+                this.loading = false;
+                obs.error(err);
+            });
+        });
+    }
 }
diff --git a/modules/admin/src/app/customers/customers-contacts/contacts-create/contacts-create.html b/modules/admin/src/app/customers/customers-contacts/contacts-create/contacts-create.html
@@ -136,8 +136,10 @@
 				<div class="ui-grid-row">
 					<div class="ui-grid-col-2"></div>
 					<div class="ui-grid-col-6">
-						<button style="width: 100%" type="submit" pButton id="createContacts"
-						        [disabled]="dynamicForm.form.invalid" [label]="'contacts.createContacts' | translate">
+						<button style="width: 100%" type="submit" class="btn primeng-primary-btn" id="createContacts"
+						        [disabled]="dynamicForm.form.invalid">
+							<span>{{ 'contacts.createContacts' | translate }}</span>
+							<i *ngIf="customersContactsService.loading" class="fa fa-spinner fa-pulse fa-3x fa-fw loading-spinner"></i>
 						</button>
 					</div>
 					<div class="ui-grid-col-4"></div>

diff --git a/modules/admin/src/app/customers/customers-contacts/contacts-update/contacts-update.html b/modules/admin/src/app/customers/customers-contacts/contacts-update/contacts-update.html
@@ -136,8 +136,10 @@
 				<div class="ui-grid-row">
 					<div class="ui-grid-col-2"></div>
 					<div class="ui-grid-col-6">
-						<button style="width: 100%" type="submit" pButton id="createContacts"
-						        [disabled]="dynamicForm.form.invalid" [label]="'contacts.updateContacts' | translate">
+						<button style="width: 100%" type="submit" class="btn primeng-primary-btn" id="updateContacts"
+						        [disabled]="dynamicForm.form.invalid">
+							<span>{{ 'contacts.updateContacts' | translate }}</span>
+							<i *ngIf="customersContactsService.loading" class="fa fa-spinner fa-pulse fa-3x fa-fw loading-spinner"></i>
 						</button>
 					</div>
 					<div class="ui-grid-col-4"></div>

diff --git a/modules/admin/src/app/customers/customers-create/crud-create.component.ts b/modules/admin/src/app/customers/customers-create/crud-create.component.ts
@@ -9,7 +9,6 @@ import { Customer } from "../model/customer";
 @Component({
     selector: 'customers-create',
     template: `
-        <breadcrumb></breadcrumb>
         <dynamic-form [submitButtonName]="submitButtonName"
                     (onSubmit)="onSubmit($event)"></dynamic-form>
     `,

diff --git a/modules/admin/src/app/customers/customers-form/customers-form.component.html b/modules/admin/src/app/customers/customers-form/customers-form.component.html
@@ -168,8 +168,10 @@
 				<div class="ui-grid-row">
 					<div class="ui-grid-col-2"></div>
 					<div class="ui-grid-col-6">
-						<button style="width: 100%" type="submit" pButton id="updateProfile"
-						        [disabled]="dynamicForm.form.invalid" [label]="submitButtonName | translate">
+						<button style="width: 100%" type="submit" class="btn primeng-primary-btn" id="updateProfile"
+						        [disabled]="dynamicForm.form.invalid">
+							<span>{{ submitButtonName | translate }}</span>
+							<i *ngIf="customersService.loading" class="fa fa-spinner fa-pulse fa-3x fa-fw loading-spinner"></i>
 						</button>
 					</div>
 					<div class="ui-grid-col-4"></div>

diff --git a/modules/admin/src/app/customers/customers-update/customers-update.component.ts b/modules/admin/src/app/customers/customers-update/customers-update.component.ts
@@ -9,7 +9,6 @@ import * as clone from "js.clone";
 @Component({
     selector: 'customers-update',
     template: `
-        <breadcrumb></breadcrumb>
         <dynamic-form [submitButtonName]="submitButtonName" [model]="model"
                     (onSubmit)="onSubmit($event)"></dynamic-form>
     `,

diff --git a/modules/admin/src/app/customers/customers-users/users-create/users-create.html b/modules/admin/src/app/customers/customers-users/users-create/users-create.html
@@ -118,8 +118,10 @@
 				<div class="ui-grid-row">
 					<div class="ui-grid-col-2"></div>
 					<div class="ui-grid-col-6">
-						<button style="width: 100%" type="submit" pButton id="createContacts"
-						        [disabled]="dynamicForm.form.invalid" [label]="'contacts.createContacts' | translate">
+						<button style="width: 100%" type="submit" class="btn primeng-primary-btn" id="createUsers"
+						        [disabled]="dynamicForm.form.invalid">
+							<span>{{ 'users.createUser' | translate }}</span>
+							<i *ngIf="customersUsersService.loading" class="fa fa-spinner fa-pulse fa-3x fa-fw loading-spinner"></i>
 						</button>
 					</div>
 					<div class="ui-grid-col-4"></div>

diff --git a/modules/admin/src/app/customers/customers-users/users-update/users-update.html b/modules/admin/src/app/customers/customers-users/users-update/users-update.html
@@ -117,8 +117,10 @@
 				<div class="ui-grid-row">
 					<div class="ui-grid-col-2"></div>
 					<div class="ui-grid-col-6">
-						<button style="width: 100%" type="submit" pButton id="createContacts"
-						        [disabled]="dynamicForm.form.invalid" [label]="'contacts.updateContacts' | translate">
+						<button style="width: 100%" type="submit" class="btn primeng-primary-btn" id="updateUsers"
+						        [disabled]="dynamicForm.form.invalid">
+							<span>{{ 'users.updateUser' | translate }}</span>
+							<i *ngIf="customersUsersService.loading" class="fa fa-spinner fa-pulse fa-3x fa-fw loading-spinner"></i>
 						</button>
 					</div>
 					<div class="ui-grid-col-4"></div>

diff --git a/modules/admin/src/assets/i18n/en.json b/modules/admin/src/assets/i18n/en.json
@@ -112,6 +112,8 @@
   "customers.numberValidator": "Must be only numbers",
   "contacts.title": "Contacts",
   "contacts.createContacts": "Create",
+  "users.createUser": "Create",
+  "users.updateUser": "Update",
   "contacts.updateContacts": "Update",
   "contacts.customerUsers": "Customer users",
   "customers.successCreateCustomer": "Customer was successfully created",