feat: create, view, edit, delete for hooks (#403)

- Add create-hook
- Add view-hook
- Add edit-hook

#180

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.html

@@ -0,0 +1,55 @@
+<h1 mat-dialog-title>Add Event</h1>
+
+<mat-dialog-content>
+
+  <form [formGroup]="eventForm">
+
+    <div fxLayout="column">
+
+      <mat-form-field>
+        <mat-label>Select Grouping</mat-label>
+        <mat-select required formControlName="grouping">
+          <mat-option *ngFor="let grouping of data.groupings" [value]="grouping.name">
+            {{ grouping.name }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="eventForm.controls.grouping.hasError('required')">
+          Grouping is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Select Entity</mat-label>
+        <mat-select required formControlName="entity">
+          <mat-option *ngFor="let entity of entityData" [value]="entity.name">
+            {{ entity.name }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="eventForm.controls.entity.hasError('required')">
+          Entity is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Select Action</mat-label>
+        <mat-select required formControlName="action">
+          <mat-option *ngFor="let action of actionData" [value]="action">
+            {{ action }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="eventForm.controls.action.hasError('required')">
+          Action is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+
+  </form>
+
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-raised-button color="primary"
+    [disabled]="!eventForm.valid || eventForm.pristine" (click)="submit()">Submit</button>
+</mat-dialog-actions>

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.spec.ts

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

src/app/system/manage-hooks/add-event-dialog/add-event-dialog.component.ts

@@ -0,0 +1,73 @@
+/** Angular Imports */
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+/**
+ * Add Event Dialog Component.
+ */
+@Component({
+  selector: 'mifosx-add-event-dialog',
+  templateUrl: './add-event-dialog.component.html',
+  styleUrls: ['./add-event-dialog.component.scss']
+})
+export class AddEventDialogComponent implements OnInit {
+
+  /** Event Form. */
+  eventForm: FormGroup;
+  /** Entity Data. */
+  entityData: Array<any> = new Array<any>();
+  /** Action Data. */
+  actionData: Array<any> = new Array<any>();
+
+  /**
+   * @param {MatDialogRef} dialogRef Component reference to dialog.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {any} data Provides grouping, entities and actions data to fill dropdowns.
+   */
+  constructor(public dialogRef: MatDialogRef<AddEventDialogComponent>,
+              public formBuilder: FormBuilder,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  /**
+   * Creates add event form.
+   */
+  ngOnInit() {
+    this.eventForm = this.formBuilder.group({
+      'grouping': ['', Validators.required],
+      'entity': ['', Validators.required],
+      'action': ['', Validators.required]
+    });
+    this.setGroupingListener();
+    this.setEntityListener();
+  }
+
+  /**
+   * Subscribes to the grouping dropdown to set entity data for that row accordingly.
+   */
+  setGroupingListener() {
+    this.eventForm.get('grouping').valueChanges
+      .subscribe(changedGrouping => {
+        this.entityData = this.data.groupings.find((grouping: any) => grouping.name === changedGrouping).entities;
+      });
+  }
+
+  /**
+   * Subscribes to the entity dropdown to set entity data for that row accordingly.
+   */
+  setEntityListener() {
+    this.eventForm.get('entity').valueChanges
+      .subscribe(changedEntity => {
+        this.actionData = this.entityData[0].actions;
+      });
+  }
+
+  /**
+   * Closes the dialog and returns value of the form.
+   */
+  submit() {
+    this.dialogRef.close(this.eventForm.value);
+  }
+
+}