src/app/masterdata-management/components/user/user.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">
  <form class="mt-3" [formGroup]="form" novalidate>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom stick-headlines"
      *ngIf="!isModal">
      <h1 class="h2">Mitarbeiter verwalten</h1>
      <div class="btn-toolbar mb-2 mb-md-0">
        <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter','BP_Admin'])" class="btn btn-success mr-1" (click)="saveUser()"
          id="userSave">Speichern</button>
        <button class="btn btn-danger float-right" (click)="close()" id="userCancel">Abbrechen</button>
      </div>
    </div>
    <ngb-accordion #acc="ngbAccordion" activeIds="userdata,functionData,regionData,organisationData,privateData,reachabilityData">
      <!-- DATEN -->
      <ngb-panel title="Personendaten" id="userdata">
        <ng-template ngbPanelContent>
          <div class="row">
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="firstname" class="col-sm-3 col-form-label">Vorname</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="firstname" placeholder="Vorname" formControlName="firstname"
                    required>
                  <ok-error [control]="form.controls['firstname']"></ok-error>
                </div>
              </div>
            </div>
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="lastname" class="col-sm-3 col-form-label">Nachname</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="lastname" placeholder="Nachname" formControlName="lastname"
                    required>
                  <ok-error [control]="form.controls['lastname']"></ok-error>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="row" formGroupName="date">
                <label class="form-check-label col-form-label col-md-3">
                  Gültigkeit
                </label>
                <div class="col-md-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>
                      <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-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)="setDefaultDate('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>
              <div class="form-group row">
                <label for="hrNumber" class="col-sm-3 col-form-label">Personalnummer</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="hrNumber" placeholder="Personalnummer" formControlName="hrNumber">
                </div>
              </div>
              <div class="form-group row">
                <label for="userKey" class="col-sm-3 col-form-label">Benutzerkennung</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="userKey" placeholder="Benutzerkennung" formControlName="userKey">
                </div>
              </div>
            </div>
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="notespriv" class="col-sm-3 col-form-label">Notizen (Hinweise, Informationen)</label>
                <div class="col-sm-9">
                  <textarea rows="6" class="form-control textarea" id="notespriv" placeholder="notes" cols="50"
                    formControlName="notes"></textarea>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <!-- BERECHTIGUNGEN -->
      <ngb-panel title="Funktionen" id="functionData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceFunction" [targetList]="targetFunction" headlineSource="Funktionen"
                headlineTarget="ausgewählte Funktionen" [sourceListColumnDefs]="sourceColumnDefsFunction"
                [targetListColumnDefs]="targetColumnDefsFunction" (moveToTargetClicked)="moveToTargetFunction($event)"
                (moveToSourceClicked)="moveToSourceFunction($event)" id="userPicklistFunction"></ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Regionen" id="regionData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceRegion" [targetList]="targetRegion" headlineSource="Regionen"
                headlineTarget="ausgewählte Regionen" [sourceListColumnDefs]="sourceColumnDefsRegion"
                [targetListColumnDefs]="targetColumnDefsRegion" (moveToTargetClicked)="moveToTargetRegion($event)"
                (moveToSourceClicked)="moveToSourceRegion($event)" id="userPicklistRegion"></ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <!-- Organisationsdaten -->
      <ngb-panel title="Organisationsdaten" id="organisationData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div formGroupName="organisation">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="company" class="col-sm-3 col-form-label">Organisation</label>
                  <div class="col-sm-9">
                    <select class="form-control" id="company" formControlName="id" required>
                      <option value=""></option>
                      <option *ngFor="let organisation of organisationList" [value]="organisation.id">{{organisation.orgaName}}</option>
                    </select>
                    <ok-error [control]="form.controls.organisation.controls['id']"></ok-error>
                  </div>
                </div>
              </div>
            </div>
            <div formGroupName="address">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="postcode" class="col-sm-3 col-form-label">PLZ dienstl.</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="postcode" formControlName="postcode" required>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="community" class="col-sm-3 col-form-label">Ort dienstl.</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="community" formControlName="community" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="communitySuffix" class="col-sm-3 col-form-label">Adresszusatz dienstl.</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="communitySuffix" formControlName="communitySuffix"
                        required>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="street" class="col-sm-3 col-form-label">Straße dienstl.</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="street" formControlName="street" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="housenumber" class="col-sm-3 col-form-label">Hausnummer</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="housenumber" formControlName="housenumber" required>
                    </div>
                  </div>
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="wgs84zone" class="col-sm-3 col-form-label">WGS84 Zone dienstl.</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="wgs84zone" formControlName="wgs84zone" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="latitude" class="col-sm-3 col-form-label">WGS84 Koordinate 1 dienstl. (geolänge)</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="latitude" formControlName="latitude" required>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group row">
                    <label for="longitude" class="col-sm-3 col-form-label">WGS84 Koordinate 2 dienstl. (geobreite)</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="longitude" formControlName="longitude" required>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <a href="https://maps.google.de" target="_blank">Weblink zur Landkarte dienstl.</a>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <!-- PRIVATANSCHRIFT -->
      <ngb-panel title="Privatanschrift" id="privateData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div formGroupName="privateAddress">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="postcodepriv" class="col-sm-3 col-form-label">PLZ</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="postcodepriv" placeholder="Postleitzahl"
                      formControlName="postcode" required>
                    <ok-error [control]="form.controls.privateAddress.controls['postcode']"></ok-error>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="communitypriv" class="col-sm-3 col-form-label">Ort</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="communitypriv" placeholder="Ort" formControlName="community"
                      required>
                    <ok-error [control]="form.controls.privateAddress.controls['community']"></ok-error>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="communitySuffixPriv" class="col-sm-3 col-form-label">Adresszusatz privat</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="communitySuffixPriv" placeholder="Adresszusatz privat"
                      formControlName="communitySuffix">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="streetpriv" class="col-sm-3 col-form-label">Straße privat</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="streetpriv" placeholder="Straße privat" formControlName="street"
                      required>
                    <ok-error [control]="form.controls.privateAddress.controls['street']"></ok-error>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="housenumberpriv" class="col-sm-3 col-form-label">Hausnummer privat</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="housenumberpriv" placeholder="Hausnummer privat"
                      formControlName="housenumber" required>
                    <ok-error [control]="form.controls.privateAddress.controls['housenumber']"></ok-error>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="wgs84zonepriv" class="col-sm-3 col-form-label">WGS84 Zone privat</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="wgs84zonepriv" placeholder="wgs84zone" formControlName="wgs84zone">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="latitudepriv" class="col-sm-3 col-form-label">WGS84 Koordinate 1 privat (geolänge)</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="latitudepriv" placeholder="latitude" formControlName="latitude">
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="longitudepriv" class="col-sm-3 col-form-label">WGS84 Koordinate 2 privat (geobreite)</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="longitudepriv" placeholder="longitude" formControlName="longitude">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <a href="https://maps.google.de" target="_blank">Weblink zur Landkarte privat</a>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <!-- Erreichbarkeit -->
      <ngb-panel title="Erreichbarkeitsdaten" id="reachabilityData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div formGroupName="businessContactData">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="phone" class="col-sm-3 col-form-label">Telefon-Nr. dienstl. / Hotline</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="phone" placeholder="phone" formControlName="phone"
                      required>
                    <ok-error [control]="form.controls.businessContactData.controls['phone']"></ok-error>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="cellphone" class="col-sm-3 col-form-label">Mobiltelefon dienstl.</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="cellphone" placeholder="cellphone" formControlName="cellphone">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="radiocomm" class="col-sm-3 col-form-label">Funk-Nr.</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="radiocomm" placeholder="radiocomm" formControlName="radiocomm">
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="email" class="col-sm-3 col-form-label">E-mail</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="email" placeholder="email" formControlName="email">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="pager" class="col-sm-3 col-form-label">Pager</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="pager" placeholder="pager" formControlName="pager">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div formGroupName="privateContactData">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="phonepriv" class="col-sm-3 col-form-label">Telefon-Nr. privat</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="phonepriv" placeholder="phone" formControlName="phone"
                      required>
                    <ok-error [control]="form.controls.privateContactData.controls['phone']"></ok-error>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group row">
                  <label for="cellphonepriv" class="col-sm-3 col-form-label">Mobiltelefon privat</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="cellphonepriv" placeholder="cellphone" formControlName="cellphone">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
    </ngb-accordion>
    <div class="row mt-3 mb-3" *ngIf="isModal">
      <div class="col-md-12">
        <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter','BP_Admin'])" class="btn btn-success" (click)="saveUser()"
          id="userSave">Speichern</button>
        <button class="btn btn-danger float-right" (click)="close()" id="userCancel">Abbrechen</button>
      </div>
    </div>
  </form>
</div>