Commit 25565f7e authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Display checkbox selection

parent 0f5d79f2
......@@ -5,10 +5,6 @@
border-radius: .25rem;
}
.anis-color {
color: #7AC29A;
}
.letter-spacing {
letter-spacing: 2px;
}
......
......@@ -18,7 +18,7 @@
<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>
<i class="fas fa-check fa-stack-1x theme-color"></i>
</span>
</ng-template>
<ng-template #unselected>
......
......@@ -17,12 +17,19 @@
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th *ngFor="let attribute of searchMeta.attributes_selected" scope="col">
{{ attribute.label }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let datum of searchData">
<td>
<button class="btn btn-block text-left py-0 m-0"
(click)="toggleSelection(datum.id)">
<div *ngIf="isSelected(datum.id); then selected else unselected"></div>
</button>
</td>
<td *ngFor="let attribute of searchMeta.attributes_selected">
<div *ngIf="datum[attribute.label]" [ngSwitch]="getAttributeRenderer(attribute.name)">
<div *ngSwitchCase="'img'">
......@@ -78,4 +85,16 @@
</div>
</div>
</accordion-group>
</accordion>
\ No newline at end of file
</accordion>
<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 theme-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
......@@ -18,6 +18,8 @@ export class DatatableComponent {
@Output() initSearchMeta: EventEmitter<{}> = new EventEmitter();
@Output() getSearchData: EventEmitter<number> = new EventEmitter();
public selection: number[] = [];
initDatatable() {
this.initSearchMeta.emit();
this.getSearchData.emit(1);
......@@ -41,4 +43,20 @@ export class DatatableComponent {
return datum;
}
}
toggleSelection(attributeId: number): void {
const index = this.selection.indexOf(attributeId);
if (index > -1) {
this.selection.splice(index, 1);
} else {
this.selection.push(attributeId);
}
}
isSelected(attributeId: number): boolean {
if (this.selection.indexOf(attributeId) > -1) {
return true;
}
return false;
}
}
......@@ -8,4 +8,8 @@
.modal-fit-content {
width: fit-content;
max-width: 95%;
}
.theme-color {
color: #7AC29A;
}
\ No newline at end of file
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