feat: create, view, edit, delete for reports

- Add manage-reports
- Add view-report
- Add create-report
- Add edit-report

#174

src/app/system/manage-reports/edit-report/edit-report.component.html

@@ -0,0 +1,134 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="reportForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
+
+          <mat-form-field fxFlex="30%">
+            <mat-label>Report Name</mat-label>
+            <input matInput required formControlName="reportName">
+            <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
+              Report Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="30%">
+            <mat-label>Report Type</mat-label>
+            <mat-select required formControlName="reportType">
+              <mat-option *ngFor="let allowedReportType of reportData.allowedReportTypes" [value]="allowedReportType">
+                {{ allowedReportType }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
+              Report Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="30%">
+            <mat-label>Report Sub Type</mat-label>
+            <mat-select formControlName="reportSubType">
+              <mat-option *ngFor="let allowedReportSubType of reportData.allowedReportSubTypes"
+                [value]="allowedReportSubType">
+                {{ allowedReportSubType }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+
+        <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
+
+          <mat-form-field fxFlex="40%">
+            <mat-label>Report Category</mat-label>
+            <input matInput formControlName="reportCategory">
+          </mat-form-field>
+
+          <div fxFlex="10%" class="user-report-wrapper">
+            <mat-checkbox class="user-report" labelPosition="before" formControlName="useReport">
+              User Report (UI)
+            </mat-checkbox>
+          </div>
+
+        </div>
+
+        <div fxLayout="column">
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>Description</mat-label>
+            <textarea matInput formControlName="description"></textarea>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="98%">
+            <mat-label>SQL</mat-label>
+            <textarea matInput required formControlName="reportSql"></textarea>
+            <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
+              SQL is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+        <br>
+
+        <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
+
+          <p fxFlex="20%" class="mat-title">Report Parameters</p>
+
+          <button mat-raised-button fxFlex="20%" type="button" *ngIf="!reportData.coreReport" color="primary"
+            (click)="addReportParameter()">
+            <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+            Add Report Parameter
+          </button>
+
+        </div>
+
+        <table mat-table [dataSource]="dataSource" matSort>
+
+          <ng-container matColumnDef="parameterName">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter </th>
+            <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.parameterName }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="parameterNamePassed">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name Passed to Pentaho </th>
+            <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.reportParameterName }} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef> Actions </th>
+            <td mat-cell *matCellDef="let reportParameter" fxLayoutGap="15%">
+              <button *ngIf="!reportData.coreReport" type="button" fxFlex="8%" color="primary" mat-icon-button
+                (click)="editReportParameter(reportParameter)">
+                <fa-icon icon="edit" size="lg"></fa-icon>
+              </button>
+              <button *ngIf="!reportData.coreReport" type="button" fxFlex="8%" color="warn" mat-icon-button
+                (click)="deleteReportParameter(reportParameter)">
+                <fa-icon icon="trash" size="lg"></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>
+
+      </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]="(!reportForm.valid || reportForm.pristine) && !isReportParametersChanged">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/system/manage-reports/edit-report/edit-report.component.scss

@@ -0,0 +1,17 @@
+@media (min-width: 992px) {
+
+  .user-report-wrapper {
+    position: relative;
+  
+    .user-report {
+      padding: 0 0 17.5px 0;
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  
+}
+
+table {
+  width: 100%;
+}

src/app/system/manage-reports/edit-report/edit-report.component.spec.ts

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

src/app/system/manage-reports/edit-report/edit-report.component.ts

@@ -0,0 +1,208 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatTableDataSource, MatPaginator, MatSort, MatDialog } from '@angular/material';
+
+/** Custom Services */
+import { SystemService } from 'app/system/system.service';
+
+/** Custom Components */
+import { ReportParameterDialogComponent } from '../report-parameter-dialog/report-parameter-dialog.component';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+
+/**
+ * Edit Report Component.
+ */
+@Component({
+  selector: 'mifosx-edit-report',
+  templateUrl: './edit-report.component.html',
+  styleUrls: ['./edit-report.component.scss']
+})
+export class EditReportComponent implements OnInit {
+
+  /** Report Data. */
+  reportData: any;
+  /** Report Template Data. */
+  reportTemplateData: any;
+  /** Report Parameters Data. */
+  reportParametersData: any[] = [];
+  /** Data passed to dialog. */
+  dataForDialog: { allowedParameters: any[], parameterName: string, reportParameterName: string } =
+    {
+      allowedParameters: undefined,
+      parameterName: undefined,
+      reportParameterName: undefined
+    };
+  /** Report Form. */
+  reportForm: FormGroup;
+  /** Columns to be displayed in report parameters table. */
+  displayedColumns: string[] = ['parameterName', 'parameterNamePassed', 'actions'];
+  /** Data source for report parameters table. */
+  dataSource: MatTableDataSource<any>;
+  /** Boolean to check if report parameters data is changed or not. */
+  isReportParametersChanged: Boolean = false;
+
+  /** Paginator for report parameters table. */
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for report parameters table. */
+  @ViewChild(MatSort) sort: MatSort;
+
+  /**
+   * Retrieves the report and report template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {SystemService} systemService System Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog Reference.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private systemService: SystemService,
+              private dialog: MatDialog) {
+    this.route.data.subscribe((data: { report: any, reportTemplate: any }) => {
+      this.reportData = data.report;
+      this.reportParametersData = data.report.reportParameters ? data.report.reportParameters : [];
+      this.reportTemplateData = data.reportTemplate;
+      this.dataForDialog.allowedParameters = this.reportData.allowedParameters;
+    });
+  }
+
+  /**
+   * Creates the report form.
+   */
+  ngOnInit() {
+    this.createReportForm();
+    this.setReportParameters();
+    this.toggleVisibility();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for report parameters table.
+   */
+  setReportParameters() {
+    this.dataSource = new MatTableDataSource(this.reportParametersData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  /**
+   * Creates and sets the report form.
+   */
+  createReportForm() {
+    this.reportForm = this.formBuilder.group({
+      'reportName': [{ value: this.reportData.reportName, disabled: this.reportData.coreReport }, Validators.required],
+      'reportCategory': [{ value: this.reportData.reportCategory ? this.reportData.reportCategory : '', disabled: this.reportData.coreReport }],
+      'description': [{ value: this.reportData.description ? this.reportData.description : '', disabled: this.reportData.coreReport }],
+      'reportType': [{ value: this.reportData.reportType, disabled: this.reportData.coreReport }, Validators.required],
+      'reportSubType': [{ value: this.reportData.reportSubType ? this.reportData.reportSubType : '', disabled: this.reportData.reportType !== 'Chart' || this.reportData.coreReport }],
+      'useReport': [this.reportData.useReport ? this.reportData.useReport : false],
+      'reportSql': [{ value: this.reportData.reportSql, disabled: this.reportData.coreReport || this.reportData.reportType === 'Pentaho' }, Validators.required]
+    });
+  }
+
+  /**
+   * Adds a new report parameter.
+   */
+  addReportParameter() {
+    this.dataForDialog.parameterName = undefined;
+    this.dataForDialog.reportParameterName = undefined;
+    const addReportParameterDialogRef = this.dialog.open(ReportParameterDialogComponent, {
+      data: this.dataForDialog
+    });
+    addReportParameterDialogRef.afterClosed().subscribe((response: any) => {
+      if (response !== '') {
+        this.reportParametersData.push({ id: '',
+                                         parameterName: this.reportTemplateData.allowedParameters.find((allowedParameter: any) => allowedParameter.id === response.parameterName).parameterName,
+                                         parameterId: response.parameterName,
+                                         reportParameterName: response.reportParameterName ? response.reportParameterName : undefined });
+        this.dataSource.connect().next(this.reportParametersData);
+        this.isReportParametersChanged = true;
+      }
+    });
+  }
+
+  /**
+   * Edits report parameter.
+   * @param {any} reportParameter Report Parameter.
+   */
+  editReportParameter(reportParameter: any) {
+    this.dataForDialog.parameterName = reportParameter.parameterId;
+    this.dataForDialog.reportParameterName = reportParameter.reportParameterName;
+    const editReportParameterDialogRef = this.dialog.open(ReportParameterDialogComponent, {
+      data: this.dataForDialog
+    });
+    editReportParameterDialogRef.afterClosed().subscribe((response: any) => {
+      if (response !== '') {
+        this.reportParametersData[this.reportParametersData.indexOf(reportParameter)] = { id: reportParameter.id,
+          parameterName: this.reportTemplateData.allowedParameters.find((allowedParameter: any) => allowedParameter.id === response.parameterName).parameterName,
+          parameterId: response.parameterName,
+          reportParameterName: response.reportParameterName };
+        this.dataSource.connect().next(this.reportParametersData);
+        this.isReportParametersChanged = true;
+      }
+    });
+  }
+
+  /**
+   * Deletes the report parameter.
+   * @param {any} reportParameter Report Parameter.
+   */
+  deleteReportParameter(reportParameter: any) {
+    const deleteReportDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `report parameter ${reportParameter.parameterName}` }
+    });
+    deleteReportDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.reportParametersData.splice(this.reportParametersData.indexOf(reportParameter), 1);
+        this.dataSource.connect().next(this.reportParametersData);
+        this.isReportParametersChanged = true;
+      }
+    });
+  }
+
+  /**
+   * Toggles the visibility status of Report Sub Type dropdown.
+   */
+  toggleVisibility() {
+    this.reportForm.get('reportType').valueChanges
+      .subscribe(type => {
+        switch (type) {
+          case 'Chart':
+            this.reportForm.get('reportSubType').enable();
+            this.reportForm.get('reportSql').enable();
+            break;
+          case 'Pentaho':
+            this.reportForm.get('reportSql').disable();
+            this.reportForm.get('reportSubType').disable();
+            break;
+          default:
+            this.reportForm.get('reportSql').enable();
+            this.reportForm.get('reportSubType').disable();
+        }
+      });
+  }
+
+  /**
+   * Submits the report form and updates report,
+   * if successful redirects to view updated report.
+   */
+  submit() {
+    console.log(this.reportParametersData);
+    if (this.reportData.coreReport) {
+      this.reportForm.value.reportParameters = undefined;
+    } else {
+      this.reportForm.value.reportParameters = this.reportParametersData;
+      this.reportForm.value.reportParameters.map( function(reportParameter: any) {
+        reportParameter.parameterName = undefined;
+        return reportParameter;
+      });
+    }
+    this.systemService.updateReport(this.reportData.id, this.reportForm.value)
+      .subscribe(() => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+}