웹 입출금내역 화면 수정
This commit is contained in:
Park Byung Eun
parent
4813572232
commit
57a65e17fe
|
|
@ -1,33 +1,289 @@
|
||||||
<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">
|
||||||
|
<!-- Drawer -->
|
||||||
|
<mat-drawer
|
||||||
|
class="sm:w-96 dark:bg-gray-900"
|
||||||
|
[autoFocus]="false"
|
||||||
|
[mode]="drawerMode"
|
||||||
|
[opened]="drawerOpened"
|
||||||
|
#drawer
|
||||||
|
>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between m-8 mr-6 sm:my-10">
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="text font-extrabold tracking-tight leading-none">
|
||||||
|
<div class="flex flex-col flex-auto order-2 md:order-1">
|
||||||
|
<div class="text font-semibold leading-tight">웹 입출금 정산</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Close button -->
|
||||||
|
<div class="lg:hidden">
|
||||||
|
<button mat-icon-button (click)="drawer.close()">
|
||||||
|
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 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="'webDepositList'">
|
||||||
|
<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="
|
||||||
|
webDepositCalculatesDataSource.data.length > 0;
|
||||||
|
else noWebCalculates
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col flex-auto mt-2">
|
||||||
|
<table
|
||||||
|
class="overflow-y-visible"
|
||||||
|
mat-table
|
||||||
|
[dataSource]="webDepositCalculatesDataSource"
|
||||||
|
>
|
||||||
|
<!-- 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.webDepositIdx }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="username">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
|
아이디(닉네임)
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.webDepositId }}
|
||||||
|
</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.webWithdrawAmountOfPayment }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>신청일</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{
|
||||||
|
info.webWithdrawregistrationDate
|
||||||
|
| 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.webWithdrawConfirmDate
|
||||||
|
| date: "yyyy/MM/dd HH:mm"
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
mat-header-row
|
||||||
|
*matHeaderRowDef="webDepositTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
mat-row
|
||||||
|
*matRowDef="let row; columns: webDepositTableColumns"
|
||||||
|
></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #noWebCalculates>
|
||||||
|
<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="'webWithdrawList'">
|
||||||
|
<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="
|
||||||
|
webDepositCalculatesDataSource.data.length > 0;
|
||||||
|
else noWebCalculates
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col flex-auto mt-2">
|
||||||
|
<table
|
||||||
|
class="overflow-y-visible"
|
||||||
|
mat-table
|
||||||
|
[dataSource]="webDepositCalculatesDataSource"
|
||||||
|
>
|
||||||
|
<!-- 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.webDepositIdx }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expenses amount -->
|
||||||
|
<ng-container matColumnDef="username">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
|
아이디(닉네임)
|
||||||
|
</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{ info.webDepositId }}
|
||||||
|
</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.webWithdrawAmountOfPayment }}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="createdAt">
|
||||||
|
<th mat-header-cell *matHeaderCellDef>신청일</th>
|
||||||
|
<td mat-cell *matCellDef="let info">
|
||||||
|
{{
|
||||||
|
info.webWithdrawregistrationDate
|
||||||
|
| 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.webWithdrawConfirmDate
|
||||||
|
| date: "yyyy/MM/dd HH:mm"
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
mat-header-row
|
||||||
|
*matHeaderRowDef="webDepositTableColumns"
|
||||||
|
></tr>
|
||||||
|
<tr
|
||||||
|
mat-row
|
||||||
|
*matRowDef="let row; columns: webDepositTableColumns"
|
||||||
|
></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #noWebCalculates>
|
||||||
|
<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
|
||||||
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"
|
|
||||||
>
|
|
||||||
<!-- Loader -->
|
|
||||||
<div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
|
|
||||||
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
|
|
||||||
</div>
|
|
||||||
<!-- Title -->
|
|
||||||
<div class="text-4xl font-extrabold tracking-tight">웹 입출금 정산</div>
|
|
||||||
<!-- Actions -->
|
|
||||||
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
|
||||||
<!-- Search -->
|
|
||||||
<button mat-icon-button (click)="__onClickSearch()">
|
|
||||||
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Search -->
|
|
||||||
<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,202 +309,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="webCalculates$ | async as webCalculates">
|
|
||||||
<ng-container *ngIf="webCalculates.length > 0; else noWebCalculate">
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Header -->
|
|
||||||
<div
|
|
||||||
class="web-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="webCalculates$ | async as webCalculates">
|
|
||||||
<ng-container
|
|
||||||
*ngFor="let webCalculate of webCalculates; trackBy: __trackByFn"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="web-calculate-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{{ webCalculate.webDepositIdx }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ webCalculate.webDepositId }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ webCalculate.webDepositNickname }}
|
|
||||||
</div>
|
|
||||||
<div>{{ webCalculate.webDepositRank }}</div>
|
|
||||||
<div class="hidden sm:block">
|
|
||||||
{{ webCalculate.nameOfDepositer }}
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ webCalculate.webDepositAmountOfPayment }}원
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ webCalculate.webDepositregistrationDate }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ webCalculate.webDepositConfirmDate }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
<div>합계 71,300,000원</div>
|
|
||||||
</ng-container>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-template #noWebCalculate>
|
|
||||||
<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="webCalculates$ | async as webCalculates">
|
|
||||||
<ng-container *ngIf="webCalculates.length > 0; else noWebCalculate">
|
|
||||||
<div class="grid">
|
|
||||||
<!-- Header -->
|
|
||||||
<div
|
|
||||||
class="web-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="webCalculates$ | async as webCalculates">
|
|
||||||
<ng-container
|
|
||||||
*ngFor="let webCalculate of webCalculates; trackBy: __trackByFn"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="web-calculate-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{{ webCalculate.webWithdrawIdx }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ webCalculate.webWithdrawId }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ webCalculate.webWithdrawNickname }}
|
|
||||||
</div>
|
|
||||||
<div>{{ webCalculate.webWithdrawRank }}</div>
|
|
||||||
<div class="hidden sm:block">
|
|
||||||
{{ webCalculate.bankName }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ webCalculate.accountHolder }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ webCalculate.accountNumber }}
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ webCalculate.webWithdrawAmountOfPayment }}원
|
|
||||||
</div>
|
|
||||||
<div class="hidden md:block">
|
|
||||||
{{ webCalculate.webWithdrawregistrationDate }}
|
|
||||||
<hr style="margin: 7px 0px" />
|
|
||||||
{{ webCalculate.webWithdrawConfirmDate }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
<div>합계 19,010,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 #noWebCalculate>
|
|
||||||
<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 { WebCalculate } from '../models/web-calculate';
|
import { WebCalculate } from '../models/web-calculate';
|
||||||
import { WebCalculatePagination } from '../models/web-calculate-pagination';
|
import { WebCalculatePagination } from '../models/web-calculate-pagination';
|
||||||
import { WebCalculateService } from '../services/web-calculate.service';
|
import { WebCalculateService } from '../services/web-calculate.service';
|
||||||
|
import { MatDrawer } from '@angular/material/sidenav';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'web-calculate-list',
|
selector: 'web-calculate-list',
|
||||||
|
|
@ -45,17 +47,17 @@ import { WebCalculateService } from '../services/web-calculate.service';
|
||||||
|
|
||||||
@screen sm {
|
@screen sm {
|
||||||
/* 번호 아이디 등급 입금자 결제 신청 */
|
/* 번호 아이디 등급 입금자 결제 신청 */
|
||||||
grid-template-columns: 40px 140px 100px auto 140px 140px;
|
grid-template-columns: 40px 140px 80px auto 140px 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@screen md {
|
@screen md {
|
||||||
/* 번호 아이디 등급 입금자 결제 신청 */
|
/* 번호 아이디 등급 입금자 결제 신청 */
|
||||||
grid-template-columns: 40px 140px 100px auto 140px 140px;
|
grid-template-columns: 40px 180px 80px auto 180px 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
/* 번호 아이디 등급 입금자 결제 신청 */
|
/* 번호 아이디 등급 입금자 결제 신청 */
|
||||||
grid-template-columns: 40px 100px auto 40px 140px 140px;
|
grid-template-columns: 40px 180px 80px auto 180px 140px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
webDepositCalculatesDataSource: MatTableDataSource<WebCalculate> =
|
||||||
|
new MatTableDataSource();
|
||||||
|
|
||||||
webCalculates$!: Observable<WebCalculate[] | undefined>;
|
webCalculates$!: Observable<WebCalculate[] | undefined>;
|
||||||
|
|
||||||
|
panels: any[] = [];
|
||||||
|
selectedPanel: string = 'webDepositList';
|
||||||
|
|
||||||
__isSearchOpened = false;
|
__isSearchOpened = false;
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
searchInputControl = new FormControl();
|
searchInputControl = new FormControl();
|
||||||
selectedWebCalculate?: WebCalculate;
|
selectedWebCalculate?: WebCalculate;
|
||||||
pagination?: WebCalculatePagination;
|
pagination?: WebCalculatePagination;
|
||||||
|
|
||||||
|
webDepositTableColumns: 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._webCalculateService.webCalculates$
|
||||||
|
.pipe(takeUntil(this._unsubscribeAll))
|
||||||
|
.subscribe((result: WebCalculate[] | undefined) => {
|
||||||
|
if (!result) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.webDepositCalculatesDataSource.data = result;
|
||||||
|
});
|
||||||
this.webCalculates$ = this._webCalculateService.webCalculates$;
|
this.webCalculates$ = this._webCalculateService.webCalculates$;
|
||||||
|
|
||||||
|
this.panels = [
|
||||||
|
{
|
||||||
|
id: 'webDepositList',
|
||||||
|
icon: 'heroicons_outline:user-circle',
|
||||||
|
title: '웹입금 내역',
|
||||||
|
description: 'Manage your public profile and private information',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'webWithdrawList',
|
||||||
|
icon: 'heroicons_outline:user-circle',
|
||||||
|
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 { webCalculateRoutes } from './web-calculate.routing';
|
||||||
MatSelectModule,
|
MatSelectModule,
|
||||||
MatDatepickerModule,
|
MatDatepickerModule,
|
||||||
MatMomentDateModule,
|
MatMomentDateModule,
|
||||||
|
MatSidenavModule,
|
||||||
|
MatTableModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class WebCalculateModule {}
|
export class WebCalculateModule {}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user