settings-users-that-thrust-you.component.html

<ng-container *ngIf="$usersThatThrustYou | async as usersThatThrustYou">
  <h2
    class="orc-font-body-large"
    i18n="@@account.usersThatTrustYou"
    id="cy-individuals-trust-you"
  >
    Users that trust you
  </h2>

  <div>
    <p i18n="@@account.orcidUsersWhoHaveYou">
      ORCID users who have made you an account delegate for their ORCID record.
    </p>
  </div>

  <ng-container *ngIf="usersThatThrustYou.delegators?.length && this.isMobile">
    <mat-divider></mat-divider>
    <div *ngFor="let userThatThrustYou of usersThatThrustYou.delegators">
      <div class="mobile-elements-container">
        <div class="mobile-ements-text-container">
          <strong i18n="@@account.name">Name</strong>
          <div>{{ userThatThrustYou?.giverName?.value }}</div>
          <strong i18n="@@account.orcidId">ORCID iD</strong>
          <div>
            <a
              class="underline"
              target="_blank"
              rel="noreferrer noopener"
              href="{{ baseUrl }}{{ userThatThrustYou.giverOrcid.path }}"
              >{{ userThatThrustYou.giverOrcid.path }}</a
            >
          </div>
          <strong i18n="@@account.accessGranted">Access granted</strong>
          <div>
            {{ userThatThrustYou?.approvalDate | monthDayYearDateToString }}
          </div>
        </div>
      </div>

      <mat-divider></mat-divider>
    </div>
  </ng-container>
  <div class="table-container">
    <table
      *ngIf="usersThatThrustYou.delegators?.length && !this.isMobile"
      mat-table
      [dataSource]="usersThatThrustYou.delegators"
      class="mat-elevation-z0"
    >
      <ng-container matColumnDef="trustedIndividuals">
        <th mat-header-cell *matHeaderCellDef i18n="@@account.name">Name</th>
        <td mat-cell *matCellDef="let element">
          {{ element?.giverName?.value }}
        </td>
      </ng-container>

      <ng-container matColumnDef="orcid">
        <th mat-header-cell *matHeaderCellDef i18n="@@account.orcidId">
          ORCID iD
        </th>
        <td mat-cell *matCellDef="let element">
          <a
            class="underline"
            target="_blank"
            rel="noreferrer noopener"
            href="{{ baseUrl }}{{ element.giverOrcid.path }}"
            >{{ element.giverOrcid.path }}</a
          >
        </td>
      </ng-container>

      <ng-container matColumnDef="granted">
        <th mat-header-cell *matHeaderCellDef i18n="@@account.accessGranted">
          Access granted
        </th>
        <td mat-cell *matCellDef="let element">
          {{ element?.approvalDate | monthDayYearDateToString }}
        </td>
      </ng-container>

      <ng-container matColumnDef="actions" stickyEnd>
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <div class="actions-container orc-font-body-small">
            <mat-icon class="warn pointer">block</mat-icon>

            <a
              class="underline warn"
              (click)="revokeAccess(element)"
              i18n="@@account.revokeAccess"
              id="cy-revoke-own-access"
              [routerLink]="trustedPartiesUrl"
            >
              Revoke access</a
            >
          </div>
        </td>
      </ng-container>

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

  <p *ngIf="!usersThatThrustYou.delegators.length">
    <i i18n="@@account.youHavenBeenAddAsTrusted">
      You haven't been added as a trusted individual yet.
    </i>
  </p>
</ng-container>