simplify the output interface further

Aam-Digital · Nov 6, 2023 · 96046bc · 96046bc
1 parent b223d64
commit 96046bc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git a/.../core/common-components/entity-subrecord/entity-subrecord/entity-subrecord.component.html b/.../core/common-components/entity-subrecord/entity-subrecord/entity-subrecord.component.html
@@ -10,11 +10,9 @@
     class="full-width table"
   >
     <ng-container matColumnDef="select">
-      <th mat-header-cell *matHeaderCellDef>
-        Select
-      </th>
+      <th mat-header-cell *matHeaderCellDef>Select</th>
       <td mat-cell *matCellDef="let row">
-        <mat-checkbox (change)="selectRow(row)"></mat-checkbox>
+        <mat-checkbox (change)="selectRow(row, $event)"></mat-checkbox>
       </td>
     </ng-container>
 
@@ -136,7 +134,10 @@
         </div>
       </td>
     </ng-container>
-    <tr mat-header-row *matHeaderRowDef="columnsToDisplay.concat('select')"></tr>
+    <tr
+      mat-header-row
+      *matHeaderRowDef="columnsToDisplay.concat('select')"
+    ></tr>
     <tr
       mat-row
       *matRowDef="let row; columns: columnsToDisplay.concat('select')"

diff --git a/...pp/core/common-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts b/...pp/core/common-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts
@@ -50,7 +50,10 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { DisableEntityOperationDirective } from "../../../permissions/permission-directive/disable-entity-operation.directive";
 import { Angulartics2Module } from "angulartics2";
 import { ListPaginatorComponent } from "../list-paginator/list-paginator.component";
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+  MatCheckboxChange,
+  MatCheckboxModule,
+} from "@angular/material/checkbox";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 
 export interface TableRow<T extends Entity> {
@@ -98,9 +101,10 @@ export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
   @Input() isLoading: boolean;
 
   @Input() clickMode: "popup" | "navigate" | "none" = "popup";
-  
+
   /** outputs an event containing an array of currently selected records (checkmarked by the user) */
-  @Output() selectedRecords: EventEmitter<T[] > = new EventEmitter<T[]>
+  @Output() selectedRecordsChange: EventEmitter<T[]> = new EventEmitter<T[]>();
+  selectedRecords: T[] = [];
 
   @Input() showInactive = false;
   @Output() showInactiveChange = new EventEmitter<boolean>();
@@ -485,8 +489,17 @@ export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
     return this.screenWidthObserver.currentScreenSize() >= numericValue;
   }
 
-  selectRow (row: T[]) {
-    this.selectedRecords.emit(row);
+  selectRow(row: TableRow<T>, event: MatCheckboxChange) {
+    if (event.checked) {
+      this.selectedRecords.push(row.record);
+    } else {
+      const index = this.selectedRecords.indexOf(row.record);
+      if (index > -1) {
+        this.selectedRecords.splice(index, 1);
+      }
+    }
+
+    this.selectedRecordsChange.emit(this.selectedRecords);
   }
 
   filterActiveInactive() {

diff --git a/src/app/core/entity-list/entity-list/entity-list.component.html b/src/app/core/entity-list/entity-list/entity-list.component.html
@@ -128,7 +128,7 @@ <h2>{{ listName }}</h2>
     [isLoading]="isLoading"
     [filter]="filterObj"
     [defaultSort]="listConfig?.defaultSort"
-    (selectedRecords)="setSelectedRows($event)"
+    (selectedRecordsChange)="selectedRows = $event"
     [showInactive]="showInactive"
   ></app-entity-subrecord>
 </ng-template>
@@ -202,12 +202,14 @@ <h2>{{ listName }}</h2>
     ></fa-icon>
     <span i18n> Import from file </span>
   </button>
-  
+
   <button
     mat-menu-item
     (click)="duplicateRecords()"
     [disabled]="selectedRows.length === 0"
-    matTooltip="Please select rows" [matTooltipDisabled]="selectedRows.length > 0" i18n-matTooltip
+    matTooltip="Please select rows"
+    [matTooltipDisabled]="selectedRows.length > 0"
+    i18n-matTooltip
   >
     <fa-icon
       class="color-accent standard-icon-with-text"

diff --git a/src/app/core/entity-list/entity-list/entity-list.component.ts b/src/app/core/entity-list/entity-list/entity-list.component.ts
@@ -102,7 +102,7 @@ export class EntityListComponent<T extends Entity>
 
   @Output() elementClick = new EventEmitter<T>();
   @Output() addNewClick = new EventEmitter();
-  @Input() selectedRows : T[] = [];
+  selectedRows: T[] = [];
 
   @ViewChild(EntitySubrecordComponent) entityTable: EntitySubrecordComponent<T>;
 
@@ -152,7 +152,7 @@ export class EntityListComponent<T extends Entity>
     private entityMapperService: EntityMapperService,
     private entities: EntityRegistry,
     private dialog: MatDialog,
-    private  duplicateRecord: DuplicateRecordService,
+    private duplicateRecord: DuplicateRecordService,
   ) {
     if (this.activatedRoute.component === EntityListComponent) {
       // the component is used for a route and not inside a template
@@ -308,17 +308,8 @@ export class EntityListComponent<T extends Entity>
     this.addNewClick.emit();
   }
 
-  setSelectedRows(data: any) {
-    const index = this.selectedRows.findIndex((item) => item === data.record);
-    if (index > -1) {
-      this.selectedRows.splice(index, 1);
-    } else {
-      this.selectedRows.push(data.record);
-    }
-  }
-
   duplicateRecords() {
     this.duplicateRecord.duplicateRecord(this.selectedRows);
-    this.selectedRows = []; 
+    this.selectedRows = [];
   }
 }