입금내역, 출금내역 화면수정
This commit is contained in:
parent
f56691c688
commit
babc00d88a
|
|
@ -3,7 +3,7 @@
|
||||||
<div
|
<div
|
||||||
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
||||||
>
|
>
|
||||||
<div class="text-lg font-medium">Deposit History</div>
|
<div class="text-lg font-medium">입금내역</div>
|
||||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||||
<mat-icon
|
<mat-icon
|
||||||
class="text-current"
|
class="text-current"
|
||||||
|
|
@ -11,113 +11,47 @@
|
||||||
></mat-icon>
|
></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Compose form -->
|
|
||||||
<form
|
<form
|
||||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||||
[formGroup]="composeForm"
|
[formGroup]="composeForm"
|
||||||
>
|
>
|
||||||
<!-- To -->
|
<ng-container *ngIf="depositHistory">
|
||||||
<mat-form-field>
|
<ng-container *ngIf="depositHistory.length > 0; else noDepositHistory">
|
||||||
<mat-label>To</mat-label>
|
<div class="grid">
|
||||||
<input matInput [formControlName]="'to'" />
|
<div
|
||||||
<div class="copy-fields-toggles" matSuffix>
|
class="deposit-history-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"
|
||||||
<span
|
style="font-size: x-small"
|
||||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
>
|
||||||
*ngIf="!copyFields.cc"
|
<div>상태</div>
|
||||||
(click)="showCopyField('cc')"
|
<div>충전금액</div>
|
||||||
>
|
<div>처리날짜</div>
|
||||||
Cc
|
<div>신청날짜</div>
|
||||||
</span>
|
</div>
|
||||||
<span
|
<ng-container *ngIf="depositHistory">
|
||||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
<ng-container
|
||||||
*ngIf="!copyFields.bcc"
|
*ngFor="let info of depositHistory; trackBy: __trackByFn"
|
||||||
(click)="showCopyField('bcc')"
|
>
|
||||||
>
|
<div
|
||||||
Bcc
|
class="deposit-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
||||||
</span>
|
style="font-size: small"
|
||||||
|
>
|
||||||
|
<div>{{ info.state }}</div>
|
||||||
|
<div>{{ info.chargeMoney }}</div>
|
||||||
|
<div>{{ info.processDate }}</div>
|
||||||
|
<div>{{ info.applicationDate }}</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-template #noDepositHistory>
|
||||||
|
<div
|
||||||
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
|
>
|
||||||
|
There are no data!
|
||||||
</div>
|
</div>
|
||||||
</mat-form-field>
|
</ng-template>
|
||||||
|
|
||||||
<!-- Cc -->
|
|
||||||
<mat-form-field *ngIf="copyFields.cc">
|
|
||||||
<mat-label>Cc</mat-label>
|
|
||||||
<input matInput [formControlName]="'cc'" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Bcc -->
|
|
||||||
<mat-form-field *ngIf="copyFields.bcc">
|
|
||||||
<mat-label>Bcc</mat-label>
|
|
||||||
<input matInput [formControlName]="'bcc'" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Subject -->
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label>Subject</mat-label>
|
|
||||||
<input matInput [formControlName]="'subject'" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Body -->
|
|
||||||
<!-- <quill-editor
|
|
||||||
class="mt-2"
|
|
||||||
[formControlName]="'body'"
|
|
||||||
[modules]="quillModules"
|
|
||||||
></quill-editor> -->
|
|
||||||
|
|
||||||
<!-- Actions -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
|
||||||
>
|
|
||||||
<div class="-ml-2">
|
|
||||||
<!-- Attach file -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:paper-clip'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- Insert link -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:link'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- Insert emoji -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:emoji-happy'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- Insert image -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:photograph'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center mt-4 sm:mt-0">
|
|
||||||
<!-- Discard -->
|
|
||||||
<button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
|
|
||||||
Discard
|
|
||||||
</button>
|
|
||||||
<!-- Save as draft -->
|
|
||||||
<button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
|
|
||||||
<span>Save as draft</span>
|
|
||||||
</button>
|
|
||||||
<!-- Send -->
|
|
||||||
<button
|
|
||||||
class="order-first sm:order-last"
|
|
||||||
mat-flat-button
|
|
||||||
[color]="'primary'"
|
|
||||||
(click)="send()"
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'deposit-history-compose',
|
selector: 'deposit-history-compose',
|
||||||
templateUrl: './deposit-history-compose.component.html',
|
templateUrl: './deposit-history-compose.component.html',
|
||||||
|
styles: [
|
||||||
|
/* language=SCSS */
|
||||||
|
`
|
||||||
|
.deposit-history-grid {
|
||||||
|
/* 상태 충전 처리 신청 */
|
||||||
|
grid-template-columns: 150px 150px 150px 150px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class DepositHistoryComposeComponent implements OnInit {
|
export class DepositHistoryComposeComponent implements OnInit {
|
||||||
|
|
@ -29,6 +38,21 @@ export class DepositHistoryComposeComponent implements OnInit {
|
||||||
private _formBuilder: FormBuilder
|
private _formBuilder: FormBuilder
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
|
depositHistory = [
|
||||||
|
{
|
||||||
|
state: 'ㄷㄱㄹㅇ',
|
||||||
|
chargeMoney: 123000,
|
||||||
|
processDate: '2022.08.23',
|
||||||
|
applicationDate: '2022.08.23',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'ㄷㄱㄹㅇ',
|
||||||
|
chargeMoney: 123000,
|
||||||
|
processDate: '2022.08.23',
|
||||||
|
applicationDate: '2022.08.23',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
// @ Lifecycle hooks
|
// @ Lifecycle hooks
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
@ -91,4 +115,14 @@ export class DepositHistoryComposeComponent implements OnInit {
|
||||||
* Send the message
|
* Send the message
|
||||||
*/
|
*/
|
||||||
send(): void {}
|
send(): void {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Track by function for ngFor loops
|
||||||
|
*
|
||||||
|
* @param index
|
||||||
|
* @param item
|
||||||
|
*/
|
||||||
|
__trackByFn(index: number, item: any): any {
|
||||||
|
return item.id || index;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<div
|
<div
|
||||||
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
|
||||||
>
|
>
|
||||||
<div class="text-lg font-medium">Withdraw History</div>
|
<div class="text-lg font-medium">출금내역</div>
|
||||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||||
<mat-icon
|
<mat-icon
|
||||||
class="text-current"
|
class="text-current"
|
||||||
|
|
@ -11,113 +11,47 @@
|
||||||
></mat-icon>
|
></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Compose form -->
|
|
||||||
<form
|
<form
|
||||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||||
[formGroup]="composeForm"
|
[formGroup]="composeForm"
|
||||||
>
|
>
|
||||||
<!-- To -->
|
<ng-container *ngIf="withdrawHistory">
|
||||||
<mat-form-field>
|
<ng-container *ngIf="withdrawHistory.length > 0; else noWithdrawHistory">
|
||||||
<mat-label>To</mat-label>
|
<div class="grid">
|
||||||
<input matInput [formControlName]="'to'" />
|
<div
|
||||||
<div class="copy-fields-toggles" matSuffix>
|
class="withdraw-history-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"
|
||||||
<span
|
style="font-size: x-small"
|
||||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
>
|
||||||
*ngIf="!copyFields.cc"
|
<div>상태</div>
|
||||||
(click)="showCopyField('cc')"
|
<div>환전금액</div>
|
||||||
>
|
<div>처리날짜</div>
|
||||||
Cc
|
<div>신청날짜</div>
|
||||||
</span>
|
</div>
|
||||||
<span
|
<ng-container *ngIf="withdrawHistory">
|
||||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
<ng-container
|
||||||
*ngIf="!copyFields.bcc"
|
*ngFor="let info of withdrawHistory; trackBy: __trackByFn"
|
||||||
(click)="showCopyField('bcc')"
|
>
|
||||||
>
|
<div
|
||||||
Bcc
|
class="withdraw-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
||||||
</span>
|
style="font-size: small"
|
||||||
|
>
|
||||||
|
<div>{{ info.state }}</div>
|
||||||
|
<div>{{ info.exchangeMoney }}</div>
|
||||||
|
<div>{{ info.processDate }}</div>
|
||||||
|
<div>{{ info.applicationDate }}</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-template #noWithdrawHistory>
|
||||||
|
<div
|
||||||
|
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||||
|
>
|
||||||
|
There are no data!
|
||||||
</div>
|
</div>
|
||||||
</mat-form-field>
|
</ng-template>
|
||||||
|
|
||||||
<!-- Cc -->
|
|
||||||
<mat-form-field *ngIf="copyFields.cc">
|
|
||||||
<mat-label>Cc</mat-label>
|
|
||||||
<input matInput [formControlName]="'cc'" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Bcc -->
|
|
||||||
<mat-form-field *ngIf="copyFields.bcc">
|
|
||||||
<mat-label>Bcc</mat-label>
|
|
||||||
<input matInput [formControlName]="'bcc'" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Subject -->
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-label>Subject</mat-label>
|
|
||||||
<input matInput [formControlName]="'subject'" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- Body -->
|
|
||||||
<!-- <quill-editor
|
|
||||||
class="mt-2"
|
|
||||||
[formControlName]="'body'"
|
|
||||||
[modules]="quillModules"
|
|
||||||
></quill-editor> -->
|
|
||||||
|
|
||||||
<!-- Actions -->
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
|
||||||
>
|
|
||||||
<div class="-ml-2">
|
|
||||||
<!-- Attach file -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:paper-clip'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- Insert link -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:link'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- Insert emoji -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:emoji-happy'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
<!-- Insert image -->
|
|
||||||
<button mat-icon-button>
|
|
||||||
<mat-icon
|
|
||||||
class="icon-size-5"
|
|
||||||
[svgIcon]="'heroicons_solid:photograph'"
|
|
||||||
></mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center mt-4 sm:mt-0">
|
|
||||||
<!-- Discard -->
|
|
||||||
<button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
|
|
||||||
Discard
|
|
||||||
</button>
|
|
||||||
<!-- Save as draft -->
|
|
||||||
<button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
|
|
||||||
<span>Save as draft</span>
|
|
||||||
</button>
|
|
||||||
<!-- Send -->
|
|
||||||
<button
|
|
||||||
class="order-first sm:order-last"
|
|
||||||
mat-flat-button
|
|
||||||
[color]="'primary'"
|
|
||||||
(click)="send()"
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'withdraw-history-compose',
|
selector: 'withdraw-history-compose',
|
||||||
templateUrl: './withdraw-history-compose.component.html',
|
templateUrl: './withdraw-history-compose.component.html',
|
||||||
|
styles: [
|
||||||
|
/* language=SCSS */
|
||||||
|
`
|
||||||
|
.withdraw-history-grid {
|
||||||
|
/* 상태 충전 처리 신청 */
|
||||||
|
grid-template-columns: 150px 150px 150px 150px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
],
|
||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class WithdrawHistoryComposeComponent implements OnInit {
|
export class WithdrawHistoryComposeComponent implements OnInit {
|
||||||
|
|
@ -29,6 +38,21 @@ export class WithdrawHistoryComposeComponent implements OnInit {
|
||||||
private _formBuilder: FormBuilder
|
private _formBuilder: FormBuilder
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
|
withdrawHistory = [
|
||||||
|
{
|
||||||
|
state: 'ㄷㄱㄹㅇ',
|
||||||
|
exchangeMoney: 123000,
|
||||||
|
processDate: '2022.08.23',
|
||||||
|
applicationDate: '2022.08.23',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'ㄷㄱㄹㅇ',
|
||||||
|
exchangeMoney: 123000,
|
||||||
|
processDate: '2022.08.23',
|
||||||
|
applicationDate: '2022.08.23',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
// @ Lifecycle hooks
|
// @ Lifecycle hooks
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
@ -91,4 +115,14 @@ export class WithdrawHistoryComposeComponent implements OnInit {
|
||||||
* Send the message
|
* Send the message
|
||||||
*/
|
*/
|
||||||
send(): void {}
|
send(): void {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Track by function for ngFor loops
|
||||||
|
*
|
||||||
|
* @param index
|
||||||
|
* @param item
|
||||||
|
*/
|
||||||
|
__trackByFn(index: number, item: any): any {
|
||||||
|
return item.id || index;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user