파트너 입출금 정산 수정
This commit is contained in:
parent
aa234ff124
commit
c75347da04
|
|
@ -1,33 +1,297 @@
|
||||||
<div
|
<div
|
||||||
class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
|
class="flex flex-col w-full min-w-0 sm:absolute sm:inset-0 sm:overflow-hidden"
|
||||||
>
|
>
|
||||||
<!-- Header -->
|
<mat-drawer-container class="flex-auto sm:h-full">
|
||||||
<div
|
<!-- Drawer -->
|
||||||
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
|
<mat-drawer
|
||||||
|
class="sm:w-96 dark:bg-gray-900"
|
||||||
|
[autoFocus]="false"
|
||||||
|
[mode]="drawerMode"
|
||||||
|
[opened]="drawerOpened"
|
||||||
|
#drawer
|
||||||
>
|
>
|
||||||
<!-- Loader -->
|
<!-- Header -->
|
||||||
<div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
|
<div class="flex items-center justify-between m-8 mr-6 sm:my-10">
|
||||||
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
|
|
||||||
</div>
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="text-4xl font-extrabold tracking-tight">파트너 입출금 정산</div>
|
<div class="text font-extrabold tracking-tight leading-none">
|
||||||
<!-- Actions -->
|
<div class="flex flex-col flex-auto order-2 md:order-1">
|
||||||
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
<div class="text font-semibold leading-tight">
|
||||||
<!-- Search -->
|
파트너 입출금 정산
|
||||||
<button mat-icon-button (click)="__onClickSearch()">
|
</div>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Close button -->
|
||||||
|
<div class="lg:hidden">
|
||||||
|
<button mat-icon-button (click)="drawer.close()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Search -->
|
<!-- Panel links -->
|
||||||
|
<div class="flex flex-col divide-y border-t border-b">
|
||||||
|
<ng-container *ngFor="let panel of panels; trackBy: __trackByFn">
|
||||||
|
<div
|
||||||
|
class="flex px-8 py-5 cursor-pointer"
|
||||||
|
[ngClass]="{
|
||||||
|
'hover:bg-gray-100 dark:hover:bg-hover':
|
||||||
|
!selectedPanel || selectedPanel !== panel.id,
|
||||||
|
'bg-primary-50 dark:bg-hover':
|
||||||
|
selectedPanel && selectedPanel === panel.id
|
||||||
|
}"
|
||||||
|
(click)="goToPanel(panel.id)"
|
||||||
|
>
|
||||||
|
<mat-icon
|
||||||
|
[ngClass]="{
|
||||||
|
'text-hint': !selectedPanel || selectedPanel !== panel.id,
|
||||||
|
'text-primary dark:text-primary-500':
|
||||||
|
selectedPanel && selectedPanel === panel.id
|
||||||
|
}"
|
||||||
|
[svgIcon]="panel.icon"
|
||||||
|
></mat-icon>
|
||||||
|
<div class="ml-3">
|
||||||
|
<div
|
||||||
|
class="font-medium leading-6"
|
||||||
|
[ngClass]="{
|
||||||
|
'text-primary dark:text-primary-500':
|
||||||
|
selectedPanel && selectedPanel === panel.id
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ panel.title }}
|
||||||
|
</div>
|
||||||
|
<div class="mt-0.5 text-secondary">
|
||||||
|
{{ panel.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</mat-drawer>
|
||||||
|
|
||||||
|
<!-- Drawer content -->
|
||||||
|
<mat-drawer-content class="flex flex-col">
|
||||||
|
<!-- Main -->
|
||||||
|
<div class="flex-auto px-6 pt-9 pb-12 md:p-8 md:pb-12 lg:p-12">
|
||||||
|
<!-- Panel header -->
|
||||||
|
<div class="flex items-center">
|
||||||
|
<!-- Drawer toggle -->
|
||||||
|
<button
|
||||||
|
class="lg:hidden -ml-2"
|
||||||
|
mat-icon-button
|
||||||
|
(click)="drawer.toggle()"
|
||||||
|
>
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Panel title -->
|
||||||
|
<div
|
||||||
|
class="ml-2 lg:ml-0 text-3xl font-bold tracking-tight leading-none"
|
||||||
|
>
|
||||||
|
{{ getPanelInfo(selectedPanel).title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Load settings panel -->
|
||||||
|
<div class="mt-8">
|
||||||
|
<ng-container [ngSwitch]="selectedPanel">
|
||||||
|
<!-- Account -->
|
||||||
|
<ng-container *ngSwitchCase="'partnerDepositList'">
|
||||||
|
<div
|
||||||
|
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<ng-container *ngTemplateOutlet="searchBox"></ng-container>
|
||||||
|
<ng-container
|
||||||
|
*ngIf="
|
||||||
|
partnerDepositCalculatesDataSource.data.length > 0;
|
||||||
|
else noPartnerCalculates
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col flex-auto mt-2">
|
||||||
|
<table
|
||||||
|
class="overflow-y-visible"
|
||||||
|
mat-table
|
||||||
|
[dataSource]="partnerDepositCalculatesDataSource"
|
||||||
|
>
|
||||||
|
<!-- Total -->
|
||||||
|
<ng-container matColumnDef="no">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>번호</th>
|
||||||
|
<td mat-cell *matCellDef="let info; let idx = index">
|
||||||
|
<span class="font-medium text-right">
|
||||||
|
{{ info.partnerDepositIdx }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="username">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
|
아이디(닉네임)
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.partnerDepositId }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="accountHolder">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>입금자이름</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.nameOfDepositer }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="amount">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>결제금액</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.partnerWithdrawAmountOfPayment }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>신청일</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{
|
||||||
|
info.partnerWithdrawregistrationDate
|
||||||
|
| date: "yyyy/MM/dd HH:mm"
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="stateChangedAt">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>확인일</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{
|
||||||
|
info.partnerWithdrawConfirmDate
|
||||||
|
| date: "yyyy/MM/dd HH:mm"
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
mat-header-row
|
||||||
|
*matHeaderRowDef="partnerDepositTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
mat-row
|
||||||
|
*matRowDef="
|
||||||
|
let row;
|
||||||
|
columns: partnerDepositTableColumns
|
||||||
|
"
|
||||||
|
></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #noPartnerCalculates>
|
||||||
|
<div
|
||||||
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
|
>
|
||||||
|
There are no data!
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngSwitchCase="'partnerWithdrawList'">
|
||||||
|
<div
|
||||||
|
class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<ng-container *ngTemplateOutlet="searchBox"></ng-container>
|
||||||
|
<ng-container
|
||||||
|
*ngIf="
|
||||||
|
partnerDepositCalculatesDataSource.data.length > 0;
|
||||||
|
else noPartnerCalculates
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col flex-auto mt-2">
|
||||||
|
<table
|
||||||
|
class="overflow-y-visible"
|
||||||
|
mat-table
|
||||||
|
[dataSource]="partnerDepositCalculatesDataSource"
|
||||||
|
>
|
||||||
|
<!-- Total -->
|
||||||
|
<ng-container matColumnDef="no">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>번호</th>
|
||||||
|
<td mat-cell *matCellDef="let info; let idx = index">
|
||||||
|
<span class="font-medium text-right">
|
||||||
|
{{ info.partnerDepositIdx }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="username">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
|
아이디(닉네임)
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.partnerDepositId }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="accountHolder">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>입금자이름</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.nameOfDepositer }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="amount">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>결제금액</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.partnerWithdrawAmountOfPayment }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>신청일</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{
|
||||||
|
info.partnerWithdrawregistrationDate
|
||||||
|
| date: "yyyy/MM/dd HH:mm"
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="stateChangedAt">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>확인일</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{
|
||||||
|
info.partnerWithdrawConfirmDate
|
||||||
|
| date: "yyyy/MM/dd HH:mm"
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
mat-header-row
|
||||||
|
*matHeaderRowDef="partnerDepositTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
mat-row
|
||||||
|
*matRowDef="
|
||||||
|
let row;
|
||||||
|
columns: partnerDepositTableColumns
|
||||||
|
"
|
||||||
|
></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #noPartnerCalculates>
|
||||||
|
<div
|
||||||
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
|
>
|
||||||
|
There are no data!
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-drawer-content>
|
||||||
|
</mat-drawer-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ng-template #searchBox>
|
||||||
<div
|
<div
|
||||||
*ngIf="__isSearchOpened"
|
|
||||||
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
|
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
|
||||||
>
|
>
|
||||||
<!-- Actions -->
|
|
||||||
<div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
|
<div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
|
||||||
<!-- Search -->
|
|
||||||
<!-- Card inception -->
|
|
||||||
<mat-form-field [floatLabel]="'always'">
|
<mat-form-field [floatLabel]="'always'">
|
||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
|
|
@ -53,212 +317,15 @@
|
||||||
></mat-datepicker-toggle>
|
></mat-datepicker-toggle>
|
||||||
<mat-datepicker #picker2></mat-datepicker>
|
<mat-datepicker #picker2></mat-datepicker>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
|
|
||||||
<mat-select placeholder="검색어">
|
|
||||||
<mat-option value="">아이디</mat-option>
|
|
||||||
<mat-option value="">닉네임</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
<mat-form-field
|
|
||||||
fxFlex
|
|
||||||
class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
|
|
||||||
>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
matPrefix
|
|
||||||
[svgIcon]="'heroicons_solid:search'"
|
|
||||||
></mat-icon>
|
|
||||||
<input
|
|
||||||
matInput
|
|
||||||
[formControl]="searchInputControl"
|
|
||||||
[autocomplete]="'off'"
|
|
||||||
[placeholder]="'Search user'"
|
|
||||||
/>
|
|
||||||
</mat-form-field>
|
|
||||||
<!-- Add user button -->
|
|
||||||
<button
|
<button
|
||||||
fxFlex
|
fxFlex
|
||||||
mat-flat-button
|
mat-flat-button
|
||||||
style="position: fixed; margin-top: 4px"
|
style="position: fixed; margin-top: 4px"
|
||||||
[color]="'primary'"
|
[color]="'primary'"
|
||||||
(click)="__createProduct()"
|
|
||||||
>
|
>
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
||||||
<span class="ml-2 mr-1">Search</span>
|
<span class="ml-2 mr-1">Search</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</ng-template>
|
||||||
<!-- Main -->
|
|
||||||
<div>파트너입금</div>
|
|
||||||
<div class="flex flex-auto overflow-hidden">
|
|
||||||
<!-- Products list -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
|
|
||||||
>
|
|
||||||
<ng-container *ngIf="partnerCalculates$ | async as partnerCalculates">
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerCalculates.length > 0; else noPartnerCalculate"
|
|
||||||
>
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Header -->
|
|
||||||
<div
|
|
||||||
class="partner-calculate-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
|
|
||||||
>
|
|
||||||
<div>번호</div>
|
|
||||||
<div>
|
|
||||||
아이디
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
닉네임
|
|
||||||
</div>
|
|
||||||
<div>등급</div>
|
|
||||||
<div class="hidden sm:block">입금자이름</div>
|
|
||||||
<div class="hidden md:block">결제금액</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
신청일
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
확인일
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Rows -->
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerCalculates$ | async as partnerCalculates"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngFor="
|
|
||||||
let partnerCalculate of partnerCalculates;
|
|
||||||
trackBy: __trackByFn
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="partner-calculate-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{{ partnerCalculate.partnerDepositIdx }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ partnerCalculate.partnerDepositId }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerCalculate.partnerDepositNickname }}
|
|
||||||
</div>
|
|
||||||
<div>{{ partnerCalculate.partnerDepositRank }}</div>
|
|
||||||
<div class="hidden sm:block">
|
|
||||||
{{ partnerCalculate.nameOfDepositer }}
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ partnerCalculate.partnerDepositAmountOfPayment }}원
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ partnerCalculate.partnerDepositregistrationDate }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerCalculate.partnerDepositConfirmDate }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
<div>합계 930,000원</div>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-template #noPartnerCalculate>
|
|
||||||
<div
|
|
||||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
|
||||||
>
|
|
||||||
There are no Data!
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Main -->
|
|
||||||
<div>파트너출금</div>
|
|
||||||
<div class="flex flex-auto overflow-hidden">
|
|
||||||
<!-- Products list -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
|
|
||||||
>
|
|
||||||
<ng-container *ngIf="partnerCalculates$ | async as partnerCalculates">
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerCalculates.length > 0; else noPartnerCalculate"
|
|
||||||
>
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Header -->
|
|
||||||
<div
|
|
||||||
class="partner-calculate-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
|
|
||||||
>
|
|
||||||
<div>번호</div>
|
|
||||||
<div>
|
|
||||||
아이디
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
닉네임
|
|
||||||
</div>
|
|
||||||
<div>등급</div>
|
|
||||||
<div class="hidden sm:block">예금주</div>
|
|
||||||
<div class="hidden md:block">결제금액</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
신청일
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
확인일
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Rows -->
|
|
||||||
<ng-container
|
|
||||||
*ngIf="partnerCalculates$ | async as partnerCalculates"
|
|
||||||
>
|
|
||||||
<ng-container
|
|
||||||
*ngFor="
|
|
||||||
let partnerCalculate of partnerCalculates;
|
|
||||||
trackBy: __trackByFn
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="partner-calculate-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{{ partnerCalculate.partnerWithdrawIdx }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ partnerCalculate.partnerWithdrawId }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerCalculate.partnerWithdrawNickname }}
|
|
||||||
</div>
|
|
||||||
<div>{{ partnerCalculate.partnerWithdrawRank }}</div>
|
|
||||||
<div class="hidden sm:block">
|
|
||||||
{{ partnerCalculate.accountHolder }}
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ partnerCalculate.partnerWithdrawAmountOfPayment }}원
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ partnerCalculate.partnerWithdrawregistrationDate }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ partnerCalculate.partnerWithdrawConfirmDate }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
<div>합계 190,000원</div>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<mat-paginator
|
|
||||||
class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
|
|
||||||
[ngClass]="{ 'pointer-events-none': isLoading }"
|
|
||||||
[length]="pagination?.length"
|
|
||||||
[pageIndex]="pagination?.page"
|
|
||||||
[pageSize]="pagination?.size"
|
|
||||||
[pageSizeOptions]="[5, 10, 25, 100]"
|
|
||||||
[showFirstLastButtons]="true"
|
|
||||||
></mat-paginator>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-template #noPartnerCalculate>
|
|
||||||
<div
|
|
||||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
|
||||||
>
|
|
||||||
There are no Data!
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,8 @@ import { FuseConfirmationService } from '@fuse/services/confirmation';
|
||||||
import { PartnerCalculate } from '../models/partner-calculate';
|
import { PartnerCalculate } from '../models/partner-calculate';
|
||||||
import { PartnerCalculatePagination } from '../models/partner-calculate-pagination';
|
import { PartnerCalculatePagination } from '../models/partner-calculate-pagination';
|
||||||
import { PartnerCalculateService } from '../services/partner-calculate.service';
|
import { PartnerCalculateService } from '../services/partner-calculate.service';
|
||||||
|
import { MatDrawer } from '@angular/material/sidenav';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'partner-calculate-list',
|
selector: 'partner-calculate-list',
|
||||||
|
|
@ -68,14 +70,33 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
@ViewChild(MatPaginator) private _paginator!: MatPaginator;
|
@ViewChild(MatPaginator) private _paginator!: MatPaginator;
|
||||||
@ViewChild(MatSort) private _sort!: MatSort;
|
@ViewChild(MatSort) private _sort!: MatSort;
|
||||||
|
|
||||||
|
@ViewChild('drawer') drawer!: MatDrawer;
|
||||||
|
drawerMode: 'over' | 'side' = 'side';
|
||||||
|
drawerOpened: boolean = true;
|
||||||
|
|
||||||
|
partnerDepositCalculatesDataSource: MatTableDataSource<PartnerCalculate> =
|
||||||
|
new MatTableDataSource();
|
||||||
|
|
||||||
partnerCalculates$!: Observable<PartnerCalculate[] | undefined>;
|
partnerCalculates$!: Observable<PartnerCalculate[] | undefined>;
|
||||||
|
|
||||||
|
panels: any[] = [];
|
||||||
|
selectedPanel: string = 'partnerDepositList';
|
||||||
|
|
||||||
__isSearchOpened = false;
|
__isSearchOpened = false;
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
searchInputControl = new FormControl();
|
searchInputControl = new FormControl();
|
||||||
selectedPartnerCalculate?: PartnerCalculate;
|
selectedPartnerCalculate?: PartnerCalculate;
|
||||||
pagination?: PartnerCalculatePagination;
|
pagination?: PartnerCalculatePagination;
|
||||||
|
|
||||||
|
partnerDepositTableColumns: string[] = [
|
||||||
|
'no',
|
||||||
|
'username',
|
||||||
|
'accountHolder',
|
||||||
|
'amount',
|
||||||
|
'createdAt',
|
||||||
|
'stateChangedAt',
|
||||||
|
];
|
||||||
|
|
||||||
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
private _unsubscribeAll: Subject<any> = new Subject<any>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -108,7 +129,30 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get the products
|
// Get the products
|
||||||
|
this._partnerCalculateService.partnerCalculates$
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe((result: PartnerCalculate[] | undefined) => {
|
||||||
|
if (!result) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.partnerDepositCalculatesDataSource.data = result;
|
||||||
|
});
|
||||||
this.partnerCalculates$ = this._partnerCalculateService.partnerCalculates$;
|
this.partnerCalculates$ = this._partnerCalculateService.partnerCalculates$;
|
||||||
|
|
||||||
|
this.panels = [
|
||||||
|
{
|
||||||
|
id: 'partnerDepositList',
|
||||||
|
icon: 'account-cash',
|
||||||
|
title: '파트너입금 내역',
|
||||||
|
description: 'Manage your public profile and private information',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'partnerWithdrawList',
|
||||||
|
icon: 'account-cash',
|
||||||
|
title: '파트너출금 내역',
|
||||||
|
description: 'Manage your public profile and private information',
|
||||||
|
},
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -167,6 +211,29 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
// @ Public methods
|
// @ Public methods
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the details of the panel
|
||||||
|
*
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
getPanelInfo(id: string): any {
|
||||||
|
return this.panels.find((panel) => panel.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Navigate to the panel
|
||||||
|
*
|
||||||
|
* @param panel
|
||||||
|
*/
|
||||||
|
goToPanel(panel: string): void {
|
||||||
|
this.selectedPanel = panel;
|
||||||
|
|
||||||
|
// Close the drawer on 'over' mode
|
||||||
|
if (this.drawerMode === 'over') {
|
||||||
|
this.drawer.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
// @ Private methods
|
// @ Private methods
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,8 @@ import { MatSortModule } from '@angular/material/sort';
|
||||||
import { MatSelectModule } from '@angular/material/select';
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||||
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||||
|
import { MatTableModule } from '@angular/material/table';
|
||||||
|
|
||||||
import { TranslocoModule } from '@ngneat/transloco';
|
import { TranslocoModule } from '@ngneat/transloco';
|
||||||
|
|
||||||
|
|
@ -37,6 +39,8 @@ import { partnerCalculateRoutes } from './partner-calculate.routing';
|
||||||
MatSelectModule,
|
MatSelectModule,
|
||||||
MatDatepickerModule,
|
MatDatepickerModule,
|
||||||
MatMomentDateModule,
|
MatMomentDateModule,
|
||||||
|
MatSidenavModule,
|
||||||
|
MatTableModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class PartnerCalculateModule {}
|
export class PartnerCalculateModule {}
|
||||||
|
|
|
||||||
|
|
@ -142,13 +142,13 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
this.panels = [
|
this.panels = [
|
||||||
{
|
{
|
||||||
id: 'webDepositList',
|
id: 'webDepositList',
|
||||||
icon: 'heroicons_outline:user-circle',
|
icon: 'cash-multiple',
|
||||||
title: '웹입금 내역',
|
title: '웹입금 내역',
|
||||||
description: 'Manage your public profile and private information',
|
description: 'Manage your public profile and private information',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'webWithdrawList',
|
id: 'webWithdrawList',
|
||||||
icon: 'heroicons_outline:user-circle',
|
icon: 'cash-multiple',
|
||||||
title: '웹출금 내역',
|
title: '웹출금 내역',
|
||||||
description: 'Manage your public profile and private information',
|
description: 'Manage your public profile and private information',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user