selectable-list.component.html

<!-- Generic selectable list for teams or groups -->
<div class="selectable-list">
  <div class="selectable-list-header">
    <h2>{{ title }}</h2>
    <div *ngIf="editMode" class="edit-hint">Click Accept when finished</div>
    <div *ngIf="relationshipEditMode" class="edit-hint">Click to toggle relationship</div>
    <button
      mat-icon-button
      *ngIf="canEdit && !editMode && !relationshipEditMode"
      (click)="toggleEditMode()"
      title="Edit {{ title }}">
      <mat-icon>edit</mat-icon>
    </button>
    <span *ngIf="editMode">
      <button mat-icon-button (click)="addItem.emit()" title="{{ addLabel }} {{ title }}">
        <mat-icon>add</mat-icon>
      </button>
      <button mat-icon-button (click)="cancel.emit()" title="Cancel, forget changes">
        <mat-icon>undo</mat-icon>
      </button>
      <button mat-icon-button (click)="save.emit()" title="Accept changes">
        <mat-icon>check</mat-icon>
      </button>
    </span>
  </div>

  <ul>
    <li
      *ngFor="let name of items"
      [class.selected]="name === selectedItem"
      [class.highlighted]="highlightedItems.includes(name)"
      (click)="onItemClicked(name)">
      <span *ngIf="editMode && editingOrgName === name; then editItem; else displayItem"></span>
      <ng-template #editItem>
        <input
          #editInput
          [(ngModel)]="editingName"
          (keydown.escape)="cancelEditItem(name)"
          (keydown.enter)="saveEditedItem(name)"
          (blur)="saveEditedItem(name)" />
      </ng-template>
      <ng-template #displayItem>
        <span>{{ name }}</span>
      </ng-template>

      <span *ngIf="editMode">
        <button
          *ngIf="editingOrgName !== name"
          mat-icon-button
          (click)="startEditItem(name)"
          title="Rename {{ name }}">
          <mat-icon class="material-icons-outlined">edit</mat-icon>
        </button>
        <button
          *ngIf="editingOrgName === name"
          mat-icon-button
          (click)="saveEditedItem(name)"
          title="Accept edit for {{ name }}">
          <mat-icon class="material-icons-outlined">check</mat-icon>
        </button>
        <button mat-icon-button (click)="deleteListItem(name)" title="Delete {{ name }}">
          <mat-icon class="material-icons-outlined">delete</mat-icon>
        </button>
      </span>
      <span *ngIf="relationshipEditMode">
        <mat-icon *ngIf="highlightedItems.includes(name); else unselected" color="primary"
          >check_box</mat-icon
        >
        <ng-template #unselected><mat-icon>check_box_outline_blank</mat-icon></ng-template>
      </span>
    </li>
  </ul>
</div>