110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
HTML
<form [formGroup]="sharesAccountTermsForm">
|
|
<div class="layout-row-wrap gap-2percent responsive-column align-start-center">
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
|
|
<input matInput formControlName="currencyCode" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Current Price' | translate }}</mat-label>
|
|
<input type="number" matInput formControlName="unitPrice" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Total Number of Shares' | translate }}</mat-label>
|
|
<input type="number" matInput formControlName="requestedShares" required />
|
|
<mat-error>
|
|
{{ 'labels.inputs.Total Number of Shares' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<span class="flex-48" *ngIf="currency">{{
|
|
calculateCurrenValue() | currency: currency.code : 'symbol-narrow' : '1.2-2'
|
|
}}</span>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
|
|
<mat-select formControlName="savingsAccountId" required>
|
|
<mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
|
|
{{ account.accountNo }} - {{ account.savingsProductName }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error>
|
|
{{ 'labels.inputs.Default Savings Account' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48" (click)="applicationDatePicker.open()">
|
|
<mat-label>{{ 'labels.inputs.Application Date' | translate }}</mat-label>
|
|
<input
|
|
matInput
|
|
[min]="minDate"
|
|
[max]="maxDate"
|
|
[matDatepicker]="applicationDatePicker"
|
|
formControlName="applicationDate"
|
|
required
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="applicationDatePicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #applicationDatePicker></mat-datepicker>
|
|
<mat-error>
|
|
{{ 'labels.inputs.Application Date' | translate }} {{ 'labels.commons.is' | translate }}
|
|
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" class="flex-48">
|
|
{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}
|
|
</mat-checkbox>
|
|
|
|
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Minimum Active Period' | translate }}</h4>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
|
|
<input type="number" matInput formControlName="minimumActivePeriod" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
|
|
<mat-select formControlName="minimumActivePeriodFrequencyType">
|
|
<mat-option
|
|
*ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData"
|
|
[value]="minimumActivePeriodFrequencyType.id"
|
|
>
|
|
{{ minimumActivePeriodFrequencyType.value | translateKey: 'catalogs' }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
|
|
<input type="number" matInput formControlName="lockinPeriodFrequency" />
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="flex-48">
|
|
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
|
|
<mat-select formControlName="lockinPeriodFrequencyType">
|
|
<mat-option
|
|
*ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
|
|
[value]="lockinPeriodFrequencyType.id"
|
|
>
|
|
{{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="layout-row align-center gap-2percent margin-t responsive-column">
|
|
<button mat-raised-button matStepperPrevious>
|
|
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
|
{{ 'labels.buttons.Previous' | translate }}
|
|
</button>
|
|
<button mat-raised-button matStepperNext>
|
|
{{ 'labels.buttons.Next' | translate }}
|
|
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
|
</button>
|
|
</div>
|
|
</form>
|