users-achievements.component.html

<mat-toolbar>
  <button mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
  <span i18n>Achievements</span>
  <span class="toolbar-fill"></span>
</mat-toolbar>

<div class="space-container">
  <mat-toolbar class="primary-color font-size-1">
    <span *ngIf="user?.firstName; else elseBlock">{{ user.firstName}} {{user.middleName}} {{user.lastName }}</span>
    <ng-template #elseBlock>{{ user.name }}</ng-template>
    <span class="toolbar-fill"></span>
    <a mat-raised-button color="accent" style="margin-right: 1rem;" (click)="openGenerateResumeDialog()" *ngIf="ownAchievements">
      <span i18n>Create Resumé</span>
    </a>
    <a mat-raised-button color="primary" style="margin-right: 1rem;" *ngIf="ownAchievements" (click)="generatePDF()">
      <span i18n>Print Achievements</span>
    </a> <br>
    <a mat-raised-button color="accent" routerLink="update" *ngIf="ownAchievements">
      <span *ngIf="achievementNotFound" i18n>Add Achievements</span>
      <span *ngIf="!achievementNotFound" i18n>Edit Achievements</span>
    </a>
  </mat-toolbar>
  <div class="view-container">
    <div *ngIf="achievements !== undefined" class="achievements-container">
      <h2>{{user.firstName}} {{user.middleName}} {{user.lastName}}</h2>
      <div>
        <ng-container *ngIf="user.birthDate"><span i18n>Birthdate: {{' ' + (user.birthDate | date: medium) + ' '}}</span></ng-container><br/><br/>
        <span *ngIf="user.birthplace" i18n>Birthplace: {{' ' + user.birthplace}} </span>
      </div>
      <div *ngIf="achievements.purpose">
        <h3 i18n>My Purpose</h3>
        <td-markdown [content]="achievements.purpose"></td-markdown>
      </div>
      <div *ngIf="achievements.goals">
        <h3 i18n>My Goals</h3>
        <td-markdown [content]="achievements.goals"></td-markdown>
      </div>
      <ng-container *planetBeta>
        <div *ngIf="certifications.length > 0">
          <h3 i18n>My Certifications</h3>
          <mat-list>
            <mat-list-item *ngFor="let certification of certifications">
              {{certification.name}}
            </mat-list-item>
          </mat-list>
        </div>
      </ng-container>
      <div *ngIf="achievements.achievementsHeader || achievements.achievements.length > 0">
        <h3 i18n>My Achievements</h3>
        <td-markdown [content]="achievements.achievementsHeader"></td-markdown>
        <mat-list>
          <mat-list-item class="mat-list-item-word-wrap" [ngClass]="{'cursor-pointer':isClickable(achievement)}" *ngFor="let achievement of achievements.achievements; index as i" (click)="toggleOpenAchievementIndex(i)">
            <p class="achievement-header" mat-line>
              <span class="achievement-text">{{achievement.title || achievement}}
                <ng-container *ngIf="isClickable(achievement)">
                  <mat-icon *ngIf="openAchievementIndex !== i" color="primary">expand_more</mat-icon>
                  <mat-icon *ngIf="openAchievementIndex === i" color="primary">expand_less</mat-icon>
                </ng-container>
              </span>
              <span class="achievement-date">{{achievement.date | date: medium}}</span>
            </p>
            <p mat-line *ngIf="openAchievementIndex === i">{{achievement.description}}</p>
            <span mat-line class="achievement-buttons" *ngIf="openAchievementIndex === i"></span>
          </mat-list-item>
        </mat-list>
      </div>
      <div *ngIf="achievements.references.length > 0">
        <h3 i18n>My References</h3>
        <mat-list>
          <mat-list-item class="mat-list-item-word-wrap" *ngFor="let reference of achievements.references">
            <h4 mat-line>{{reference.name}}</h4>
            <p mat-line *ngIf="reference?.relationship"><ng-container i18n>Relationship:</ng-container> {{reference.relationship}}</p>
            <p mat-line *ngIf="reference?.phone"><ng-container i18n>Phone Number:</ng-container> {{reference.phone}}</p>
            <p mat-line *ngIf="reference?.email"><ng-container i18n>Email:</ng-container> {{reference.email}}</p>
          </mat-list-item>
        </mat-list>
      </div>
    </div>
    <div *ngIf="achievementNotFound">
      <ng-container *ngIf="ownAchievements"><span i18n>You haven't entered any achievements yet. Click </span><a routerLink="update" i18n>Add Achievements</a><span i18n> to add your achievements!</span></ng-container>
      <ng-container *ngIf="!ownAchievements" i18n>No achievements found.</ng-container>
    </div>
  </div>
</div>