WISE-Client/src/app/modules/header/header-account-menu/header-account-menu.component.html at d2ab2568620d9d0e4859c92d63da31a26c46ffdd · WISE-Community/WISE-Client · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<button mat-icon-button [matMenuTriggerFor]="accountMenu" i18n-aria-label aria-label="Account Menu">
  <mat-icon *ngIf="roles.includes('student'); else teacher">account_circle</mat-icon>
  <ng-template #teacher>
    <mat-icon>account_box</mat-icon>
  </ng-template>
</button>
<mat-menu #accountMenu="matMenu" xPosition="before">
  <div class="header-account-menu">
    @if (!roles.includes('surveyStudent')) {
      <div class="user-info flex flex-row items-center space-x-2">
        <mat-icon
          *ngIf="roles.includes('student'); else teacherAvatar"
          i18n-aria-label
          aria-label="Account avatar"
          >account_circle</mat-icon
        >
        <ng-template #teacherAvatar>
          <mat-icon i18n-aria-label aria-label="Account avatar">account_box</mat-icon>
        </ng-template>
        <span>{{ firstName }} {{ lastName }}</span>
      </div>
      <div *ngIf="isPreviousAdmin" class="user-switch">
        <a (click)="switchToOriginalUser()" i18n>Switch back to original user</a>
      </div>
      <mat-divider></mat-divider>
      <a
        *ngIf="roles.includes('student')"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
        mat-menu-item
        routerLink="/student"
      >
        <mat-icon>home</mat-icon>
        <span i18n>Student Home</span>
      </a>
      <a
        *ngIf="roles.includes('teacher')"
        mat-menu-item
        routerLink="/teacher"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <mat-icon>home</mat-icon>
        <span i18n>Teacher Home</span>
      </a>
      <a
        *ngIf="roles.includes('student')"
        mat-menu-item
        routerLink="/student/profile/edit"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <mat-icon>edit</mat-icon>
        <span i18n>Edit Profile</span>
      </a>
      <a
        *ngIf="roles.includes('teacher')"
        mat-menu-item
        routerLink="/teacher/profile/edit"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <mat-icon>edit</mat-icon>
        <span i18n>Edit Profile</span>
      </a>
      <a *ngIf="roles.includes('researcher')" mat-menu-item (click)="switchToAdmin()">
        <mat-icon>settings</mat-icon>
        <span i18n>Researcher Tools</span>
      </a>
      <a *ngIf="roles.includes('admin')" mat-menu-item (click)="switchToAdmin()">
        <mat-icon>settings</mat-icon>
        <span i18n>Admin Tools</span>
      </a>
      <a
        mat-menu-item
        routerLink="/help"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <mat-icon>help</mat-icon>
        <span i18n>Help</span>
      </a>
      <mat-divider></mat-divider>
    }
    <a mat-menu-item (click)="logOut()">
      <mat-icon color="warn">exit_to_app</mat-icon>
      <span class="warn" i18n>Sign Out</span>
    </a>
  </div>
</mat-menu>