Skip to content
Snippets Groups Projects
Commit 30e6a238 authored by François Agneray's avatar François Agneray
Browse files

Select all checkbox => done

parent 929b2521
No related branches found
No related tags found
2 merge requests!68Develop,!49Resolve "Changer design selectbox page output"
<p class="mb-3"><em>{{ category }}</em></p> <p class="mb-3"><em>{{ categoryLabel }}</em></p>
<div class="selectbox py-1"> <div class="selectbox py-1">
<button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0"> <button (click)="toggleSelectAll()" class="btn btn-block text-left py-0 m-0">
<div *ngIf="isAllSelected; then selected else unselected"></div> <div *ngIf="isAllSelected; then selected else unselected"></div>
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<span *ngIf="isAllSelected">Unselect All</span> <span *ngIf="isAllSelected">Unselect All</span>
</button> </button>
<hr class="my-1"> <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)"> (click)="toggleSelection(attribute.id)">
<div *ngIf="isSelected(attribute.id); then selected else unselected"></div> <div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
{{ attribute.form_label }} {{ attribute.form_label }}
......
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'; import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { Family, Category, Attribute } from '../../../metamodel/model'; import { Attribute } from '../../../metamodel/model';
@Component({ @Component({
selector: 'app-output-by-category', selector: 'app-output-by-category',
...@@ -9,11 +9,11 @@ import { Family, Category, Attribute } from '../../../metamodel/model'; ...@@ -9,11 +9,11 @@ import { Family, Category, Attribute } from '../../../metamodel/model';
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class OutputByCategoryComponent { export class OutputByCategoryComponent {
@Input() category: string; @Input() categoryLabel: string;
@Input() attributes: Attribute[]; @Input() attributeList: Attribute[];
@Input() outputList: number[]; @Input() outputList: number[];
@Input() isAllSelected: boolean;
@Output() change: EventEmitter<number[]> = new EventEmitter(); @Output() change: EventEmitter<number[]> = new EventEmitter();
isAllSelected = false;
isSelected(id: number) { isSelected(id: number) {
return this.outputList.filter(i => i === id).length > 0; return this.outputList.filter(i => i === id).length > 0;
...@@ -31,6 +31,18 @@ export class OutputByCategoryComponent { ...@@ -31,6 +31,18 @@ export class OutputByCategoryComponent {
} }
toggleSelectAll(): void { 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 class="row">
<div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 my-3 text-center"> <div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 my-3 text-center">
<app-output-by-category <app-output-by-category
[category]="category.label" [categoryLabel]="category.label"
[attributes]="getAttributeByCategory(category.id)" [attributeList]="getAttributeByCategory(category.id)"
[outputList]="outputList" [outputList]="outputList"
[isAllSelected]="getIsAllSelected(category.id)"
(change)="change($event)"> (change)="change($event)">
</app-output-by-category> </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>
</div> </div>
\ No newline at end of file
...@@ -16,18 +16,24 @@ export class OutputByFamilyComponent { ...@@ -16,18 +16,24 @@ export class OutputByFamilyComponent {
@Output() changed: EventEmitter<number[]> = new EventEmitter(); @Output() changed: EventEmitter<number[]> = new EventEmitter();
isAllSelected = false; isAllSelected = false;
getCategoryByFamily(idFamily: number) { getCategoryByFamily(idFamily: number): Category[] {
return this.categoryList return this.categoryList
.filter(category => category.id_output_family === idFamily) .filter(category => category.id_output_family === idFamily)
.sort((a, b) => a.display - b.display); .sort((a, b) => a.display - b.display);
} }
getAttributeByCategory(idCategory: number) { getAttributeByCategory(idCategory: number): Attribute[] {
return this.datasetAttributeList return this.datasetAttributeList
.filter(attribute => attribute.id_output_category === idCategory) .filter(attribute => attribute.id_output_category === idCategory)
.sort((a, b) => a.output_display - b.output_display); .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 { change(clonedOutputList: number[]): void {
this.changed.emit(clonedOutputList); this.changed.emit(clonedOutputList);
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment