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

<table
  class="gf-table w-100"
  matSort
  matSortActive="allocationCurrent"
  matSortDirection="desc"
  mat-table
  [dataSource]="dataSource"
>
  <ng-container matColumnDef="icon">
    <th *matHeaderCellDef class="px-1" mat-header-cell></th>
    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
      <gf-symbol-icon
        *ngIf="element.url"
        [tooltip]="element.name"
        [url]="element.url"
      ></gf-symbol-icon>
    </td>
  </ng-container>

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

  <ng-container matColumnDef="name">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell px-1"
      mat-header-cell
      mat-sort-header
    >
      <ng-container i18n>Name</ng-container>
    </th>
    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
      <ng-container *ngIf="element.name !== element.symbol">{{
        element.name
      }}</ng-container>
    </td>
  </ng-container>

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

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

  <ng-container matColumnDef="performance">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell px-1 text-right"
      mat-header-cell
    >
      <ng-container i18n>Performance</ng-container>
    </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
          [colorizeSign]="true"
          [isPercent]="true"
          [locale]="locale"
          [value]="isLoading ? undefined : element.netPerformancePercent"
        ></gf-value>
      </div>
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr
    *matRowDef="let row; columns: displayedColumns"
    mat-row
    [ngClass]="{
      'cursor-pointer':
        hasPermissionToShowValues &&
        !ignoreAssetSubClasses.includes(row.assetSubClass)
    }"
    (click)="
      hasPermissionToShowValues &&
        !ignoreAssetSubClasses.includes(row.assetSubClass) &&
        onOpenPositionDialog({ dataSource: row.dataSource, symbol: row.symbol })
    "
  ></tr>
</table>

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

<div
  *ngIf="dataSource.data.length > pageSize && !isLoading"
  class="my-3 text-center"
>
  <button mat-stroked-button (click)="onShowAllPositions()">
    <ng-container i18n>Show all</ng-container>
  </button>
</div>

<div
  *ngIf="
    dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
  "
  class="p-3 text-center"
>
  <gf-no-transactions-info-indicator
    [hasBorder]="false"
  ></gf-no-transactions-info-indicator>
</div>

<mat-paginator class="d-none" [pageSize]="pageSize"></mat-paginator>