Commit 30e6a238 authored by François Agneray's avatar François Agneray
Browse files

Select all checkbox => done

parent 929b2521
<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 }}
......
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);
}
}
.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
<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
......@@ -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);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment