src/app/standby-schedule/components/planninglist/planninglist.component.html

<!--
/********************************************************************************
 * Copyright © 2018 Mettenmeier GmbH.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/
-->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2" id="listHeader">{{planningHeader}}</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <form class="mt-3" [formGroup]="form" novalidate>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xl-8">
            <div class="form-group row">
              <label for="standbyListId" class="col-md-3 col-form-label">Bereitschaftsliste</label>
              <div class="col-md-9">
                <select class="form-control" id="standbyListId" formControlName="standbyListId" required>
                  <option value=""></option>
                  <option *ngFor="let standbylist of standbylistSelectionData" [value]="standbylist.id">{{standbylist.title}}</option>
                </select>
                <ok-error [control]="form.controls['standbyListId']"></ok-error>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xl-8">
            <div class="row" formGroupName="date">
              <label class="form-check-label col-form-label col-md-3">
                Gültigkeit
              </label>
              <div class="col-md-3">
                <div class="form-group">
                  <div class="input-group">
                    <input class="form-control" placeholder="von" name="dp" ngbDatepicker #validFrom="ngbDatepicker"
                      formControlName="validFrom" required id="dateFromInput">
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" (click)="validFrom.toggle()" type="button" id="dateFromPicker">
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                      </button>
                    </div>
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" (click)="setDefaultDate('validFrom')" type="button" id="dateFromDefault"
                        data-toggle="tooltip" data-placement="bottom" title="Auf Standardwert setzen">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                      </button>
                    </div>
                    <ok-error [control]="form.controls['date'].controls['validFrom']" class="w-100"></ok-error>
                  </div>
                  <ok-error [control]="form.controls['date']"></ok-error>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <div class="input-group">
                    <input class="form-control" placeholder="bis" name="dp" ngbDatepicker #validTo="ngbDatepicker"
                      formControlName="validTo" required id="dateToInput">
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" (click)="validTo.toggle()" type="button" id="dateToPicker">
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                      </button>
                    </div>
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" (click)="formUtil.setDefaultEndOfNextYear(form, 'validTo')"
                        type="button" id="dateToDefault" data-toggle="tooltip" data-placement="bottom" title="Auf Standardwert setzen">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                      </button>
                    </div>
                    <ok-error [control]="form.controls['date'].controls['validTo']" class="w-100"></ok-error>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="btn-group mr-3 w-99">
                  <button type="button" class="btn btn-primary w-99" (click)="prepareDataAndCall('search')" id="btnSearch">Suchen</button>
                  <div class="btn-group" ngbDropdown placement="bottom-right" role="group" aria-label="Button group with nested dropdown">
                    <button class="btn btn-primary dropdown-toggle-split border-left" id="splitButton"
                      ngbDropdownToggle></button>
                    <div class="dropdown-menu dropdown-menu-right" ngbDropdownMenu>
                      <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter','BP_Admin'])" class="dropdown-item pointer"
                        routerLink="/planung/transfer" id="btnPlan">Ansicht Pläne transferieren</button>
                      <button class="dropdown-item pointer" (click)="prepareDataAndCall('archive')" id="btnArchive">Archivieren</button>
                      <button class="dropdown-item pointer" (click)="validatePlan(undefined)" id="btnValidate">Validieren</button>
                      <button class="dropdown-item pointer" (click)="deletePlan()" id="btnValidate">Löschen</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row mt-3" *ngIf="plan">
    <div class="col-md-12">
      <table class="table stick-table-top">
        <thead>
          <tr>
            <th scope="col">{{plan?.planHeader?.label}}</th>
            <th *ngFor="let group of plan?.planHeader?.listGroups" class="text-nowrap">
              {{group.title}}
              <button class="btn btn-xs ml-1 btn-primary" *ngIf="planStatusId === 1" (click)="openCalculationModal(group.id)"
                [id]="['btnCalculate' + group.id]" title="Zeiten berechnen">
                <i class="fa fa-calculator" aria-hidden="true"></i>
              </button>
              <a class="btn btn-xs ml-1 btn-primary" target="_blank" *ngIf="authService.userHasRoles(['BP_Sachbearbeiter', 'BP_Admin'])"
                [routerLink]="['/stammdatenverwaltung/bereitschaftsgruppe', group.id]" [id]="['btnEditGroup' + group.id]"
                title="Bereitschaftsgruppe bearbeiten">
                <i class="fa fa-pencil" aria-hidden="true"></i>
              </a>
              <button class="btn btn-xs ml-1 btn-primary" (click)="validatePlan(group.id)" [id]="['btnValidate' + group.id]"
                title="Gruppe validieren">
                <i class="fa fa-check-square-o" aria-hidden="true"></i>
              </button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of plan?.listPlanRows" [ngClass]="row.style">
            <th scope="row">{{row.label}}</th>
            <td *ngFor="let listGroupBody of row?.listGroupBodies">
              <div *ngFor="let standby of listGroupBody" class="table-cell" [title]="row.label">
                <span (click)="openContextMenu($event, standby)" class="text-nowrap pointer">
                  {{(standby.validFrom | date:'HH:mm') +' Uhr - '+ (standby.validTo | date:'HH:mm')+'
                  Uhr'}} {{standby.user.firstname}} {{standby.user.lastname}}
                </span>
              </div>
            </td>
          </tr>
          <p-menu #menu [popup]="true" [model]="setMenuItems()" appendTo="body"></p-menu>
        </tbody>
      </table>
    </div>
  </div>
</div>