#57 => done

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

@@ -9,10 +9,14 @@
     color: #7AC29A;
 }
 
-button:hover {
+.letter-spacing {
+    letter-spacing: 2px;
+}
+
+.selectbox button:hover {
     background-color: #F8F9FA;
 }
 
-button:focus {
+.selectbox button:focus {
     box-shadow: none;
 }
\ No newline at end of file

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

 <p class="mb-3"><em>{{ categoryLabel }}</em></p>
+<div class="row mb-1">
+    <div class="col pr-1">
+        <button (click)="selectAll()" [disabled]="isAllSelected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Select All</button>
+    </div>
+    <div class="col pl-1">
+        <button (click)="unselectAll()" [disabled]="isAllUnselected" class="btn btn-sm btn-block btn-outline-secondary letter-spacing">Unselect All</button>
+    </div>
+</div>
 <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 getAttributeListSortedByDisplay()" class="btn btn-block text-left py-0 m-0"
         (click)="toggleSelection(attribute.id)">
         <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>

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

@@ -13,6 +13,7 @@ export class OutputByCategoryComponent {
     @Input() attributeList: Attribute[];
     @Input() outputList: number[];
     @Input() isAllSelected: boolean;
+    @Input() isAllUnselected: boolean;
     @Output() change: EventEmitter<number[]> = new EventEmitter();
 
     getAttributeListSortedByDisplay() {
@@ -35,19 +36,22 @@ export class OutputByCategoryComponent {
         this.change.emit(clonedOutputList);
     }
 
-    toggleSelectAll(): void {
+    selectAll(): void {
         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);
-            });
-        }
+        attributeListId.filter(id => clonedOutputList.indexOf(id) === -1).forEach(id => {
+            clonedOutputList.push(id);
+        });
+        this.change.emit(clonedOutputList);
+    }
+
+    unselectAll(): void {
+        const clonedOutputList = [...this.outputList];
+        const attributeListId = this.attributeList.map(a => a.id);
+        attributeListId.filter(id => clonedOutputList.indexOf(id) > -1).forEach(id => {
+            const index = clonedOutputList.indexOf(id);
+            clonedOutputList.splice(index, 1);
+        });
         this.change.emit(clonedOutputList);
     }
 }

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

@@ -5,6 +5,7 @@
             [attributeList]="getAttributeByCategory(category.id)"
             [outputList]="outputList"
             [isAllSelected]="getIsAllSelected(category.id)"
+            [isAllUnselected]="getIsAllUnselected(category.id)"
             (change)="change($event)">
         </app-output-by-category>
     </div>

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

@@ -14,7 +14,6 @@ export class OutputByFamilyComponent {
     @Input() datasetAttributeList: Attribute[];
     @Input() outputList: number[];
     @Output() changed: EventEmitter<number[]> = new EventEmitter();
-    isAllSelected = false;
 
     getCategoryByFamilySortedByDisplay(idFamily: number): Category[] {
         return this.categoryList
@@ -33,6 +32,12 @@ export class OutputByFamilyComponent {
         return attributeListId.length === filteredOutputList.length;
     }
 
+    getIsAllUnselected(idCategory: number): boolean {
+        const attributeListId = this.getAttributeByCategory(idCategory).map(a => a.id)
+        const filteredOutputList = this.outputList.filter(id => attributeListId.indexOf(id) > -1);
+        return filteredOutputList.length === 0;
+    }
+
     change(clonedOutputList: number[]): void {
         this.changed.emit(
             this.datasetAttributeList

src/app/search/components/output/output-tabs.component.html

 <div *ngIf="outputFamilyList.length == 1">
     <div class="border rounded my-2">
-        <p class="border-bottom bg-light text-primary py-4 pl-4">{{ outputFamilyList[0].label }}</p>
-        <div class="p-3">
+        <p class="border-bottom bg-light text-primary py-4 pl-4 mb-0">{{ outputFamilyList[0].label }}</p>
+        <div class="px-3 pb-3 pt-0">
             <app-output-by-family [outputFamily]="outputFamilyList[0]" [datasetAttributeList]="datasetAttributeList"
                 [categoryList]="categoryList" [outputList]="outputList" (changed)="change($event)">
             </app-output-by-family>