Untitled

<div class='main'>
    <div class='section__one'>
    </div>
    <div class='section__two'>
        <form nz-form>
            <div nz-row [nzGutter]='[30,30]'>
                <div nz-col nzXs='24' nzLg='12'>
<!--                    <mb-input-text-->
<!--                        mbMaxLength='20'-->
<!--                        mbPlaceholderText="&#45;&#45;{{'staffManager.table.benefitRate' | translate}}&#45;&#45;"-->
<!--                        mbLabelText="{{'staffManager.table.benefitRate' | translate}}"-->
<!--                        formControlName='amountMoney'></mb-input-text>-->
                    <button nz-button nz-dropdown nzTrigger='click' [nzDropdownMenu]='menu' class='ant-select-dropdown'>123</button>

                    <nz-dropdown-menu #menu="nzDropdownMenu">
                        <ul nz-menu>
                            <li nz-menu-item>
                                123
                            </li>
                            <li nz-menu-item>
                                123
                            </li>
                            <li nz-menu-divider>
                                123
                            </li>
                            <li nz-menu-item>
                                123
                            </li>
                        </ul>
                    </nz-dropdown-menu>


<!--                    <nz-input-group  style="border-radius: 8px">-->
<!--                        <input-->
<!--                            class='ant-select-dropdown'-->
<!--                            nz-dropdown-->
<!--                            [nzDropdownMenu]="menu"-->
<!--                            [nzVisible]="true"-->
<!--                            #input-->
<!--                        />-->
<!--                    </nz-input-group>-->



                </div>
                <div nz-col nzXs='24' nzLg='12'>
                    <mb-input-text
                        nz-dropdown
                        mbMaxLength='20'
                        mbPlaceholderText="--{{'staffManager.table.benefitRate' | translate}}--"
                        mbLabelText="{{'staffManager.table.benefitRate' | translate}}"
                        formControlName='amountMoney'></mb-input-text>
                </div>
            </div>
            <div nz-row [nzGutter]='[30,30]'>
                <div nz-col nzXs='24' nzLg='12'>
                    <mb-input-text
                        mbMaxLength='20'
                        mbPlaceholderText="--{{'staffManager.table.benefitRate' | translate}}--"
                        mbLabelText="{{'staffManager.table.benefitRate' | translate}}"
                        formControlName='amountMoney'></mb-input-text>
                </div>
                <div nz-col nzXs='24' nzLg='12'>
                    <mb-input-text
                        mbMaxLength='20'
                        mbPlaceholderText="--{{'staffManager.table.benefitRate' | translate}}--"
                        mbLabelText="{{'staffManager.table.benefitRate' | translate}}"
                        formControlName='amountMoney'></mb-input-text>
                </div>
            </div>
            <div nz-row [nzGutter]='[30,30]'>
                <div nz-col nzXs='24' nzLg='12'>
                    <mb-input-text
                        mbMaxLength='20'
                        mbPlaceholderText="--{{'staffManager.table.benefitRate' | translate}}--"
                        mbLabelText="{{'staffManager.table.benefitRate' | translate}}"
                        formControlName='amountMoney'></mb-input-text>
                </div>
                <div nz-col nzXs='24' nzLg='12'>
                    <mb-input-text
                        mbMaxLength='20'
                        mbPlaceholderText="--{{'staffManager.table.benefitRate' | translate}}--"
                        mbLabelText="{{'staffManager.table.benefitRate' | translate}}"
                        formControlName='amountMoney'></mb-input-text>
                </div>
            </div>
        </form>
    </div>
    <div class='section__three'>
        <div class="data-table" oncontextmenu="return false;" (click)="resetContextMenu()">
            <nz-table
                #basicTable
                [nzData]="items"
                [nzLoading]="loading"
                [nzFrontPagination]="false"
                [nzShowPagination]="items.length < count"
                [nzTotal]="count"
                [nzPageSize]="pagination.pageSize"
                [(nzPageIndex)]="pagination.startRecord"
                (nzPageIndexChange)="getInfo()"
                nzSize="small" >
                <thead>
                <tr>
                    <th class="text-nowrap" nzWidth="80px">{{'staffManager.table.stt' | translate}}</th>
                    <th class="text-nowrap">{{'staffManager.table.year' | translate}}</th>
                    <th class="text-nowrap">{{'staffManager.table.decisionDay' | translate}}</th>
                    <th class="text-nowrap">{{'staffManager.table.rewardForm' | translate}}</th>
                    <th class="text-nowrap">{{'staffManager.table.reason' | translate}}</th>
                    <th class="text-nowrap">{{'staffManager.table.decisionLevel' | translate}}</th>
                    <th class="text-nowrap">{{'staffManager.table.amount' | translate}}</th>
                    <th nzWidth="120px" nzRight="0px" class="text-nowrap">{{'staffManager.table.action' | translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr class="tr-for-class" *ngFor="let data of basicTable.data ;let i = index;"
                    (contextmenu)="rightClickTable($event, data)">
                    <td class="text-nowrap">{{validateService.getRowIndex(i, basicTable.nzPageIndex, basicTable.nzPageSize)}}</td>
                    <td class="text-nowrap">{{ data?.year }}</td>
                    <td class="text-nowrap">{{ data?.signedDate }}</td>
                    <td class="text-nowrap">{{ data?.methodName}}</td>
                    <td class="text-nowrap">{{ data?.reason}}</td>
                    <td class="text-nowrap">{{ data?.decisionLevelName }}</td>
                    <td class="text-nowrap">{{ data?.amountMoney | formatCurrency:"VND"}} VNĐ</td>
                    <td nzWidth="120px" nzRight="0px" class="text-nowrap">
                        <mb-button mbButtonType="ONLY_ICON" mbButtonIconType="AWESOME" mbPrefixIcon="far fa-pencil-alt"
                                   (click)="showModalUpdate(data, footerTmpl)"></mb-button>
                        <mb-button mbButtonType="ONLY_ICON" mbButtonIconType="AWESOME" nz-popconfirm
                                   nzPopconfirmTitle="{{'staffManager.table.action.confirmDelete' | translate}}"
                                   nzCancelText="{{'staffManager.table.action.cancel' | translate}}"
                                   nzOkType="primary"
                                   nzOkText="{{'staffManager.table.action.yes' | translate}}"
                                   (nzOnConfirm)="deleteItem(data)"
                                   nzPopconfirmPlacement="top" mbPrefixIcon="fal fa-trash-alt"></mb-button>
                    </td>
                </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</div>


<ng-template #footerTmpl>
    <mb-button mbButtonType='NO_BORDER' mbButtonSize='LARGE' (click)='modal.destroy()' mbButtonBgColor='transparent'
               mbButtonText="{{'common.button.cancel' | translate}}"></mb-button>
    <mb-button mbButtonType='NO_BORDER' mbButtonSize='LARGE' (click)='modal.getContentComponent().save()'
               mbButtonAvailableStyle='PRIMARY' mbButtonText="{{'common.button.save' | translate}}"></mb-button>
</ng-template>