Business and COB Date management

src/app/system/configurations/business-date-tab/business-date-tab.component.html

@@ -0,0 +1,97 @@
+<div class="container space">
+
+  <div class="mat-elevation-z8">
+    <div *ngIf="!isBusinessDateEnabled">
+      <p>The Business Date functionality is not enabled. If you need that, Go to Global Configurations and enable the
+        configuration: <code>{{configurationName}}</code></p>
+    </div>
+
+    <div *ngIf="isBusinessDateEnabled">
+
+      <mat-card>
+        <form [formGroup]="businessDateForm">
+          <mat-card-content>
+            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="space">
+              <div fxFlex="50%">
+                <span fxFlex="40%" class="date-type">User date format: </span>
+                <span fxFlex="60%" class="date-value">{{userDateFormat}}</span>
+              </div>
+            </div>
+
+            <!-- Business Date -->
+            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+              <div fxFlex="50%" *ngIf="!isEditInProgress">
+                <span fxFlex="40%" class="date-type">Business Date: </span>
+                <span fxFlex="60%" class="date-value">{{businessDate | dateFormat}}</span>
+              </div>
+
+              <mat-form-field (click)="businessDatePicker.open()" *ngIf="isEditInProgress && (dateIndex == 0)">
+                <mat-label>Business Date</mat-label>
+                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="businessDatePicker"
+                  formControlName="businessDate">
+                <mat-datepicker-toggle matSuffix [for]="businessDatePicker">
+                </mat-datepicker-toggle>
+                <mat-datepicker #businessDatePicker></mat-datepicker>
+                <mat-error *ngIf="businessDateForm.controls.businessDate.hasError('required')">
+                  Business Date is <strong>required</strong>
+                </mat-error>
+              </mat-form-field>
+
+              <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
+                <span *ngIf="isEditInProgress && (dateIndex == 0)">
+                  <button mat-stroked-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
+                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
+                    Submit
+                  </button>
+                </span>
+                <button mat-button *ngIf="isEditInProgress" (click)="editInProgressToggle(0)">
+                  Cancel
+                </button>
+                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="Edit the Business Date"
+                  matTooltipPosition="above" (click)="editInProgressToggle(0)">
+                  <fa-icon icon="edit" size="lg"></fa-icon>
+                </button>
+              </div>
+            </div>
+
+            <!-- COB Date -->
+            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+              <div fxFlex="50%" *ngIf="!isEditInProgress">
+                <span fxFlex="40%" class="date-type">COB Date: </span>
+                <span fxFlex="60%" class="date-value">{{cobDate | dateFormat}}</span>
+              </div>
+
+              <mat-form-field (click)="cobDatePicker.open()" *ngIf="isEditInProgress && (dateIndex == 1)">
+                <mat-label>COB Date</mat-label>
+                <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cobDatePicker"
+                  formControlName="businessDate">
+                <mat-datepicker-toggle matSuffix [for]="cobDatePicker">
+                </mat-datepicker-toggle>
+                <mat-datepicker #cobDatePicker></mat-datepicker>
+                <mat-error *ngIf="businessDateForm.controls.cobDate.hasError('required')">
+                  COB Date is <strong>required</strong>
+                </mat-error>
+              </mat-form-field>
+
+              <div fxLayoutGap="4%" fxFlex="22%" class="options-wrapper">
+                <span *ngIf="isEditInProgress && (dateIndex == 1)">
+                  <button mat-stroked-button color="primary" [disabled]="businessDateForm.pristine" (click)="submit()"
+                    *mifosxHasPermission="'UPDATE_BUSINESSDATE'">
+                    Submit
+                  </button>
+                </span>
+                <button mat-button *ngIf="isEditInProgress" (click)="editInProgressToggle(1)">
+                  Cancel
+                </button>
+                <button type="button" color="primary" *ngIf="!isEditInProgress" mat-icon-button matTooltip="Edit the COB Date"
+                  matTooltipPosition="above" (click)="editInProgressToggle(1)">
+                  <fa-icon icon="edit" size="lg"></fa-icon>
+                </button>
+              </div>
+            </div>
+          </mat-card-content>
+        </form>
+      </mat-card>
+    </div>
+  </div>
+</div>

src/app/system/configurations/business-date-tab/business-date-tab.component.scss

@@ -0,0 +1,15 @@
+.space {
+  padding-bottom: 40px;
+}
+
+.date-type {
+  font-size: 1.25rem;
+  font-weight: 400;
+  min-width: 40%;
+}
+
+.date-value {
+  display: inline;
+  font-size: 1rem;
+  min-width: 50%;
+}

src/app/system/configurations/business-date-tab/business-date-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BusinessDateTabComponent } from './business-date-tab.component';
+
+describe('BusinessDateTabComponent', () => {
+  let component: BusinessDateTabComponent;
+  let fixture: ComponentFixture<BusinessDateTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BusinessDateTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BusinessDateTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/configurations/business-date-tab/business-date-tab.component.ts

@@ -0,0 +1,141 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { ActivatedRoute } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+@Component({
+  selector: 'mifosx-business-date-tab',
+  templateUrl: './business-date-tab.component.html',
+  styleUrls: ['./business-date-tab.component.scss']
+})
+export class BusinessDateTabComponent implements OnInit {
+
+  configurationName = 'enable_business_date';
+  businessDateType = 'BUSINESS_DATE';
+  cobDateType = 'COB_DATE';
+
+  /** Minimum date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum date allowed. */
+  maxDate = new Date(2100, 0, 1);
+  /** Business date */
+  businessDate = new Date();
+  /** COB date */
+  cobDate = new Date();
+  /** business Date form. */
+  businessDateForm: FormGroup;
+  /** Configuration data. */
+  configurations: any;
+  /** Business data. */
+  businessDateData: any;
+
+  dateIndex = 0;
+  userDateFormat: '';
+  isBusinessDateEnabled = false;
+  isEditInProgress = false;
+
+  /**
+   * Retrieves the configurations data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {SystemService} systemService System Service.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private route: ActivatedRoute,
+    private systemService: SystemService,
+    private settingsService: SettingsService,
+    private formBuilder: FormBuilder,
+    private dateUtils: Dates) {}
+
+  ngOnInit(): void {
+    this.userDateFormat = this.settingsService.dateFormat;
+    this.getConfigurations();
+    this.createBusinessDateForm();
+  }
+
+  /**
+   * Get the Configuration and the Business Date data
+   */
+  getConfigurations(): void {
+    this.systemService.getConfigurations()
+    .subscribe((configurationData: any) => {
+      this.configurations = configurationData.globalConfiguration;
+      this.validateBusinessDateStatus();
+      if (this.isBusinessDateEnabled) {
+        this.systemService.getBusinessDates()
+        .subscribe((businessDateData: any) => {
+          this.businessDateData = businessDateData;
+          this.setBusinessDates();
+        });
+      }
+    });
+  }
+
+  /**
+   * Set the Business Date and COB Date.
+   */
+  setBusinessDates() {
+    this.businessDateData.forEach((data: any) => {
+      if (data.type === this.businessDateType) {
+        this.businessDate = new Date(data.date);
+      } else {
+        this.cobDate = new Date(data.date);
+      }
+    });
+  }
+
+  /**
+   * Creates the Business Date form.
+   */
+  createBusinessDateForm(): void {
+    this.businessDateForm = this.formBuilder.group({
+      'businessDate': [new Date(), Validators.required],
+      'cobDate': [new Date(), Validators.required],
+    });
+  }
+
+  /**
+   * Validate If the enable_business_date configuration is enabled or disabled.
+   */
+  validateBusinessDateStatus(): void {
+    this.isBusinessDateEnabled = false;
+    this.configurations.forEach((config: any) => {
+      if (config.name === this.configurationName) {
+        this.isBusinessDateEnabled = config.enabled;
+      }
+    });
+  }
+
+  /**
+   * Flag to display or not the datepicker control to set the Business Date value
+   */
+   editInProgressToggle(index: any): void {
+    this.dateIndex = index;
+    this.isEditInProgress = !this.isEditInProgress;
+  }
+
+  submit() {
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const prevBusinessDate: Date = this.businessDateForm.value.businessDate;
+    let dateType = this.businessDateType;
+    if (this.dateIndex === 1) {
+      dateType = this.cobDateType;
+    }
+    const data = {
+      date: this.dateUtils.formatDate(prevBusinessDate, dateFormat),
+      type: dateType,
+      dateFormat,
+      locale
+    };
+    this.systemService.updateBusinessDate(data).subscribe((response: any) => {
+      this.getConfigurations();
+      this.editInProgressToggle(this.dateIndex);
+    });
+  }
+}

src/app/system/configurations/configurations.component.html

@@ -0,0 +1,13 @@
+<mat-card class="configurations-card">
+  <mat-card-content>
+    <mat-tab-group #tabGroup mat-align-tabs="center">
+      <mat-tab label="Global Configurations">
+        <mifosx-global-configurations-tab></mifosx-global-configurations-tab>
+      </mat-tab>
+      <mat-tab label="Business Date">
+        <mifosx-business-date-tab></mifosx-business-date-tab>
+      </mat-tab>
+    </mat-tab-group>
+
+  </mat-card-content>
+</mat-card>

src/app/system/configurations/configurations.component.scss

@@ -0,0 +1,27 @@
+.configurations-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  padding-bottom: 50px;
+  min-height: 500px;
+  .header {
+    padding: 1%;
+    .header-title-group {
+      .client-card-title {
+        margin-top: 1.4rem;
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+  }
+  .navigation-tabs {
+    overflow: auto;
+  }
+  i:hover {
+    cursor: pointer;
+  }
+}

src/app/system/configurations/configurations.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationsComponent } from './configurations.component';
+
+describe('ConfigurationsComponent', () => {
+  let component: ConfigurationsComponent;
+  let fixture: ComponentFixture<ConfigurationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfigurationsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/configurations/configurations.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-configurations',
+  templateUrl: './configurations.component.html',
+  styleUrls: ['./configurations.component.scss']
+})
+export class ConfigurationsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.html

@@ -0,0 +1,38 @@
+<div class="container space">
+
+  <mat-card>
+
+    <form [formGroup]="configurationForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>Configuration Name</mat-label>
+            <input matInput required formControlName="name">
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Configuration Value</mat-label>
+            <input matInput required type="number" formControlName="value">
+            <mat-error *ngIf="configurationForm.controls.value.hasError('required')">
+              Configuration Value is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../']"> Cancel </button>
+        <button mat-raised-button color="primary" [disabled]="configurationForm.pristine || !configurationForm.valid">
+          Submit </button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.scss

@@ -0,0 +1,7 @@
+.container {
+  max-width: 37rem;
+}
+
+.space {
+  padding-bottom: 40px;
+}

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditConfigurationComponent } from './edit-configuration.component';
+
+describe('EditConfigurationComponent', () => {
+  let component: EditConfigurationComponent;
+  let fixture: ComponentFixture<EditConfigurationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditConfigurationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/configurations/global-configurations-tab/edit-configuration/edit-configuration.component.ts

@@ -0,0 +1,69 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { SystemService } from '../../../system.service';
+
+/**
+ * Edit Configuration Component
+ */
+@Component({
+  selector: 'mifosx-edit-configuration',
+  templateUrl: './edit-configuration.component.html',
+  styleUrls: ['./edit-configuration.component.scss']
+})
+export class EditConfigurationComponent implements OnInit {
+
+  /** Global Configuration form. */
+  configurationForm: FormGroup;
+  /** Configuration. */
+  configuration: any;
+
+  /**
+   * Retrieves the configuration data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService System Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private systemService: SystemService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { configuration: any }) => {
+      this.configuration = data.configuration;
+    });
+  }
+
+  /**
+   * Creates and sets the configuration form.
+   */
+  ngOnInit() {
+    this.createConfigurationForm();
+  }
+
+  /**
+   * Creates and sets the global configuration form.
+   */
+  createConfigurationForm() {
+    this.configurationForm = this.formBuilder.group({
+      'name': [{ value: this.configuration.name, disabled: true }, Validators.required],
+      'value': [this.configuration.value, Validators.required]
+    });
+  }
+
+  /**
+   * Submits the global configuration form and updates global configuration,
+   * if successful redirects to view all global configurations.
+   */
+  submit() {
+    this.systemService
+      .updateConfiguration(this.configuration.id, this.configurationForm.value)
+      .subscribe((response: any) => {
+        this.router.navigate(['../../'], { relativeTo: this.route });
+      });
+  }
+
+}

src/app/system/configurations/global-configurations-tab/global-configuration.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/**
+ * Configurations data resolver.
+ */
+@Injectable()
+export class GlobalConfigurationResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+   constructor(private systemService: SystemService) {}
+
+   /**
+    * Returns the Configuration data.
+    * @returns {Observable<any>}
+    */
+   resolve(route: ActivatedRouteSnapshot): Observable<any> {
+     const configurationId = route.paramMap.get('id');
+     return this.systemService.getConfiguration(configurationId);
+   }
+
+}

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html

@@ -0,0 +1,56 @@
+<div class="container">
+
+  <div fxLayout="row">
+    <mat-form-field fxFlex>
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event.target.value)">
+    </mat-form-field>
+  </div>
+
+  <div class="mat-elevation-z8">
+
+    <table mat-table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <td mat-cell *matCellDef="let configuration"> {{ configuration.name }}&nbsp;&nbsp;
+        <fa-icon icon="question-circle" matTooltip="{{ configuration.description === undefined ? 'No Description' : configuration.description }}" matTooltipPosition="right"></fa-icon>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="enabled">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <td mat-cell *matCellDef="let configuration">
+          <mat-slide-toggle [(ngModel)]="configuration.enabled" name="{{configuration.name}}" (click)="toggleStatus(configuration)">
+            <div [className]="configuration.enabled ? 'enabled' : 'disabled'">
+              <span *ngIf="configuration.enabled">Enabled</span>
+              <span *ngIf="!configuration.enabled">Disabled</span>
+            </div>
+          </mat-slide-toggle>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="value">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+        <td mat-cell *matCellDef="let configuration"> {{ configuration.value }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="edit">
+        <th mat-header-cell *matHeaderCellDef> Edit </th>
+        <td mat-cell *matCellDef="let configuration">
+          <button mat-button color="primary" [routerLink]="[configuration.id, 'edit']">
+            <fa-icon icon="edit"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+
+  </div>
+
+</div>

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.scss

@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+}
+
+// TODO: CONFIGURE THESE CLASSES GLOBALLY
+.enabled {
+  color: #32cd32;
+}
+
+.disabled {
+  color: #f44366;
+}

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GlobalConfigurationsTabComponent } from './global-configurations-tab.component';
+
+describe('GlobalConfigurationsTabComponent', () => {
+  let component: GlobalConfigurationsTabComponent;
+  let fixture: ComponentFixture<GlobalConfigurationsTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GlobalConfigurationsTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GlobalConfigurationsTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts

@@ -0,0 +1,78 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+@Component({
+  selector: 'mifosx-global-configurations-tab',
+  templateUrl: './global-configurations-tab.component.html',
+  styleUrls: ['./global-configurations-tab.component.scss']
+})
+export class GlobalConfigurationsTabComponent implements OnInit {
+
+  /** Configuration data. */
+  configurationData: any;
+  /** Columns to be displayed in configurations table. */
+  displayedColumns: string[] = ['name', 'enabled', 'value', 'edit'];
+  /** Data source for configurations table. */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for configurations table. */
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  /** Sorter for configurations table. */
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  /**
+   * Retrieves the configurations data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {SystemService} systemService System Service.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private route: ActivatedRoute,
+              private systemService: SystemService) {
+      this.configurationData = this.systemService.getConfigurations();
+  }
+
+  /**
+   * Sets the configurations table.
+   */
+  ngOnInit() {
+    this.setConfigurationData();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for configurations table.
+   */
+   setConfigurationData(): void {
+    this.systemService.getConfigurations()
+    .subscribe((configurationData: any) => {
+      this.configurationData = configurationData.globalConfiguration;
+      this.dataSource = new MatTableDataSource(this.configurationData);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+    });
+  }
+
+  /**
+   * Filters data in configurations table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Enables/Disables respective configuration
+   */
+  toggleStatus(configuration: any) {
+    this.systemService.updateConfiguration(configuration.id, { enabled: !configuration.enabled })
+      .subscribe((response: any) => {
+        configuration.enabled = response.changes.enabled;
+      });
+  }
+}

src/app/system/configurations/global-configurations-tab/global-configurations.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { SystemService } from '../../system.service';
+
+/**
+ * Configurations data resolver.
+ */
+@Injectable()
+export class GlobalConfigurationsResolver implements Resolve<Object> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+  constructor(private systemService: SystemService) {}
+
+  /**
+   * Returns the configurations data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.systemService.getConfigurations();
+  }
+
+}