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

src/app/modules/beteran/compose/compose/comp-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">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>
+      <mat-label>닉네임</mat-label>
-      <input matInput [formControlName]="'to'" />
+      <input matInput [formControlName]="'accountHolder'" />
-      <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>
+    <mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
+      닉네임은 필수 입력입니다.
+    </mat-error>
 
-    <!-- Cc -->
+    <!-- Holding comp -->
-    <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>
+      <mat-label>보유콤프</mat-label>
-      <input matInput [formControlName]="'subject'" />
+      <input #inputAmount matInput [formControlName]="'amount'" value="" />
     </mat-form-field>
 
-    <!-- Body -->
+    <div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
-    <!-- <quill-editor
+      <div class="flex mt-4 sm:mt-0">
-      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"
@@ -115,7 +51,7 @@
           [color]="'primary'"
           (click)="send()"
         >
-          Send
+          콤프사용
         </button>
       </div>
     </div>

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

@@ -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 } = {
+  alert: { type: FuseAlertType; message: string } = {
-    cc: false,
+    type: 'success',
-    bcc: false,
+    message: '출금신청이 완료 되었습니다.',
-  };
-  quillModules: any = {
-    toolbar: [
-      ['bold', 'italic', 'underline'],
-      [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
-      ['clean'],
-    ],
   };
+  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
    */

src/app/modules/beteran/compose/compose/withdraw-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">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>
+      <mat-label>은행명</mat-label>
-      <input matInput [formControlName]="'to'" />
+      <mat-select
-      <div class="copy-fields-toggles" matSuffix>
+                      [formControlName]="'bankName'"
-        <span
+                      placeholder="은행 선택"
-          class="text-sm font-medium cursor-pointer select-none hover:underline"
+                    >
-          *ngIf="!copyFields.cc"
+                      <mat-option
-          (click)="showCopyField('cc')"
+                      >
-        >
+                        국민은행
-          Cc
+                        </mat-option>
-        </span>
+                        </mat-select>
-        <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>
-
+    <mat-error *ngIf="composeForm.get('bankName')?.hasError('required')">
-    <!-- Cc -->
+      은행명은 필수 입력입니다.
-    <mat-form-field *ngIf="copyFields.cc">
+    </mat-error>
-      <mat-label>Cc</mat-label>
+    <mat-form-field>
-      <input matInput [formControlName]="'cc'" />
+      <mat-label>예금주</mat-label>
+      <input matInput [formControlName]="'accountHolder'" />
     </mat-form-field>
-
+    <mat-error *ngIf="composeForm.get('accountHolder')?.hasError('required')">
-    <!-- Bcc -->
+      예금주는 필수 입력입니다.
-    <mat-form-field *ngIf="copyFields.bcc">
+    </mat-error>
-      <mat-label>Bcc</mat-label>
+    <mat-form-field>
-      <input matInput [formControlName]="'bcc'" />
+      <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>
+      <mat-label>출금금액</mat-label>
-      <input matInput [formControlName]="'subject'" />
+      <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">
+      <div class="flex flex-wrap w-full -m-2">
-        <!-- Attach file -->
+        <button
-        <button mat-icon-button>
+          class="m-2"
-          <mat-icon
+          mat-stroked-button
-            class="icon-size-5"
+          [color]="'primary'"
-            [svgIcon]="'heroicons_solid:paper-clip'"
+          (click)="__changeAmount('50000')"
-          ></mat-icon>
+        >
+          5만
         </button>
-        <!-- Insert link -->
+
-        <button mat-icon-button>
+        <button
-          <mat-icon
+          class="m-2"
-            class="icon-size-5"
+          mat-stroked-button
-            [svgIcon]="'heroicons_solid:link'"
+          [color]="'primary'"
-          ></mat-icon>
+          (click)="__changeAmount('100000')"
+        >
+          10만
         </button>
-        <!-- Insert emoji -->
+        <button
-        <button mat-icon-button>
+          class="m-2"
-          <mat-icon
+          mat-stroked-button
-            class="icon-size-5"
+          [color]="'primary'"
-            [svgIcon]="'heroicons_solid:emoji-happy'"
+          (click)="__changeAmount('500000')"
-          ></mat-icon>
+        >
+          50만
         </button>
-        <!-- Insert image -->
+        <button
-        <button mat-icon-button>
+          class="m-2"
-          <mat-icon
+          mat-stroked-button
-            class="icon-size-5"
+          [color]="'primary'"
-            [svgIcon]="'heroicons_solid:photograph'"
+          (click)="__changeAmount('1000000')"
-          ></mat-icon>
+        >
+          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">
+     <mat-form-field>
-        <!-- Discard -->
+      <mat-label>출금비밀번호</mat-label>
-        <button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
+      <input #inputAmount matInput  />
-          Discard
+      <mat-error *ngIf="composeForm.get('amount')?.hasError('required')">
-        </button>
+        출금비밀번호는 필수 입력입니다.
+      </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()">
+        <!-- <button class="sm:mx-3" mat-stroked-button (click)="__contactDeposit()">
-          <span>Save as draft</span>
+          <span>입금계좌문의</span>
-        </button>
+        </button> -->
         <!-- Send -->
         <button
           class="order-first sm:order-last"
@@ -115,7 +140,7 @@
           [color]="'primary'"
           (click)="send()"
         >
-          Send
+          출금하기
         </button>
       </div>
     </div>

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

@@ -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 } = {
+  alert: { type: FuseAlertType; message: string } = {
-    cc: false,
+    type: 'success',
-    bcc: false,
+    message: '출금신청이 완료 되었습니다.',
   };
-  quillModules: any = {
+  showAlert: boolean = false;
-    toolbar: [
-      ['bold', 'italic', 'underline'],
-      [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
-      ['clean'],
-    ],
-  };
-
   /**
    * 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]],
+     accountHolder: ['', [Validators.required]],
-      cc: ['', [Validators.email]],
+      amount: ['', [Validators.required]],
-      bcc: ['', [Validators.email]],
-      subject: [''],
-      body: ['', [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);
+  }
 }