Skip to content
Snippets Groups Projects
Commit 929b2521 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

WIP: add category component

parent ca767ef5
No related branches found
No related tags found
2 merge requests!68Develop,!49Resolve "Changer design selectbox page output"
......@@ -5,6 +5,7 @@ import { CriteriaTabsComponent } from './criteria/criteria-tabs.component';
import { CriteriaByFamilyComponent } from './criteria/criteria-by-family.component';
import { OutputTabsComponent } from './output/output-tabs.component';
import { OutputByFamilyComponent } from './output/output-by-family.component';
import { OutputByCategoryComponent } from './output/output-by-category.component';
import { SummaryComponent } from './summary.component';
import { criteriaComponents } from './criteria/search-type';
import { UrlDisplayComponent } from './result/url-display.component';
......@@ -19,6 +20,7 @@ export const dummiesComponents = [
CriteriaByFamilyComponent,
OutputTabsComponent,
OutputByFamilyComponent,
OutputByCategoryComponent,
criteriaComponents,
SummaryComponent,
UrlDisplayComponent,
......
.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
<p class="mb-3"><em>{{ category }}</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 attributes" 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>
<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
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { Family, Category, Attribute } from '../../../metamodel/model';
@Component({
selector: 'app-output-by-category',
templateUrl: 'output-by-category.component.html',
styleUrls: ['output-by-category.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OutputByCategoryComponent {
@Input() category: string;
@Input() attributes: Attribute[];
@Input() outputList: number[];
@Output() change: EventEmitter<number[]> = new EventEmitter();
isAllSelected = false;
isSelected(id: number) {
return this.outputList.filter(i => i === id).length > 0;
}
toggleSelection(attributeId: number): void {
const clonedOutputList = [...this.outputList];
const index = clonedOutputList.indexOf(attributeId);
if (index > -1) {
clonedOutputList.splice(index, 1);
} else {
clonedOutputList.push(attributeId);
}
this.change.emit(clonedOutputList);
}
toggleSelectAll(): void {
this.isAllSelected = !this.isAllSelected;
}
}
<div class="row">
<div *ngFor="let category of getCategoryByFamily(outputFamily.id)" class="col-12 col-md-6 my-3 text-center">
<p class="mb-3"><em>{{ category.label }}</em></p>
<app-output-by-category
[category]="category.label"
[attributes]="getAttributeByCategory(category.id)"
[outputList]="outputList"
(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>
......@@ -13,18 +19,6 @@
<div *ngIf="isSelected(attribute.id); then selected else unselected"></div>
{{ attribute.form_label }}
</button>
</div>
</div> -->
</div>
</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
</div>
\ No newline at end of file
......@@ -28,22 +28,7 @@ export class OutputByFamilyComponent {
.sort((a, b) => a.output_display - b.output_display);
}
isSelected(id: number) {
return this.outputList.filter(i => i === id).length > 0;
}
toggleSelection(attributeId: number): void {
const clonedOutputList = [...this.outputList];
const index = clonedOutputList.indexOf(attributeId);
if (index > -1) {
clonedOutputList.splice(index, 1);
} else {
clonedOutputList.push(attributeId);
}
change(clonedOutputList: number[]): void {
this.changed.emit(clonedOutputList);
}
toggleSelectAll(): void {
this.isAllSelected = !this.isAllSelected;
}
}
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