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

<div class="container">
  <div class="row">
    <div class="col">
      <div class="users">
        <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"
                  >{{ element.id }}</span
                >
                <span class="d-inline-block d-sm-none text-monospace"
                  >{{ (element.id | slice:0:5) + '...' }}</span
                >
                <gf-premium-indicator
                  *ngIf="element?.subscription?.type === 'Premium'"
                  class="ml-1"
                  [enableLink]="false"
                  [title]="'Expires ' + formatDistanceToNow(element.subscription.expiresAt) + ' (' + (element.subscription.expiresAt | date: defaultDateFormat) + ')'"
                ></gf-premium-indicator>
              </div>
            </td>
          </ng-container>

          <ng-container
            *ngIf="hasPermissionForSubscription"
            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"
              ></gf-value>
            </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"
              ></gf-value>
            </td>
          </ng-container>

          <ng-container
            *ngIf="hasPermissionForSubscription"
            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"
              ></gf-value>
            </td>
          </ng-container>

          <ng-container
            *ngIf="hasPermissionForSubscription"
            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">
                <button
                  *ngIf="hasPermissionToImpersonateAllUsers"
                  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>