src/app/features/details/components/statement-details/statement-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 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<div class="dashboard-header">

  <span class="dashboard-header-title">Stellungnahmen öffentlicher Belange - Detailansicht</span>

  <div class="dashboard-header-actions">

    <a #homeAnchor class="openk-button openk-info" routerLink="/">
      <mat-icon>arrow_back</mat-icon>
      Zurück zur Übersicht
    </a>

  </div>
</div>

<ng-container *ngIf="(statement$ | async) != null">
  <app-collapsible
    [appTitle]="(statementId$ | async) + ' Allgemeine Informationen: ' + (statement$ | async)?.info?.title"
    class="statement-details">

    <div class="statement-details-content">
      <div *ngFor="let obj of (statement$ | async).info | objToArray">
        {{obj?.key}}: {{obj?.value}}
      </div>

      <div class="statement-details-footer">

        <button
          (click)="editTask(button?.task, button?.options)"
          *ngFor="let button of buttons$ | async"
          [ngClass]="button?.class"
          class="openk-button statement-details-footer-button">
          <mat-icon>{{button?.icon}}</mat-icon>
          <span>{{button?.label | translate}}</span>
        </button>

      </div>
    </div>
  </app-collapsible>

  <app-collapsible
    [appCollapsed]="true"
    [appTitle]="'Eingehende Email und Anhänge'"
    class="statement-details">
    <div class="placeholder"></div>
  </app-collapsible>

  <app-collapsible
    [appCollapsed]="true"
    [appTitle]="'Betroffene Fachbereiche'"
    class="statement-details">
    <div class="placeholder"></div>
  </app-collapsible>

  <app-comments-form
    class="statement-details"
    [appCollapsed]="true">

  </app-comments-form>

  <app-collapsible
    [appCollapsed]="false"
    [appTitle]="'Prozessinformationen'"
    class="statement-details">
    <app-process-information [appCurrentActivities]="processCurrentActivityIds$ | async"
                             [appProcessHistoryData]="processHistoryData$ | async"
                             [appProcessName]="processName$ | async"
                             [appProcessVersion]="processVersion$ | async"
                             [appStatementId]="statementId$ | async"
                             [appWorkflowXml]="processDiagram$ | async"
                             class="statement-details-content statement-details-content--process-information">
    </app-process-information>
  </app-collapsible>

  <app-collapsible
    [appCollapsed]="true"
    [appTitle]="'Verknüpfte Vorgänge'"
    class="statement-details">
    <div class="placeholder"></div>
  </app-collapsible>

</ng-container>