I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "create value" component should be shown.
.create-value(
'*ngIf'='searchQuery && isValuesMode && ["Dropdown", "Multiselect"].includes(selectedFieldType) && !searchValues.length'
'[ngClass]'='{"active":!searchValues.length}'
'(click)'='onQuickCreateFieldValue($event)'
)
.text CREATE VALUE
info-item
.custom-icon('[ngStyle]'="{'background-color': DEFAULT_COLOR}")
info-item-text.in-dropdown('[text]'='searchQuery')
dynamic-list(
'*ngIf'="!isValuesMode || ['Person', 'Dropdown', 'Multiselect'].includes(selectedFieldType)"
'[mode]'='selectedFieldType === "Multiselect" ? "multi" : "single"'
'[options]'='isValuesMode ? searchValues : fields | fieldOptions : searchQuery'
'[searchQuery]'='searchQuery'
'[keydownEvents$]'='keydownEvents$'
'[ngStyle]'='{"height": isWithSearch ? "240px" : "280px"}'
'[optionTemplateRef]'='isValuesMode ? optionTemplateValues : optionTemplateList'
'(action)'='onAction($event)'
'(closeList)'='closeList.emit()'
)
onSearch(query: string): void {
if (!this.isValuesMode) {
this.search.emit(query);
} else {
if (query) {
switch (this.selectedFieldType) {
case 'Person':
this.searchValues = this.values.filter(elem => {
const name = this.teamMap[elem.title].firstName + ' ' + this.teamMap[elem.title].lastName;
return name.toLowerCase().includes(query.toLowerCase());
});
break;
case 'Dropdown':
case 'Multiselect':
this.searchValues = this.values.filter(elem => elem.title.toLowerCase().includes(query.toLowerCase()));
break;
}
this.cdRef.markForCheck();
} else {
this.searchValues = this.values;
this.cdRef.markForCheck();
}
}
this.searchQuery = query;
}
onQuickCreateFieldValue(event: MouseEvent): void {
const newValue = {
title: this.searchQuery,
properties: [
{
name: 'sequence',
value: this.selectedField.values.length.toString()
},
{
name: 'color',
value: this.DEFAULT_COLOR
}
]
};
this.quickCreateFieldValue.emit({value: newValue, selectedField: this.selectedField, projectId: this.entity.projectId});
}