ghostfolio/apps/client/src/app/components/admin-users/admin-users.html

<div class="container">
  <div class="row">
    <div class="col">
      <div class="overflow-x-auto">
        <table class="gf-table" mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="index">
            <th
              *matHeaderCellDef
              class="mat-mdc-header-cell px-1 py-2 text-right"
              mat-header-cell
            >
              #
            </th>
            <td
              *matCellDef="let element; let i = index"
              class="mat-mdc-cell px-1 py-2 text-right"
              mat-cell
            >
              {{ i + 1 }}
            </td>
          </ng-container>

          <ng-container matColumnDef="user">
            <th
              *matHeaderCellDef
              class="mat-mdc-header-cell px-1 py-2"
              i18n
              mat-header-cell
            >
              User
            </th>
            <td
              *matCellDef="let element"
              class="mat-mdc-cell px-1 py-2"
              mat-cell
            >
              <div class="d-flex align-items-center">
                <span
                  class="d-none d-sm-inline-block text-monospace"
                  [ngClass]="{
                    'text-line-through': element.role === 'INACTIVE'
                  }"
                  >{{ element.id }}</span
                >
                <span
                  class="d-inline-block d-sm-none text-monospace"
                  [ngClass]="{
                    'text-line-through': element.role === 'INACTIVE'
                  }"
                  >{{ (element.id | slice: 0 : 5) + '...' }}</span
                >
                @if (element?.subscription?.type === 'Premium') {
                  <gf-premium-indicator
                    class="ml-1"
                    [enableLink]="false"
                    [title]="
                      'Expires ' +
                      formatDistanceToNow(element.subscription.expiresAt) +
                      ' (' +
                      (element.subscription.expiresAt
                        | date: defaultDateFormat) +
                      ')'
                    "
                  />
                }
              </div>
            </td>
          </ng-container>

          @if (hasPermissionForSubscription) {
            <ng-container matColumnDef="country">
              <th
                *matHeaderCellDef
                class="mat-mdc-header-cell px-1 py-2"
                mat-header-cell
              >
                <ng-container i18n>Country</ng-container>
              </th>
              <td
                *matCellDef="let element"
                class="mat-mdc-cell px-1 py-2"
                mat-cell
              >
                <span class="h5" [title]="element.country">{{
                  getEmojiFlag(element.country)
                }}</span>
              </td>
            </ng-container>
          }

          <ng-container matColumnDef="registration">
            <th
              *matHeaderCellDef
              class="mat-mdc-header-cell px-1 py-2"
              mat-header-cell
            >
              <ng-container i18n>Registration</ng-container>
            </th>
            <td
              *matCellDef="let element"
              class="mat-mdc-cell px-1 py-2"
              mat-cell
            >
              {{ formatDistanceToNow(element.createdAt) }}
            </td>
          </ng-container>

          <ng-container matColumnDef="accounts">
            <th
              *matHeaderCellDef
              class="mat-mdc-header-cell px-1 py-2 text-right"
              mat-header-cell
            >
              <ng-container i18n>Accounts</ng-container>
            </th>
            <td
              *matCellDef="let element"
              class="mat-mdc-cell px-1 py-2 text-right"
              mat-cell
            >
              <gf-value
                class="d-inline-block justify-content-end"
                [locale]="user?.settings?.locale"
                [value]="element.accountCount"
              />
            </td>
          </ng-container>

          <ng-container matColumnDef="activities">
            <th
              *matHeaderCellDef
              class="mat-mdc-header-cell px-1 py-2 text-right"
              mat-header-cell
            >
              <ng-container i18n>Activities</ng-container>
            </th>
            <td
              *matCellDef="let element"
              class="mat-mdc-cell px-1 py-2 text-right"
              mat-cell
            >
              <gf-value
                class="d-inline-block justify-content-end"
                [locale]="user?.settings?.locale"
                [value]="element.transactionCount"
              />
            </td>
          </ng-container>

          @if (hasPermissionForSubscription) {
            <ng-container matColumnDef="engagementPerDay">
              <th
                *matHeaderCellDef
                class="mat-mdc-header-cell px-1 py-2 text-right"
                mat-header-cell
              >
                <ng-container i18n>Engagement per Day</ng-container>
              </th>
              <td
                *matCellDef="let element"
                class="mat-mdc-cell px-1 py-2 text-right"
                mat-cell
              >
                <gf-value
                  class="d-inline-block justify-content-end"
                  [locale]="user?.settings?.locale"
                  [precision]="0"
                  [value]="element.engagement"
                />
              </td>
            </ng-container>
          }

          @if (hasPermissionForSubscription) {
            <ng-container matColumnDef="lastRequest">
              <th
                *matHeaderCellDef
                class="mat-mdc-header-cell px-1 py-2"
                i18n
                mat-header-cell
              >
                Last Request
              </th>
              <td
                *matCellDef="let element"
                class="mat-mdc-cell px-1 py-2"
                mat-cell
              >
                {{ formatDistanceToNow(element.lastActivity) }}
              </td>
            </ng-container>
          }

          <ng-container matColumnDef="actions" stickyEnd>
            <th
              *matHeaderCellDef
              class="mat-mdc-header-cell px-1 py-2"
              mat-header-cell
            ></th>
            <td
              *matCellDef="let element"
              class="mat-mdc-cell px-1 py-2"
              mat-cell
            >
              <button
                class="mx-1 no-min-width px-2"
                mat-button
                [matMenuTriggerFor]="userMenu"
                (click)="$event.stopPropagation()"
              >
                <ion-icon name="ellipsis-horizontal" />
              </button>
              <mat-menu #userMenu="matMenu" xPosition="before">
                @if (hasPermissionToImpersonateAllUsers) {
                  <button mat-menu-item (click)="onImpersonateUser(element.id)">
                    <span class="align-items-center d-flex">
                      <ion-icon class="mr-2" name="contract-outline" />
                      <span i18n>Impersonate User</span>
                    </span>
                  </button>
                }
                <button
                  mat-menu-item
                  [disabled]="element.id === user?.id"
                  (click)="onDeleteUser(element.id)"
                >
                  <span class="align-items-center d-flex">
                    <ion-icon class="mr-2" name="trash-outline" />
                    <span i18n>Delete User</span>
                  </span>
                </button>
              </mat-menu>
            </td>
          </ng-container>

          <tr
            *matHeaderRowDef="displayedColumns"
            class="mat-mdc-header-row"
            mat-header-row
          ></tr>
          <tr
            *matRowDef="let row; columns: displayedColumns"
            class="mat-mdc-row"
            mat-row
          ></tr>
        </table>
      </div>
    </div>
  </div>
</div>