충전내역 연동 완료

src/app/modules/admin/bank/deposit/resolvers/deposit.resolver.ts

@@ -6,7 +6,7 @@ import {
   RouterStateSnapshot,
 } from '@angular/router';
 import { MemberBankDepositService } from 'app/modules/polyglot/member_bank_deposit/services/member_bank_deposit.service';
-import { ListMemberBankDepositsResponse } from 'app/modules/proto/c2se/member_bank_deposit_pb';
+import { ListMemberBankDepositsRequest, ListMemberBankDepositsResponse } from 'app/modules/proto/c2se/member_bank_deposit_pb';
 import { catchError, Observable, throwError } from 'rxjs';
 
 import { Deposit } from '../models/deposit';
@@ -114,6 +114,7 @@ export class BankDepositResolver implements Resolve<any> {
     | Observable<ListMemberBankDepositsResponse.Result>
     | Promise<ListMemberBankDepositsResponse.Result>
     | ListMemberBankDepositsResponse.Result {
-    return this._bankDepositService.listMemberBankDeposits();
+      const req = new ListMemberBankDepositsRequest();
+    return this._bankDepositService.listMemberBankDeposits(req);
   }
 }

src/app/modules/admin/member/user/components/deposit-history.component.html

@@ -52,57 +52,70 @@
               </button>
             </div>
           </div>
-          <div class="flex flex-col flex-auto mt-2">
+          <ng-container
-            <table
+            *ngIf="depositHistoryDataSource.data.length > 0; else noDeposit"
-              class="overflow-y-visible"
+          >
-              mat-table
+            <div class="flex flex-col flex-auto mt-2">
-              [dataSource]="depositHistoryDataSource"
+              <table
+                class="overflow-y-visible"
+                mat-table
+                [dataSource]="depositHistoryDataSource"
+              >
+                <!-- Total -->
+                <ng-container matColumnDef="no">
+                  <th mat-header-cell *matHeaderCellDef>번호</th>
+                  <td mat-cell *matCellDef="let info; let idx = index">
+                    <span class="font-medium text-right">
+                      {{ idx + 1 }}
+                    </span>
+                  </td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="amount">
+                  <th mat-header-cell *matHeaderCellDef>충전금액</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getAmount() }}
+                  </td>
+                </ng-container>
+
+                <!-- Expenses amount -->
+                <ng-container matColumnDef="createAt">
+                  <th mat-header-cell *matHeaderCellDef>신청일자</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ info.getCreatedAt() | date: "MMM dd, h:mm a" }}
+                  </td>
+                </ng-container>
+
+                <ng-container matColumnDef="state">
+                  <th mat-header-cell *matHeaderCellDef>결과</th>
+                  <td mat-cell *matCellDef="let info">
+                    {{ __getDepositState(info) }}
+                  </td>
+                </ng-container>
+
+                <tr
+                  mat-header-row
+                  *matHeaderRowDef="depositHistoryTableColumns"
+                ></tr>
+                <tr
+                  mat-row
+                  *matRowDef="let row; columns: depositHistoryTableColumns"
+                ></tr>
+              </table>
+              <mat-paginator
+                [pageSizeOptions]="[5, 10, 25, 100]"
+                aria-label="Select page of users"
+              ></mat-paginator>
+            </div>
+          </ng-container>
+          <ng-template #noDeposit>
+            <div
+              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
             >
-              <!-- Total -->
+              There are no data!
-              <ng-container matColumnDef="no">
+            </div>
-                <th mat-header-cell *matHeaderCellDef>번호</th>
+          </ng-template>
-                <td mat-cell *matCellDef="let info; let idx = index">
-                  <span class="font-medium text-right">
-                    {{ idx + 1 }}
-                  </span>
-                </td>
-              </ng-container>
-
-              <!-- Expenses amount -->
-              <ng-container matColumnDef="amount">
-                <th mat-header-cell *matHeaderCellDef>충전금액</th>
-                <td mat-cell *matCellDef="let info">{{ info.amount }}</td>
-              </ng-container>
-
-              <!-- Expenses amount -->
-              <ng-container matColumnDef="createAt">
-                <th mat-header-cell *matHeaderCellDef>신청일자</th>
-                <td mat-cell *matCellDef="let info">
-                  {{ info.createAt }}
-                </td>
-              </ng-container>
-
-              <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef>결과</th>
-                <td mat-cell *matCellDef="let info">
-                  {{ info.state }}
-                </td>
-              </ng-container>
-
-              <tr
-                mat-header-row
-                *matHeaderRowDef="depositHistoryTableColumns"
-              ></tr>
-              <tr
-                mat-row
-                *matRowDef="let row; columns: depositHistoryTableColumns"
-              ></tr>
-            </table>
-            <mat-paginator
-              [pageSizeOptions]="[5, 10, 25, 100]"
-              aria-label="Select page of users"
-            ></mat-paginator>
-          </div>
         </div>
       </div>
     </div>

src/app/modules/admin/member/user/components/deposit-history.component.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  Input,
   OnDestroy,
   OnInit,
   ViewChild,
@@ -11,6 +12,13 @@ import {
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { fuseAnimations } from '@fuse/animations';
+import { MemberBankDepositService } from 'app/modules/polyglot/member_bank_deposit/services/member_bank_deposit.service';
+import { ListMemberBankDepositsRequest } from 'app/modules/proto/c2se/member_bank_deposit_pb';
+import {
+  MemberBankDepositModel,
+  MemberBankDepositState,
+} from 'app/modules/proto/models/member_bank_deposit_pb';
+import { MemberModel } from 'app/modules/proto/models/member_pb';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -43,20 +51,26 @@ import { Subject } from 'rxjs';
 export class DepositHistoryComponent
   implements OnInit, AfterViewInit, OnDestroy
 {
+  @Input()
+  member!: MemberModel | undefined;
+
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   depositHistoryTableColumns: string[] = ['no', 'amount', 'createAt', 'state'];
 
-  depositHistoryDataSource: MatTableDataSource<TempDeposit> =
+  depositHistoryDataSource: MatTableDataSource<MemberBankDepositModel> =
     new MatTableDataSource();
 
   /**
    * Constructor
    */
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {
+  constructor(
-    this.depositHistoryDataSource.data = DEPOSIT_HISTORY_DATA;
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _memberBankDepositService: MemberBankDepositService
+  ) {
+    /* this.depositHistoryDataSource.data = DEPOSIT_HISTORY_DATA; */
   }
 
   // -----------------------------------------------------------------------------------------------------
@@ -66,7 +80,22 @@ export class DepositHistoryComponent
   /**
    * On init
    */
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    const req = new ListMemberBankDepositsRequest();
+    req.setSearch();
+    const search = new ListMemberBankDepositsRequest.Search();
+    search.setMemberId(this.member!.getId());
+    req.setSearch(search);
+
+    this._memberBankDepositService
+      .listMemberBankDeposits(req)
+      .then((result) => {
+        const memberBankDepositList = result.getMemberBankDepositsList();
+        this.depositHistoryDataSource.data = memberBankDepositList;
+
+        this._changeDetectorRef.markForCheck();
+      });
+  }
 
   /**
    * After view init
@@ -111,21 +140,25 @@ export class DepositHistoryComponent
   __trackByFn(index: number, item: any): any {
     return item.id || index;
   }
-}
 
-export interface TempDeposit {
+  __getDepositState(deposit: MemberBankDepositModel): string | undefined {
-  amount: string;
+    const state = deposit.getState();
-  createAt: string;
+    let result: string = '';
-  state: string;
-}
 
-const DEPOSIT_HISTORY_DATA: TempDeposit[] = [
+    switch (state) {
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+      case MemberBankDepositState.APPLICATION:
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+        result = '신청';
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+        break;
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+      case MemberBankDepositState.PENDING:
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+        result = '대기';
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+        break;
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+      case MemberBankDepositState.COMPLETE:
-  { amount: '100,000', createAt: '2022-08-20 12:40', state: '완료' },
+        result = '완료';
-];
+        break;
+      default:
+        break;
+    }
+
+    return result;
+  }
+}

src/app/modules/admin/member/user/components/view.component.html

@@ -655,7 +655,9 @@
                         <mat-tab-group [animationDuration]="'0ms'">
                           <mat-tab label="충전내역" class="bg-gray-200">
                             <ng-template matTabContent>
-                              <deposit-history></deposit-history>
+                              <deposit-history
+                                [member]="currentMember"
+                              ></deposit-history>
                             </ng-template>
                           </mat-tab>
 

src/app/modules/admin/member/user/components/view.component.ts

@@ -198,7 +198,7 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
       coupon: [''],
       recommender: [{ value: '', disabled: true }],
       siteUrl: [''],
-      recommendCount: [''],
+      recommendCount: [{ value: 0, disabled: true }],
       hodingGameMoney: [{ value: '0', disabled: true }],
     });
 
@@ -333,6 +333,9 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
         state: this.currentMember?.getState(),
         nickname: this.currentMember?.getNickname(),
         siteUrl: this.currentMember?.getSite()?.getUrl(),
+        recommender: this.currentMember?.getParentMember()?.getUsername(),
+        recommendCount: this.currentMember?.getChildMemberCount(),
+        ownCash: 0,
       });
 
       this.memberBankForm.patchValue({

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

@@ -67,11 +67,11 @@ export class MemberBankDepositService {
     );
   }
 
-  listMemberBankDeposits(): Promise<ListMemberBankDepositsResponse.Result> {
+  listMemberBankDeposits(
+    req: ListMemberBankDepositsRequest
+  ): Promise<ListMemberBankDepositsResponse.Result> {
     return new Promise<ListMemberBankDepositsResponse.Result>(
       (resolve, reject) => {
-        let req = new ListMemberBankDepositsRequest();
-
         this.__natsService
           .request<ListMemberBankDepositsResponse.Result>(
             SUBJECT_LIST_MEMBER_BANK_DEPOSITS,