Feature/usability improvements in the create or edit transaction dialog (#483)

* Usability improvements
  * Disable the symbol input in edit mode
  * Filter accounts by type (SECURITIES)

* Update changelog

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Locked the symbol input in the edit transaction dialog
+- Filtered the account selector by account type (`SECURITIES`) in the create or edit transaction dialog
+
 ## 1.78.0 - 20.11.2021
 
 ### Added

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -84,6 +84,10 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
         })
       );
 
+    if (this.data.transaction.id) {
+      this.searchSymbolCtrl.disable();
+    }
+
     if (this.data.transaction.symbol) {
       this.dataService
         .fetchSymbolItem({

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -10,9 +10,7 @@
           required
           [(value)]="data.transaction.accountId"
         >
-          <mat-option
+          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
-            *ngFor="let account of data.user?.accounts"
-            [value]="account.id"
             >{{ account.name }}</mat-option
           >
         </mat-select>

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts

@@ -1,8 +1,9 @@
 import { User } from '@ghostfolio/common/interfaces';
-import { Order } from '@prisma/client';
+import { Account, Order } from '@prisma/client';
 
 export interface CreateOrUpdateTransactionDialogParams {
   accountId: string;
+  accounts: Account[];
   transaction: Order;
   user: User;
 }

apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts

@@ -261,6 +261,9 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
   }: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
+        accounts: this.user.accounts.filter((account) => {
+          return account.accountType === 'SECURITIES';
+        }),
         transaction: {
           accountId,
           currency,
@@ -343,6 +346,9 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
   private openCreateTransactionDialog(aTransaction?: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
+        accounts: this.user.accounts.filter((account) => {
+          return account.accountType === 'SECURITIES';
+        }),
         transaction: {
           accountId: aTransaction?.accountId ?? this.defaultAccountId,
           currency: aTransaction?.currency ?? null,