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

#57 => done

parent 77ee2ca3
......@@ -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
<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>
......
......@@ -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);
}
}
......@@ -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>
......
......@@ -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
......
<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>
......
Supports Markdown
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