| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <form [formGroup]="form"> |
| <td-steps mode="'vertical'"> |
| <td-step #detailsStep label="{{'Journal Entry details' | translate}}" layout="column"> |
| <fims-id-input [form]="form" controlName="transactionIdentifier" [readonly]="false"></fims-id-input> |
| <fims-date-input placeholder="{{'Transaction date' | translate}}" [form]="form" controlName="transactionDate"></fims-date-input> |
| <fims-transaction-type-select title="{{'Transaction type' | translate}}" formControlName="transactionType"> |
| <ng-container *ngIf="!form.get('transactionType').pristine && form.get('transactionType').hasError('required')" translate> |
| Required |
| </ng-container> |
| <ng-container *ngIf="form.get('transactionType').hasError('invalidTransactionType')" translate> |
| Invalid transaction type |
| </ng-container> |
| </fims-transaction-type-select> |
| <div layout="row"> |
| <mat-form-field layout-margin flex> |
| <textarea matInput placeholder="{{'Note(Optional)' | translate}}" formControlName="note"></textarea> |
| </mat-form-field> |
| </div> |
| <div layout="row"> |
| <mat-form-field layout-margin flex> |
| <textarea matInput flex placeholder="{{'Message(Optional)' | translate}}" formControlName="message"></textarea> |
| </mat-form-field> |
| </div> |
| <ng-template td-step-actions> |
| <fims-form-continue-action (onContinue)="accountsStep.open()"></fims-form-continue-action> |
| </ng-template> |
| </td-step> |
| <td-step #accountsStep label="{{'Affected Accounts' | translate}}"> |
| <div layout-gt-xs="column"> |
| <div layout="row"> |
| <mat-card flex formArrayName="debtors"> |
| <mat-card-title>Debit</mat-card-title> |
| <mat-card-content> |
| <div layout="row" layout-align="start center" [formGroupName]="i" *ngFor="let debtor of debtors; let i = index;"> |
| <fims-account-select formControlName="accountNumber" [title]="'Account' | translate" flex="50"> |
| <ng-container *ngIf="!debtor.get('accountNumber').pristine && debtor.get('accountNumber').hasError('required')" |
| translate> |
| Required |
| </ng-container> |
| <ng-container *ngIf="debtor.get('accountNumber').hasError('invalidAccount')" translate> |
| Invalid account |
| </ng-container> |
| </fims-account-select> |
| <fims-text-input type="number" [form]="debtor" controlName="amount" |
| placeholder="{{'Amount' | translate}}"></fims-text-input> |
| <button mat-raised-button color="warn" title="{{'Remove' | translate}}" (click)="removeDebtor(i)">{{'Remove' | |
| translate}} |
| </button> |
| </div> |
| <p *ngIf="form.get('debtors').hasError('minItemsInvalid')" class="tc-red-600" translate> |
| Please add at least one debit. |
| </p> |
| </mat-card-content> |
| <mat-card-actions> |
| <button mat-button mat-raised-button (click)="addDebtor()">{{'ADD DEBIT' | translate}}</button> |
| </mat-card-actions> |
| </mat-card> |
| <mat-card flex formArrayName="creditors"> |
| <mat-card-title>Credit</mat-card-title> |
| <mat-card-content> |
| <div layout="row" layout-align="start center" [formGroupName]="i" *ngFor="let creditor of creditors; let i = index;"> |
| <fims-account-select formControlName="accountNumber" [title]="'Account' | translate" flex="50"> |
| <ng-container *ngIf="!creditor.get('accountNumber').pristine && creditor.get('accountNumber').hasError('required')" |
| translate> |
| Required |
| </ng-container> |
| <ng-container *ngIf="creditor.get('accountNumber').hasError('invalidAccount')" translate> |
| Invalid account |
| </ng-container> |
| </fims-account-select> |
| <fims-text-input type="number" [form]="creditor" controlName="amount" |
| placeholder="{{'Amount' | translate}}"></fims-text-input> |
| <button mat-raised-button color="warn" title="{{'Remove' | translate}}" (click)="removeCreditor(i)">{{'Remove' | |
| translate}} |
| </button> |
| </div> |
| <p *ngIf="form.get('creditors').hasError('minItemsInvalid')" class="tc-red-600" translate> |
| Please add at least one credit. |
| </p> |
| </mat-card-content> |
| <mat-card-actions> |
| <button mat-button mat-raised-button (click)="addCreditor()">{{'ADD CREDIT' | translate}}</button> |
| </mat-card-actions> |
| </mat-card> |
| |
| </div> |
| <p *ngIf="!form.pristine && form.hasError('sumInvalid')" class="tc-red-600" translate> |
| Sum of debit and sum of credit must match. |
| </p> |
| </div> |
| </td-step> |
| <td-step label="{{'Final step' | translate}}" [state]="'complete'"> |
| <ng-template td-step-summary> |
| <fims-form-final-action |
| [resourceName]="'JOURNAL ENTRY'" |
| [editMode]="false" |
| [disabled]="!form.valid" |
| (onCancel)="cancel()" |
| (onSave)="save()"> |
| </fims-form-final-action> |
| </ng-template> |
| </td-step> |
| </td-steps> |
| </form> |