open-learning-exchange/planet

<form novalidate (ngSubmit)="onSubmit(modalForm, dialogRef)" [formGroup]="modalForm">
  <h1 mat-dialog-title><span><mat-icon>create</mat-icon>{{title}}</span></h1>
  <mat-dialog-content>
    <div *ngFor="let field of fields" [ngClass]="{ 'checkbox-wrapper': field.type === 'checkbox' || field.type === 'toggle' || field.type === 'markdown' }">
      <mat-checkbox *ngIf="field.type === 'checkbox'" formControlName="{{field.name}}">{{field.placeholder}}</mat-checkbox>
      <!-- input field -->
      <mat-form-field *ngIf="field.type === 'textbox'" class="full-width">
        <input matInput placeholder="{{field.placeholder}}" type="{{field.inputType || 'text'}}" formControlName="{{field.name}}" [required]="field.required" [min]="field.min">
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- password field -->
      <mat-form-field *ngIf="field.type === 'password'" class="full-width">
        <input matInput placeholder="{{field.placeholder}}" type="{{passwordVisibility.get(field.name) ? 'text' : 'password'}}" formControlName="{{field.name}}" required="{{field.required}}">
        <button type="button" mat-icon-button matSuffix (click)="togglePasswordVisibility(field.name)" tabindex="-1">
          <mat-icon>{{passwordVisibility.get(field.name) ? 'visibility' : 'visibility_off'}}</mat-icon>
        </button>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- selectbox -->
      <mat-form-field *ngIf="field.type === 'selectbox'" class="full-width">
        <mat-select placeholder="{{field.placeholder}}" formControlName="{{field.name}}" required="{{field.required}}" [multiple]="field.multiple">
          <mat-option *ngIf="field.reset" i18n>None</mat-option>
          <mat-option *ngFor="let option of field.options" [value]="option.value">{{option.name}}</mat-option>
        </mat-select>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- radio button -->
      <mat-radio-group formControlName="{{field.name}}" required="{{field.required}}" *ngIf="field.type === 'radio'">
        <label>{{field.label}}</label><br>
        <mat-radio-button class="planet-radio-button" *ngFor="let option of field.options" [value]="option" >{{option}}</mat-radio-button>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-radio-group>

      <!-- Star Rating -->
      <mat-form-field class="rating" *ngIf="field.type === 'rating'">
        <planet-rating-stars placeholder="{{field.placeholder}}" [formControl]="modalForm.controls[field.name]" required="{{field.required}}"></planet-rating-stars>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- Textarea -->
      <mat-form-field *ngIf="field.type === 'textarea'" class="full-width">
        <textarea matInput placeholder="{{field.placeholder}}" formControlName="{{field.name}}" required="{{field.required}}"></textarea>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- Textarea -->
      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline">
        <planet-markdown-textbox matInput placeholder="{{field.placeholder}}" formControlName="{{field.name}}" [required]="field.required" [imageGroup]="field.imageGroup"></planet-markdown-textbox>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- Dialog Button -->
      <ng-container *planetAuthorizedRoles="field.authorizedRoles === undefined ? 'learner' : field.authorizedRoles">
        <button type="button" mat-stroked-button *ngIf="field.type === 'dialog'" (click)="openDialog(field)">{{field.text}}</button>
      </ng-container>

      <!-- Date Select -->
      <mat-form-field *ngIf="field.type === 'date'" class="full-width">
        <input matInput [matDatepicker]="dp" placeholder="{{field.placeholder}}" [formControl]="modalForm.controls[field.name]" required="{{field.required}}" [min]="field.min" [max]="field.max">
        <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
        <mat-datepicker #dp></mat-datepicker>
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- Time Select -->
      <mat-form-field *ngIf="field.type === 'time'" class="full-width">
        <input matInput type="time" [placeholder]="field.placeholder" [formControl]="modalForm.controls[field.name]" [required]="field.required">
        <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
      </mat-form-field>

      <!-- Slide Toggle -->
      <mat-slide-toggle *ngIf="field.type === 'toggle'" class="full-width" [formControl]="modalForm.controls[field.name]">{{field.label}}</mat-slide-toggle>

    </div>
  </mat-dialog-content>
  <mat-dialog-actions *ngIf="title !== 'Rating'">
    <span class="mat-caption warn-text-color margin-lr-8">{{errorMessage}}</span>
    <button type="button" mat-raised-button (click)="dialogRef.close()" i18n>Cancel</button>
    <button type="submit" [planetSubmit]="modalForm.valid && isSpinnerOk" color="primary" mat-raised-button [disabled]="!isValid() && (disableIfInvalid || !isDirty())" i18n>Submit</button>
  </mat-dialog-actions>

  <mat-dialog-actions *ngIf="title === 'Rating'">
    <button type="submit" [planetSubmit]="isSpinnerOk" color="primary" mat-raised-button i18n>OK</button>
  </mat-dialog-actions>
</form>