bitwarden-browser/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

<div *ngIf="!secrets" class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
  <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
</div>

<ng-container *ngIf="secrets?.length == 0">
  <bit-no-items *ngIf="trash">
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "secretsTrashNoItemsMessage" | i18n }}</ng-container>
  </bit-no-items>
  <bit-no-items *ngIf="!trash">
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "secretsNoItemsMessage" | i18n }}</ng-container>
    <button
      type="button"
      slot="button"
      bitButton
      buttonType="secondary"
      (click)="newSecretEvent.emit()"
    >
      <i class="bwi bwi-plus" aria-hidden="true"></i>
      {{ "newSecret" | i18n }}
    </button>
  </bit-no-items>
</ng-container>

<bit-table *ngIf="secrets?.length >= 1" [dataSource]="dataSource">
  <ng-container header>
    <tr>
      <th bitCell class="tw-w-0">
        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
          <input
            type="checkbox"
            (change)="$event ? toggleAll() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          />
          {{ "all" | i18n }}
        </label>
      </th>
      <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
      <th bitCell bitSortable="projects" [fn]="sortProjects">{{ "project" | i18n }}</th>
      <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
      <th bitCell class="tw-w-0">
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [title]="'options' | i18n"
          [attr.aria-label]="'options' | i18n"
          [bitMenuTriggerFor]="tableMenu"
        ></button>
      </th>
    </tr>
  </ng-container>
  <ng-template body let-rows$>
    <tr bitRow *ngFor="let secret of rows$ | async">
      <td bitCell>
        <input
          type="checkbox"
          (change)="$event ? selection.toggle(secret.id) : null"
          [checked]="selection.isSelected(secret.id)"
        />
      </td>
      <td bitCell>
        <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
          <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
          <button type="button" bitLink (click)="editSecretEvent.emit(secret.id)" *ngIf="!trash">
            {{ secret.name }}
          </button>
          <div *ngIf="trash">{{ secret.name }}</div>
        </div>
      </td>
      <td bitCell>
        <span
          *ngFor="let project of secret.projects"
          bitBadge
          badgeType="secondary"
          class="tw-ml-1"
          [title]="project.name"
        >
          {{ project.name | ellipsis : 32 }}
        </span>
        <span *ngIf="secret.projects.length === 0" bitBadge badgeType="warning" class="tw-ml-1"
          ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
          >{{ "unassigned" | i18n }}</span
        >
      </td>
      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date : "medium" }}</td>
      <td bitCell>
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [title]="'options' | i18n"
          [attr.aria-label]="'options' | i18n"
          [bitMenuTriggerFor]="secretMenu"
        ></button>
      </td>

      <bit-menu #secretMenu>
        <button
          type="button"
          bitMenuItem
          (click)="editSecretEvent.emit(secret.id)"
          *ngIf="secret.write && !trash"
        >
          <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
          {{ "editSecret" | i18n }}
        </button>
        <button
          type="button"
          bitMenuItem
          (click)="copySecretNameEvent.emit(secret.name)"
          *ngIf="!trash"
        >
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copySecretName" | i18n }}
        </button>
        <button
          type="button"
          bitMenuItem
          (click)="copySecretValueEvent.emit(secret.id)"
          *ngIf="!trash"
        >
          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
          {{ "copySecretValue" | i18n }}
        </button>
        <button
          type="button"
          bitMenuItem
          (click)="restoreSecretsEvent.emit([secret.id])"
          *ngIf="trash"
        >
          <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
          {{ "restoreSecret" | i18n }}
        </button>
        <button
          type="button"
          bitMenuItem
          (click)="deleteSecretsEvent.emit([secret])"
          *ngIf="secret.write"
        >
          <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
          <span class="tw-text-danger">{{
            (trash ? "permanentlyDelete" : "deleteSecret") | i18n
          }}</span>
        </button>
      </bit-menu>
    </tr>
  </ng-template>
</bit-table>

<bit-menu #tableMenu>
  <button type="button" bitMenuItem (click)="bulkRestoreSecrets()" *ngIf="trash">
    <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
    <span>{{ "restoreSelected" | i18n }}</span>
  </button>
  <button type="button" bitMenuItem (click)="bulkDeleteSecrets()">
    <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
    <span class="tw-text-danger">{{ "deleteSecrets" | i18n }}</span>
  </button>
</bit-menu>