입금내역, 출금내역 화면수정
This commit is contained in:
parent
f56691c688
commit
babc00d88a
|
|
@ -3,7 +3,7 @@
|
|||
<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"
|
||||
>
|
||||
<div class="text-lg font-medium">Deposit History</div>
|
||||
<div class="text-lg font-medium">입금내역</div>
|
||||
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
|
|
@ -11,113 +11,47 @@
|
|||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Compose form -->
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm"
|
||||
>
|
||||
<!-- To -->
|
||||
<mat-form-field>
|
||||
<mat-label>To</mat-label>
|
||||
<input matInput [formControlName]="'to'" />
|
||||
<div class="copy-fields-toggles" matSuffix>
|
||||
<span
|
||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.cc"
|
||||
(click)="showCopyField('cc')"
|
||||
>
|
||||
Cc
|
||||
</span>
|
||||
<span
|
||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.bcc"
|
||||
(click)="showCopyField('bcc')"
|
||||
>
|
||||
Bcc
|
||||
</span>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- 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 -->
|
||||
<ng-container *ngIf="depositHistory">
|
||||
<ng-container *ngIf="depositHistory.length > 0; else noDepositHistory">
|
||||
<div class="grid">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
||||
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"
|
||||
style="font-size: x-small"
|
||||
>
|
||||
<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>
|
||||
<div>충전금액</div>
|
||||
<div>처리날짜</div>
|
||||
<div>신청날짜</div>
|
||||
</div>
|
||||
<ng-container *ngIf="depositHistory">
|
||||
<ng-container
|
||||
*ngFor="let info of depositHistory; trackBy: __trackByFn"
|
||||
>
|
||||
<div
|
||||
class="deposit-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
||||
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>
|
||||
|
||||
<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()"
|
||||
<ng-template #noDepositHistory>
|
||||
<div
|
||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
There are no data!
|
||||
</div>
|
||||
</ng-template>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
|
|||
@Component({
|
||||
selector: 'deposit-history-compose',
|
||||
templateUrl: './deposit-history-compose.component.html',
|
||||
styles: [
|
||||
/* language=SCSS */
|
||||
`
|
||||
.deposit-history-grid {
|
||||
/* 상태 충전 처리 신청 */
|
||||
grid-template-columns: 150px 150px 150px 150px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class DepositHistoryComposeComponent implements OnInit {
|
||||
|
|
@ -29,6 +38,21 @@ export class DepositHistoryComposeComponent implements OnInit {
|
|||
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
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
@ -91,4 +115,14 @@ export class DepositHistoryComposeComponent implements OnInit {
|
|||
* Send the message
|
||||
*/
|
||||
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
|
||||
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">
|
||||
<mat-icon
|
||||
class="text-current"
|
||||
|
|
@ -11,113 +11,47 @@
|
|||
></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Compose form -->
|
||||
<form
|
||||
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
|
||||
[formGroup]="composeForm"
|
||||
>
|
||||
<!-- To -->
|
||||
<mat-form-field>
|
||||
<mat-label>To</mat-label>
|
||||
<input matInput [formControlName]="'to'" />
|
||||
<div class="copy-fields-toggles" matSuffix>
|
||||
<span
|
||||
class="text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.cc"
|
||||
(click)="showCopyField('cc')"
|
||||
>
|
||||
Cc
|
||||
</span>
|
||||
<span
|
||||
class="ml-2 text-sm font-medium cursor-pointer select-none hover:underline"
|
||||
*ngIf="!copyFields.bcc"
|
||||
(click)="showCopyField('bcc')"
|
||||
>
|
||||
Bcc
|
||||
</span>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- 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 -->
|
||||
<ng-container *ngIf="withdrawHistory">
|
||||
<ng-container *ngIf="withdrawHistory.length > 0; else noWithdrawHistory">
|
||||
<div class="grid">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
|
||||
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"
|
||||
style="font-size: x-small"
|
||||
>
|
||||
<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>
|
||||
<div>환전금액</div>
|
||||
<div>처리날짜</div>
|
||||
<div>신청날짜</div>
|
||||
</div>
|
||||
<ng-container *ngIf="withdrawHistory">
|
||||
<ng-container
|
||||
*ngFor="let info of withdrawHistory; trackBy: __trackByFn"
|
||||
>
|
||||
<div
|
||||
class="withdraw-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
|
||||
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>
|
||||
|
||||
<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()"
|
||||
<ng-template #noWithdrawHistory>
|
||||
<div
|
||||
class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
There are no data!
|
||||
</div>
|
||||
</ng-template>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
|
|||
@Component({
|
||||
selector: 'withdraw-history-compose',
|
||||
templateUrl: './withdraw-history-compose.component.html',
|
||||
styles: [
|
||||
/* language=SCSS */
|
||||
`
|
||||
.withdraw-history-grid {
|
||||
/* 상태 충전 처리 신청 */
|
||||
grid-template-columns: 150px 150px 150px 150px;
|
||||
}
|
||||
`,
|
||||
],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class WithdrawHistoryComposeComponent implements OnInit {
|
||||
|
|
@ -29,6 +38,21 @@ export class WithdrawHistoryComposeComponent implements OnInit {
|
|||
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
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
@ -91,4 +115,14 @@ export class WithdrawHistoryComposeComponent implements OnInit {
|
|||
* Send the message
|
||||
*/
|
||||
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