MaxKey/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html

<page-header> </page-header>

<nz-card [nzBordered]="false">
  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="10" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="name">{{ 'mxk.resources.appName' | i18n }}</nz-form-label>
          <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" disabled placeholder="" />
        </nz-form-item>
      </div>
      <div nz-col nzMd="10" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="resourceName">{{ 'mxk.resources.name' | i18n }}</nz-form-label>
          <nz-form-control>
            <input
              nz-input
              [(ngModel)]="query.params.resourceName"
              [ngModelOptions]="{ standalone: true }"
              name="resourceName"
              placeholder=""
              id="resourceName"
            />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [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
        >
      </div>
    </div>
  </form>
</nz-card>
<nz-card [nzBordered]="false">
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
    <div nz-col [nzSpan]="24" class="table-list-toolbar">
      <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
      <button
        nz-button
        type="button"
        nz-popconfirm
        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
        nzPopconfirmPlacement="left"
        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
        (nzOnConfirm)="onBatchDelete()"
        [nzType]="'primary'"
        nzDanger
        class="mx-sm"
        >{{ 'mxk.text.delete' | i18n }}</button
      >
    </div>
    <div nz-col nzMd="6" nzSm="24" class="grid-border">
      <nz-tree
        nzShowLine="false"
        [nzCheckable]="treeNodes.checkable"
        nzBlockNode
        [nzData]="treeNodes.nodes"
        (nzClick)="activeNode($event)"
        (nzDblClick)="openFolder($event)"
        [nzTreeTemplate]="nzTreeTemplate"
      ></nz-tree>
      <ng-template #nzTreeTemplate let-node let-origin="origin">
        <span class="custom-node">
          <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
            <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
            <span class="folder-name">{{ node.title }}</span>
          </span>
          <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event, menu)">
            <i nz-icon nzType="file"></i>
            <span class="file-name">{{ node.title }}</span>
          </span>
        </span>
      </ng-template>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="selectDropdown()">Action 1</li>
          <li nz-menu-item (click)="selectDropdown()">Action 2</li>
        </ul>
      </nz-dropdown-menu>
    </div>
    <div nz-col nzMd="18" nzSm="24" class="grid-border">
      <nz-table
        #dynamicTable
        nzTableLayout="auto"
        nzSize="small"
        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 [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
            <th nzAlign="center">{{ 'mxk.resources.appName' | i18n }}</th>
            <th nzAlign="center">{{ 'mxk.resources.name' | i18n }}</th>
            <th nzAlign="center">{{ 'mxk.resources.resourceType' | i18n }}</th>
            <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
            <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
            <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | 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="center">
              {{ data.appName }}
            </td>
            <td nzAlign="left"> {{ data.resourceName }}</td>
            <td nzAlign="left"> {{ data.resourceType }}</td>
            <td nzAlign="center"> {{ data.sortIndex }}</td>
            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
            <td nzAlign="center" nzBreakWord="false">
              <div nz-col>
                <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
                <button
                  nz-button
                  type="button"
                  nz-popconfirm
                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
                  nzPopconfirmPlacement="left"
                  [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
                  (nzOnConfirm)="onDelete(data.id)"
                  nzDanger
                  >{{ 'mxk.text.delete' | i18n }}</button
                >
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</nz-card>