From babc00d88a34b17f6519a837a3278cb19782663a Mon Sep 17 00:00:00 2001
From: JUNG YI DAM <breeze@loafle.com>
Date: Tue, 27 Sep 2022 04:39:36 +0000
Subject: [PATCH] =?UTF-8?q?=EC=9E=85=EA=B8=88=EB=82=B4=EC=97=AD,=20?=
 =?UTF-8?q?=EC=B6=9C=EA=B8=88=EB=82=B4=EC=97=AD=20=ED=99=94=EB=A9=B4?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deposit-history-compose.component.html    | 142 +++++-------------
 .../deposit-history-compose.component.ts      |  34 +++++
 .../withdraw-history-compose.component.html   | 142 +++++-------------
 .../withdraw-history-compose.component.ts     |  34 +++++
 4 files changed, 144 insertions(+), 208 deletions(-)

diff --git a/src/app/modules/beteran/compose/compose/deposit-history-compose.component.html b/src/app/modules/beteran/compose/compose/deposit-history-compose.component.html
index 9a8f338..30180ae 100644
--- a/src/app/modules/beteran/compose/compose/deposit-history-compose.component.html
+++ b/src/app/modules/beteran/compose/compose/deposit-history-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 History</div>
+    <div class="text-lg font-medium">입금내역</div>
     <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
       <mat-icon
         class="text-current"
@@ -11,113 +11,47 @@
       ></mat-icon>
     </button>
   </div>
-
-  <!-- Compose form -->
   <form
     class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
     [formGroup]="composeForm"
   >
-    <!-- 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>
+    <ng-container *ngIf="depositHistory">
+      <ng-container *ngIf="depositHistory.length > 0; else noDepositHistory">
+        <div class="grid">
+          <div
+            class="deposit-history-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
+            style="font-size: x-small"
+          >
+            <div>상태</div>
+            <div>충전금액</div>
+            <div>처리날짜</div>
+            <div>신청날짜</div>
+          </div>
+          <ng-container *ngIf="depositHistory">
+            <ng-container
+              *ngFor="let info of depositHistory; trackBy: __trackByFn"
+            >
+              <div
+                class="deposit-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                style="font-size: small"
+              >
+                <div>{{ info.state }}</div>
+                <div>{{ info.chargeMoney }}</div>
+                <div>{{ info.processDate }}</div>
+                <div>{{ info.applicationDate }}</div>
+              </div>
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <ng-template #noDepositHistory>
+      <div
+        class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+      >
+        There are no data!
       </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-form-field>
-
-    <!-- Subject -->
-    <mat-form-field>
-      <mat-label>Subject</mat-label>
-      <input matInput [formControlName]="'subject'" />
-    </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>
-        <!-- Send -->
-        <button
-          class="order-first sm:order-last"
-          mat-flat-button
-          [color]="'primary'"
-          (click)="send()"
-        >
-          Send
-        </button>
-      </div>
-    </div>
+    </ng-template>
   </form>
 </div>
diff --git a/src/app/modules/beteran/compose/compose/deposit-history-compose.component.ts b/src/app/modules/beteran/compose/compose/deposit-history-compose.component.ts
index 380d329..1fb83a5 100644
--- a/src/app/modules/beteran/compose/compose/deposit-history-compose.component.ts
+++ b/src/app/modules/beteran/compose/compose/deposit-history-compose.component.ts
@@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'deposit-history-compose',
   templateUrl: './deposit-history-compose.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .deposit-history-grid {
+        /*                      상태   충전  처리  신청 */
+        grid-template-columns: 150px 150px 150px 150px;
+      }
+    `,
+  ],
   encapsulation: ViewEncapsulation.None,
 })
 export class DepositHistoryComposeComponent implements OnInit {
@@ -29,6 +38,21 @@ export class DepositHistoryComposeComponent implements OnInit {
     private _formBuilder: FormBuilder
   ) {}
 
+  depositHistory = [
+    {
+      state: 'ㄷㄱㄹㅇ',
+      chargeMoney: 123000,
+      processDate: '2022.08.23',
+      applicationDate: '2022.08.23',
+    },
+    {
+      state: 'ㄷㄱㄹㅇ',
+      chargeMoney: 123000,
+      processDate: '2022.08.23',
+      applicationDate: '2022.08.23',
+    },
+  ];
+
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
   // -----------------------------------------------------------------------------------------------------
@@ -91,4 +115,14 @@ export class DepositHistoryComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  __trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
 }
diff --git a/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.html b/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.html
index 5eb6d19..eeea97f 100644
--- a/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.html
+++ b/src/app/modules/beteran/compose/compose/withdraw-history-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 History</div>
+    <div class="text-lg font-medium">출금내역</div>
     <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
       <mat-icon
         class="text-current"
@@ -11,113 +11,47 @@
       ></mat-icon>
     </button>
   </div>
-
-  <!-- Compose form -->
   <form
     class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
     [formGroup]="composeForm"
   >
-    <!-- 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>
+    <ng-container *ngIf="withdrawHistory">
+      <ng-container *ngIf="withdrawHistory.length > 0; else noWithdrawHistory">
+        <div class="grid">
+          <div
+            class="withdraw-history-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
+            style="font-size: x-small"
+          >
+            <div>상태</div>
+            <div>환전금액</div>
+            <div>처리날짜</div>
+            <div>신청날짜</div>
+          </div>
+          <ng-container *ngIf="withdrawHistory">
+            <ng-container
+              *ngFor="let info of withdrawHistory; trackBy: __trackByFn"
+            >
+              <div
+                class="withdraw-history-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                style="font-size: small"
+              >
+                <div>{{ info.state }}</div>
+                <div>{{ info.exchangeMoney }}</div>
+                <div>{{ info.processDate }}</div>
+                <div>{{ info.applicationDate }}</div>
+              </div>
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <ng-template #noWithdrawHistory>
+      <div
+        class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+      >
+        There are no data!
       </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-form-field>
-
-    <!-- Subject -->
-    <mat-form-field>
-      <mat-label>Subject</mat-label>
-      <input matInput [formControlName]="'subject'" />
-    </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>
-        <!-- Send -->
-        <button
-          class="order-first sm:order-last"
-          mat-flat-button
-          [color]="'primary'"
-          (click)="send()"
-        >
-          Send
-        </button>
-      </div>
-    </div>
+    </ng-template>
   </form>
 </div>
diff --git a/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.ts b/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.ts
index 31e50d7..e8edbbd 100644
--- a/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.ts
+++ b/src/app/modules/beteran/compose/compose/withdraw-history-compose.component.ts
@@ -5,6 +5,15 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
   selector: 'withdraw-history-compose',
   templateUrl: './withdraw-history-compose.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .withdraw-history-grid {
+        /*                      상태   충전  처리  신청 */
+        grid-template-columns: 150px 150px 150px 150px;
+      }
+    `,
+  ],
   encapsulation: ViewEncapsulation.None,
 })
 export class WithdrawHistoryComposeComponent implements OnInit {
@@ -29,6 +38,21 @@ export class WithdrawHistoryComposeComponent implements OnInit {
     private _formBuilder: FormBuilder
   ) {}
 
+  withdrawHistory = [
+    {
+      state: 'ㄷㄱㄹㅇ',
+      exchangeMoney: 123000,
+      processDate: '2022.08.23',
+      applicationDate: '2022.08.23',
+    },
+    {
+      state: 'ㄷㄱㄹㅇ',
+      exchangeMoney: 123000,
+      processDate: '2022.08.23',
+      applicationDate: '2022.08.23',
+    },
+  ];
+
   // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
   // -----------------------------------------------------------------------------------------------------
@@ -91,4 +115,14 @@ export class WithdrawHistoryComposeComponent implements OnInit {
    * Send the message
    */
   send(): void {}
+
+  /**
+   * Track by function for ngFor loops
+   *
+   * @param index
+   * @param item
+   */
+  __trackByFn(index: number, item: any): any {
+    return item.id || index;
+  }
 }