Working with forms

Author: mjangir

i18n/en.json

@@ -87,6 +87,7 @@
   "accessPermission.deletedSuccessfully": "Permission deleted successfully",
   "accessPermission.createdSuccessfully": "Permission created successfully",
   "accessPermission.updatedSuccessfully": "Permission updated successfully",
+  "accessPermission.savedSuccessfully": "Permission saved successfully",
   "accessPermission.selectPermissions": "Select Permissions",
   "accessPermission.searchPermissions": "Search Permissions"
 ,

i18n/en/admin/users.json

@@ -51,6 +51,7 @@
   "accessPermission.deletedSuccessfully": "Permission deleted successfully",
   "accessPermission.createdSuccessfully": "Permission created successfully",
   "accessPermission.updatedSuccessfully": "Permission updated successfully",
+  "accessPermission.savedSuccessfully": "Permission saved successfully",
   "accessPermission.selectPermissions": "Select Permissions",
   "accessPermission.searchPermissions": "Search Permissions"
 }

src/app/admin/access/permission/containers/create-permission/create-permission.container.html

@@ -65,11 +65,11 @@
     </div>
     <div class="card-footer">
       <button class="btn btn-outline-primary px-3" [disabled]="form.invalid" type="submit">
-        <i [hidden]="accessPermissionSandbox.createPermissionLoading$ | async" class='fa fa-save'></i>
-        <i [hidden]="!(accessPermissionSandbox.createPermissionLoading$ | async)" class='fa fa-circle-o-notch fa-spin'></i>
+        <i [hidden]="accessPermissionSandbox.savePermissionPending$ | async" class='fa fa-save'></i>
+        <i [hidden]="!(accessPermissionSandbox.savePermissionPending$ | async)" class='fa fa-circle-o-notch fa-spin'></i>
         {{'btn.lbl.submit' | translate}}
       </button>
-        <button type="submit" class="btn btn-outline-danger" routerLink="/admin/access/permission/list"><i class="fa fa-arrow-left"></i> {{'btn.lbl.goBack' | translate}}</button>
+        <button type="button" class="btn btn-outline-danger" routerLink="/admin/access/permission/list"><i class="fa fa-arrow-left"></i> {{'btn.lbl.goBack' | translate}}</button>
     </div>
   </form>
 </div>

src/app/admin/access/permission/containers/create-permission/create-permission.container.ts

@@ -65,13 +65,4 @@ export class CreatePermissionContainer implements OnInit {
 
     this.accessPermissionSandbox.createPermission(permissionForm);
   }
-
-  /**
-   * Unsubscribe from all Observables
-   * 
-   * @memberof CreatePermissionContainer
-   */
-  public onNgDestroy() {
-    this.accessPermissionSandbox.unregisterEvents();
-  }
 }

src/app/admin/access/permission/containers/list-permissions/list-permissions.container.ts

@@ -97,13 +97,4 @@ export class ListPermissionsContainer implements OnInit {
   onRowSelect({selected}) {
     this.selectedIds = selected.map(permission => permission.id);
   }
-
-  /**
-   * Unsubscribe from all Observables
-   * 
-   * @memberof CreatePermissionContainer
-   */
-  public onNgDestroy() {
-    this.accessPermissionSandbox.unregisterEvents();
-  }
 }

src/app/admin/access/permission/containers/update-permission/update-permission.container.html

@@ -65,11 +65,11 @@
     </div>
     <div class="card-footer">
       <button class="btn btn-outline-primary px-3" [disabled]="form.invalid" type="submit">
-        <i [hidden]="accessPermissionSandbox.updatePermissionLoading$ | async" class='fa fa-save'></i>
-        <i [hidden]="!(accessPermissionSandbox.updatePermissionLoading$ | async)" class='fa fa-circle-o-notch fa-spin'></i>
+        <i [hidden]="accessPermissionSandbox.savePermissionPending$ | async" class='fa fa-save'></i>
+        <i [hidden]="!(accessPermissionSandbox.savePermissionPending$ | async)" class='fa fa-circle-o-notch fa-spin'></i>
         {{'btn.lbl.submit' | translate}}
       </button>
-        <button type="submit" class="btn btn-outline-danger" routerLink="/admin/access/permission/list"><i class="fa fa-arrow-left"></i> {{'btn.lbl.goBack' | translate}}</button>
+        <button type="button" class="btn btn-outline-danger" routerLink="/admin/access/permission/list"><i class="fa fa-arrow-left"></i> {{'btn.lbl.goBack' | translate}}</button>
     </div>
   </form>
 </div>

src/app/admin/access/permission/containers/update-permission/update-permission.container.ts

@@ -128,7 +128,6 @@ export class UpdatePermissionContainer implements OnInit {
    */
   public onNgDestroy() {
     this.routerSubscription.unsubscribe();
-    this.accessPermissionSandbox.unregisterEvents();
   }
 
 }

src/app/admin/access/permission/containers/view-permission/view-permission.container.ts

@@ -70,7 +70,6 @@ export class ViewPermissionContainer implements OnInit {
    */
   public onNgDestroy() {
     this.routerSubscription.unsubscribe();
-    this.accessPermissionSandbox.unregisterEvents();
   }
 
 }

src/app/admin/access/permission/permission.component.ts

@@ -1,19 +1,30 @@
 import { 
   Component, 
-  OnInit
+  OnInit,
+  OnDestroy
 }                       from '@angular/core';
 import { Store }        from '@ngrx/store';
 import { Router }       from '@angular/router';
+import { AccessPermissionSandbox } from './permission.sandbox';
 
 @Component({
   selector: 'app-permission',
   templateUrl: './permission.component.html'
 })
-export class PermissionComponent implements OnInit {
+export class PermissionComponent implements OnInit, OnDestroy {
 
-  constructor(private router: Router) { }
+  constructor(
+    private router: Router,
+    private accessPermissionSandbox: AccessPermissionSandbox
+  ) { }
 
   ngOnInit() {
+    this.accessPermissionSandbox.resetAllStates();
+    this.accessPermissionSandbox.registerSubscribers();
+  }
+
+  ngOnDestroy() {
+    this.accessPermissionSandbox.unregisterSubscribers();
   }
 
 }

src/app/admin/access/permission/permission.sandbox.ts

@@ -24,52 +24,28 @@ export class AccessPermissionSandbox extends Sandbox {
   public permissions$: Observable<Permission[]> = this.store.select(fromStore.getLoadPermissionsData);
 
   /**
-   * Create permission loading
+   * Save permission pending
    * 
    * @type {Observable<boolean>}
    * @memberof AccessPermissionSandbox
    */
-  public createPermissionLoading$: Observable<boolean> = this.store.select(fromStore.getCreatePermissionLoading);
+  public savePermissionPending$: Observable<boolean> = this.store.select(fromStore.getSavePermissionPending);
 
   /**
-   * Create permission loaded
+   * Save permission completed
    * 
    * @type {Observable<boolean>}
    * @memberof AccessPermissionSandbox
    */
-  public createPermissionLoaded$: Observable<boolean> = this.store.select(fromStore.getCreatePermissionLoaded);
+  public savePermissionCompleted$: Observable<boolean> = this.store.select(fromStore.getSavePermissionCompleted);
 
   /**
-   * Create permission error
+   * Save permission error
    * 
    * @type {Observable<any>}
    * @memberof AccessPermissionSandbox
    */
-  public createPermissionError$: Observable<any> = this.store.select(fromStore.getCreatePermissionError);
-
-  /**
-   * Update permission loading
-   * 
-   * @type {Observable<boolean>}
-   * @memberof AccessPermissionSandbox
-   */
-  public updatePermissionLoading$: Observable<boolean> = this.store.select(fromStore.getUpdatePermissionLoading);
-
-  /**
-   * Update permission loaded
-   * 
-   * @type {Observable<boolean>}
-   * @memberof AccessPermissionSandbox
-   */
-  public updatePermissionLoaded$: Observable<boolean> = this.store.select(fromStore.getUpdatePermissionLoaded);
-
-  /**
-   * Update permission error
-   * 
-   * @type {Observable<any>}
-   * @memberof AccessPermissionSandbox
-   */
-  public updatePermissionError$: Observable<any> = this.store.select(fromStore.getUpdatePermissionError);
+  public savePermissionError$: Observable<any> = this.store.select(fromStore.getSavePermissionError);
 
   /**
    * Viewing permission
@@ -120,37 +96,34 @@ export class AccessPermissionSandbox extends Sandbox {
     private utilService: UtilService
   ) {
     super();
-    this.registerAuthEvents();
-    console.log("calling permission sandbox constructor");
   }
 
   /**
-   * Un-Register events
+   * Un-Register subscribers
    * 
    * @memberof AccessPermissionSandbox
    */
-  public unregisterEvents() {
+  public unregisterSubscribers() {
     this.subscriptions.forEach(sub => sub.unsubscribe());
   }
 
   /**
-   * Register auth events
+   * Register subscribers
    * 
    * @private
    * @memberof AccessPermissionSandbox
    */
-  private registerAuthEvents(): void {
-    const createSub = this.createPermissionLoaded$.subscribe(loaded => {
-      if(loaded) {
-        this.utilService.displayNotification('accessPermission.createdSuccessfully', 'success');
+  public registerSubscribers(): void {
+    const saveCompleted = this.savePermissionCompleted$.subscribe(completed => {
+      if(completed) {
+        this.utilService.displayNotification('accessPermission.savedSuccessfully', 'success');
         this.utilService.navigateAfter(['/admin/access/permission/list']);
       }
     });
 
-    const updateSub = this.updatePermissionLoaded$.subscribe(loaded => {
-      if(loaded) {
-        this.utilService.displayNotification('accessPermission.updatedSuccessfully', 'success');
-        this.utilService.navigateAfter(['/admin/access/permission/list']);
+    const saveError = this.savePermissionError$.subscribe(err => {
+      if(err) {
+        this.utilService.displayNotification(err.json().error.message, 'error');
       }
     });
 
@@ -160,19 +133,7 @@ export class AccessPermissionSandbox extends Sandbox {
       }
     });
 
-    const createErrSub = this.createPermissionError$.subscribe(data => {
-      if(data) {
-        this.utilService.displayNotification(data.json().error.message, 'error');
-      }
-    });
-    
-    const updateErrSub = this.updatePermissionError$.subscribe(data => {
-      if(data) {
-        this.utilService.displayNotification(data.json().error.message, 'error');
-      }
-    });
-
-    this.subscriptions = [createSub, updateSub, deleteSub, createErrSub, updateErrSub];
+    this.subscriptions = [deleteSub, saveCompleted, saveError];
   }
 
   /**
@@ -191,7 +152,7 @@ export class AccessPermissionSandbox extends Sandbox {
    * @memberof AccessPermissionSandbox
    */
   public createPermission(form: PermissionForm) {
-    this.store.dispatch(new fromStore.CreatePermissionAction(form));
+    this.store.dispatch(new fromStore.SavePermissionAction(form));
   }
 
   /**
@@ -201,7 +162,7 @@ export class AccessPermissionSandbox extends Sandbox {
    * @memberof AccessPermissionSandbox
    */
   public updatePermission(form: PermissionForm) {
-    this.store.dispatch(new fromStore.UpdatePermissionAction(form));
+    this.store.dispatch(new fromStore.SavePermissionAction(form));
   }
 
   /**
@@ -233,4 +194,52 @@ export class AccessPermissionSandbox extends Sandbox {
   public deleteMultiplePermissions(ids: Array<number>) {
     this.store.dispatch(new fromStore.DeleteMultiplePermissionAction({ids}));
   }
+
+  /**
+   * Reset all states
+   * 
+   * @memberof AccessPermissionSandbox
+   */
+  public resetAllStates() {
+    this.store.dispatch(new fromStore.ResetLoadPermissionAction());
+    this.store.dispatch(new fromStore.ResetDeletePermissionAction());
+    this.store.dispatch(new fromStore.ResetViewPermissionAction());
+    this.store.dispatch(new fromStore.ResetSavePermissionAction());
+  }
+
+  /**
+   * Reset load state
+   * 
+   * @memberof AccessPermissionSandbox
+   */
+  public resetLoadState() {
+    this.store.dispatch(new fromStore.ResetLoadPermissionAction());
+  }
+
+  /**
+   * Reset delete state
+   * 
+   * @memberof AccessPermissionSandbox
+   */
+  public resetDeleteState() {
+    this.store.dispatch(new fromStore.ResetDeletePermissionAction());
+  }
+
+  /**
+   * Reset view state
+   * 
+   * @memberof AccessPermissionSandbox
+   */
+  public resetViewState() {
+    this.store.dispatch(new fromStore.ResetViewPermissionAction());
+  }
+
+  /**
+   * Reset save state
+   * 
+   * @memberof AccessPermissionSandbox
+   */
+  public resetSaveState() {
+    this.store.dispatch(new fromStore.ResetSavePermissionAction());
+  }
 }