openaccounting-web/src/app/transaction/advancededit.html

<div class="modal-header">
  <h4 class="modal-title">Transaction</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form [formGroup]="form">
    <div class="form-group row">
      <label for="date" class="col-sm-4 col-form-label">Date</label>
      <div class="col-sm-8">
        <input formControlName="date" id="date" type="text" class="form-control" />
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-4 col-form-label">Description</label>
      <div class="col-sm-8">
        <input formControlName="description" id="description" type="text" class="form-control"/>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        Account
      </div>
      <div class="col-sm-4">
        Debit
      </div>
      <div class="col-sm-4">
        Credit
      </div>
      <div class="col-sm-1">
      </div>
    </div>
    <div *ngFor="let split of getSplitControls(); let i=index" [formGroup]="split" class="splits">
      <div *ngIf="debitVisible(i) || creditVisible(i)" class="row">
        <div class="col-sm-3"></div>
        <div *ngIf="!debitVisible(i)" class="col-sm-4"></div>
        <div *ngIf="debitVisible(i)" class="col-sm-2">{{getCurrency(split.value.accountId)}}</div>
        <div *ngIf="debitVisible(i)" class="col-sm-2">{{org.currency}}</div>
        <div *ngIf="!creditVisible(i)" class="col-sm-4"></div>
        <div *ngIf="creditVisible(i)" class="col-sm-2">{{org.currency}}</div>
        <div *ngIf="creditVisible(i)" class="col-sm-2">{{getCurrency(split.value.accountId)}}</div>
      </div>
      <div class="row">
        <div class="col-sm-3 account">
          <select class="form-control" formControlName="accountId">
            <option *ngFor="let account of selectAccounts" [value]="account.id">
              {{account.fullName}}
            </option>
          </select>
        </div>
        <div *ngIf="!debitVisible(i)" class="col-sm-4">
          <button *ngIf="!creditVisible(i) || !split.value.credit" type="button" class="btn btn-primary" (click)="showDebit(i)">Debit</button>
        </div>
        <div *ngIf="debitVisible(i)" class="col-sm-2">
          <input type="text" class="form-control" formControlName="debit" />
        </div>
        <div *ngIf="debitVisible(i)" class="col-sm-2">
          <input type="text" class="form-control" formControlName="debitNative" />
        </div>
        <div *ngIf="!creditVisible(i)" class="col-sm-4">
          <button *ngIf="!debitVisible(i) || !split.value.debit" type="button" class="btn btn-primary" (click)="showCredit(i)">Credit</button>
        </div>
        <div *ngIf="creditVisible(i)" class="col-sm-2">
          <input type="text" class="form-control" formControlName="creditNative" />
        </div>
        <div *ngIf="creditVisible(i)" class="col-sm-2">
          <input type="text" class="form-control" formControlName="credit" />
        </div>
        <div class="col-sm-1">
          <a (click)="deleteSplit(i)">X</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 p-3">
        <a (click)="addSplit()">Add Split</a>
      </div>
    </div>
    <p *ngIf="error" class="error">{{error.message}}</p>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss()">Cancel</button>
  <button type="button" class="btn btn-primary" (click)="submit()">Save</button>
</div>