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
@@ -0,0 +1,56 @@
|
||||
<div class="container">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="column">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Host Name</mat-label>
|
||||
<input matInput required formControlName="host_name">
|
||||
<mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
|
||||
Host Name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Port Number</mat-label>
|
||||
<input matInput required formControlName="port_number">
|
||||
<mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
|
||||
Port Number is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>End Point</mat-label>
|
||||
<input matInput required formControlName="end_point">
|
||||
<mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
|
||||
End Point is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Tenant App Key</mat-label>
|
||||
<input matInput required formControlName="tenant_app_key">
|
||||
<mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
|
||||
Tenant App Key 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]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">Submit</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditSmsComponent } from './edit-sms.component';
|
||||
|
||||
describe('EditSmsComponent', () => {
|
||||
let component: EditSmsComponent;
|
||||
let fixture: ComponentFixture<EditSmsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditSmsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditSmsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,71 @@
|
||||
/** 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 SMS Configuration Component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-edit-sms',
|
||||
templateUrl: './edit-sms.component.html',
|
||||
styleUrls: ['./edit-sms.component.scss']
|
||||
})
|
||||
export class EditSMSComponent implements OnInit {
|
||||
|
||||
/** SMS Configuration data */
|
||||
smsConfigurationData: any;
|
||||
/** SMS Configuration Form */
|
||||
smsConfigurationForm: FormGroup;
|
||||
|
||||
/**
|
||||
* Retrieves the SMS 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: { smsConfiguration: any }) => {
|
||||
this.smsConfigurationData = data.smsConfiguration;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates SMS configuration form.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.setSMSConfigurationForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates SMS configuration form.
|
||||
*/
|
||||
setSMSConfigurationForm() {
|
||||
this.smsConfigurationForm = this.formBuilder.group({
|
||||
'host_name': [this.smsConfigurationData[0].value, Validators.required],
|
||||
'port_number': [this.smsConfigurationData[1].value, Validators.required],
|
||||
'end_point': [this.smsConfigurationData[2].value, Validators.required],
|
||||
'tenant_app_key': [this.smsConfigurationData[3].value, Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits the SMS configuration and updates the SMS configuration,
|
||||
* if successful redirects to view SMS configuration.
|
||||
*/
|
||||
submit() {
|
||||
this.systemService
|
||||
.updateExternalConfiguration('SMS', this.smsConfigurationForm.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 { SMSComponent } from './sms.component';
|
||||
|
||||
describe('SmsComponent', () => {
|
||||
let component: SMSComponent;
|
||||
let fixture: ComponentFixture<SMSComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SMSComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SMSComponent);
|
||||
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';
|
||||
|
||||
/**
|
||||
* SMS Configuration Component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-sms',
|
||||
templateUrl: './sms.component.html',
|
||||
styleUrls: ['./sms.component.scss']
|
||||
})
|
||||
export class SMSComponent implements OnInit {
|
||||
|
||||
/** SMS configuration data. */
|
||||
smsConfigurationData: any;
|
||||
/** Columns to be displayed in SMS configuration table. */
|
||||
displayedColumns: string[] = ['name', 'value'];
|
||||
/** Data source for SMS configuration table. */
|
||||
dataSource: MatTableDataSource<any>;
|
||||
|
||||
/** Sorter for SMS configuration table. */
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
/**
|
||||
* Retrieves the SMS configuration data from `resolve`.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
*/
|
||||
constructor(private route: ActivatedRoute) {
|
||||
this.route.data.subscribe((data: {smsConfiguration: any}) => {
|
||||
this.smsConfigurationData = data.smsConfiguration;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the SMS Configuration table.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.setSMSConfiguration();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the data source and sorter for SMS configuration table.
|
||||
*/
|
||||
setSMSConfiguration() {
|
||||
this.dataSource = new MatTableDataSource(this.smsConfigurationData);
|
||||
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';
|
||||
|
||||
/**
|
||||
* SMS Configuration data resolver.
|
||||
*/
|
||||
@Injectable()
|
||||
export class SMSConfigurationResolver implements Resolve<Object> {
|
||||
|
||||
/**
|
||||
* @param {SystemService} systemService System service.
|
||||
*/
|
||||
constructor(private systemService: SystemService) {}
|
||||
|
||||
/**
|
||||
* Returns the SMS Configuration data.
|
||||
* @returns {Observable<any>}
|
||||
*/
|
||||
resolve(): Observable<any> {
|
||||
return this.systemService.getExternalConfiguration('SMS');
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user