src/app/pages/company/company-details/company-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>
  <div header>
    <span>{{ 'Company.Title' | translate }}</span>
  </div>
  <div class="contacts-grid-wrapper" body>
    <form [ngrxFormState]="companyDetailsSandBox.companyFormState$ | async">
      <div>
          <!-- companyName -->
          <div class="form-group row">
            <label for="companyName" class="col-sm-2 col-form-label">{{ 'Company.Name' | translate }}</label>
            <div class="col-sm-4">
              <input
                required
                type="text"
                maxlength="255"
                class="form-control"
                id="companyName"
                [ngrxFormControlState]="((companyDetailsSandBox.companyFormState$ | async)?.controls)['companyName']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- CompanyType -->
          <div class="form-group row">
            <label for="companyType" class="col-sm-2 col-form-label">{{ 'Company.CompanyType' | translate }}</label>
            <div class="col-sm-4">
              <input
                type="text"
                maxlength="30"
                class="form-control"
                id="companyType"
                [ngrxFormControlState]="((companyDetailsSandBox.companyFormState$ | async)?.controls)['companyType']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- HrNumber -->
          <div class="form-group row">
            <label for="hrNumber" class="col-sm-2 col-form-label">{{ 'Company.HrNumber' | translate }}</label>
            <div class="col-sm-4">
              <input
                type="text"
                maxlength="255"
                class="form-control"
                id="hrNumber"
                [ngrxFormControlState]="((companyDetailsSandBox.companyFormState$ | async)?.controls)['hrNumber']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- contactNote -->
          <div class="form-group row">
            <label for="contactNote" class="col-sm-2 col-form-label">{{ 'Company.Note' | translate }}</label>
            <div class="col-sm-4">
              <input
                type="text"
                maxlength="255"
                class="form-control"
                id="contactNote"
                [ngrxFormControlState]="((companyDetailsSandBox.companyFormState$ | async)?.controls)['contactNote']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- buttons -->
          <button type="button" class="btn btn-success" (click)="companyDetailsSandBox.persistCompany()">{{ 'SaveBtn' | translate }}</button>
          <button type="button" class="btn btn-primary cancel-button" routerLink="/overview">
          {{ 'CancelBtn' | translate }}
        </button>
      </div>
    </form>

    <app-expandable class="expandable-address" *ngIf="isexpandableVisible">
      <span header>{{ 'Contacts.AddressList' | translate }}</span>
      <div class="expandable-body-container" body>
        <div class="table-detail-view-address" *ngIf="companyDetailsSandBox.isAddressDataDetailViewVisible">
          <app-company-address-details [createOrEditAddressData]="createOrEditAddressData"></app-company-address-details>
        </div>
        <div class="table-view-address">
          <app-company-address-list (companyDetailsIdLoaded)="loadAddressDetail($event)" (createNewCompany)="loadAddressDetail($event)"></app-company-address-list>
        </div>
      </div>
    </app-expandable>

    <app-expandable class="expandable-communication" *ngIf="isexpandableVisible">
      <span header>{{ 'Contacts.CommunicationsDataList' | translate }}</span>
      <div class="expandable-body-container" body>
        <div class="table-detail-view-communication" *ngIf="companyDetailsSandBox.isCommunicationsDataDetailViewVisible">
          <app-company-communications-data-details [createOrEditCommunicationsData]="createOrEditCommunicationsData"></app-company-communications-data-details>
        </div>
        <div class="table-view-communication">
          <app-company-communications-data-list (companyDetailsIdLoaded)="loadCommunicationsDataDetail($event)" (createNewCompany)="loadCommunicationsDataDetail($event)"></app-company-communications-data-list>
        </div>
      </div>
    </app-expandable>

  </div>
</app-card-layout>