Merge branch 'feature/BET-FRONTEND-APP-BROWSER-init' of https://gitlab.loafle.net/bet/beteran-frontend-app-browser into feature/BET-FRONTEND-APP-BROWSER-init

This commit is contained in:
병준 박 2022-09-06 12:40:52 +00:00
commit ac8901f5d8
4 changed files with 183 additions and 217 deletions

View File

@ -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">Comp</div>
<div class="text-lg font-medium">콤프</div>
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
<mat-icon
class="text-current"
@ -11,103 +11,39 @@
></mat-icon>
</button>
</div>
<fuse-alert
class="mt-8 -mb-4"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
[type]="alert.type"
[@shake]="alert.type === 'error'"
>
{{ alert.message }}
</fuse-alert>
<!-- Compose form -->
<form
class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
[formGroup]="composeForm"
>
<!-- To -->
<!-- Nickname -->
<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-label>닉네임</mat-label>
<input matInput [formControlName]="'accountHolder'" />
</mat-form-field>
<mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
닉네임은 필수 입력입니다.
</mat-error>
<!-- 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 -->
<!-- Holding comp -->
<mat-form-field>
<mat-label>Subject</mat-label>
<input matInput [formControlName]="'subject'" />
<mat-label>보유콤프</mat-label>
<input #inputAmount matInput [formControlName]="'amount'" value="" />
</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>
<div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
<div class="flex mt-4 sm:mt-0">
<!-- Send -->
<button
class="order-first sm:order-last"
@ -115,7 +51,7 @@
[color]="'primary'"
(click)="send()"
>
Send
콤프사용
</button>
</div>
</div>

View File

@ -1,6 +1,7 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { FuseAlertType } from '@fuse/components/alert';
@Component({
selector: 'comp-compose',
@ -9,17 +10,11 @@ import { MatDialogRef } from '@angular/material/dialog';
})
export class CompComposeComponent implements OnInit {
composeForm!: FormGroup;
copyFields: { cc: boolean; bcc: boolean } = {
cc: false,
bcc: false,
};
quillModules: any = {
toolbar: [
['bold', 'italic', 'underline'],
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
['clean'],
],
alert: { type: FuseAlertType; message: string } = {
type: 'success',
message: '출금신청이 완료 되었습니다.',
};
showAlert: boolean = false;
/**
* Constructor
@ -51,21 +46,6 @@ export class CompComposeComponent implements OnInit {
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Show the copy field with the given field name
*
* @param name
*/
showCopyField(name: string): void {
// Return if the name is not one of the available names
if (name !== 'cc' && name !== 'bcc') {
return;
}
// Show the field
this.copyFields[name] = true;
}
/**
* Save and close
*/

View File

@ -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</div>
<div class="text-lg font-medium">출금신청</div>
<button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
<mat-icon
class="text-current"
@ -11,6 +11,16 @@
></mat-icon>
</button>
</div>
<fuse-alert
class="mt-8 -mb-4"
*ngIf="showAlert"
[appearance]="'outline'"
[showIcon]="false"
[type]="alert.type"
[@shake]="alert.type === 'error'"
>
{{ alert.message }}
</fuse-alert>
<!-- Compose form -->
<form
@ -19,95 +29,110 @@
>
<!-- 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-label>은행명</mat-label>
<mat-select
[formControlName]="'bankName'"
placeholder="은행 선택"
>
<mat-option
>
국민은행
</mat-option>
</mat-select>
</mat-form-field>
<!-- Cc -->
<mat-form-field *ngIf="copyFields.cc">
<mat-label>Cc</mat-label>
<input matInput [formControlName]="'cc'" />
<mat-error *ngIf="composeForm.get('bankName')?.hasError('required')">
은행명은 필수 입력입니다.
</mat-error>
<mat-form-field>
<mat-label>예금주</mat-label>
<input matInput [formControlName]="'accountHolder'" />
</mat-form-field>
<!-- Bcc -->
<mat-form-field *ngIf="copyFields.bcc">
<mat-label>Bcc</mat-label>
<input matInput [formControlName]="'bcc'" />
<mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
예금주는 필수 입력입니다.
</mat-error>
<mat-form-field>
<mat-label>계좌번호</mat-label>
<input matInput [formControlName]="'account'" />
</mat-form-field>
<mat-error *ngIf="composeForm.get('account')?.hasError('required')">
계좌번호는 필수 입력입니다.
</mat-error>
<mat-form-field>
<mat-label>보유금액</mat-label>
<input matInput [formControlName]="'holdingMoney'" />
</mat-form-field>
<!-- Subject -->
<mat-form-field>
<mat-label>Subject</mat-label>
<input matInput [formControlName]="'subject'" />
<mat-label>출금금액</mat-label>
<input #inputAmount matInput [formControlName]="'amount'" value="" placeholder="최소출금 50,000원 부터" />
<mat-error *ngIf="composeForm.get('amount')?.hasError('required')">
출금금액은 필수 입력입니다.
</mat-error>
</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>
<div class="flex flex-wrap w-full -m-2">
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="__changeAmount('50000')"
>
5만
</button>
<!-- Insert link -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:link'"
></mat-icon>
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="__changeAmount('100000')"
>
10만
</button>
<!-- Insert emoji -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:emoji-happy'"
></mat-icon>
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="__changeAmount('500000')"
>
50만
</button>
<!-- Insert image -->
<button mat-icon-button>
<mat-icon
class="icon-size-5"
[svgIcon]="'heroicons_solid:photograph'"
></mat-icon>
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="__changeAmount('1000000')"
>
100만
</button>
<button
class="m-2"
mat-stroked-button
[color]="'primary'"
(click)="__changeAmount('0')"
>
정정하기
</button>
</div>
</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>
<mat-form-field>
<mat-label>출금비밀번호</mat-label>
<input #inputAmount matInput />
<mat-error *ngIf="composeForm.get('amount')?.hasError('required')">
출금비밀번호는 필수 입력입니다.
</mat-error>
</mat-form-field>
<div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
<div class="flex mt-4 sm:mt-0">
<!-- Save as draft -->
<button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
<span>Save as draft</span>
</button>
<!-- <button class="sm:mx-3" mat-stroked-button (click)="__contactDeposit()">
<span>입금계좌문의</span>
</button> -->
<!-- Send -->
<button
class="order-first sm:order-last"
@ -115,7 +140,7 @@
[color]="'primary'"
(click)="send()"
>
Send
출금하기
</button>
</div>
</div>

View File

@ -1,6 +1,9 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { FuseAlertType } from '@fuse/components/alert';
import { MemberBankWithdrawService } from 'app/modules/polyglot/member_bank_withdraw/services/member_bank_withdraw.service';
import { CreateMemberBankWithdrawRequest } from 'app/modules/proto/c2se/member_bank_withdraw_pb';
@Component({
selector: 'withdraw-compose',
@ -9,24 +12,18 @@ import { MatDialogRef } from '@angular/material/dialog';
})
export class WithdrawComposeComponent implements OnInit {
composeForm!: FormGroup;
copyFields: { cc: boolean; bcc: boolean } = {
cc: false,
bcc: false,
alert: { type: FuseAlertType; message: string } = {
type: 'success',
message: '출금신청이 완료 되었습니다.',
};
quillModules: any = {
toolbar: [
['bold', 'italic', 'underline'],
[{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
['clean'],
],
};
showAlert: boolean = false;
/**
* Constructor
*/
constructor(
public matDialogRef: MatDialogRef<WithdrawComposeComponent>,
private _formBuilder: FormBuilder
private _formBuilder: FormBuilder,
private _memberBankWithdrawService: MemberBankWithdrawService
) {}
// -----------------------------------------------------------------------------------------------------
@ -39,11 +36,8 @@ export class WithdrawComposeComponent implements OnInit {
ngOnInit(): void {
// Create the form
this.composeForm = this._formBuilder.group({
to: ['', [Validators.required, Validators.email]],
cc: ['', [Validators.email]],
bcc: ['', [Validators.email]],
subject: [''],
body: ['', [Validators.required]],
accountHolder: ['', [Validators.required]],
amount: ['', [Validators.required]],
});
}
@ -51,21 +45,6 @@ export class WithdrawComposeComponent implements OnInit {
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Show the copy field with the given field name
*
* @param name
*/
showCopyField(name: string): void {
// Return if the name is not one of the available names
if (name !== 'cc' && name !== 'bcc') {
return;
}
// Show the field
this.copyFields[name] = true;
}
/**
* Save and close
*/
@ -90,5 +69,51 @@ export class WithdrawComposeComponent implements OnInit {
/**
* Send the message
*/
send(): void {}
send(): void {
if (!this.composeForm.valid) {
return;
}
this.composeForm?.disable();
const req = new CreateMemberBankWithdrawRequest();
const amount = this.composeForm.get('amount')?.value as number;
const holder = this.composeForm.get('accountHolder')?.value as string;
req.setAmount(amount);
req.setName(holder);
req.setMemo('test');
this._memberBankWithdrawService
.createMemberBankWithdraw(
// req - 에러나서 지워둠. 이담
)
.then(() => {
console.log();
this.showAlert = true;
})
.catch((e) => {
this.showAlert = true;
this.alert = { type: 'error', message: '출금신청이 실패 하였습니다.' };
// Re-enable the form
this.composeForm?.enable();
// Reset the form
})
.finally(() =>
setTimeout(() => {
this.matDialogRef.close();
}, 2000)
);
// req.set
}
__changeAmount(amount: string): void {
const amountInput = this.composeForm.get('amount');
if (amount === '0') {
amountInput?.setValue('');
return;
}
amountInput?.setValue(amount);
}
}