Commit 871ce3ab authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

attribute selection => DONE

parent 7a280c9f
.selectbox {
max-height: 200px;
overflow-y: auto;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.anis-color {
color: #7AC29A;
}
\ No newline at end of file
......@@ -2,10 +2,30 @@
<div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 text-center">
{{ category.label }}
<br />
<select class="form-control" multiple="multiple" size="10" (change)="change($event.target.options)">
<option *ngFor="let attribute of getAttributeByCategory(category.id)" [selected]="isSelected(attribute.id)"
[value]="attribute.id">
{{ attribute.form_label }}</option>
</select>
<div class="selectbox pt-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="m-0"> -->
<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
</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
......@@ -14,6 +14,7 @@ export class OutputByFamilyComponent {
@Input() datasetAttributeList: Attribute[];
@Input() outputList: number[];
@Output() changed: EventEmitter<number[]> = new EventEmitter();
isAllSelected = false;
getCategoryByFamily(idFamily: number) {
return this.categoryList
......@@ -28,19 +29,22 @@ export class OutputByFamilyComponent {
}
isSelected(id: number) {
console.log(this.outputList.filter(i => i === id));
return this.outputList.filter(i => i === id).length > 0;
}
change(options): void {
toggleSelection(attributeId: number): void {
const clonedOutputList = [...this.outputList];
Array.apply(null, options).forEach(option => { // TODO: change Array.apply
if (option.selected && clonedOutputList.filter(i => i === +option.value).length < 1) {
clonedOutputList.push(+option.value);
} else if (!option.selected && clonedOutputList.filter(i => i === +option.value).length > 0) {
const index = clonedOutputList.indexOf(+option.value);
clonedOutputList.splice(index, 1);
}
});
const index = clonedOutputList.indexOf(attributeId);
if (index > -1) {
clonedOutputList.splice(index, 1);
} else {
clonedOutputList.push(attributeId);
}
this.changed.emit(clonedOutputList);
}
// toggleSelectAll(): void {
// this.isAllSelected = !this.isAllSelected;
// }
}
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