src/app/reporting/components/standby-reporting/standby-reporting.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">Reports/Listen</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-6">
            <div class="form-group row">
              <label for="reportName" class="col-sm-3 col-form-label">Planart</label>
              <div class="col-sm-9">
                <select class="form-control" id="reportName" formControlName="reportName" required>
                  <option value=""></option>
                  <option *ngFor="let report of reportSelectionData" [value]="report.reportName">{{report.reportName}}</option>
                </select>
                <ok-error [control]="form.controls['reportName']"></ok-error>
              </div>
            </div>
          </div>
        </div>
        <div class="row" *ngIf="!isSearchingPerson">
          <div class="col-md-12 col-sm-12 col-xl-6">
            <div class="form-group row">
              <label *ngIf="!isSearchingGroup" for="standById" class="col-sm-3 col-form-label">Liste</label>
              <label *ngIf="isSearchingGroup" for="standById" class="col-sm-3 col-form-label">Gruppe</label>
              <div class="col-sm-9">
                <select class="form-control" id="standById" formControlName="standById" required>
                  <option value=""></option>
                  <option *ngFor="let standbylist of standbylistSelectionData" [value]="standbylist.id">{{standbylist.title}}</option>
                </select>
                <ok-error [control]="form.controls['standById']"></ok-error>
              </div>
            </div>
          </div>
        </div>
        <div class="row" *ngIf="isSearchingPerson">
          <div class="col-md-12 col-sm-12 col-xl-6">
            <div class="form-group row">
              <label for="standById" class="col-sm-3 col-form-label">Mitarbeiter</label>
              <div class="col-sm-9">
                <select class="form-control" id="standById" formControlName="standById" required>
                  <option value=""></option>
                  <option *ngFor="let user of userSelectionData" [value]="user.id">{{user.firstname}}
                    {{user.lastname}}</option>
                </select>
                <ok-error [control]="form.controls['standById']"></ok-error>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xl-6">
            <div class="row">
              <label class="form-check-label col-form-label col-md-3">
                Gültigkeit
              </label>
              <div class="col-sm-4">
                <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>
                  </div>
                  <ok-error [control]="form.controls['validFrom']"></ok-error>
                </div>
              </div>
              <div class="col-sm-1">
                <label class="form-check-label col-form-label col-md-3">-</label>
              </div>
              <div class="col-sm-4">
                <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)="setReportDefaultDays(true)" 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>
                  </div>
                  <ok-error [control]="form.controls['validTo']"></ok-error>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div *ngIf="authService.userHasRoles(['BP_Sachbearbeiter', 'BP_Admin', 'BP_Gruppenleiter'])" class="row">
          <div class="col-md-12 col-sm-12 col-xl-6">
            <div class="form-group row">
              <label for="reportLevel" class="col-sm-3 col-form-label">Ebene</label>
              <div class="col-sm-9">
                <select class="form-control" id="reportLevel" formControlName="reportLevel" required>
                  <option value=""></option>
                  <option>Ist-Ebene</option>
                  <option>Plan-Ebene</option>
                </select>
                <ok-error [control]="form.controls['reportLevel']"></ok-error>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xl-6">
            <div class="form-group row">
              <label for="printFormat" class="col-sm-3 col-form-label">Format</label>
              <div class="col-sm-9">
                <select class="form-control" id="printFormat" formControlName="printFormat" required>
                  <option value=""></option>
                  <option>PDF</option>
                  <option>XLSX</option>
                  <option>XLS</option>
                </select>
                <ok-error [control]="form.controls['printFormat']"></ok-error>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-1 col-md-1 col-sm-12 col-12">
            <button class="btn w-100 btn-primary" (click)="generate()" id="btnGenerate">Generieren</button>
          </div>
        </div>
      </form>
    </div>
  </div>