bug fix

2022-10-06 06:27:15 +00:00 · 2022-10-06 06:27:15 +00:00 · 18ee6b6209
commit 18ee6b6209
parent 7a6c648da8
4 changed files with 180 additions and 36 deletions
--- a/src/app/modules/beteran/compose/compose.module.ts
+++ b/src/app/modules/beteran/compose/compose.module.ts
@ -10,6 +10,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTableModule } from '@angular/material/table';
+import { MatCheckboxModule } from '@angular/material/checkbox';

 import { FuseCardModule } from '@fuse/components/card';
 import { SharedModule } from 'app/shared/shared.module';
@ -32,6 +33,7 @@ import { COMPOSE } from './compose';
    MatButtonToggleModule,
    MatExpansionModule,
    MatTableModule,
+    MatCheckboxModule,

    FuseCardModule,
    SharedModule,
--- a/src/app/modules/beteran/compose/compose/message-compose.component.html
+++ b/src/app/modules/beteran/compose/compose/message-compose.component.html
@ -11,16 +11,87 @@
      ></mat-icon>
    </button>
  </div>
-  <form
-    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
-    [formGroup]="composeForm"
+
+  <table
+    mat-table
+    [dataSource]="dataSource"
+    multiTemplateDataRows
+    class="mat-elevation-z8"
  >
-    <mat-table
-      [dataSource]="dataSource"
-      multiTemplateDataRows
-      class="mat-elevation-z8"
+    <ng-container
+      matColumnDef="{{ column }}"
+      *ngFor="let column of columnsToDisplay"
    >
-      <ng-container
+      <ng-container *ngIf="column === 'select'; else notSelect">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+            [aria-label]="checkboxLabel()"
+          >
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row; let idx = index">
+          <mat-checkbox
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+            [aria-label]="checkboxLabel(row, idx)"
+          >
+          </mat-checkbox>
+        </td>
+      </ng-container>
+      <ng-template #notSelect>
+        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
+        <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
+      </ng-template>
+    </ng-container>
+
+    <!-- Expanded Content Column -->
+    <ng-container matColumnDef="expandedDetail">
+      <td
+        mat-cell
+        *matCellDef="let element"
+        [attr.colspan]="columnsToDisplay.length"
+      >
+        <div
+          class="example-element-detail"
+          [@detailExpand]="
+            element == expandedElement ? 'expanded' : 'collapsed'
+          "
+        >
+          <!-- <div class="example-element-diagram">
+            <div class="example-element-position">{{ element.state }}</div>
+            <div class="example-element-symbol">{{ element.content }}</div>
+            <div class="example-element-name">{{ element.delete }}</div>
+            <div class="example-element-weight">
+              {{ element.applicationDate }}
+            </div>
+          </div> -->
+
+          <div class="example-element-description">
+            {{ element.description }}
+            <!-- <span class="example-element-description-attribution"> -- Wikipedia </span> -->
+          </div>
+        </div>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr
+      mat-row
+      *matRowDef="let element; columns: columnsToDisplay"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedElement === element"
+      (click)="expandedElement = expandedElement === element ? null : element"
+    ></tr>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: ['expandedDetail']"
+      class="example-detail-row"
+    ></tr>
+    <!-- <ng-container
        matColumnDef="{{ column }}"
        *ngFor="let column of columnsToDisplay"
      >
@ -53,23 +124,22 @@
        *matRowDef="let row; columns: ['expandedDetail']"
        class="example-detail-row"
        style="min-height: 0"
-      ></mat-row>
-    </mat-table>
-    <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>
-          <span>전체읽음처리</span>
-        </button>
-        <!-- Send -->
-        <button
-          class="order-first sm:order-last"
-          mat-flat-button
-          [color]="'primary'"
-        >
-          전체삭제처리
-        </button>
-      </div>
+      ></mat-row> -->
+  </table>
+  <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>
+        <span>전체읽음처리</span>
+      </button>
+      <!-- Send -->
+      <button
+        class="order-first sm:order-last"
+        mat-flat-button
+        [color]="'primary'"
+      >
+        전체삭제처리
+      </button>
    </div>
-  </form>
+  </div>
 </div>
--- a/src/app/modules/beteran/compose/compose/message-compose.component.scss
+++ b/src/app/modules/beteran/compose/compose/message-compose.component.scss
@ -0,0 +1,47 @@
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #777;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.example-element-diagram {
+  min-width: 80px;
+  border: 2px solid black;
+  padding: 8px;
+  font-weight: lighter;
+  margin: 8px 0;
+  height: 104px;
+}
+
+.example-element-symbol {
+  font-weight: bold;
+  font-size: 40px;
+  line-height: normal;
+}
+
+.example-element-description {
+  padding: 16px;
+}
+
+.example-element-description-attribution {
+  opacity: 0.5;
+}
--- a/src/app/modules/beteran/compose/compose/message-compose.component.ts
+++ b/src/app/modules/beteran/compose/compose/message-compose.component.ts
@ -5,19 +5,22 @@ import {
  transition,
  animate,
 } from '@angular/animations';
+import { SelectionModel } from '@angular/cdk/collections';
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
 import { CustomerRegistrationComposeComponent } from './customer-registration-compose.component';

@Component({
  selector: 'message-compose',
+  styleUrls: ['./message-compose.component.scss'],
  templateUrl: './message-compose.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
-      state('expanded', style({ height: '*', minHeight: '50px' })),
+      state('expanded', style({ height: '*' })),
      transition(
        'expanded <=> collapsed',
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
@ -26,11 +29,17 @@ import { CustomerRegistrationComposeComponent } from './customer-registration-co
  ],
 })
 export class MessageComposeComponent implements OnInit {
-  composeForm!: FormGroup;
-
-  dataSource = ELEMENT_DATA;
-  columnsToDisplay = ['state', 'content', 'delete', 'applicationDate'];
-  expandedElement: PeriodicElement | null | undefined;
+  selection = new SelectionModel<PeriodicElement>(true, []);
+  selectColumnName: string = 'select';
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  columnsToDisplay = [
+    this.selectColumnName,
+    'state',
+    'content',
+    'delete',
+    'applicationDate',
+  ];
+  expandedElement!: PeriodicElement | null;

  /**
   * Constructor
@ -50,10 +59,6 @@ export class MessageComposeComponent implements OnInit {
   */
  ngOnInit(): void {
    // Create the form
-    this.composeForm = this._formBuilder.group({
-      accountHolder: ['', [Validators.required]],
-      amount: ['', [Validators.required]],
-    });
  }

  // -----------------------------------------------------------------------------------------------------
@ -85,6 +90,26 @@ export class MessageComposeComponent implements OnInit {
   * Send the message
   */
  send(): void {}
+
+  isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+  masterToggle(): void {
+    this.isAllSelected()
+      ? this.selection.clear()
+      : this.dataSource.data.forEach((row) => this.selection.select(row));
+  }
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: PeriodicElement, idx?: number): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${
+      this.selection.isSelected(row) ? 'deselect' : 'select'
+    } row ${idx}`;
+  }
 }

 export interface PeriodicElement {