ghostfolio/apps/client/src/app/components/transactions-table/transactions-table.component.html

<mat-form-field appearance="outline" class="w-100">
  <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
  <mat-chip-list #chipList aria-label="Search keywords">
    <mat-chip
      *ngFor="let searchKeyword of searchKeywords"
      matChipRemove
      [removable]="true"
      (removed)="removeKeyword(searchKeyword)"
    >
      {{ searchKeyword }}
      <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
    </mat-chip>
    <input
      #searchInput
      name="close-outline"
      placeholder="Search for account, currency, symbol or type..."
      [formControl]="searchControl"
      [matAutocomplete]="autocomplete"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="addKeyword($event)"
    />
  </mat-chip-list>
  <mat-autocomplete
    #autocomplete="matAutocomplete"
    (optionSelected)="keywordSelected($event)"
  >
    <mat-option
      *ngFor="let transaction of filteredTransactions | async"
      [value]="transaction"
    >
      {{ transaction }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<table
  class="gf-table w-100"
  matSort
  matSortActive="date"
  matSortDirection="desc"
  mat-table
  [dataSource]="dataSource"
>
  <ng-container matColumnDef="date">
    <th
      *matHeaderCellDef
      class="justify-content-center px-1"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Date
    </th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      <div class="d-flex justify-content-center">
        {{ element.date | date: defaultDateFormat }}
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="type">
    <th
      *matHeaderCellDef
      class="justify-content-center px-1"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Type
    </th>
    <td mat-cell *matCellDef="let element" class="px-1 text-center">
      <div
        class="d-inline-flex justify-content-center pl-1 pr-2 py-1 type-badge"
        [ngClass]="element.type == 'BUY' ? 'buy' : 'sell'"
      >
        <ion-icon
          class="mr-1"
          [name]="
            element.type === 'BUY'
              ? 'arrow-forward-circle-outline'
              : 'arrow-back-circle-outline'
          "
        ></ion-icon>
        <span>{{ element.type }}</span>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
      Symbol
    </th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      {{ element.symbol | gfSymbol }}
    </td>
  </ng-container>

  <ng-container matColumnDef="currency">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell justify-content-center px-1"
      mat-header-cell
      i18n
      mat-sort-header
    >
      Currency
    </th>
    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
      <div class="d-flex justify-content-center">
        {{ element.currency }}
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="quantity">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell justify-content-end px-1"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Quantity
    </th>
    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
      <div class="d-flex justify-content-end">
        <gf-value
          [isCurrency]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.quantity"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="unitPrice">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell justify-content-end px-1"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Unit Price
    </th>
    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
      <div class="d-flex justify-content-end">
        <gf-value
          [isCurrency]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.unitPrice"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="fee">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell justify-content-end px-1"
      i18n
      mat-header-cell
      mat-sort-header
    >
      Fee
    </th>
    <td *matCellDef="let element" class="d-none d-lg-table-cell px1" mat-cell>
      <div class="d-flex justify-content-end">
        <gf-value
          [isCurrency]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.fee"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="account">
    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
      Account
    </th>
    <td *matCellDef="let element" class="px-1" mat-cell>
      <div class="d-flex">
        <gf-symbol-icon
          *ngIf="element.Account?.Platform?.url"
          class="mr-1"
          [tooltip]="element.Account?.Platform?.name"
          [url]="element.Account?.Platform?.url"
        ></gf-symbol-icon>
        <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
      <button
        class="mx-1 no-min-width px-2"
        mat-button
        [matMenuTriggerFor]="accountMenu"
        (click)="$event.stopPropagation()"
      >
        <ion-icon name="ellipsis-vertical"></ion-icon>
      </button>
      <mat-menu #accountMenu="matMenu" xPosition="before">
        <button i18n mat-menu-item (click)="onUpdateTransaction(element)">
          Edit
        </button>
        <button i18n mat-menu-item (click)="onCloneTransaction(element)">
          Clone
        </button>
        <button i18n mat-menu-item (click)="onDeleteTransaction(element.id)">
          Delete
        </button>
      </mat-menu>
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr
    *matRowDef="let row; columns: displayedColumns"
    mat-row
    (click)="onOpenPositionDialog({ symbol: row.symbol, title: '' })"
  ></tr>
</table>

<ngx-skeleton-loader
  *ngIf="isLoading"
  animation="pulse"
  class="px-4 py-3"
  [theme]="{
    height: '1.5rem',
    width: '100%'
  }"
></ngx-skeleton-loader>