src/app/pages/grid-measure-detail/grid-measure-detail.component.html

<!--
******************************************************************************
* Copyright © 2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* 
*     http://www.eclipse.org/legal/epl-v10.html
* 
******************************************************************************
-->
<form #parentForm="ngForm" *ngIf="gridMeasureDetailReceived">

  <div class="row">
    <app-buttons-container #buttonscontainer [isValidForm]="areAllTabsValid()" [isValidForSave]="validForSave" [isReadOnlyForm]="readOnlyForm"
      [gridMeasureStatusId]="gridMeasureDetail?.statusId" [gridMeasureId]="gridMeasureDetail?.id" (clickQuitButton)="goToOverview()"
      (clickCancelButton)="goToCancelPage()" (clickRejectButton)="updateGridMeasureStatus(Globals.STATUS.REJECTED)" (clickSaveButton)="createGridMeasure(gridMeasureDetail)"
      (clickApplyButton)="updateGridMeasureStatus(Globals.STATUS.APPLIED)" (clickForApprovalButton)="updateGridMeasureStatus(Globals.STATUS.FORAPPROVAL)"
      (clickApprovedButton)="updateGridMeasureStatus(Globals.STATUS.APPROVED)" (clickRequestButton)="updateGridMeasureStatus(Globals.STATUS.REQUESTED)"
      (clickReleaseButton)="updateGridMeasureStatus(Globals.STATUS.RELEASED)" (clickActivateButton)="updateGridMeasureStatus(Globals.STATUS.ACTIVE)"
      (clickInWorkButton)="updateGridMeasureStatus(Globals.STATUS.IN_WORK)" (clickWorkFinishButton)="updateGridMeasureStatus(Globals.STATUS.WORK_FINISHED)"
      (clickFinishButton)="updateGridMeasureStatus(Globals.STATUS.FINISHED)" (clickCloseButton)="updateGridMeasureStatus(Globals.STATUS.CLOSED)"
      (clickDuplicateButton)="duplicateGM()"></app-buttons-container>

  </div>

  <div class="panel panel-default" id="gridMeasureHeaderPanel">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1" (click)="isExpanded = !isExpanded">Netzmaßnahme</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        <app-grid-measure-detail-header (isValidForSave)=" this.validForSave = $event;" [isReadOnlyForm]="readOnlyForm" [id]="id"
          [showSpinnerGrid]="showSpinner" [gridMeasureDetail]="gridMeasureDetail">
        </app-grid-measure-detail-header>
      </div>
    </div>
  </div>

  <div class="grid-measure-body ">
    <div class="maincontent">

      <div class="panel panel-default" [ngClass]="isExpanded ? '':'mainPanelCollapsed'" id="gridMeasureMainPanel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse4">Details der Netzmaßnahme</a>
          </h4>
        </div>

        <div id="collapse4" class="panel-collapse collapse in">
          <div class="grid-measure-tabs">
            <ul *ngIf="showTabs" class="nav nav-tabs">
              <li class="active">
                <a href="#gridmeasurepanel" (click)="onSelectGridMeasureTab()" data-toggle="tab" [ngClass]="isGridMeasureDetailValid() ? 'valid-tab' : 'invalid-tab'">Maßnahme</a>
              </li>
              <li *ngFor="let singleGridmeasure of gridMeasureDetail?.listSingleGridmeasures; let idx = index;">
                <a *ngIf="!singleGridmeasure.delete" [id]="singleGridmeasure.sortorder" href="#singlegridmeasure" (click)="onSelectSingleGridMeasureTab(singleGridmeasure)"
                  data-toggle="tab" [ngClass]="isSingleGridmeasureValid(singleGridmeasure) ? 'valid-tab' : 'invalid-tab'">Einzelmaßnahme {{idx + 1}} </a>
              </li>
              <li>
                <!-- more singleGridMeasures -->
                <button [disabled]="disableNewTabBtn || isSingleGridmeasureLimitReached()" class="glyphicon glyphicon-plus" id="newSingleGridMeasureBtn"
                  (click)="createNewSingleGridMeasureTab()" [title]="isSingleGridmeasureLimitReached() ? 'Es können maximal ' + Globals.MAX_NUMBER_OF_TABS + ' Einzelmaßnahmen angelegt werden.' : ''"></button>
              </li>
            </ul>
          </div>
          <div class="tab-content clearfix">

            <div class="tab-pane active" id="gridmeasurepanel">
              <div class="panel-body">
                <app-grid-measure-detail-tab (isValidForSave)=" this.validForSave = $event;" [readOnlyForm]="readOnlyForm" [id]="id" [showSpinnerGrid]="showSpinner"
                  [gridMeasureDetail]="gridMeasureDetail">
                </app-grid-measure-detail-tab>
              </div>
            </div>

            <div class="tab-pane" id="singlegridmeasure">
              <div class="panel-body">
                <app-single-grid-measure-detail-tab (singleGridMeasureChanged)="onSingleGridMeasureChanged($event)" [singleGridMeasure]="currentSingleGridMeasure"
                  [isReadOnlyForm]="readOnlyForm" [gridMeasureDetail]="gridMeasureDetail" [dateTimePattern]="dateTimePattern"
                  [dateFormatLocale]="dateFormatLocale">
                </app-single-grid-measure-detail-tab>
              </div>
            </div>

          </div>
        </div>
      </div>


      <div class="panel panel-default" id="gridMeasureEmailPanel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a *ngIf="isEmailDistributionStatusCollapsed" data-toggle="collapse" href="#collapse9">E-Mail Verteiler für Status Genehmigt, Storniert und Zurückgewiesen</a>
            <div *ngIf="!isEmailDistributionStatusCollapsed">E-Mail-Verteiler</div>
          </h4>
        </div>
        <div id="collapse9" class="panel-collapse panel-body collapse in" [ngClass]="{'in': !isEmailDistributionStatusCollapsed }">
          <app-email-distribution-entry [isReadOnlyForm]="emailAddFormNotAllowed" [(gridMeasureDetail)]="gridMeasureDetail">
            loading ...
          </app-email-distribution-entry>
          <app-email-distribution-list [gridId]="'email-distribution-list'" [withEditButtons]="true" [gridMeasureDetail]="gridMeasureDetail"
            (gridMeasureChanged)="onGridMeasureChanged($event)">
            loading ...
          </app-email-distribution-list>
        </div>
      </div>


      <div id="gridMeasureStatusChangePanel">
        <app-status-changes [gridId]="gridMeasureDetail.id">
          loading ...
        </app-status-changes>
      </div>


    </div>
  </div>
</form>