MaxKey/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/select-roles/select-roles.component.html

<div *nzModalTitle> {{ 'mxk.text.select' | i18n }} </div>
<nz-card [nzBordered]="false">
  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="14" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name"
              placeholder="" id="name" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
          i18n }}</button>
        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
          i18n }}</button>
        <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
        <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
      </div>
    </div>
  </form>

  <nz-table #dynamicTable nzTableLayout="auto" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
    <thead>
      <tr>
        <th></th>
        <th nzAlign="center" style="display: none">Id</th>
        <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
        <th nzAlign="center">{{ 'mxk.roles.dynamic' | i18n }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of query.results.rows">
        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
        <td nzAlign="left" style="display: none">
          <span>{{ data.id }}</span>
        </td>
        <td nzAlign="left"> {{ data.name }}</td>
        <td nzAlign="center"> <i *ngIf="data.dynamic == 1" nz-icon nzType="check-circle" nzTheme="fill"
            style="color: green"></i></td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>
<div *nzModalFooter style="display: none">
  <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
  <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
</div>