feat: add components for external services (#376)
- Add sms and edit-sms component - Add notification and edit-notification component - Add email and edit-email component - Add amazon-s3 and edit-amazon-s3 component Fixes: #182 and Fixes: #183
This commit is contained in:
Chirag Gupta
committed by
Abhay Chawla
Abhay Chawla
parent
cbd8a5a44f
commit
fbb7a1583a
+48
@@ -0,0 +1,48 @@
|
||||
<div class="container">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<form [formGroup]="notificationConfigurationForm" (ngSubmit)="submit()">
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="column">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Server Key</mat-label>
|
||||
<input matInput required formControlName="server_key">
|
||||
<mat-error *ngIf="notificationConfigurationForm.controls.server_key.hasError('required')">
|
||||
Server Key is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>GCM End Point</mat-label>
|
||||
<input matInput required formControlName="gcm_end_point">
|
||||
<mat-error *ngIf="notificationConfigurationForm.controls.gcm_end_point.hasError('required')">
|
||||
GCM End Point is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>FCM End Point</mat-label>
|
||||
<input matInput required formControlName="fcm_end_point">
|
||||
<mat-error *ngIf="notificationConfigurationForm.controls.fcm_end_point.hasError('required')">
|
||||
FCM End Point 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]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">Submit</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditNotificationComponent } from './edit-notification.component';
|
||||
|
||||
describe('EditNotificationComponent', () => {
|
||||
let component: EditNotificationComponent;
|
||||
let fixture: ComponentFixture<EditNotificationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditNotificationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditNotificationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
|
||||
/** Custom Services */
|
||||
import { SystemService } from 'app/system/system.service';
|
||||
|
||||
/**
|
||||
* Edit Notification Configuration Component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-edit-notification',
|
||||
templateUrl: './edit-notification.component.html',
|
||||
styleUrls: ['./edit-notification.component.scss']
|
||||
})
|
||||
export class EditNotificationComponent implements OnInit {
|
||||
|
||||
/** Notification Configuration data */
|
||||
notificationConfigurationData: any;
|
||||
/** Notification Configuration Form */
|
||||
notificationConfigurationForm: FormGroup;
|
||||
|
||||
/**
|
||||
* Retrieves the Notification configuration data from `resolve`.
|
||||
* @param {FormBuilder} formBuilder Form Builder.
|
||||
* @param {SystemService} systemService Accounting 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: { notificationConfiguration: any }) => {
|
||||
this.notificationConfigurationData = data.notificationConfiguration;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates Notification configuration form.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.setNotificationConfigurationForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates Notification configuration form.
|
||||
*/
|
||||
setNotificationConfigurationForm() {
|
||||
this.notificationConfigurationForm = this.formBuilder.group({
|
||||
'server_key': [this.notificationConfigurationData[0].value, Validators.required],
|
||||
'gcm_end_point': [this.notificationConfigurationData[1].value, Validators.required],
|
||||
'fcm_end_point': [this.notificationConfigurationData[2].value, Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits the Notification configuration and updates the Notification configuration,
|
||||
* if successful redirects to view Notification configuration.
|
||||
*/
|
||||
submit() {
|
||||
this.systemService
|
||||
.updateExternalConfiguration('NOTIFICATION', this.notificationConfigurationForm.value)
|
||||
.subscribe((response: any) => {
|
||||
this.router.navigate(['../'], { relativeTo: this.route });
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
|
||||
<button mat-raised-button color="primary" [routerLink]="['edit']">
|
||||
<fa-icon icon="edit"></fa-icon>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container 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 }} </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>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotificationComponent } from './notification.component';
|
||||
|
||||
describe('NotificationComponent', () => {
|
||||
let component: NotificationComponent;
|
||||
let fixture: ComponentFixture<NotificationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NotificationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NotificationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
|
||||
/**
|
||||
* Notification Configuration Component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-notification',
|
||||
templateUrl: './notification.component.html',
|
||||
styleUrls: ['./notification.component.scss']
|
||||
})
|
||||
export class NotificationComponent implements OnInit {
|
||||
|
||||
/** Notification configuration data. */
|
||||
notificationConfigurationData: any;
|
||||
/** Columns to be displayed in Notification configuration table. */
|
||||
displayedColumns: string[] = ['name', 'value'];
|
||||
/** Data source for Notification configuration table. */
|
||||
dataSource: MatTableDataSource<any>;
|
||||
|
||||
/** Sorter for Notification configuration table. */
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
/**
|
||||
* Retrieves the Notification configuration data from `resolve`.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
*/
|
||||
constructor(private route: ActivatedRoute) {
|
||||
this.route.data.subscribe((data: { notificationConfiguration: any }) => {
|
||||
this.notificationConfigurationData = data.notificationConfiguration;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the Notification Configuration table.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.setNotificationConfiguration();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the data source and sorter for Notification configuration table.
|
||||
*/
|
||||
setNotificationConfiguration() {
|
||||
this.dataSource = new MatTableDataSource(this.notificationConfigurationData);
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
/**
|
||||
* Notification Configuration data resolver.
|
||||
*/
|
||||
@Injectable()
|
||||
export class NotificationConfigurationResolver implements Resolve<Object> {
|
||||
|
||||
/**
|
||||
* @param {SystemService} systemService System service.
|
||||
*/
|
||||
constructor(private systemService: SystemService) {}
|
||||
|
||||
/**
|
||||
* Returns the Notification Configuration data.
|
||||
* @returns {Observable<any>}
|
||||
*/
|
||||
resolve(): Observable<any> {
|
||||
return this.systemService.getExternalConfiguration('NOTIFICATION');
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user