src/app/dialogs/shift-change/shift-change.component.html

<header>
  <h2>
    Schichtübergabe
  </h2>
</header>

<div>
  <div class="dialog">
    <div class="panel panel-default ">
      <div *ngIf="sessionContext.bannerMessage.isActive" [ngClass]="{ 'alert':true, 
                'alert-danger': sessionContext.bannerMessage.status === bannerMessageStatus.error,
                'alert-info': sessionContext.bannerMessage.status === bannerMessageStatus.info,
                'alert-warning': sessionContext.bannerMessage.status === bannerMessageStatus.warning,
                'alert-success': bannerMessageStatus.success }">
        <div class="close" (click)="sessionContext.bannerMessage.hide()">x</div>
        {{sessionContext.bannerMessage.text}}
      </div>
      <div class="panel-body" style="max-width: 450px;">
        <multiselect class="customMultiSelect" [data]="allUsersButLoggedIn" [(ngModel)]="preSelectedUsers" [settings]="dropdownSettings"
          ngDefaultControl></multiselect>
      </div>
      <form #shiftForm="ngForm" novalidate>
        <div class="panel-body">
          <fieldset [disabled]="!preSelectedUsers || preSelectedUsers.length===0">
            <table class="table table-bordered responsibility-column-striped">
              <thead>
                <tr>
                  <th style="border: 0"></th>
                  <th>Strom</th>
                  <th>Gas</th>
                  <th>FW</th>
                  <th>Wasser</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let responsibilityContainer of responsibilityContainers">
                  <td class="shc-table-col">{{ responsibilityContainer.gridTerritoryDescription }}</td>
                  <td class="shc-table-col">
                    <div class="form-group">
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'S').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'S')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionS_{{getResponsiblity(responsibilityContainer,'S').id}}'"
                        (change)="checkIfPersonSelected()">
                <option></option>
                <option  *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.itemName}}</option>
              </select>
                    </div>
                  </td>
                  <td class="shc-table-col">
                    <div class="form-group">
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'G').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'G')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionG_{{getResponsiblity(responsibilityContainer,'G').id}}'"
                        (change)="checkIfPersonSelected()">
                <option></option>
                <option  *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.itemName}}</option>
              </select>
                    </div>
                  </td>
                  <td class="shc-table-col">
                    <div class="form-group">
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'F').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'F')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionF_{{getResponsiblity(responsibilityContainer,'F').id}}'"
                        (change)="checkIfPersonSelected()">
                <option></option>
                <option  *ngFor="let user of preSelectedUsers" value="{{user.username}}"  >{{user.itemName}}</option>
              </select>
                    </div>
                  </td>
                  <td class="shc-table-col">
                    <div class="form-group">
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'W').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'W')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionW_{{getResponsiblity(responsibilityContainer,'W').id}}'"
                        (change)="checkIfPersonSelected()">
                <option></option>
                <option *ngFor="let user of preSelectedUsers" value="{{user.username}}" >{{user.itemName}}</option>
              </select>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </fieldset>
        </div>
      </form>
    </div>
  </div>
  <div class="margin-top">
    <button class="btn btn-primary btn-sm" [disabled]="shiftChangeFormInValid" (click)="shiftChange(true)" autofocus>Übergeben</button>
    <button class="btn btn-primary btn-sm" (click)="cancelChange()" autofocus>Stornieren</button>
    <button class="btn btn-primary btn-sm " (click)="dialogRef.close()">Abbrechen</button>
  </div>
</div>