Facade Pattern in Angular: When Components Know Too Much

@Component({
  selector: 'app-order-approval-page',
  templateUrl: './order-approval-page.html',
})
export class OrderApprovalPage {
  private readonly route = inject(ActivatedRoute);
  private readonly api = inject(OrdersApi);
  private readonly permissions = inject(PermissionsService);
  private readonly toast = inject(ToastService);

  readonly orderId = toSignal(
    this.route.paramMap.pipe(map((params) => params.get('id')!)),
    { initialValue: null }
  );
  readonly canApproveOrders = toSignal(
    this.permissions.canApproveOrders$,
    { initialValue: false }
  );

  readonly order = toSignal(
    toObservable(this.orderId).pipe(
      switchMap((id) => {
        if (!id) return of(null);
        return this.api.getOrder(id);
      }),
      catchError(() => of(null))
    ),
    { initialValue: null }
  );

  readonly canApprove = computed(() =>
    this.order()?.status === 'pending' &&
    this.canApproveOrders()
  );

  approve() {
    const order = this.order();
    if (!order || !this.canApprove()) return;

    this.api.approveOrder(order.id).subscribe({
      next: () => this.toast.success('Order approved'),
      error: () => this.toast.error('Could not approve order'),
    });
  }
}

type ApprovalState =
  | { status: 'idle'; order: null; error: null }
  | { status: 'loading'; order: null; error: null }
  | { status: 'ready'; order: Order; error: null }
  | { status: 'error'; order: null; error: string };

const idleState: ApprovalState = {
  status: 'idle',
  order: null,
  error: null,
};

@Injectable()
export class OrderApprovalFacade {
  private readonly api = inject(OrdersApi);
  private readonly permissions = inject(PermissionsService);
  private readonly destroyRef = inject(DestroyRef);

  private readonly orderId = signal<string | null>(null);
  private readonly reloadVersion = signal(0);

  readonly actionError = signal<string | null>(null);
  readonly saving = signal(false);

  readonly canApproveOrders = toSignal(
    this.permissions.canApproveOrders$,
    { initialValue: false }
  );

  private readonly state$ = toObservable(
    computed(() => ({
      id: this.orderId(),
      reloadVersion: this.reloadVersion(),
    }))
  ).pipe(
    switchMap(({ id }) => {
      if (!id) return of(idleState);

      return this.api.getOrder(id).pipe(
        map((order) => ({
          status: 'ready',
          order,
          error: null,
        }) satisfies ApprovalState),
        startWith({
          status: 'loading',
          order: null,
          error: null,
        } satisfies ApprovalState),
        catchError(() => of({
          status: 'error',
          order: null,
          error: 'Could not load order',
        } satisfies ApprovalState))
      );
    }),
    shareReplay({ bufferSize: 1, refCount: true })
  );

  readonly state = toSignal(this.state$, { initialValue: idleState });

  readonly canApprove = computed(() => {
    const state = this.state();
    return state.status === 'ready' &&
      state.order.status === 'pending' &&
      this.canApproveOrders();
  });

  selectOrder(id: string) {
    this.orderId.set(id);
    this.actionError.set(null);
  }

  reload() {
    this.reloadVersion.update((value) => value + 1);
  }

  approve() {
    const state = this.state();
    if (state.status !== 'ready' || !this.canApprove() || this.saving()) return;

    this.saving.set(true);
    this.actionError.set(null);

    this.api.approveOrder(state.order.id).pipe(
      takeUntilDestroyed(this.destroyRef),
      finalize(() => this.saving.set(false))
    ).subscribe({
      next: () => this.reload(),
      error: () => this.actionError.set('Could not approve order'),
    });
  }
}

@Component({
  selector: 'app-order-approval-page',
  providers: [OrderApprovalFacade],
  templateUrl: './order-approval-page.html',
})
export class OrderApprovalPage {
  readonly facade = inject(OrderApprovalFacade);
  readonly orderId = input.required<string>();

  constructor() {
    effect(() => {
      this.facade.selectOrder(this.orderId());
    });
  }
}

@let state = facade.state();
@let actionError = facade.actionError();

@switch (state.status) {
  @case ('loading') {
    <app-order-approval-skeleton />
  }
  @case ('error') {
    <app-inline-error
      [message]="state.error"
      (retry)="facade.reload()"
    />
  }
  @case ('ready') {
    <app-order-summary [order]="state.order" />

    @if (actionError; as message) {
      <app-inline-error [message]="message" />
    }

    <button
      type="button"
      [disabled]="!facade.canApprove() || facade.saving()"
      (click)="facade.approve()"
    >
      Approve order
    </button>
  }
}

describe('OrderApprovalFacade', () => {
  const order: Order = {
    id: 'A-100',
    status: 'pending',
    total: 420,
  };

  const api = {
    getOrder: vi.fn(() => of(order)),
    approveOrder: vi.fn(() => of(void 0)),
  };

  beforeEach(() => {
    api.getOrder.mockClear();
    api.approveOrder.mockClear();

    TestBed.configureTestingModule({
      providers: [
        OrderApprovalFacade,
        { provide: OrdersApi, useValue: api },
        {
          provide: PermissionsService,
          useValue: { canApproveOrders$: of(false) },
        },
      ],
    });
  });

  it('does not approve without permission', async () => {
    const facade = TestBed.inject(OrderApprovalFacade);

    facade.selectOrder('A-100');

    await TestBed.runInInjectionContext(() =>
      firstValueFrom(
        toObservable(facade.state).pipe(
          filter((state) => state.status === 'ready'),
          take(1)
        )
      )
    );

    expect(facade.state().status).toBe('ready');
    expect(facade.canApprove()).toBe(false);
    facade.approve();

    expect(api.approveOrder).not.toHaveBeenCalled();
  });
});