src/app/pages/admin/salutations/salutations-list/salutations-list.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>{{ 'AdminSettings.Title' | translate }}</span>
  </div>

  <div body>

    <!-- ******************************** Salutations  ********************************  -->
    <app-expandable class="expandable-salutations">
      <span header>{{ 'Salutations.Title' | translate }}</span>
      <div class="salutations-grid-wrapper" body>

        <div class="details-wrapper" *ngIf="salutationsSandbox.displayForm" >
          <app-salutations-details></app-salutations-details>
        </div>

        <div class="table-view">
          <div class="diverse-options">
            <div class="pull-right" *visibleByRight>
              <button class="btn btn-sm btn-primary" (click)="salutationsSandbox.setDisplayForm()">
                {{ 'Salutations.New' | translate }}
              </button>
            </div>
          </div>

          <ag-grid-angular
            class="ag-theme-balham"
            [domLayout]="'autoHeight'"
            [gridOptions]="salutationGridOptions"
            [columnDefs]="salutationsColDef"
            [rowSelection]="'single'"
            [frameworkComponents]="frameworkComponents"
            [rowData]="salutationsSandbox.salutations$ | async"
            [overlayNoRowsTemplate]="noRowsTemplate"
          >
          </ag-grid-angular>

          <app-spinner [isRunning]="salutationsSandbox.salutationsLoading$ | async"></app-spinner>
        </div>

      </div>
    </app-expandable>

    <!-- ******************************** Communications-Types  ********************************  -->
      <app-expandable class="expandable-salutations">
        <span header>{{ 'CommunicationTypes.Title' | translate }}</span>
        <div class="salutations-grid-wrapper" body>

          <div *ngIf="communicationTypesSandbox.displayForm" class="details-wrapper">
            <app-communication-types-details></app-communication-types-details>
          </div>

          <div class="table-view">
            <div class="diverse-options">
              <div class="pull-right" *visibleByRight>
                <button class="btn btn-sm btn-primary" (click)="communicationTypesSandbox.setDisplayForm()">
                  {{ 'Salutations.New' | translate }}
                </button>
              </div>
            </div>

            <ag-grid-angular
              class="ag-theme-balham"
              [domLayout]="'autoHeight'"
              [gridOptions]="communicationTypesGridOptions"
              [columnDefs]="communicationsTypeColDef"
              [rowSelection]="'single'"
              [frameworkComponents]="frameworkComponents"
              [rowData]="communicationTypesSandbox.communicationTypes$ | async"
              [overlayNoRowsTemplate]="noRowsTemplate"
            >
            </ag-grid-angular>

            <app-spinner [isRunning]="communicationTypesSandbox.communicationTypesLoading$ | async"></app-spinner>
          </div>

        </div>

      </app-expandable>

    <!-- ******************************** Person-Types  ********************************  -->
    <app-expandable class="expandable-salutations">
      <span header>{{ 'PersonTypes.Title' | translate }}</span>
      <div class="salutations-grid-wrapper" body>

        <div class="details-wrapper" *ngIf="personTypesSandbox.displayForm" >
          <app-person-types-details></app-person-types-details>
        </div>

        <div class="table-view">
          <div class="diverse-options">
            <div class="pull-right" *visibleByRight>
              <button class="btn btn-sm btn-primary" (click)="personTypesSandbox.setDisplayForm()">
                {{ 'PersonTypes.New' | translate }}
              </button>
            </div>
          </div>

          <ag-grid-angular
            class="ag-theme-balham"
            [domLayout]="'autoHeight'"
            [gridOptions]="personTypesGridOptions"
            [columnDefs]="personTypeColDef"
            [rowSelection]="'single'"
            [frameworkComponents]="frameworkComponents"
            [rowData]="personTypesSandbox.personTypes$ | async"
            [overlayNoRowsTemplate]="noRowsTemplate"
          >
          </ag-grid-angular>

          <app-spinner [isRunning]="personTypesSandbox.personTypesLoading$ | async"></app-spinner>
        </div>

      </div>
    </app-expandable>

    <!-- ******************************** Address-Types  ********************************  -->
    <app-expandable class="expandable-salutations">
      <span header>{{ 'AddressTypes.Title' | translate }}</span>
      <div class="salutations-grid-wrapper" body>

        <div class="details-wrapper" *ngIf="addressTypesSandbox.displayForm" >
          <app-address-types-details></app-address-types-details>
        </div>

        <div class="table-view">
          <div class="diverse-options">
            <div class="pull-right" *visibleByRight>
              <button class="btn btn-sm btn-primary" (click)="addressTypesSandbox.setDisplayForm()">
                {{ 'AddressTypes.New' | translate }}
              </button>
            </div>
          </div>

          <ag-grid-angular
            class="ag-theme-balham"
            [domLayout]="'autoHeight'"
            [gridOptions]="addressTypesGridOptions"
            [columnDefs]="addressTypeColDef"
            [rowSelection]="'single'"
            [frameworkComponents]="frameworkComponents"
            [rowData]="addressTypesSandbox.addressTypes$ | async"
            [overlayNoRowsTemplate]="noRowsTemplate"
          >
          </ag-grid-angular>

          <!-- <app-spinner [isRunning]="addressTypesSandbox.addressTypesLoading$ | async"></app-spinner> -->
        </div>

      </div>
    </app-expandable>







  </div>


</app-card-layout>