/* Code by CafeForce || www.cafeforce.com || support@cafeforce.com || Mandatory Header */
|
import { LightningElement, track, api } from 'lwc';
|
import lexHandCss from '@salesforce/resourceUrl/lexHandCss';
|
import {loadStyle} from 'lightning/platformResourceLoader';
|
export default class MultiSelectCombobox extends LightningElement {
|
|
@api options;
|
@api selectedValue;
|
@api selectedValues = [];
|
@api label;
|
@api minChar = 1;
|
@api disabled = false;
|
@api multiSelect = false;
|
@api myValue;
|
@api required;
|
@track value;
|
@track values = [];
|
@track optionData;
|
@api searchString;
|
@track message;
|
@track showDropdown = false;
|
@api placeholder = '--无--';
|
@track errorFlag = false;
|
connectedCallback() {
|
Promise.all([
|
loadStyle(this, lexHandCss)
|
]);
|
this.showDropdown = false;
|
var optionData = this.options ? (JSON.parse(JSON.stringify(this.options))) : null;
|
var value = this.selectedValue ? (JSON.parse(JSON.stringify(this.selectedValue))) : null;
|
var values = this.selectedValues ? (JSON.parse(JSON.stringify(this.selectedValues))) : null;
|
if(value || values) {
|
var searchString;
|
var count = 0;
|
for(var i = 0; i < optionData.length; i++) {
|
if(this.multiSelect) {
|
if(values.includes(optionData[i].value)) {
|
optionData[i].selected = true;
|
count++;
|
}
|
} else {
|
if(optionData[i].value == value) {
|
searchString = optionData[i].label;
|
}
|
}
|
}
|
if(this.multiSelect)
|
this.searchString = count + ' Option(s) Selected';
|
else
|
this.searchString = searchString;
|
}
|
this.value = value;
|
this.values = values;
|
this.optionData = optionData;
|
}
|
|
get isRequired() {
|
return this.required;
|
}
|
closeAction(){
|
this.showDropdown = false;
|
}
|
handlePayModeOpen() {
|
setTimeout(() => {
|
const topDiv = this.template.querySelector('[data-id="scrollSec"]');
|
topDiv.scrollTop = topDiv.scrollHeight;
|
}, 20);
|
}
|
|
filterOptions(event) {
|
this.searchString = event.target.value;
|
if( this.searchString && this.searchString.length > 0 ) {
|
this.message = '';
|
if(this.searchString.length >= this.minChar) {
|
var flag = true;
|
for(var i = 0; i < this.optionData.length; i++) {
|
if(this.optionData[i].label.toLowerCase().trim().includes(this.searchString.toLowerCase().trim())) {
|
this.optionData[i].isVisible = true;
|
flag = false;
|
} else {
|
this.optionData[i].isVisible = false;
|
}
|
}
|
if(flag) {
|
this.message = "No results found for '" + this.searchString + "'";
|
}
|
}
|
this.showDropdown = true;
|
} else {
|
this.showDropdown = false;
|
}
|
}
|
@api refreshOptions(options) {
|
if(options && options.length > 0)
|
this.optionData = JSON.parse(JSON.stringify(options));
|
}
|
|
selectItem(event) {
|
var selectedVal = event.currentTarget.dataset.id;
|
this.myValue = selectedVal;
|
if(selectedVal) {
|
var count = 0;
|
var options = JSON.parse(JSON.stringify(this.optionData));
|
for(var i = 0; i < options.length; i++) {
|
if(options[i].value === selectedVal) {
|
if(this.multiSelect) {
|
if(this.values.includes(options[i].value)) {
|
this.values.splice(this.values.indexOf(options[i].value), 1);
|
} else {
|
this.values.push(options[i].value);
|
}
|
options[i].selected = options[i].selected ? false : true;
|
} else {
|
this.value = options[i].value;
|
this.searchString = options[i].label;
|
}
|
}
|
if(options[i].selected) {
|
count++;
|
}
|
}
|
this.optionData = options;
|
if(this.multiSelect)
|
this.searchString = count + ' Option(s) Selected';
|
if(this.multiSelect)
|
event.preventDefault();
|
else
|
this.showDropdown = false;
|
this.dispatchEvent(new CustomEvent('select', {
|
detail: {
|
'payloadType' : 'multi-select',
|
'payload' : {
|
'value' : this.value,
|
'values' : this.values
|
}
|
}
|
}));
|
}
|
}
|
|
dontClose(event){
|
event.preventDefault();
|
}
|
|
showOptions() {
|
if(this.disabled == false && this.options) {
|
this.message = '';
|
this.searchString = '';
|
var options = JSON.parse(JSON.stringify(this.optionData));
|
for(var i = 0; i < options.length; i++) {
|
options[i].isVisible = true;
|
}
|
if(options.length > 0) {
|
this.showDropdown = true;
|
}
|
this.optionData = options;
|
}
|
}
|
|
removePill(event) {
|
var value = event.currentTarget.name;
|
var count = 0;
|
var options = JSON.parse(JSON.stringify(this.optionData));
|
for(var i = 0; i < options.length; i++) {
|
if(options[i].value === value) {
|
options[i].selected = false;
|
this.values.splice(this.values.indexOf(options[i].value), 1);
|
}
|
if(options[i].selected) {
|
count++;
|
}
|
}
|
this.optionData = options;
|
if(this.multiSelect)
|
this.searchString = count + ' Option(s) Selected';
|
}
|
|
blurEvent() {
|
var previousLabel;
|
var count = 0;
|
for(var i = 0; i < this.optionData.length; i++) {
|
if(this.optionData[i].value === this.value) {
|
previousLabel = this.optionData[i].label;
|
}
|
if(this.optionData[i].selected) {
|
count++;
|
}
|
}
|
if(!previousLabel){
|
var element = this.template.querySelector('[data-id="myinput"]');
|
element.classList.add('slds-has-error');
|
this.errorFlag = true;
|
this.showDropdown = false;
|
}else{
|
var element = this.template.querySelector('[data-id="myinput"]');
|
element.classList.remove('slds-has-error');
|
this.errorFlag = false;
|
this.showDropdown = false;
|
}
|
if(this.multiSelect)
|
this.searchString = count + ' Option(s) Selected';
|
else
|
this.searchString = previousLabel;
|
|
this.showDropdown = false;
|
|
|
}
|
}
|
/*
|
Code by CafeForce
|
Website: http://www.cafeforce.com
|
DO NOT REMOVE THIS HEADER/FOOTER FOR FREE CODE USAGE
|
*/
|
