You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
5.3 KiB
177 lines
5.3 KiB
<form #addTransactionForm="ngForm" class="d-flex flex-column h-100">
|
|
<h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update transaction</h1>
|
|
<h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add transaction</h1>
|
|
<div class="flex-grow-1" mat-dialog-content>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Account</mat-label>
|
|
<mat-select
|
|
name="accountId"
|
|
required
|
|
[(value)]="data.transaction.accountId"
|
|
>
|
|
<mat-option
|
|
*ngFor="let account of data.user?.accounts"
|
|
[value]="account.id"
|
|
>{{ account.name }}</mat-option
|
|
>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Symbol or ISIN</mat-label>
|
|
<input
|
|
autocapitalize="off"
|
|
autocomplete="off"
|
|
autocorrect="off"
|
|
matInput
|
|
required
|
|
[formControl]="searchSymbolCtrl"
|
|
[matAutocomplete]="auto"
|
|
(change)="onUpdateSymbolByTyping($event.target.value)"
|
|
/>
|
|
<mat-autocomplete
|
|
#auto="matAutocomplete"
|
|
(optionSelected)="onUpdateSymbol($event)"
|
|
>
|
|
<ng-container>
|
|
<mat-option
|
|
*ngFor="let lookupItem of filteredLookupItems | async"
|
|
class="autocomplete"
|
|
[value]="lookupItem.symbol"
|
|
>
|
|
<span class="mr-2 symbol">{{ lookupItem.symbol | gfSymbol }}</span
|
|
><span><b>{{ lookupItem.name }}</b></span>
|
|
</mat-option>
|
|
</ng-container>
|
|
</mat-autocomplete>
|
|
<mat-spinner *ngIf="isLoading" matSuffix [diameter]="20"></mat-spinner>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Type</mat-label>
|
|
<mat-select name="type" required [(value)]="data.transaction.type">
|
|
<mat-option value="BUY" i18n> BUY </mat-option>
|
|
<mat-option value="SELL" i18n> SELL </mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="d-none">
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Currency</mat-label>
|
|
<mat-select
|
|
class="no-arrow"
|
|
disabled
|
|
name="currency"
|
|
required
|
|
[(value)]="data.transaction.currency"
|
|
>
|
|
<mat-option *ngFor="let currency of currencies" [value]="currency"
|
|
>{{ currency }}</mat-option
|
|
>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="d-none">
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Data Source</mat-label>
|
|
<input
|
|
disabled
|
|
matInput
|
|
name="dataSource"
|
|
required
|
|
[(ngModel)]="data.transaction.dataSource"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Date</mat-label>
|
|
<input
|
|
disabled
|
|
matInput
|
|
name="date"
|
|
required
|
|
[matDatepicker]="date"
|
|
[(ngModel)]="data.transaction.date"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="date">
|
|
<ion-icon
|
|
class="text-muted"
|
|
matDatepickerToggleIcon
|
|
name="calendar-clear-outline"
|
|
></ion-icon>
|
|
</mat-datepicker-toggle>
|
|
<mat-datepicker #date disabled="false"></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Fee</mat-label>
|
|
<input
|
|
matInput
|
|
name="fee"
|
|
required
|
|
type="number"
|
|
[(ngModel)]="data.transaction.fee"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Quantity</mat-label>
|
|
<input
|
|
matInput
|
|
name="quantity"
|
|
required
|
|
type="number"
|
|
[(ngModel)]="data.transaction.quantity"
|
|
/>
|
|
</mat-form-field>
|
|
</div>
|
|
<div>
|
|
<mat-form-field appearance="outline" class="unit-price w-100">
|
|
<mat-label i18n>Unit Price</mat-label>
|
|
<input
|
|
matInput
|
|
name="unitPrice"
|
|
required
|
|
type="number"
|
|
[(ngModel)]="data.transaction.unitPrice"
|
|
/>
|
|
<button
|
|
*ngIf="currentMarketPrice"
|
|
mat-icon-button
|
|
matSuffix
|
|
title="Apply current market price"
|
|
(click)="applyCurrentMarketPrice()"
|
|
>
|
|
<ion-icon class="text-muted" name="refresh-outline"></ion-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex" mat-dialog-actions>
|
|
<gf-value
|
|
class="flex-grow-1"
|
|
[currency]="data.transaction.currency"
|
|
[locale]="data.user?.settings?.locale"
|
|
[value]="data.transaction.fee + (data.transaction.quantity * data.transaction.unitPrice)"
|
|
></gf-value>
|
|
<div>
|
|
<button i18n mat-button (click)="onCancel()">Cancel</button>
|
|
<button
|
|
color="primary"
|
|
i18n
|
|
mat-flat-button
|
|
[disabled]="!(addTransactionForm.form.valid && data.transaction.symbol)"
|
|
[mat-dialog-close]="data"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|