Select all checkbox => done

src/app/search/components/output/output-by-category.component.html

-<p class="mb-3"><em>{{ category }}</em></p>
+<p class="mb-3"><em>{{ categoryLabel }}</em></p>
 <div class="selectbox py-1">
     <button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0">
         <div *ngIf="isAllSelected; then selected else unselected"></div>
@@ -6,7 +6,7 @@
         <span *ngIf="isAllSelected">Unselect All</span>
     </button>
     <hr class="my-1">
-    <button *ngFor="let attribute of attributes" class="btn btn-block text-left py-0 m-0"
+    <button *ngFor="let attribute of attributeList" class="btn btn-block text-left py-0 m-0"
         (click)="toggleSelection(attribute.id)">
         <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
         {{ attribute.form_label }}

src/app/search/components/output/output-by-category.component.ts

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
-import { Family, Category, Attribute } from '../../../metamodel/model';
+import { Attribute } from '../../../metamodel/model';
 
 @Component({
     selector: 'app-output-by-category',
@@ -9,11 +9,11 @@ import { Family, Category, Attribute } from '../../../metamodel/model';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OutputByCategoryComponent {
-    @Input() category: string;
-    @Input() attributes: Attribute[];
+    @Input() categoryLabel: string;
+    @Input() attributeList: Attribute[];
     @Input() outputList: number[];
+    @Input() isAllSelected: boolean;
     @Output() change: EventEmitter<number[]> = new EventEmitter();
-    isAllSelected = false;
 
     isSelected(id: number) {
         return this.outputList.filter(i => i === id).length > 0;
@@ -31,6 +31,18 @@ export class OutputByCategoryComponent {
     }
 
     toggleSelectAll(): void {
-        this.isAllSelected = !this.isAllSelected;
+        const clonedOutputList = [...this.outputList];
+        const attributeListId = this.attributeList.map(a => a.id);
+        if (this.isAllSelected) {
+            attributeListId.forEach(id => {
+                const index = clonedOutputList.indexOf(id);
+                clonedOutputList.splice(index, 1);
+            });
+        } else {
+            attributeListId.filter(id => clonedOutputList.indexOf(id) === -1).forEach(id => {
+                clonedOutputList.push(id);
+            });
+        }
+        this.change.emit(clonedOutputList);
     }
 }

src/app/search/components/output/output-by-family.component.css

-.selectbox {
-    height: 200px;
-    overflow-y: auto;
-    border: 1px solid #ced4da;
-    border-radius: .25rem;
-}
-
-.anis-color {
-    color: #7AC29A;
-}
-
-button:hover {
-    background-color: #F8F9FA;
-}
-
-button:focus {
-    box-shadow: none;
-}
\ No newline at end of file

src/app/search/components/output/output-by-family.component.html

 <div class="row">
     <div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 my-3 text-center">
         <app-output-by-category
-            [category]="category.label"
-            [attributes]="getAttributeByCategory(category.id)"
+            [categoryLabel]="category.label"
+            [attributeList]="getAttributeByCategory(category.id)"
             [outputList]="outputList"
+            [isAllSelected]="getIsAllSelected(category.id)"
             (change)="change($event)">
         </app-output-by-category>
-        <!-- <p class="mb-3"><em>{{ category.label }}</em></p>
-        <div class="selectbox py-1">
-            <button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0">
-                <div *ngIf="isAllSelected; then selected else unselected"></div>
-                <span *ngIf="!isAllSelected">Select All</span>
-                <span *ngIf="isAllSelected">Unselect All</span>
-            </button>
-            <hr class="my-1">
-            <button *ngFor="let attribute of getAttributeByCategory(category.id)"
-                class="btn btn-block text-left py-0 m-0" (click)="toggleSelection(attribute.id)">
-                <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
-                {{ attribute.form_label }}
-            </button>
-        </div> -->
     </div>
 </div>
\ No newline at end of file

src/app/search/components/output/output-by-family.component.ts

@@ -16,18 +16,24 @@ export class OutputByFamilyComponent {
     @Output() changed: EventEmitter<number[]> = new EventEmitter();
     isAllSelected = false;
 
-    getCategoryByFamily(idFamily: number) {
+    getCategoryByFamily(idFamily: number): Category[] {
         return this.categoryList
             .filter(category => category.id_output_family === idFamily)
             .sort((a, b) => a.display - b.display);
     }
 
-    getAttributeByCategory(idCategory: number) {
+    getAttributeByCategory(idCategory: number): Attribute[] {
         return this.datasetAttributeList
             .filter(attribute => attribute.id_output_category === idCategory)
             .sort((a, b) => a.output_display - b.output_display);
     }
 
+    getIsAllSelected(idCategory: number): boolean {
+        const attributeListId = this.getAttributeByCategory(idCategory).map(a => a.id)
+        const filteredOutputList = this.outputList.filter(id => attributeListId.indexOf(id) > -1);
+        return attributeListId.length === filteredOutputList.length;
+    }
+
     change(clonedOutputList: number[]): void {
         this.changed.emit(clonedOutputList);
     }