feat: add XBRL report page (#629)

Fixes: #628

src/app/core/shell/toolbar/toolbar.component.html

@@ -96,7 +96,7 @@
   <button mat-menu-item [routerLink]="['/reports', 'Savings']">Savings</button>
   <button mat-menu-item [routerLink]="['/reports', 'Fund']">Funds</button>
   <button mat-menu-item [routerLink]="['/reports', 'Accounting']">Accounting</button>
-  <button mat-menu-item>XBRL</button>
+  <button mat-menu-item [routerLink]="['/xbrl']">XBRL</button>
 </mat-menu>
 
 <mat-menu #adminMenu="matMenu" [overlapTrigger]="false">

src/app/products/recurring-deposit-products/create-recurring-deposit-product/create-recurring-deposit-product.component.ts

@@ -89,7 +89,7 @@ export class CreateRecurringDepositProductComponent implements OnInit {
 
   submit() {
     // TODO: Update once language and date settings are setup
-    let recurringDepositProduct = {
+    const recurringDepositProduct = {
       ...this.recurringDepositProduct,
       charges: this.recurringDepositProduct.charges.map((charge: any) => ({ id: charge.id })),
       locale: 'en' // locale required for depositAmount

src/app/reports/common-resolvers/mixmappings.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 { ReportsService } from '../reports.service';
+
+/**
+ * Mix Mappings data resolver.
+ */
+@Injectable()
+export class MixMappingsResolver implements Resolve<Object> {
+
+  /**
+   * @param {ReportsService} reportsService Reports service.
+   */
+  constructor(private reportsService: ReportsService) {}
+
+  /**
+   * Returns Mix Mappings.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.reportsService.getMixMappings();
+  }
+
+}

src/app/reports/common-resolvers/mixtaxonomy.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 { ReportsService } from '../reports.service';
+
+/**
+ * Mix Taxononmy data resolver.
+ */
+@Injectable()
+export class MixTaxonomyResolver implements Resolve<Object> {
+
+  /**
+   * @param {ReportsService} reportsService Reports service.
+   */
+  constructor(private reportsService: ReportsService) {}
+
+  /**
+   * Returns the Mix Taxonomy data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.reportsService.getMixTaxonomyArray();
+  }
+
+}

src/app/reports/common-resolvers/reports.resolver.ts

@@ -6,7 +6,7 @@ import { Resolve } from '@angular/router';
 import { Observable } from 'rxjs';
 
 /** Custom Services */
-import { ReportsService } from './reports.service';
+import { ReportsService } from '../reports.service';
 
 /**
  * Reports data resolver.

src/app/reports/reports-routing.module.ts

@@ -11,10 +11,15 @@ import { extract } from '../core/i18n/i18n.service';
 /** Custom Components */
 import { ReportsComponent } from './reports.component';
 import { RunReportComponent } from './run-report/run-report.component';
+import { XBRLComponent } from './xbrl/xbrl.component';
+import { XBRLReportComponent } from './xbrl-report/xbrl-report.component';
 
 /** Custom Resolvers */
-import { ReportsResolver } from './reports.resolver';
-import { RunReportResolver } from './run-report/run-report.resolver';
+import { ReportsResolver } from './common-resolvers/reports.resolver';
+import { RunReportResolver } from './common-resolvers/run-report.resolver';
+import { MixTaxonomyResolver } from './common-resolvers/mixtaxonomy.resolver';
+import { MixMappingsResolver } from './common-resolvers/mixmappings.resolver';
+import { GlAccountsResolver } from '../accounting/common-resolvers/gl-accounts.resolver';
 
 /** Reports Routes */
 const routes: Routes = [
@@ -59,6 +64,26 @@ const routes: Routes = [
           ]
         }
       ]
+    },
+    {
+      path: 'xbrl',
+      data: { title: extract('XBRL'), breadcrumb: 'XBRL' },
+      children: [
+        {
+          path: '',
+          component: XBRLComponent,
+          resolve: {
+            mixtaxonomy: MixTaxonomyResolver,
+            mixmapping: MixMappingsResolver,
+            glAccounts: GlAccountsResolver
+          }
+        },
+        {
+          path: 'report',
+          data: { title: extract('XBRL Report'), breadcrumb: 'Run Report' },
+          component: XBRLReportComponent
+        }
+      ]
     }
   ])
 ];
@@ -73,7 +98,10 @@ const routes: Routes = [
   exports: [RouterModule],
   providers: [
     ReportsResolver,
-    RunReportResolver
+    RunReportResolver,
+    MixTaxonomyResolver,
+    MixMappingsResolver,
+    GlAccountsResolver
   ]
 })
 export class ReportsRoutingModule { }

src/app/reports/reports.module.ts

@@ -12,6 +12,8 @@ import { RunReportComponent } from './run-report/run-report.component';
 import { TableAndSmsComponent } from './run-report/table-and-sms/table-and-sms.component';
 import { ChartComponent } from './run-report/chart/chart.component';
 import { PentahoComponent } from './run-report/pentaho/pentaho.component';
+import { XBRLComponent } from './xbrl/xbrl.component';
+import { XBRLReportComponent } from './xbrl-report/xbrl-report.component';
 
 /**
  * Reports Module
@@ -28,7 +30,9 @@ import { PentahoComponent } from './run-report/pentaho/pentaho.component';
     RunReportComponent,
     TableAndSmsComponent,
     ChartComponent,
-    PentahoComponent
+    PentahoComponent,
+    XBRLComponent,
+    XBRLReportComponent
   ],
   providers: [ DecimalPipe ]
 })

src/app/reports/reports.service.ts

@@ -28,7 +28,40 @@ export class ReportsService {
    * @returns {Observable<any>} Reports data
    */
   getReports(): Observable<any> {
-    return  this.http.get('/reports');
+    return this.http.get('/reports');
+  }
+
+  /**
+   * @returns {Observable<any>} Mix Taxonomy data
+   */
+  getMixTaxonomyArray(): Observable<any> {
+    return this.http.get('/mixtaxonomy');
+  }
+
+  /**
+   * @returns {Observable<any>} Mix Taxonomy data
+   */
+  getMixMappings(): Observable<any> {
+    return this.http.get('/mixmapping');
+  }
+
+  /**
+   * @param {any} mixMappingData Mix Mapping data to be posted
+   * @returns {Observable<any>} response code
+   */
+  editMixMappings(mixMappingData: any): Observable<any> {
+    return this.http.put('/mixmapping', mixMappingData);
+  }
+
+  /**
+   * @param {any} dates start date and end date
+   * @returns {Observable<any>} Mix Report
+   */
+  getMixReport(dates: any) {
+    const httpParams = new HttpParams()
+      .set('startDate', dates.startDate)
+      .set('endDate', dates.endDate);
+    return this.http.get('/mixreport', { params: httpParams, responseType: 'text' });
   }
 
   /**

src/app/reports/xbrl-report/xbrl-report.component.html

@@ -0,0 +1,79 @@
+<div class="container form">
+
+  <mat-card *ngIf="isCollapsed">
+
+    <form [formGroup]="xbrlForm" (ngSubmit)="runreport()">
+
+      <mat-card-content fxLayout="column">
+
+        <mat-form-field fxFlex>
+          <mat-label>Start Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" formControlName="startDate">
+          <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #startDatePicker></mat-datepicker>
+        </mat-form-field>
+
+        <mat-form-field fxFlex>
+          <mat-label>End Date</mat-label>
+          <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
+          <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #endDatePicker></mat-datepicker>
+        </mat-form-field>
+
+      </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">Run Report</button>
+      </mat-card-actions>
+
+    </form>
+    
+  </mat-card>
+
+</div>
+
+<div class="container">
+
+  <mat-card *ngIf="!isCollapsed">
+
+    <button mat-raised-button color="primary" (click)="isCollapsed = !isCollapsed">
+      Parameters
+    </button>
+
+    <div class="m-t-20">
+
+      <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 entry"> {{ entry.name }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="dimension">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Dimension </th>
+          <td mat-cell *matCellDef="let entry"> {{ entry.dimension }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="value">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+          <td mat-cell *matCellDef="let entry"> <input [formControl]="entry.value"></td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+
+      </table>
+
+      <div class="container m-t-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <a [href]="submit()" download="file.xml">
+        <button mat-raised-button color="primary">Submit</button>
+        </a>
+      </div>
+
+    </div>
+
+  </mat-card>
+
+</div>

src/app/reports/xbrl-report/xbrl-report.component.scss

@@ -0,0 +1,3 @@
+.form {
+  max-width: 37rem;
+}

src/app/reports/xbrl-report/xbrl-report.component.spec.ts

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

src/app/reports/xbrl-report/xbrl-report.component.ts

@@ -0,0 +1,125 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
+import { MatTableDataSource } from '@angular/material';
+import { DatePipe } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/** Custom Services */
+import { ReportsService } from '../reports.service';
+
+/**
+ * XBRL Report Component
+ */
+@Component({
+  selector: 'mifosx-xbrl-report',
+  templateUrl: './xbrl-report.component.html',
+  styleUrls: ['./xbrl-report.component.scss']
+})
+export class XBRLReportComponent implements OnInit {
+
+  /** Minimum Due Date allowed. */
+  minDate = new Date(2000, 0, 1);
+  /** Maximum Due Date allowed. */
+  maxDate = new Date();
+  /** XBRL Form */
+  xbrlForm: FormGroup;
+  /** XML response from API */
+  rawXml: any;
+  /** Parsed xml data */
+  xmlData: any[] = [];
+  /** Collapsing Boolean */
+  isCollapsed = true;
+  /** Trusted url resource for xml download */
+  fileUrl: any;
+  /** Columns to be displayed in XBRL reports table */
+  displayedColumns: string[] = ['name', 'dimension', 'value'];
+  /** Data source for XBRL reports table */
+  dataSource = new MatTableDataSource();
+
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private reportService: ReportsService,
+              private formBuilder: FormBuilder,
+              private datePipe: DatePipe,
+              private sanitizer: DomSanitizer) {}
+
+ /**
+  * Creates the XBRL form.
+  */
+  ngOnInit() {
+    this.createXbrlForm();
+  }
+
+  createXbrlForm() {
+    this.xbrlForm = this.formBuilder.group({
+    'startDate': ['', Validators.required],
+    'endDate': ['', Validators.required],
+    });
+  }
+
+  /**
+   * Parses XML for mat-table data
+   * @param {any} response XML API response
+   */
+  buildXMLTable(response: any) {
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(response, 'text/xml');
+    xml.querySelectorAll('[contextRef]').forEach( (element: HTMLElement) => {
+      const contextId = element.getAttribute('contextRef');
+      const scenario = xml.querySelector(`#${contextId}`).querySelector('scenario');
+      const context = scenario ? scenario.textContent : undefined;
+      const entry = {
+        name: element.tagName,
+        dimension: context,
+        value: new FormControl(element.textContent)
+      };
+      this.xmlData.push(entry);
+    });
+  }
+
+  /**
+   * Fetches XML Response, parses it and initializes mat-table with parsed data.
+   */
+  runreport() {
+    const startDate: Date = this.xbrlForm.value.startDate;
+    const endDate: Date = this.xbrlForm.value.endDate;
+    // TODO: Update once language and date settings are setup
+    const dateFormat = 'yyyy-MM-dd';
+    this.xbrlForm.patchValue({
+      startDate: this.datePipe.transform(startDate, dateFormat),
+      endDate: this.datePipe.transform(endDate, dateFormat)
+    });
+    const dates = this.xbrlForm.value;
+    this.reportService.getMixReport(dates).subscribe((response: any) => {
+      this.rawXml = response;
+      this.buildXMLTable(response);
+      this.dataSource = new MatTableDataSource(this.xmlData);
+      this.isCollapsed = false;
+    });
+  }
+
+  /**
+   * Outputs XML File with desired changes to entry values.
+   */
+  submit() {
+    const parser = new DOMParser();
+    const xmlDOM = parser.parseFromString(this.rawXml, 'text/xml');
+    xmlDOM.querySelectorAll('[contextRef]').forEach( (element: HTMLElement) => {
+      this.xmlData.forEach( (entry: any) => {
+        if (entry.name === element.tagName) {
+          element.textContent = entry.value.value;
+        }
+      });
+    });
+    const serializer = new XMLSerializer();
+    const xml = serializer.serializeToString(xmlDOM);
+    const blob = new Blob([xml], { type: 'application/octet-stream' });
+    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
+    return this.fileUrl;
+  }
+
+}

src/app/reports/xbrl/xbrl.component.html

@@ -0,0 +1,59 @@
+<mat-card class="container">
+
+  <div *ngIf="XBRLSuccess">
+     <h1><strong>Saved Successfully</strong></h1>
+  </div>
+
+  <div *ngIf="!XBRLSuccess">
+
+      <mat-tab-group (selectedTabChange)="filterTaxonomiesBy($event.index)">
+         <mat-tab label="Portfolio"></mat-tab>
+         <mat-tab label="BalanceSheet"></mat-tab>
+         <mat-tab label="Incomes"></mat-tab>
+         <mat-tab label="Expenses"></mat-tab>
+      </mat-tab-group>
+
+      <table mat-table [dataSource]="dataSource">
+
+         <ng-container matColumnDef="info">
+            <td mat-cell *matCellDef="let mixtaxonomy">
+               <fa-icon icon="question-circle" [matTooltip]="mixtaxonomy.description"></fa-icon>
+            </td>
+         </ng-container>
+
+         <ng-container matColumnDef="name">
+            <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.name }} </td>
+         </ng-container>
+
+         <ng-container matColumnDef="dimension">
+            <td mat-cell *matCellDef="let mixtaxonomy"> {{ mixtaxonomy.dimension }} </td>
+         </ng-container>
+
+         <ng-container matColumnDef="mapping">
+            <td mat-cell *matCellDef="let mixtaxonomy"> <input [formControl]="mixtaxonomy.mapping" [matAutocomplete]="glAccountAutocomplete"></td>
+         </ng-container>
+
+         <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
+
+      </table>
+
+      <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
+         <button mat-raised-button color="primary" [routerLink]="['./report']">
+            <fa-icon icon="cog"></fa-icon>
+            &nbsp;&nbsp; Generate Report
+         </button>
+         <button mat-raised-button color="accent" (click)="submit()">
+            <fa-icon icon="download"></fa-icon>
+            &nbsp;&nbsp; Save Changes 
+         </button>
+      </div>
+
+      <mat-autocomplete autoActiveFirstOption #glAccountAutocomplete="matAutocomplete">
+         <mat-option *ngFor="let glAccount of filteredGlAccounts" [value]="'{' + glAccount.glCode + '}'">
+         {{ glAccount.name + ' (' + glAccount.glCode + ')' }}
+         </mat-option>
+      </mat-autocomplete>
+
+  </div>
+
+</mat-card>

src/app/reports/xbrl/xbrl.component.scss

@@ -0,0 +1,3 @@
+.mat-header-cell, .mat-cell {
+    min-width: 50px;
+}

src/app/reports/xbrl/xbrl.component.spec.ts

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

src/app/reports/xbrl/xbrl.component.ts

@@ -0,0 +1,158 @@
+/** Angular Imports */
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormControl } from '@angular/forms';
+
+/** Custom Services */
+import { ReportsService } from '../reports.service';
+
+/**
+ * XBRL Component
+ */
+@Component({
+  selector: 'mifosx-xbrl',
+  templateUrl: './xbrl.component.html',
+  styleUrls: ['./xbrl.component.scss']
+})
+export class XBRLComponent implements OnInit, AfterViewInit {
+
+  /** Mix Taxonomy Array */
+  mixtaxonomyArray: any = [];
+  /** Mix Mappings */
+  mixMappingJson: any;
+  /** GL Accounts data */
+  glAccounts: any;
+  /** Filtered GL Accounts */
+  filteredGlAccounts: any;
+  /** Columns to be displayed in reports table. */
+  displayedColumns: string[] = ['info', 'name', 'dimension', 'mapping'];
+  /** Data source for reports table. */
+  dataSource = new MatTableDataSource();
+  /** XBRL save status */
+  XBRLSuccess = false;
+
+  /**
+   * Retrieves data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * Prevents reuse of Route Params while navigating.
+   * @param {Router} router: Route.
+   * @param {ReportService} reportService ReportService
+   */
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private reportService: ReportsService) {
+    this.route.data.subscribe(( data: { mixtaxonomy: any, mixmapping: any, glAccounts: any }) => {
+      this.mixtaxonomyArray = data.mixtaxonomy;
+      this.mixMappingJson = data.mixmapping.config;
+      this.glAccounts = data.glAccounts;
+    });
+  }
+
+  /**
+   * Creates Mappings, sets the dataSource and datasource filterPredicate.
+   */
+  ngOnInit() {
+    if (localStorage.getItem('XbrlReportSaveSuccess')) {
+      localStorage.removeItem('XbrlReportSaveSuccess');
+      this.XBRLSuccess = true;
+      setTimeout(() => { this.XBRLSuccess = false; }, 3000);
+    }
+    this.createMappings();
+    this.dataSource = new MatTableDataSource(this.mixtaxonomyArray);
+    this.setDatasourceFilter();
+  }
+
+ /**
+  * Subscribe to taxonomy's value changes and filters options accordingly.
+  */
+  ngAfterViewInit() {
+    this.mixtaxonomyArray.forEach( (taxonomy: any) => {
+      taxonomy.mapping.valueChanges.subscribe( (value: string) => {
+        this.filteredGlAccounts = this.applyFilter(value);
+      });
+    });
+  }
+
+  /**
+   * Maps Taxonomy to it's value and add's formcontrol.
+   */
+  createMappings() {
+    if (this.mixMappingJson !== undefined && this.mixMappingJson.length > 0) {
+      this.mixtaxonomyArray.forEach( (taxonomy: any) => {
+        const mapping = JSON.parse(this.mixMappingJson)[taxonomy.id];
+          taxonomy.mapping = new FormControl('');
+          taxonomy.mapping.value = mapping;
+      });
+    }
+  }
+
+  /**
+   * Sets custom datasource filter.
+   */
+  setDatasourceFilter() {
+    this.dataSource.filterPredicate = (data: any, filter: string) => {
+      return data.type.toString() === filter;
+    };
+    this.dataSource.filter = '0'; // defaults to 'Portfolio'
+  }
+
+  /**
+   * Filter for GL Account AutoComplete.
+   * @param {string} value Filter Value.
+   */
+  applyFilter(value: string) {
+    const filterValue = value.toLowerCase();
+    return this.glAccounts.filter(
+      (entry: any) => entry.name.toLowerCase().includes(filterValue) || entry.glCode.includes(filterValue)
+    );
+  }
+
+  /**
+   * Filters Taxonomies by index.
+   * @param {number} index number representing type of taxonomy.
+   */
+  filterTaxonomiesBy(index: number) {
+    this.dataSource.filter = index.toString();
+  }
+
+  /**
+   * Displays gl account name in form control input.
+   * @param {any} glAccount Gl Account data.
+   * @returns {string} Gl Account name if valid otherwise undefined.
+   */
+  displayGLAccount(glAccount?: any): string | undefined {
+    if (typeof(glAccount) === 'object') {
+     return glAccount ? glAccount.name + ' (' + glAccount.glCode + ')' : undefined;
+    } else {
+      return glAccount;
+    }
+  }
+
+  /**
+   * Reloads the component post saving changes.
+   */
+  reloadComponent() {
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate(['./xbrl']);
+  }
+
+  /**
+   * Posts Taxonomy Data onto the API.
+   */
+  submit() {
+    const config: any = {};
+    const serialObject: any = {};
+    this.mixtaxonomyArray.forEach( (taxonomy: any) => {
+      config[taxonomy.id] = taxonomy.mapping.value;
+    });
+    serialObject['config'] = JSON.stringify(config);
+    serialObject['identifier'] = 'default;';
+    this.reportService.editMixMappings(serialObject).subscribe((response: any) => {
+      localStorage.setItem('XbrlReportSaveSuccess', 'true');
+      this.reloadComponent();
+    });
+  }
+
+}