입금신청 진행중

src/app/modules/beteran/compose/compose.module.ts

@@ -7,6 +7,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatInputModule } from '@angular/material/input';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 import { FuseCardModule } from '@fuse/components/card';
 import { SharedModule } from 'app/shared/shared.module';
@@ -26,6 +27,8 @@ import { COMPOSE } from './compose';
     MatInputModule,
     MatDialogModule,
     MatSelectModule,
+    MatButtonToggleModule,
+
     FuseCardModule,
     SharedModule,
 

src/app/modules/beteran/compose/compose/deposit-compose.component.html

@@ -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</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,94 +29,84 @@
   >
     <!-- 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-label>입금자명</mat-label>
+      <input matInput [formControlName]="'accountHolder'" />
     </mat-form-field>
+    <mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
+      입금자명은 필수 입력입니다.
+    </mat-error>
 
     <!-- Subject -->
     <mat-form-field>
-      <mat-label>Subject</mat-label>
-      <input matInput [formControlName]="'subject'" />
+      <mat-label>입금금액</mat-label>
+      <input #inputAmount matInput [formControlName]="'amount'" value="" />
+      <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('30000')"
+        >
+          3만
         </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('50000')"
+        >
+          5만
         </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('100000')"
+        >
+          10만
         </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('500000')"
+        >
+          50만
+        </button>
+        <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 class="flex items-center mt-4 sm:mt-0">
-        <!-- Discard -->
-        <button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
-          Discard
-        </button>
+    </div>
+    <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 class="sm:mx-3" mat-stroked-button (click)="__contactDeposit()">
+          <span>입금계좌문의</span>
         </button>
         <!-- Send -->
         <button
@@ -115,7 +115,7 @@
           [color]="'primary'"
           (click)="send()"
         >
-          Send
+          입금하기
         </button>
       </div>
     </div>

src/app/modules/beteran/compose/compose/deposit-compose.component.ts

@@ -1,32 +1,32 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseAlertType } from '@fuse/components/alert';
+import { MemberBankDepositService } from 'app/modules/polyglot/member_bank_deposit/services/member_bank_deposit.service';
+import { CreateMemberBankDepositRequest } from 'app/modules/proto/c2se/member_bank_deposit_pb';
 
 @Component({
   selector: 'deposit-compose',
   templateUrl: './deposit-compose.component.html',
   encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations,
 })
 export class DepositComposeComponent 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
    */
   constructor(
     public matDialogRef: MatDialogRef<DepositComposeComponent>,
-    private _formBuilder: FormBuilder
+    private _formBuilder: FormBuilder,
+    private _memberBankDepositService: MemberBankDepositService
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -39,11 +39,8 @@ export class DepositComposeComponent 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 +48,6 @@ export class DepositComposeComponent 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 +72,56 @@ export class DepositComposeComponent implements OnInit {
   /**
    * Send the message
    */
-  send(): void {}
+  send(): void {
+    if (!this.composeForm.valid) {
+      return;
+    }
+
+    this.composeForm?.disable();
+
+    const req = new CreateMemberBankDepositRequest();
+    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._memberBankDepositService
+      .createMemberBankDeposit(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
+      });
+    // req.set
+  }
+
+  __changeAmount(amount: string): void {
+    const amountInput = this.composeForm.get('amount');
+
+    if (amount === '0') {
+      amountInput?.setValue('');
+      return;
+    }
+    amountInput?.setValue(amount);
+  }
+
+  __contactDeposit(): void {
+    this.showAlert = true;
+    this.alert = {
+      type: 'success',
+      message: '입금 계좌문의가 전달되었습니다!',
+    };
+
+    setTimeout(() => {
+      this.showAlert = false;
+    }, 5000);
+  }
 }

src/app/modules/polyglot/member_bank_deposit/services/member_bank_deposit.service.ts

@@ -43,11 +43,11 @@ export class MemberBankDepositService {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  createMemberBankDeposit(): Promise<CreateMemberBankDepositResponse.Result> {
+  createMemberBankDeposit(
+    req: CreateMemberBankDepositRequest
+  ): Promise<CreateMemberBankDepositResponse.Result> {
     return new Promise<CreateMemberBankDepositResponse.Result>(
       (resolve, reject) => {
-        let req = new CreateMemberBankDepositRequest();
-
         this.__natsService
           .request<CreateMemberBankDepositResponse.Result>(
             SUBJECT_CREATE_MEMBER_BANK_DEPOSIT,