abp/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

<div id="wrapper" class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">{{ 'AbpTenantManagement::Tenants' | abpLocalization }}</h5>
      </div>
      <div class="text-right col col-md-6">
        <button
          *abpPermission="'AbpTenantManagement.Tenants.Create'"
          id="create-tenants"
          class="btn btn-primary"
          type="button"
          (click)="addTenant()"
        >
          <i class="fa fa-plus mr-1"></i>
          <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
        </button>
      </div>
    </div>
  </div>

  <div class="card-body">
    <div id="data-tables-table-filter" class="data-tables-filter">
      <div class="input-group">
        <input
          type="search"
          class="form-control"
          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
          [(ngModel)]="list.filter"
        />
      </div>
    </div>

    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
      <ngx-datatable-column
        [name]="'AbpTenantManagement::Actions' | abpLocalization"
        [maxWidth]="150"
        [sortable]="false"
      >
        <ng-template let-row="row" ngx-datatable-cell-template>
          <div ngbDropdown container="body" class="d-inline-block">
            <button
              class="btn btn-primary btn-sm dropdown-toggle"
              data-toggle="dropdown"
              aria-haspopup="true"
              ngbDropdownToggle
            >
              <i class="fa fa-cog mr-1"></i>{{ 'AbpTenantManagement::Actions' | abpLocalization }}
            </button>
            <div ngbDropdownMenu>
              <button
                *abpPermission="'AbpTenantManagement.Tenants.Update'"
                ngbDropdownItem
                (click)="editTenant(row.id)"
              >
                {{ 'AbpTenantManagement::Edit' | abpLocalization }}
              </button>
              <button
                *abpPermission="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
                ngbDropdownItem
                (click)="onEditConnectionString(row.id)"
              >
                {{ 'AbpTenantManagement::Permission:ManageConnectionStrings' | abpLocalization }}
              </button>
              <button
                *abpPermission="'AbpTenantManagement.Tenants.ManageFeatures'"
                ngbDropdownItem
                (click)="openFeaturesModal(row.id)"
              >
                {{ 'AbpTenantManagement::Permission:ManageFeatures' | abpLocalization }}
              </button>
              <button
                *abpPermission="'AbpTenantManagement.Tenants.Delete'"
                ngbDropdownItem
                (click)="delete(row.id, row.name)"
              >
                {{ 'AbpTenantManagement::Delete' | abpLocalization }}
              </button>
            </div>
          </div>
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column
        [name]="'AbpTenantManagement::TenantName' | abpLocalization"
        prop="name"
      ></ngx-datatable-column>
    </ngx-datatable>
  </div>
</div>

<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
  <ng-template #abpHeader>
    <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <ng-container *ngTemplateOutlet="selectedModalContent?.template"></ng-container>
  </ng-template>

  <ng-template #abpFooter>
    <button #abpClose type="button" class="btn btn-secondary">
      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
    </button>
    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="isDisabledSaveButton">{{
      'AbpTenantManagement::Save' | abpLocalization
    }}</abp-button>
  </ng-template>
</abp-modal>

<ng-template #tenantModalTemplate>
  <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
    <div class="mt-2">
      <div class="form-group">
        <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
        <input type="text" id="name" class="form-control" formControlName="name" autofocus />
      </div>
      <div class="form-group" *ngIf="tenantForm.controls.adminEmailAddress">
        <label for="name">{{
          'AbpTenantManagement::DisplayName:AdminEmailAddress' | abpLocalization
        }}</label>
        <input
          autocomplete="email"
          type="email"
          id="admin-email-address"
          class="form-control"
          formControlName="adminEmailAddress"
        />
      </div>
      <div class="form-group" *ngIf="tenantForm.controls.adminPassword">
        <label for="name">{{
          'AbpTenantManagement::DisplayName:AdminPassword' | abpLocalization
        }}</label>
        <input
          autocomplete="new-password"
          type="password"
          id="admin-password"
          class="form-control"
          formControlName="adminPassword"
        />
      </div>
    </div>
  </form>
</ng-template>

<ng-template #connectionStringModalTemplate>
  <form [formGroup]="defaultConnectionStringForm" (ngSubmit)="save()" validateOnSubmit>
    <div class="form-group">
      <div class="custom-checkbox custom-control mb-2">
        <input
          id="useSharedDatabase"
          type="checkbox"
          class="custom-control-input"
          formControlName="useSharedDatabase"
          autofocus
          (ngModelChange)="onSharedDatabaseChange($event)"
        />
        <label for="useSharedDatabase" class="custom-control-label">{{
          'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
        }}</label>
      </div>
    </div>
    <div class="form-group" *ngIf="!useSharedDatabase">
      <label for="defaultConnectionString">{{
        'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
      }}</label>
      <input
        type="text"
        id="defaultConnectionString"
        class="form-control"
        formControlName="defaultConnectionString"
      />
    </div>
  </form>
</ng-template>

<abp-feature-management
  *abpReplaceableTemplate="{
    inputs: {
      providerName: { value: 'T' },
      providerKey: { value: providerKey },
      visible: { value: visibleFeatures, twoWay: true }
    },
    outputs: { visibleChange: onVisibleFeaturesChange },
    componentKey: featureManagementKey
  }"
  [(visible)]="visibleFeatures"
  providerName="T"
  [providerKey]="providerKey"
>
</abp-feature-management>