Karan Takalkar
@@ -0,0 +1,194 @@
|
||||
<div class="container">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<form [formGroup]="editClientForm">
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Office</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
<mat-option *ngFor="let office of officeOptions" [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="editClientForm.controls.officeId.hasError('required')">
|
||||
Office is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Staff</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
<mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
|
||||
{{ staff.displayName }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Legal Form</mat-label>
|
||||
<mat-select formControlName="legalFormId">
|
||||
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
|
||||
{{ legalForm.value }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('fullname')" fxFlex="48%">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput required formControlName="fullname">
|
||||
<mat-error *ngIf="editClientForm.controls.fullname.hasError('required')">
|
||||
Client name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('firstname')" fxFlex="48%">
|
||||
<mat-label>First Name</mat-label>
|
||||
<input matInput required formControlName="firstname">
|
||||
<mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
|
||||
Client first name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('middlename')" fxFlex="48%">
|
||||
<mat-label>Middle Name</mat-label>
|
||||
<input matInput formControlName="middlename">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('lastname')" fxFlex="48%">
|
||||
<mat-label>Last Name</mat-label>
|
||||
<input matInput required formControlName="lastname">
|
||||
<mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
|
||||
Client last name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ editClientForm.value.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</mat-label>
|
||||
<input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
|
||||
<mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Account No</mat-label>
|
||||
<input matInput formControlName="accountNo">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>External Id</mat-label>
|
||||
<input matInput formControlName="externalId">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Mobile No</mat-label>
|
||||
<input matInput formControlName="mobileNo">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Client Type</mat-label>
|
||||
<mat-select formControlName="clientTypeId">
|
||||
<mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
|
||||
{{ clientType.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Client Classification</mat-label>
|
||||
<mat-select formControlName="clientClassificationId">
|
||||
<mat-option *ngFor="let clientClassification of clientClassificationTypeOptions" [value]="clientClassification.id">
|
||||
{{ clientClassification.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Submitted On</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #submittedOnDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Activated On</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
|
||||
formControlName="activationDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
|
||||
<mat-error *ngIf="editClientForm.controls.activationDate.hasError('required')">
|
||||
Activation Date is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%">
|
||||
<mat-label>Gender</mat-label>
|
||||
<mat-select formControlName="genderId">
|
||||
<mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
|
||||
{{ gender.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox *ngIf="editClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
|
||||
Is staff?
|
||||
</mat-checkbox>
|
||||
|
||||
<div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
|
||||
*ngIf="editClientForm.contains('clientNonPersonDetails')">
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Incorporation Validity Till Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Incorporation No</mat-label>
|
||||
<input matInput formControlName="incorpNumber">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Main Business Line</mat-label>
|
||||
<mat-select formControlName="mainBusinessLineId">
|
||||
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
|
||||
{{ business.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>Constitution</mat-label>
|
||||
<mat-select formControlName="constitutionId">
|
||||
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
|
||||
{{ constitution.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="98%">
|
||||
<mat-label>Remarks</mat-label>
|
||||
<textarea matInput formControlName="remarks"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
</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]="!editClientForm.valid" (click)="submit()">Submit</button>
|
||||
</mat-card-actions>
|
||||
|
||||
</form>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
.margin-v {
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EditClientComponent } from './edit-client.component';
|
||||
|
||||
describe('EditClientComponent', () => {
|
||||
let component: EditClientComponent;
|
||||
let fixture: ComponentFixture<EditClientComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EditClientComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EditClientComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,182 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { DatePipe } from '@angular/common';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../clients.service';
|
||||
|
||||
/**
|
||||
* Edit Client Component
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-edit-client',
|
||||
templateUrl: './edit-client.component.html',
|
||||
styleUrls: ['./edit-client.component.scss']
|
||||
})
|
||||
export class EditClientComponent implements OnInit {
|
||||
|
||||
/** Minimum date allowed. */
|
||||
minDate = new Date(2000, 0, 1);
|
||||
/** Maximum date allowed. */
|
||||
maxDate = new Date();
|
||||
|
||||
/** Client Data and Template */
|
||||
clientDataAndTemplate: any;
|
||||
/** Edit Client Form */
|
||||
editClientForm: FormGroup;
|
||||
|
||||
/** Office Options */
|
||||
officeOptions: any;
|
||||
/** Staff Options */
|
||||
staffOptions: any;
|
||||
/** Legal Form Options */
|
||||
legalFormOptions: any;
|
||||
/** Client Type Options */
|
||||
clientTypeOptions: any;
|
||||
/** Client Classification Options */
|
||||
clientClassificationTypeOptions: any;
|
||||
/** Business Line Options */
|
||||
businessLineOptions: any;
|
||||
/** Constitution Options */
|
||||
constitutionOptions: any;
|
||||
/** Gender Options */
|
||||
genderOptions: any;
|
||||
|
||||
/**
|
||||
* Fetches client template data from `resolve`
|
||||
* @param {FormBuilder} formBuilder Form Builder
|
||||
* @param {ActivatedRoute} route ActivatedRoute
|
||||
* @param {Router} router Router
|
||||
* @param {ClientsService} clientsService Clients Service
|
||||
* @param {DatePipe} datePipe Date Pipe
|
||||
*/
|
||||
constructor(private formBuilder: FormBuilder,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private clientsService: ClientsService,
|
||||
private datePipe: DatePipe) {
|
||||
this.route.data.subscribe((data: { clientDataAndTemplate: any }) => {
|
||||
this.clientDataAndTemplate = data.clientDataAndTemplate;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.createEditClientForm();
|
||||
this.setOptions();
|
||||
this.buildDependencies();
|
||||
this.editClientForm.patchValue({
|
||||
'officeId': this.clientDataAndTemplate.officeId,
|
||||
'staffId': this.clientDataAndTemplate.staffId,
|
||||
'legalFormId': this.clientDataAndTemplate.legalForm && this.clientDataAndTemplate.legalForm.id,
|
||||
'accountNo': this.clientDataAndTemplate.accountNo,
|
||||
'externalId': this.clientDataAndTemplate.externalId,
|
||||
'genderId': this.clientDataAndTemplate.gender && this.clientDataAndTemplate.gender.id,
|
||||
'isStaff': this.clientDataAndTemplate.isStaff,
|
||||
'active': this.clientDataAndTemplate.active,
|
||||
'mobileNo': this.clientDataAndTemplate.mobileNo,
|
||||
'dateOfBirth': this.clientDataAndTemplate.dateOfBirth && new Date(this.clientDataAndTemplate.dateOfBirth),
|
||||
'clientTypeId': this.clientDataAndTemplate.clientType && this.clientDataAndTemplate.clientType.id,
|
||||
'clientClassificationId': this.clientDataAndTemplate.clientClassification && this.clientDataAndTemplate.clientClassification.id,
|
||||
'submittedOnDate': this.clientDataAndTemplate.timeline.submittedOnDate && new Date(this.clientDataAndTemplate.timeline.submittedOnDate),
|
||||
'activationDate': this.clientDataAndTemplate.timeline.activatedOnDate && new Date(this.clientDataAndTemplate.timeline.activatedOnDate)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the edit client form.
|
||||
*/
|
||||
createEditClientForm() {
|
||||
this.editClientForm = this.formBuilder.group({
|
||||
'officeId': [{ value: '', disabled: true }],
|
||||
'staffId': [''],
|
||||
'legalFormId': [''],
|
||||
'isStaff': [false],
|
||||
'active': [false],
|
||||
'accountNo': [{ value: '', disabled: true }],
|
||||
'externalId': [''],
|
||||
'genderId': [''],
|
||||
'mobileNo': [''],
|
||||
'dateOfBirth': [''],
|
||||
'clientTypeId': [''],
|
||||
'clientClassificationId': [''],
|
||||
'submittedOnDate': [''],
|
||||
'activationDate': ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets select dropdown options.
|
||||
*/
|
||||
setOptions() {
|
||||
this.officeOptions = this.clientDataAndTemplate.officeOptions;
|
||||
this.staffOptions = this.clientDataAndTemplate.staffOptions;
|
||||
this.legalFormOptions = this.clientDataAndTemplate.clientLegalFormOptions;
|
||||
this.clientTypeOptions = this.clientDataAndTemplate.clientTypeOptions;
|
||||
this.clientClassificationTypeOptions = this.clientDataAndTemplate.clientClassificationOptions;
|
||||
this.businessLineOptions = this.clientDataAndTemplate.clientNonPersonMainBusinessLineOptions;
|
||||
this.constitutionOptions = this.clientDataAndTemplate.clientNonPersonConstitutionOptions;
|
||||
this.genderOptions = this.clientDataAndTemplate.genderOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds controls conditionally.
|
||||
*/
|
||||
buildDependencies() {
|
||||
this.editClientForm.get('legalFormId').valueChanges.subscribe((legalFormId: any) => {
|
||||
if (legalFormId === 1) {
|
||||
this.editClientForm.removeControl('fullname');
|
||||
this.editClientForm.removeControl('clientNonPersonDetails');
|
||||
this.editClientForm.addControl('firstname', new FormControl(this.clientDataAndTemplate.firstname, Validators.required));
|
||||
this.editClientForm.addControl('middlename', new FormControl(this.clientDataAndTemplate.middlename));
|
||||
this.editClientForm.addControl('lastname', new FormControl(this.clientDataAndTemplate.lastname, Validators.required));
|
||||
} else {
|
||||
this.editClientForm.removeControl('firstname');
|
||||
this.editClientForm.removeControl('middlename');
|
||||
this.editClientForm.removeControl('lastname');
|
||||
this.editClientForm.addControl('fullname', new FormControl(this.clientDataAndTemplate.fullname, Validators.required));
|
||||
this.editClientForm.addControl('clientNonPersonDetails', this.formBuilder.group({
|
||||
'constitutionId': [this.clientDataAndTemplate.clientNonPersonDetails.constitution && this.clientDataAndTemplate.clientNonPersonDetails.constitution.id],
|
||||
'incorpValidityTillDate': [this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate && new Date(this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate)],
|
||||
'incorpNumber': [this.clientDataAndTemplate.clientNonPersonDetails.incorpNumber],
|
||||
'mainBusinessLineId': [this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine && this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine.id],
|
||||
'remarks': [this.clientDataAndTemplate.clientNonPersonDetails.remarks]
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits the edit client form.
|
||||
*/
|
||||
submit() {
|
||||
const locale = 'en';
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
// TODO: Update once language and date settings are setup
|
||||
const editClientFormValue: any = this.editClientForm.getRawValue();
|
||||
const clientData = {
|
||||
...editClientFormValue,
|
||||
dateOfBirth: editClientFormValue.dateOfBirth && this.datePipe.transform(editClientFormValue.dateOfBirth, dateFormat),
|
||||
submittedOnDate: editClientFormValue.submittedOnDate && this.datePipe.transform(editClientFormValue.submittedOnDate, dateFormat),
|
||||
activationDate: this.datePipe.transform(editClientFormValue.activationDate, dateFormat),
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
delete clientData.officeId;
|
||||
if (editClientFormValue.clientNonPersonDetails) {
|
||||
clientData.clientNonPersonDetails = {
|
||||
...editClientFormValue.clientNonPersonDetails,
|
||||
incorpValidityTillDate: editClientFormValue.clientNonPersonDetails.incorpValidityTillDate && this.datePipe.transform(editClientFormValue.clientNonPersonDetails.incorpValidityTillDate, dateFormat),
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
} else {
|
||||
clientData.clientNonPersonDetails = {};
|
||||
}
|
||||
this.clientsService.updateClient(this.clientDataAndTemplate.id, clientData).subscribe(() => {
|
||||
this.router.navigate(['../'], { relativeTo: this.route });
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user