projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html

<!-- /********************************************************************************
* Copyright (c) 2020 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* 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
********************************************************************************/ -->
<app-card-layout *ngIf="gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async as formState">
  <div header>
    <div class="diverse-btn-container">
      <div>
        <span>{{ 'GridFailure.Title' | translate }}</span>
      </div>
      <div class="subcontainer1">
        <button
          *ngIf="!gridFailureDetailsSandbox.currentFormState.isPristine"
          type="button"
          class="btn btn-primary button"
          (click)="gridFailureDetailsSandbox.cancel()"
        >
          {{ 'CancelBtn' | translate }}
        </button>
        <button
          *ngIf="gridFailureDetailsSandbox.currentFormState.isPristine"
          type="button"
          class="btn btn-primary button"
          (click)="gridFailureDetailsSandbox.cancel()"
        >
          {{ 'CloseBtn' | translate }}
        </button>
        <ng-container *ngIf="!formState.value.failureInformationCondensedId && gridFailureDetailsSandbox.showDeleteButton && formState.isEnabled">
          <button
            *visibleByRight="RolesEnum.CREATOR"
            type="button"
            class="btn btn-outline-danger delete"
            (click)="gridFailureDetailsSandbox.deleteGridFailure()"
          >
            {{ 'DeleteBtn' | translate }}
          </button>
        </ng-container>
        <ng-container *ngIf="gridFailureDetailsSandbox.showStornoButton && formState.isEnabled">
          <button
            *visibleByRight="RolesEnum.QUALIFIER"
            type="button"
            class="btn btn-primary right-button"
            (click)="gridFailureDetailsSandbox.setState(StateEnum.CANCELED)"
          >
            {{ 'StornoBtn' | translate }}
          </button>
        </ng-container>
        <ng-container *ngIf="gridFailureDetailsSandbox.showCompleteButton && formState.isEnabled">
          <button
            *visibleByRight="RolesEnum.QUALIFIER"
            type="button"
            class="btn btn-primary right-button"
            (click)="gridFailureDetailsSandbox.setState(StateEnum.COMPLETED)"
          >
            {{ 'CompleteBtn' | translate }}
          </button>
        </ng-container>
      </div>
      <div class="subcontainer2" *ngIf="formState.isEnabled || gridFailureDetailsSandbox.showPublishButton">
        <ng-container *ngIf="gridFailureDetailsSandbox.showPublishButton && !gridFailureDetailsSandbox.oldVersion">
          <button
            *visibleByRight="RolesEnum.PUBLISHER"
            [disabled]="gridFailureDetailsSandbox.disablePublishButton"
            [ngClass]="{ disabledButton: gridFailureDetailsSandbox.disablePublishButton }"
            type="button"
            class="btn btn-primary button"
            (click)="gridFailureDetailsSandbox.setPublishedState()"
          >
            {{ 'PublishBtn' | translate }}
          </button>
        </ng-container>
        <ng-container *ngIf="gridFailureDetailsSandbox.showQualifyButton">
          <button
            *visibleByRight="RolesEnum.QUALIFIER"
            type="button"
            class="btn btn-primary button"
            (click)="gridFailureDetailsSandbox.setState(StateEnum.QUALIFIED)"
          >
            {{ 'QualifyBtn' | translate }}
          </button>
        </ng-container>
        <ng-container *ngIf="gridFailureDetailsSandbox.showCreatedButton">
          <button
            type="button"
            *visibleByRight="RolesEnum.CREATOR"
            class="btn btn-primary right-button"
            (click)="gridFailureDetailsSandbox.setState(StateEnum.CREATED)"
          >
            {{ 'CreatedBtn' | translate }}
          </button>
        </ng-container>
        <ng-container *ngIf="!gridFailureDetailsSandbox.oldVersion">
          <ng-container *ngIf="gridFailureDetailsSandbox.showUpdateButton; else saveBtn">
            <button
              *visibleByRight="[RolesEnum.QUALIFIER, RolesEnum.CREATOR]"
              type="button"
              class="btn btn-success button"
              (click)="gridFailureDetailsSandbox.setState(StateEnum.UPDATED)"
            >
              {{ 'UpdateBtn' | translate }}
            </button>
          </ng-container>
          <ng-template #saveBtn>
            <button *ngIf="formState.isEnabled" type="button" class="btn btn-success button" (click)="gridFailureDetailsSandbox.saveGridFailure()">
              {{ 'SaveBtn' | translate }}
            </button>
          </ng-template>
        </ng-container>
      </div>
    </div>
  </div>
  <div class="grid-failure-grid-wrapper" body>
    <form [ngrxFormState]="formState" (keydown.enter)="$event.preventDefault()">
      <div *ngIf="(gridFailureVersions$ | async).length">
        <label> {{ 'GridFailure.Version' | translate }}</label>
        <select
          class="version-select"
          (change)="
            gridFailureDetailsSandbox.resetFailureLocationValues();
            setNewGridOptions($event.target.value);
            gridFailureDetailsSandbox.loadGridFailureVersion($event.target.value);
            changeMode($event.target.value);
            setLocation($event.target.value)
          "
        >
          <option *ngFor="let version of gridFailureVersions$ | async" [selected]="version.versionNumber === formState.value.versionNumber">
            {{ version.versionNumber }}
          </option>
        </select>
        <label>
          {{ 'GridFailure.CreatedOn' | translate }}
          {{ formState?.value.modDate | date: 'dd.MM.yyyy HH:mm:ss' }}
          {{ 'GridFailure.CreatedFrom' | translate }}
          {{ formState?.value.modUser | uppercase }}
        </label>
      </div>
      <div>
        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.GridFailureInformation' | translate }}</label>
          <div class="expandable-content" body>
            <!-- failureClassification -->
            <div *ngIf="determineDetailFieldVisibility('failureClassification')" class="form-group row">
              <label for="failureClassification" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureClassification' | translate }}</label>
              <div class="col-sm-4">
                <select type="text" class="form-control" [ngrxFormControlState]="formState.controls['failureClassificationId']">
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let classification of gridFailureDetailsSandbox.gridFailureClassifications$ | async" [value]="classification.id">
                    {{ classification.classification }}
                  </option>
                </select>
              </div>
            </div>

            <!-- branch -->
            <div class="form-group row">
              <label for="branch" class="col-sm-2 col-form-label">{{ 'GridFailure.Branch' | translate }}</label>
              <div class="col-sm-4">
                <select
                  name="test"
                  [ngModel]="formState.controls['branchId'].value"
                  (ngModelChange)="
                    setBranchValue($event); gridFailureDetailsSandbox.resetFailureLocationValues(); setLocation(); gridFailureDetailsSandbox.setFormStateDirty()
                  "
                  [required]="!gridFailureDetailsSandbox.oldVersion && !formState.isDisabled"
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="formState.controls['branchId']"
                >
                  <option [ngValue]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let branch of gridFailureDetailsSandbox.branches" [ngValue]="branch.id">{{ branch.description }}</option>
                </select>
              </div>
            </div>

            <!-- statusIntern -->
            <div class="form-group row">
              <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label>
              <div class="col-sm-4">
                <input
                  id="statusIntern"
                  type="text"
                  maxlength="255"
                  class="form-control"
                  [ngrxFormControlState]="formState.controls['statusIntern']"
                  autocomplete="off"
                  readonly
                />
              </div>
            </div>

            <!-- statusExtern -->
            <div class="form-group row">
              <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label>
              <div class="col-sm-4">
                <input
                  id="statusExtern"
                  type="text"
                  maxlength="255"
                  class="form-control"
                  [ngrxFormControlState]="formState.controls['statusExtern']"
                  autocomplete="off"
                  readonly
                />
              </div>
            </div>

            <!-- publicationStatus -->
            <div class="form-group row">
              <label for="publicationStatus" class="col-sm-2 col-form-label">{{ 'GridFailure.PublicationStatus' | translate }}</label>
              <div class="col-sm-4">
                <input
                  id="publicationStatus"
                  type="text"
                  maxlength="255"
                  class="form-control"
                  [ngrxFormControlState]="formState.controls['publicationStatus']"
                  autocomplete="off"
                  readonly
                />
              </div>
            </div>
          </div>
        </app-expandable>

        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.GridFailureIDetails' | translate }}</label>
          <div class="expandable-content" body>
            <!-- responsibility -->
            <div *ngIf="determineDetailFieldVisibility('responsibility')" class="form-group row">
              <label for="responsibility" class="col-sm-2 col-form-label">{{ 'GridFailure.Responsibility' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="responsibility"
                  [ngrxFormControlState]="formState.controls['responsibility']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- voltageLevel -->
            <div
              class="form-group row"
              [visibleByDependentField]="
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.secondaryTechnology &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.telecommunication &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.gas &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.districtHeating &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.water &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.noBranch
              "
            >
              <label for="voltageLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.VoltageLevel' | translate }}</label>
              <div class="col-sm-4">
                <select
                  [required]="!gridFailureDetailsSandbox.oldVersion && !formState.isDisabled"
                  type="text"
                  class="form-control"
                  id="voltageLevel"
                  name="voltageLevel"
                  [ngrxFormControlState]="formState.controls['voltageLevel']"
                  (change)="gridFailureDetailsSandbox.resetFailureLocationValues(); setLocation()"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let enum of gridFailureDetailsSandbox.voltageLevelEnum | keyvalue" [value]="enum.key">{{ enum.value }}</option>
                </select>
              </div>
            </div>

            <!-- pressureLevel -->
            <div
              class="form-group row"
              [visibleByDependentField]="
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.secondaryTechnology &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.telecommunication &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.power &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.districtHeating &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.water &&
                formState.value.branch !== Globals.BUSINESS_RULE_FIELDS.branch.noBranch
              "
            >
              <label for="pressureLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.PressureLevel' | translate }}</label>
              <div class="col-sm-4">
                <select
                  [required]="!gridFailureDetailsSandbox.oldVersion && !formState.isDisabled"
                  type="text"
                  class="form-control"
                  id="pressureLevel"
                  [ngrxFormControlState]="formState.controls['pressureLevel']"
                >
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let enum of gridFailureDetailsSandbox.pressureLevelEnum | keyvalue" [value]="enum.key">{{ enum.value }}</option>
                </select>
              </div>
            </div>

            <!-- failureBegin -->
            <div class="form-group row">
              <label for="failureBegin" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureBegin' | translate }}</label>
              <div class="input-group col-sm-4">
                <app-date-time-picker
                  [isRequired]="!gridFailureDetailsSandbox.oldVersion && !formState.isDisabled"
                  [ngrxFormControlState]="formState.controls['failureBegin']"
                  [isDisabled]="formState.controls['failureBegin']?.isDisabled"
                >
                </app-date-time-picker>
              </div>
            </div>

            <!-- failureEndPlanned -->
            <div class="form-group row">
              <label for="failureEndPlanned" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndPlanned' | translate }}</label>
              <div class="input-group col-sm-4">
                <app-date-time-picker
                  [ngrxFormControlState]="formState.controls['failureEndPlanned']"
                  [isDisabled]="formState.controls['failureEndPlanned']?.isDisabled"
                >
                </app-date-time-picker>
              </div>
            </div>

            <!-- failureEndResupplied -->
            <div class="form-group row">
              <label for="failureEndResupplied" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndResupplied' | translate }}</label>
              <div class="input-group col-sm-4">
                <app-date-time-picker
                  [ngrxFormControlState]="formState.controls['failureEndResupplied']"
                  [isDisabled]="formState.controls['failureEndResupplied']?.isDisabled"
                >
                </app-date-time-picker>
              </div>
            </div>

            <!-- expectedReason -->
            <div class="form-group row">
              <label for="expectedReason" class="col-sm-2 col-form-label">{{ 'GridFailure.ExpectedReason' | translate }}</label>
              <div class="col-sm-4">
                <select
                  [required]="!gridFailureDetailsSandbox.oldVersion && !formState.isDisabled"
                  type="text"
                  class="form-control"
                  id="expectedReason"
                  [ngrxFormControlState]="formState.controls['expectedReasonId']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureExpectedReasons$ | async" [value]="item.id">{{ item.text }}</option>
                </select>
              </div>
            </div>

            <!-- description -->
            <div *ngIf="determineDetailFieldVisibility('description')" class="form-group row">
              <label for="description" class="col-sm-2 col-form-label">{{ 'GridFailure.Description' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="description"
                  [ngrxFormControlState]="formState.controls['description']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- internalRemark -->
            <div *ngIf="determineDetailFieldVisibility('internalRemark')" class="form-group row">
              <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="internalRemark"
                  [ngrxFormControlState]="formState.controls['internalRemark']"
                  autocomplete="off"
                />
              </div>
            </div>
          </div>
        </app-expandable>

        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.GridFailureILocation' | translate }}</label>

          <div class="expandable-content" body>
            <div class="nav col-xs-4 center">
              <div class="btn-group" *ngIf="formState?.isEnabled">
                <button
                  class="btn btn-primary non-outline"
                  (click)="setLocationRegionToAddress()"
                  [class.active]="failureLocationView === Globals.FAILURE_LOCATION_NS"
                >
                  {{ 'GridFailure.Address' | translate }}
                </button>
                <button
                  *ngIf="isLocationButtonForStationVisible(formState.value.branch, formState.value.voltageLevel)"
                  class="btn btn-primary non-outline"
                  (click)="setLocationRegionToStation()"
                  [class.active]="failureLocationView === Globals.FAILURE_LOCATION_MS"
                >
                  {{ 'GridFailure.StationAttributes' | translate }}
                </button>
                <button
                  class="btn btn-primary non-outline"
                  (click)="setLocationRegionToMap()"
                  [class.active]="failureLocationView === Globals.FAILURE_LOCATION_MAP"
                >
                  {{ 'GridFailure.Map' | translate }}
                </button>
              </div>
            </div>

            <div class="fault-location-container">
              <div class="NS-fields" *ngIf="failureLocationView === Globals.FAILURE_LOCATION_NS">
                <div>
                  <!-- city -->
                  <div class="form-group row">
                    <label for="city" class="col-sm-5 col-form-label">{{ 'GridFailure.City' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        class="form-control"
                        id="city"
                        name="city"
                        [ngrxFormControlState]="formState.controls['city']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let item of gridFailureDetailsSandbox.addressCommunities$ | async" [value]="item">{{ item }}</option>
                      </select>
                    </div>
                  </div>

                  <!-- district -->
                  <div class="form-group row">
                    <label for="district" class="col-sm-5 col-form-label">{{ 'GridFailure.District' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        class="form-control"
                        id="district"
                        name="district"
                        [ngrxFormControlState]="formState.controls['district']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let item of gridFailureDetailsSandbox.addressDistricts$ | async" [value]="item">{{ item }}</option>
                      </select>
                    </div>
                  </div>

                  <!-- postcode -->
                  <div class="form-group row">
                    <label for="postcode" class="col-sm-5 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        maxlength="255"
                        class="form-control"
                        id="postcode"
                        name="postcode"
                        [ngrxFormControlState]="formState.controls['postcode']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let item of gridFailureDetailsSandbox.addressPostCodes$ | async" [value]="item">{{ item }}</option>
                      </select>
                    </div>
                  </div>

                  <!-- street -->
                  <div class="form-group row">
                    <label for="street" class="col-sm-5 col-form-label">{{ 'GridFailure.Street' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        class="form-control"
                        id="street"
                        [ngrxFormControlState]="formState.controls['street']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let item of gridFailureDetailsSandbox.addressStreets$ | async" [value]="item">{{ item }}</option>
                      </select>
                    </div>
                  </div>

                  <!-- housenumber -->
                  <div class="form-group row">
                    <label for="housenumber" class="col-sm-5 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        class="form-control"
                        id="housenumber"
                        [ngrxFormControlState]="formState.controls['housenumber']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let housenumber of gridFailureDetailsSandbox.addressHouseNumbers$ | async" [value]="housenumber">
                          {{ housenumber }}
                        </option>
                      </select>
                    </div>
                  </div>

                  <!-- radius -->
                  <div class="form-group row">
                    <label for="radius" class="col-sm-5 col-form-label">{{ 'GridFailure.RadiusInMeter' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        class="form-control"
                        [ngrxFormControlState]="formState.controls['radiusId']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureRadii$ | async" [value]="item.id">{{ item.radius }}</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div>
                  <label
                    class="readOnly"
                    *ngIf="
                      !!formState.value.id &&
                      formState.value.statusIntern !== StateEnum.QUALIFIED &&
                      formState.value.statusIntern !== StateEnum.CANCELED &&
                      formState.value.statusIntern !== StateEnum.COMPLETED
                    "
                    >Aktuelle Adresse: <br />
                    {{ currentAddress }}</label
                  >
                </div>
              </div>

              <div class="MS-fields" *ngIf="failureLocationView === Globals.FAILURE_LOCATION_MS && !!gridFailureDetailsSandbox.gridFailureStations">
                <!-- stationDescription -->
                <div class="form-group row">
                  <div class="col-sm-6">
                    <input
                      [required]="
                        gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                      "
                      [disabled]="gridFailureDetailsSandbox.oldVersion || formState.isDisabled"
                      #searchInput
                      placeholder="{{ 'GridFailure.StationDescription' | translate }}"
                      type="text"
                      maxlength="255"
                      id="stationDescription"
                      class="form-control"
                      autocomplete="off"
                      (input)="resetSelectedStation($event.target.value)"
                      (selectItem)="gridFailureDetailsSandbox.setStationId($event.item.stationId); gridFailureDetailsSandbox.setSelectedStation($event.item)"
                      [ngbTypeahead]="gridFailureDetailsSandbox.searchForStation"
                      [resultFormatter]="gridFailureDetailsSandbox.formatter"
                      [inputFormatter]="gridFailureDetailsSandbox.formatter"
                      (keydown.enter)="postSelectedStationButton.click()"
                    />
                  </div>
                  <button
                    #postSelectedStationButton
                    type="button"
                    class="btn btn-primary btn-sm"
                    (click)="gridFailureDetailsSandbox.postSelectedStation(); clearSearchInput()"
                    [disabled]="gridFailureDetailsSandbox.oldVersion || formState.isDisabled"
                  >
                    {{ 'GridFailure.AddStation' | translate }}
                  </button>
                </div>
                <div class="stationList">
                  <ag-grid-angular
                    autoResizeColumns
                    class="ag-theme-balham"
                    [gridOptions]="gridOptions"
                    [columnDefs]="stationsColumnDefinition"
                    [rowSelection]="'single'"
                    [frameworkComponents]="frameworkComponents"
                    [rowData]="gridFailureDetailsSandbox.gridFailureStations"
                    [overlayNoRowsTemplate]="noRowsTemplate"
                    [suppressRowClickSelection]="true"
                  >
                  </ag-grid-angular>
                </div>
              </div>

              <div class="NS-fields" *ngIf="failureLocationView === Globals.FAILURE_LOCATION_MAP">
                <div>
                  <!-- freetext city -->
                  <div class="form-group row">
                    <label for="city" class="col-sm-5 col-form-label">{{ 'GridFailure.City' | translate }}</label>
                    <div class="col-sm-6">
                      <input type="text" maxlength="255" class="form-control" id="freetextCity" [ngrxFormControlState]="formState.controls['freetextCity']" />
                    </div>
                  </div>
                  <!-- freetext district -->
                  <div class="form-group row">
                    <label for="district" class="col-sm-5 col-form-label">{{ 'GridFailure.District' | translate }}</label>
                    <div class="col-sm-6">
                      <input
                        type="text"
                        maxlength="255"
                        class="form-control"
                        id="freetextDistrict"
                        [ngrxFormControlState]="formState.controls['freetextDistrict']"
                      />
                    </div>
                  </div>
                  <!-- freetext postcode -->
                  <div class="form-group row">
                    <label for="postcode" class="col-sm-5 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
                    <div class="col-sm-6">
                      <input
                        type="text"
                        maxlength="5"
                        class="form-control"
                        id="freetextPostcode"
                        [ngrxFormControlState]="formState.controls['freetextPostcode']"
                      />
                    </div>
                  </div>

                  <!-- radius -->
                  <div class="form-group row">
                    <label for="radius" class="col-sm-5 col-form-label">{{ 'GridFailure.RadiusInMeter' | translate }}</label>
                    <div class="col-sm-6">
                      <select
                        [required]="
                          gridFailureDetailsSandbox.isFieldRequiredDependingOnBranchId && !gridFailureDetailsSandbox.oldVersion && !formState.isDisabled
                        "
                        type="text"
                        class="form-control"
                        [ngrxFormControlState]="formState.controls['radiusId']"
                      >
                        <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                        <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureRadii$ | async" [value]="item.id">{{ item.radius }}</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

              <div class="map-detail-view">
                <openk-grid-failure-information-map
                  [mapOptions]="mapOptions"
                  [mapDetailData]="gridFailureDetailsSandbox.currentGridFailureDetailsCoords"
                  [setInteractionMode]="mapInteractionMode"
                  (latLong)="gridFailureDetailsSandbox.latLonMapping($event, false)"
                ></openk-grid-failure-information-map>
              </div>
            </div>
          </div>
        </app-expandable>

        <!-- publication: publication-channels and distribution-groups -->
        <div *ngIf="gridFailureDetailsSandbox.checkForMaxVersion() && gridFailureDetailsSandbox.showForStatus()">
          <app-expandable [showBodyInitially]="true" *visibleByRight="[RolesEnum.PUBLISHER]">
            <label header>{{ 'GridFailure.Publication' | translate }}</label>
            <div class="expandable-content" body>
              <div class="d-flex justify-content-between">
                <h6>{{ 'GridFailure.PublicationChannels' | translate }}</h6>
              </div>
              <div *ngFor="let channel of gridFailureDetailsSandbox.exportChannels$ | async; let i = index">
                <div class="custom-control custom-switch channel-input">
                  <input
                    type="checkbox"
                    class="custom-control-input"
                    id="{{ 'channel' + i }}"
                    [checked]="gridFailureDetailsSandbox.selectedPublicationChannels && gridFailureDetailsSandbox.selectedPublicationChannels.includes(channel)"
                    (change)="gridFailureDetailsSandbox.setPublicationChannels(channel, $event.target.checked)"
                  />
                  <label class="custom-control-label" for="{{ 'channel' + i }}">{{ channel }} </label>
                </div>
              </div>
              <app-grid-failure-distribution-groups (changed)="gridFailureDetailsSandbox.setFormStateDirty()"></app-grid-failure-distribution-groups>
            </div>
          </app-expandable>
        </div>
      </div>
    </form>
  </div>
</app-card-layout>