WIP: add category component

src/app/search/components/index.ts

@@ -5,6 +5,7 @@ import { CriteriaTabsComponent } from './criteria/criteria-tabs.component';
 import { CriteriaByFamilyComponent } from './criteria/criteria-by-family.component';
 import { OutputTabsComponent } from './output/output-tabs.component';
 import { OutputByFamilyComponent } from './output/output-by-family.component';
+import { OutputByCategoryComponent } from './output/output-by-category.component';
 import { SummaryComponent } from './summary.component';
 import { criteriaComponents } from './criteria/search-type';
 import { UrlDisplayComponent } from './result/url-display.component';
@@ -19,6 +20,7 @@ export const dummiesComponents = [
     CriteriaByFamilyComponent,
     OutputTabsComponent,
     OutputByFamilyComponent,
+    OutputByCategoryComponent,
     criteriaComponents,
     SummaryComponent,
     UrlDisplayComponent,

src/app/search/components/output/output-by-category.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-category.component.html

+<p class="mb-3"><em>{{ category }}</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 attributes" 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>
+
+<ng-template #selected>
+    <span class="fa-stack fa-1x">
+        <i class="far fa-square fa-stack-1x text-secondary"></i>
+        <i class="fas fa-check fa-stack-1x anis-color"></i>
+    </span>
+</ng-template>
+<ng-template #unselected>
+    <span class="fa-stack fa-1x">
+        <i class="far fa-square fa-stack-1x text-secondary"></i>
+    </span>
+</ng-template>
\ No newline at end of file

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';
+
+@Component({
+    selector: 'app-output-by-category',
+    templateUrl: 'output-by-category.component.html',
+    styleUrls: ['output-by-category.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OutputByCategoryComponent {
+    @Input() category: string;
+    @Input() attributes: Attribute[];
+    @Input() outputList: number[];
+    @Output() change: EventEmitter<number[]> = new EventEmitter();
+    isAllSelected = false;
+
+    isSelected(id: number) {
+        return this.outputList.filter(i => i === id).length > 0;
+    }
+
+    toggleSelection(attributeId: number): void {
+        const clonedOutputList = [...this.outputList];
+        const index = clonedOutputList.indexOf(attributeId);
+        if (index > -1) {
+            clonedOutputList.splice(index, 1);
+        } else {
+            clonedOutputList.push(attributeId);
+        }
+        this.change.emit(clonedOutputList);
+    }
+
+    toggleSelectAll(): void {
+        this.isAllSelected = !this.isAllSelected;
+    }
+}

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">
-        <p class="mb-3"><em>{{ category.label }}</em></p>
+        <app-output-by-category
+            [category]="category.label"
+            [attributes]="getAttributeByCategory(category.id)"
+            [outputList]="outputList"
+            (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>
@@ -13,18 +19,6 @@
                 <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
                 {{ attribute.form_label }}
             </button>
-        </div>
+        </div> -->
     </div>
-</div>
-
-<ng-template #selected>
-    <span class="fa-stack fa-1x">
-        <i class="far fa-square fa-stack-1x text-secondary"></i>
-        <i class="fas fa-check fa-stack-1x anis-color"></i>
-    </span>
-</ng-template>
-<ng-template #unselected>
-    <span class="fa-stack fa-1x">
-        <i class="far fa-square fa-stack-1x text-secondary"></i>
-    </span>
-</ng-template>
\ No newline at end of file
+</div>
\ No newline at end of file

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

@@ -28,22 +28,7 @@ export class OutputByFamilyComponent {
             .sort((a, b) => a.output_display - b.output_display);
     }
 
-    isSelected(id: number) {
-        return this.outputList.filter(i => i === id).length > 0;
-    }
-
-    toggleSelection(attributeId: number): void {
-        const clonedOutputList = [...this.outputList];
-        const index = clonedOutputList.indexOf(attributeId);
-        if (index > -1) {
-            clonedOutputList.splice(index, 1);
-        } else {
-            clonedOutputList.push(attributeId);
-        }
+    change(clonedOutputList: number[]): void {
         this.changed.emit(clonedOutputList);
     }
-
-    toggleSelectAll(): void {
-        this.isAllSelected = !this.isAllSelected;
-    }
 }