bug fix

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,

src/app/modules/beteran/compose/compose/message-compose.component.html

@@ -11,11 +11,9 @@
       ></mat-icon>
     </button>
   </div>
-  <form
-    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
-    [formGroup]="composeForm"
-  >
-    <mat-table
+
+  <table
+    mat-table
     [dataSource]="dataSource"
     multiTemplateDataRows
     class="mat-elevation-z8"
@@ -23,6 +21,79 @@
     <ng-container
       matColumnDef="{{ column }}"
       *ngFor="let column of columnsToDisplay"
+    >
+      <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"
       >
         <mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
         <mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
@@ -53,8 +124,8 @@
         *matRowDef="let row; columns: ['expandedDetail']"
         class="example-detail-row"
         style="min-height: 0"
-      ></mat-row>
-    </mat-table>
+      ></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 -->
@@ -71,5 +142,4 @@
       </button>
     </div>
   </div>
-  </form>
 </div>

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;
+}

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 {