src/app/masterdata-management/components/location/location.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">Lokation 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)="saveLocation()"
          id="locationSave">Speichern</button>
        <button class="btn btn-danger float-right" (click)="close()" id="locationCancel">Abbrechen</button>
      </div>
    </div>
    <ngb-accordion #acc="ngbAccordion" activeIds="locationData,postcodeData,geoData,branchData,regionData">
      <!-- DATEN -->
      <ngb-panel title="Lokation" id="locationData">
        <ng-template ngbPanelContent>
          <div class="row">
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="title" class="col-sm-3 col-form-label">Titel</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="title" placeholder="Titel" formControlName="title">
                </div>
              </div>
            </div>
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="district" class="col-sm-3 col-form-label">Ort/Ortssteil</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="district" placeholder="Distrikt" formControlName="district"
                    required>
                  <ok-error [control]="form.controls['district']"></ok-error>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="shorttext" class="col-sm-3 col-form-label">Kürzel</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="shorttext" placeholder="Kürzel" formControlName="shorttext">
                </div>
              </div>
            </div>
            <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
              <div class="form-group row">
                <label for="community" class="col-sm-3 col-form-label">Gemeinde</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="community" placeholder="Gemeinde" formControlName="community">
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Geografische koordinaten" id="geoData">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <div class="row">
                <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
                  <div class="form-group row">
                    <label for="wgs84zonedistrict" class="col-sm-3 col-form-label">Geografische Zone</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="wgs84zonedistrict" placeholder="Geografische Zone"
                        formControlName="wgs84zonedistrict">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
                  <div class="form-group row">
                    <label for="latitudedistrict" class="col-sm-3 col-form-label">Geografische Breite</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="latitudedistrict" placeholder="Geografische Breite"
                        formControlName="latitudedistrict">
                    </div>
                  </div>
                </div>
                <div [ngClass]="{'col-md-6': !isModal, 'col-md-12': isModal}">
                  <div class="form-group row">
                    <label for="longitudedistrict" class="col-sm-3 col-form-label">Geografische Länge</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="longitudedistrict" placeholder="Geografische Länge"
                        formControlName="longitudedistrict">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Postleitzahlen" id="postcodeData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourcePLZ" [targetList]="targetPLZ" headlineSource="Postleitzahlen"
                headlineTarget="ausgewählte Postleitzahlen" [sourceListColumnDefs]="sourceColumnDefsPLZ"
                [targetListColumnDefs]="targetColumnDefsPLZ" (moveToTargetClicked)="moveToTargetPostcode($event)"
                (moveToSourceClicked)="moveToSourcePostcode($event)" id="locationPicklistPlz"></ok-picklist-reactive>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Sparten" id="branchData" *ngIf="!isModal">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-12">
              <ok-picklist-reactive [sourceList]="sourceBranch" [targetList]="targetBranch" headlineSource="Sparten"
                headlineTarget="ausgewählte Sparten" [sourceListColumnDefs]="sourceColumnDefsBranch"
                [targetListColumnDefs]="targetColumnDefsBranch" (moveToTargetClicked)="moveToTargetBranch($event)"
                (moveToSourceClicked)="moveToSourceBranch($event)" id="locationPicklistBranch"></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="Regionen" [sourceListColumnDefs]="sourceColumnDefsRegion" [targetListColumnDefs]="targetColumnDefsRegion"
                (moveToTargetClicked)="moveToTargetRegion($event)" (moveToSourceClicked)="moveToSourceRegion($event)"
                id="locationPicklistRegion"></ok-picklist-reactive>
            </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)="saveLocation()"
          id="locationSave">Speichern</button>
        <button class="btn btn-danger float-right" (click)="close()" id="locationCancel">Abbrechen</button>
      </div>
    </div>
  </form>
</div>