From fc91fa52adea469a8ab1d2adee08137e808a30fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Agneray?= <francois.agneray@lam.fr>
Date: Fri, 6 Sep 2019 11:15:02 +0200
Subject: [PATCH] #57 => done

---
 .../output/output-by-category.component.css   |  8 ++++--
 .../output/output-by-category.component.html  | 14 +++++-----
 .../output/output-by-category.component.ts    | 26 +++++++++++--------
 .../output/output-by-family.component.html    |  1 +
 .../output/output-by-family.component.ts      |  7 ++++-
 .../output/output-tabs.component.html         |  4 +--
 6 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/app/search/components/output/output-by-category.component.css b/src/app/search/components/output/output-by-category.component.css
index b2dae60..1ca6523 100644
--- a/src/app/search/components/output/output-by-category.component.css
+++ b/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
diff --git a/src/app/search/components/output/output-by-category.component.html b/src/app/search/components/output/output-by-category.component.html
index 2a880a8..bc25c97 100644
--- a/src/app/search/components/output/output-by-category.component.html
+++ b/src/app/search/components/output/output-by-category.component.html
@@ -1,11 +1,13 @@
 <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>
diff --git a/src/app/search/components/output/output-by-category.component.ts b/src/app/search/components/output/output-by-category.component.ts
index c7acbf3..54ce630 100644
--- a/src/app/search/components/output/output-by-category.component.ts
+++ b/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);
     }
 }
diff --git a/src/app/search/components/output/output-by-family.component.html b/src/app/search/components/output/output-by-family.component.html
index 4a818b6..892f317 100644
--- a/src/app/search/components/output/output-by-family.component.html
+++ b/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>
diff --git a/src/app/search/components/output/output-by-family.component.ts b/src/app/search/components/output/output-by-family.component.ts
index 015b2a9..c6e66c4 100644
--- a/src/app/search/components/output/output-by-family.component.ts
+++ b/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
diff --git a/src/app/search/components/output/output-tabs.component.html b/src/app/search/components/output/output-tabs.component.html
index bc0c1ff..234581f 100644
--- a/src/app/search/components/output/output-tabs.component.html
+++ b/src/app/search/components/output/output-tabs.component.html
@@ -1,7 +1,7 @@
 <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>
-- 
GitLab