select-component.component.ts

import { Component, EventEmitter, Input, Output, SimpleChanges, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { ProjectService } from '../../../assets/wise5/services/projectService';
import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';

@Component({
  imports: [FormsModule, MatFormFieldModule, MatSelectModule],
  selector: 'select-component',
  templateUrl: './select-component.component.html'
})
export class SelectComponentComponent {
  private projectService = inject(ProjectService);

  @Input() allowedComponentTypes: string[] = [];
  @Output() componentChangedEvent: EventEmitter<string> = new EventEmitter<string>();
  @Input() componentId: string;
  protected components: ComponentContent[] = [];
  protected componentToIsAllowed: Map<string, boolean> = new Map<string, boolean>();
  @Input() nodeId: string;
  @Input() thisComponentId: string;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.nodeId) {
      this.nodeId = changes.nodeId.currentValue;
      this.calculateComponents(this.nodeId);
      this.setComponentId();
    }
    if (changes.allowedComponentTypes) {
      this.allowedComponentTypes = changes.allowedComponentTypes.currentValue;
      this.calculateComponents(this.nodeId);
    }
    if (changes.componentId) {
      this.componentId = changes.componentId.currentValue;
    }
  }

  private calculateComponents(nodeId: string): void {
    this.components = this.projectService.getComponents(nodeId);
    for (const component of this.components) {
      this.componentToIsAllowed.set(
        component.id,
        this.allowedComponentTypes.includes(component.type)
      );
    }
  }

  private setComponentId(): void {
    let numAllowedComponents = 0;
    let allowedComponent = null;
    for (const component of this.components) {
      if (
        this.allowedComponentTypes.includes(component.type) &&
        component.id !== this.thisComponentId
      ) {
        numAllowedComponents += 1;
        allowedComponent = component;
      }
    }
    if (numAllowedComponents === 1) {
      this.componentId = allowedComponent.id;
      this.componentChanged();
    } else if (!this.components.map((component) => component.id).includes(this.componentId)) {
      this.componentId = null;
    }
  }

  protected componentChanged(): void {
    this.componentChangedEvent.emit(this.componentId);
  }
}