충전내역 연동 완료

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,6 +52,9 @@
               </button>
             </div>
           </div>
+          <ng-container
+            *ngIf="depositHistoryDataSource.data.length > 0; else noDeposit"
+          >
             <div class="flex flex-col flex-auto mt-2">
               <table
                 class="overflow-y-visible"
@@ -71,21 +74,23 @@
                 <!-- Expenses amount -->
                 <ng-container matColumnDef="amount">
                   <th mat-header-cell *matHeaderCellDef>충전금액</th>
-                <td mat-cell *matCellDef="let info">{{ info.amount }}</td>
+                  <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.createAt }}
+                    {{ 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">
-                  {{ info.state }}
+                    {{ __getDepositState(info) }}
                   </td>
                 </ng-container>
 
@@ -103,6 +108,14 @@
                 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"
+            >
+              There are no data!
+            </div>
+          </ng-template>
         </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,