File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
constructor(cdr: ChangeDetectorRef, resourceService: ResourceService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| cdr |
ChangeDetectorRef
|
No
|
| resourceService |
ResourceService
|
No
|
|
|
inputData
|
Type : Array<string>
|
|
|
|
valueField
|
Type : string
|
Default value : 'name'
|
|
|
Outputs
|
selectedValue
|
Type : EventEmitter
|
|
|
Methods
|
selectAll
|
selectAll(code)
|
|
|
|
|
|
selectedOption
|
selectedOption(event)
|
|
|
|
|
|
refresh
|
Default value : true
|
|
|
|
selectAllCheckBox
|
Default value : false
|
|
|
import { ResourceService } from './../../services/resource/resource.service';
import { Component, OnInit, ChangeDetectorRef, Input, EventEmitter, Output } from '@angular/core';
import * as _ from 'lodash-es';
@Component({
selector: 'app-custom-multi-select',
templateUrl: './custom-multi-select.component.html'
})
export class CustomMultiSelectComponent implements OnInit {
@Input() inputData: Array<string>;
@Input() field: object;
@Input() valueField = 'name';
checkBox: object;
selectAllCheckBox = false;
refresh = true;
@Output() selectedValue = new EventEmitter<any>();
constructor( private cdr: ChangeDetectorRef, public resourceService: ResourceService) { }
checkbox(name) {
if (this.checkBox[name]) {
this.checkBox[name] = false;
this.selectAllCheckBox = false;
} else {
this.checkBox[name] = true;
}
}
selectAll(code) {
this.inputData = [];
this.selectAllCheckBox = !this.selectAllCheckBox;
if (this.selectAllCheckBox) {
_.forEach(this.field['range'], (value) => {
this.inputData.push(value.name);
this.checkBox[value.name] = true;
});
} else {
this.inputData = [];
_.forEach(this.field['range'], (value) => {
this.checkBox[value.name] = false;
});
}
this.selectedValue.emit( this.inputData);
this.refresh = false;
this.cdr.detectChanges();
this.refresh = true;
}
selectedOption(event) {
const fieldName = [];
_.forEach(this.field['range'], (value, key) => {
fieldName.push(value.name);
});
if (fieldName.length === event.length) {
this.selectAllCheckBox = true;
}
this.selectedValue.emit(event);
}
ngOnInit() {
this.checkBox = {};
const name = [];
if (this.inputData) {
_.forEach(this.field['range'], (value, key) => {
name.push(value.name);
});
if (name.length === this.inputData.length) {
this.selectAllCheckBox = true;
}
_.forEach(this.inputData, (value) => {
this.checkBox[value] = true;
});
}
}
}
<ng-container *ngIf="refresh">
<ng-template let-option #optionTemplate >
<div>
{{option.name}}
</div>
<div class="ml-auto">
<i class="square outline medium icon m-0" [ngClass]="{'check': checkBox[option.name] }"></i>
</div>
</ng-template>
<!-- If valueField is name it will select name as the valuefield in selected checkboxes -->
<sui-multi-select *ngIf="valueField === 'name' && field.code !== 'gradeLevel'" [(ngModel)]="inputData" [optionTemplate]="optionTemplate" id={{field.code}} name={{field.code}} defaultSelectionText={{field.label}} zeroSelectionText={{resourceService.frmelmnts.lbl.Select}} class="ui selection" [options]="field.range" [hasLabels]="false"
valueField="name" (ngModelChange)="selectedOption($event)" #multiSelect>
<div class="header item" tabindex="0" (click)="selectAll(field.code)" [ngClass]="{'active': selectAllCheckBox }">
<div>
{{resourceService.frmelmnts.lbl.selectAll}}
</div>
<div class="ml-auto">
<i class="square outline medium icon m-0" [ngClass]="{'check': selectAllCheckBox}"></i>
</div>
</div>
<div class="divider"></div>
<sui-select-option *ngFor="let option of multiSelect.filteredOptions | sortBy:'name':'asc'" [value]="option" tabindex="0" (click)="checkbox(option.name)" [ngClass]="{'sb-color-primary': checkBox[option.name] }" title="{{option.name}}"></sui-select-option>
</sui-multi-select>
<sui-multi-select *ngIf="valueField === 'name' && field.code === 'gradeLevel'" [(ngModel)]="inputData" [optionTemplate]="optionTemplate" id={{field.code}} name={{field.code}} defaultSelectionText={{field.label}} zeroSelectionText={{resourceService.frmelmnts.lbl.Select}} class="ui selection" [options]="field.range" [hasLabels]="false"
valueField="name" (ngModelChange)="selectedOption($event)" #multiSelect>
<div class="header item" tabindex="0" (click)="selectAll(field.code)" [ngClass]="{'active': selectAllCheckBox }">
<div>
{{resourceService.frmelmnts.lbl.selectAll}}
</div>
<div class="ml-auto">
<i class="square outline medium icon m-0" [ngClass]="{'check': selectAllCheckBox}"></i>
</div>
</div>
<div class="divider"></div>
<sui-select-option *ngFor="let option of multiSelect.filteredOptions" [value]="option" tabindex="0" (click)="checkbox(option.name)" [ngClass]="{'sb-color-primary': checkBox[option.name] }" title="{{option.name}}"></sui-select-option>
</sui-multi-select>
<!-- If valueField is code it will select code as the valuefield in selected checkboxes -->
<sui-multi-select *ngIf="valueField === 'code'" [(ngModel)]="inputData" [optionTemplate]="optionTemplate" id={{field.code}} name={{field.code}} defaultSelectionText={{field.label}} zeroSelectionText={{resourceService.frmelmnts.lbl.Select}} class="ui selection" [options]="field.range" [hasLabels]="false"
valueField="code" (ngModelChange)="selectedOption($event)" #multiSelect>
<div class="header item" tabindex="0" (click)="selectAll(field.code)" [ngClass]="{'active': selectAllCheckBox }">
<div>
{{resourceService.frmelmnts.lbl.selectAll}}
</div>
<div class="ml-auto">
<i class="square outline medium icon m-0" [ngClass]="{'check': selectAllCheckBox}"></i>
</div>
</div>
<div class="divider"></div>
<sui-select-option *ngFor="let option of multiSelect.filteredOptions" [value]="option" tabindex="0" (click)="checkbox(option.name)" [ngClass]="{'active': checkBox[option.name] }" title="{{option.name}}"></sui-select-option>
</sui-multi-select>
</ng-container>
Legend
Html element with directive