Find an issue and propose decision

details.component.html

<div *ngFor="let order of orders">
  <div>{{ order.number }}</div>
  <div>{{ order.description }}</div>
</div>

details.component.ts

import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
  OnChanges,
  SimpleChanges,
  ChangeDetectorRef
} from '@angular/core';
import { Order, UserBrief, UsersService } from '../../task1/users.service';
import { PermissionService } from '../permission.service';
import { switchMap } from 'rxjs/operators';
import { EMPTY } from 'rxjs';

@Component({
  selector: 'hrh-details',
  templateUrl: './details.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetailsComponent implements OnInit, OnChanges {
  @Input() user?: UserBrief;

  orders: Order[] = [];

  constructor(
    private readonly permissionService: PermissionService,
    private readonly userService: UsersService,
    private readonly cd: ChangeDetectorRef
  ) {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.user != undefined) {
      if (changes.user.currentValue == undefined) {
        this.orders = [];
        return;
      }
      this.permissionService
        .hasPermission('view-user-orders')
        .pipe(
          switchMap((canViewRoles) => {
            if (canViewRoles) {
              return this.userService.getUserOrders(changes.user.currentValue.id);
            }
            return EMPTY;
          })
        )
        .subscribe((orders) => {
          this.orders = orders;
          this.cd.markForCheck();
        });
    }
  }
}

master.component.html

<div class="users-list">
  <div *ngFor="let user of users$ | async" class="user-list-item" (click)="selected = user">
    {{ user.firstName }} {{ user.lastName }}
  </div>
</div>

<hrh-details *ngIf="selected != undefined" [user]="selected"></hrh-details>

master.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import {UserBrief, UsersService} from '../../task1/users.service';

@Component({
  selector: 'hrh-master',
  templateUrl: './master.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MasterComponent implements OnInit {

  users$ = this.userService.getBriefUsers();
  selected?: UserBrief;

  constructor(private readonly userService: UsersService) { }

  ngOnInit(): void {
  }

}

permission.service.ts

import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

interface CurrentUser {
  permissions: string[];
}

@Injectable({
  providedIn: 'root'
})
export class PermissionService {
  private currentUser$ = new ReplaySubject<CurrentUser | undefined>(1);

  constructor(private http: HttpClient) {}

  /**
   * Update access token (called every 5 minutes)
   */
  updateToken(token: string | undefined) {
    if (token == undefined) {
      this.currentUser$.next(undefined);
    } else {
      this.http.get<CurrentUser>('/user-info').subscribe((user) => {
        this.currentUser$.next(user);
      });
    }
  }

  hasPermission(permission: string): Observable<boolean> {
    return this.currentUser$.pipe(
      map((user) => user?.permissions?.includes(permission) ?? false),
      shareReplay(1)
    );
  }
}

users.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export interface UserBrief {
  id: number;
  firstName: string;
  lastName: string;
}

export interface Order {
  id: number;
  number: string;
  date: string;
  description: string;
}

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  constructor(private http: HttpClient) {}

  getBriefUsers(): Observable<UserBrief[]> {
    return this.http.get<UserBrief[]>('/users-brief');
  }

  getUserOrders(id: number) {
    return this.http.get<Order[]>(`/users/${id}/orders`);
  }
}