open-learning-exchange/planet

<ng-container [ngSwitch]="mode">
  <span mat-dialog-title i18n *ngSwitchCase="'filter'">Collections</span>
  <span mat-dialog-title i18n *ngSwitchCase="'add'">Change Collections</span>
</ng-container>
<mat-dialog-content>
  <mat-form-field class="full-width">
    <input matInput i18n-placeholder placeholder="Filter by Collection Name" [ngModel]="filterValue" (ngModelChange)="updateFilter($event)">
  </mat-form-field>
  <mat-expansion-panel *planetAuthorizedRoles="'manager'">
    <mat-expansion-panel-header>
      <mat-panel-title i18n>Create New Collection</mat-panel-title>
    </mat-expansion-panel-header>
    <form class="form-spacing" [formGroup]="addTagForm">
      <mat-form-field>
        <input matInput i18n-placeholder placeholder="Collection" formControlName="name" required>
        <mat-error><planet-form-error-messages [control]="addTagForm.controls.name"></planet-form-error-messages></mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-select i18n-placeholder placeholder="Subcollection of..." formControlName="attachedTo">
          <mat-option i18n>None</mat-option>
          <mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">{{tag.name}}</mat-option>
        </mat-select>
      </mat-form-field>
      <span><button type="button" i18n mat-raised-button color="primary" [disabled]="!addTagForm.pending && !addTagForm.valid" (click)="addLabel()">Add Collection</button></span>
    </form>
  </mat-expansion-panel>
  <mat-action-list *ngIf="selectMany">
    <ng-container *ngFor="let tag of tags">
      <mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event,tag._id)" class="cursor-pointer">
        <p matLine>
          <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
          <mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)"></mat-checkbox>
          <span [ngClass]="{ 'mat-body-2': tag.subTags.length > 0, 'mat-body-1': tag.subTags.length === 0 }">{{tag.name + ' (' + (tag.count || 0) + ')'}}</span>
          <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,tag)" i18n>Edit</button>
          <span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
            <button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event,tag)" i18n>Delete</button>
          </span>
        </p>
      </mat-list-item>
      <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
        <mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer">
          <mat-icon mat-list-icon>subdirectory_arrow_right</mat-icon>
          <p matLine>
            <mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)"></mat-checkbox>
            <span class="mat-body-1">{{subTag.name + ' (' + (subTag.count || 0) + ')'}}</span>
            <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
            <button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>
          </p>
        </mat-list-item>
      </ng-container>
      <mat-divider></mat-divider>
    </ng-container>
  </mat-action-list>
  <mat-nav-list *ngIf="!selectMany">
    <mat-list-item (click)="selectOne('')" i18n>All</mat-list-item>
    <ng-container *ngFor="let tag of tags">
      <mat-list-item (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event,tag._id)" [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }">
        {{tag.name + ' (' + (tag.count || 0) + ')'}}
        <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
        <span class="toolbar-fill"></span>
        <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,tag)" i18n>Edit</button>
        <span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
          <button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event,tag)" i18n>Delete</button>
        </span>
      </mat-list-item>
      <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
        <mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
          <mat-icon>subdirectory_arrow_right</mat-icon>
          {{subTag.name + ' (' + (subTag.count || 0) + ')'}}
          <span class="toolbar-fill"></span>
          <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
          <button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>
        </mat-list-item>
      </ng-container>
      <mat-divider></mat-divider>
    </ng-container>
  </mat-nav-list>
</mat-dialog-content>
<mat-dialog-actions *ngIf="selectMany">
  <button type="button" mat-raised-button i18n color="primary" (click)="resetSelection()" [disabled]="emptySelection()">Reset</button>
  <button type="button" [mat-dialog-close]="okClickValue" i18n mat-raised-button color="primary">OK</button>
</mat-dialog-actions>