abp/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

<div class="row entry-row">
  <div class="col-auto">
    <h1 class="content-header-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h1>
  </div>
  <div class="col">
    <div class="text-lg-right pt-2" id="AbpContentToolbar">
      <button id="create-role" class="btn btn-primary" type="button" (click)="onAdd()">
        <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
      </button>
    </div>
  </div>
</div>

<div id="identity-roles-wrapper" class="card">
  <div class="card-body">
    <div id="data-tables-table-filter" class="data-tables-filter">
      <label
        ><input
          type="search"
          class="form-control form-control-sm"
          [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
          (input.debounce)="onSearch($event.target.value)"
      /></label>
    </div>
    <p-table
      *ngIf="[65, 200] as columnWidths"
      [value]="data$ | async"
      [lazy]="true"
      [lazyLoadOnInit]="false"
      [paginator]="true"
      [rows]="10"
      [totalRecords]="totalCount$ | async"
      [loading]="loading"
      [resizableColumns]="true"
      [scrollable]="true"
      (onLazyLoad)="onPageChange($event)"
    >
      <ng-template pTemplate="colgroup">
        <colgroup>
          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
        </colgroup>
      </ng-template>
      <ng-template pTemplate="emptymessage" let-columns>
        <tr
          abp-table-empty-message
          [attr.colspan]="columnWidths.length"
          localizationResource="AbpIdentityServer"
          localizationProp="NoDataAvailableInDatatable"
        ></tr>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
          <th pResizableColumn (click)="changeSortOrder()">
            {{ 'AbpIdentity::RoleName' | abpLocalization }}
            <span class="float-right"
              ><i [ngClass]="['fa', sortOrder === 'desc' ? 'fa-sort-desc' : 'fa-sort-asc']"></i
            ></span>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-data>
        <tr>
          <td>
            <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>{{ 'AbpIdentity::Actions' | abpLocalization }}
              </button>
              <div ngbDropdownMenu>
                <button ngbDropdownItem (click)="onEdit(data.id)">{{ 'AbpIdentity::Edit' | abpLocalization }}</button>
                <button ngbDropdownItem (click)="providerKey = data.name; visiblePermissions = true">
                  {{ 'AbpIdentity::Permissions' | abpLocalization }}
                </button>
                <button ngbDropdownItem (click)="delete(data.id, data.name)">
                  {{ 'AbpIdentity::Delete' | abpLocalization }}
                </button>
              </div>
            </div>
          </td>
          <td>{{ data.name }}</td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</div>

<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
  <ng-template #abpHeader>
    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <form [formGroup]="form" (ngSubmit)="save()">
      <div class="form-group">
        <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
        ><span> * </span>
        <input autofocus type="text" id="role-name" class="form-control" formControlName="name" />
      </div>

      <div class="custom-checkbox custom-control mb-2">
        <input type="checkbox" id="role-is-default" class="custom-control-input" formControlName="isDefault" />
        <label class="custom-control-label" for="role-is-default">{{
          'AbpIdentity::DisplayName:IsDefault' | abpLocalization
        }}</label>
      </div>

      <div class="custom-checkbox custom-control mb-2">
        <input type="checkbox" id="role-is-public" class="custom-control-input" formControlName="isPublic" />
        <label class="custom-control-label" for="role-is-public">{{
          'AbpIdentity::DisplayName:IsPublic' | abpLocalization
        }}</label>
      </div>
    </form>
  </ng-template>

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

<abp-permission-management
  [(visible)]="visiblePermissions"
  providerName="Role"
  [providerKey]="providerKey"
></abp-permission-management>