diff --git a/package.json b/package.json index 52e680993..c3a113a94 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@webitel/ui-sdk", - "version": "24.2.43", + "version": "24.2.44", "private": false, "scripts": { "dev": "vite", diff --git a/src/assets/icons/sprite/index.js b/src/assets/icons/sprite/index.js index 3a2b53f6f..938be9d58 100644 --- a/src/assets/icons/sprite/index.js +++ b/src/assets/icons/sprite/index.js @@ -26,7 +26,7 @@ import './call-end.svg'; import './call-end--filled.svg'; import './call-inbound.svg'; import './call-inbound--filled.svg'; -import './call-merge-filled.svg'; +import './select-custom-value-enter.svg'; import './call-missed.svg'; import './call-missed--filled.svg'; import './call-outbound.svg'; diff --git a/src/assets/icons/sprite/call-merge-filled.svg b/src/assets/icons/sprite/select-custom-value-enter.svg similarity index 92% rename from src/assets/icons/sprite/call-merge-filled.svg rename to src/assets/icons/sprite/select-custom-value-enter.svg index ac0d23ba1..f0348f7c8 100644 --- a/src/assets/icons/sprite/call-merge-filled.svg +++ b/src/assets/icons/sprite/select-custom-value-enter.svg @@ -1,5 +1,4 @@ - - + + diff --git a/src/components/wt-select/_multiselect.scss b/src/components/wt-select/_multiselect.scss index 66a70562e..45018862d 100644 --- a/src/components/wt-select/_multiselect.scss +++ b/src/components/wt-select/_multiselect.scss @@ -105,11 +105,11 @@ } .multiselect--active :deep { - .multiselect__select .wt-icon__icon { + .multiselect__select.multiselect__arrow .wt-icon__icon { fill: var(--icon-active-color); } - .multiselect__custom-value-arrow { + .multiselect__select.multiselect__custom-value { transform: none; } } diff --git a/src/components/wt-select/wt-select.vue b/src/components/wt-select/wt-select.vue index c12de481d..56b1863f3 100644 --- a/src/components/wt-select/wt-select.vue +++ b/src/components/wt-select/wt-select.vue @@ -34,7 +34,7 @@ :loading="false" :model-value="selectValue" :multiple="multiple" - :options="selectOptions" + :options="optionsWithCustomValues" :placeholder="placeholder || label" :track-by="trackBy" class="wt-select__select" @@ -88,8 +88,8 @@ @@ -98,7 +98,7 @@ { + const optKey = this.trackBy ? opt[this.trackBy] : opt; + return !customValuesToOptions.some((customValue) => { + const customValueKey = this.trackBy ? customValue[this.trackBy] : customValue; + return customValueKey === optKey; + }); + }); + return [ + ...customValuesToOptions, + ...optionsWithoutValues, + ]; + }, }, methods: { // for taggableMixin functionality diff --git a/src/modules/QueryFilters/components/abstract-enum-filter.vue b/src/modules/QueryFilters/components/abstract-enum-filter.vue index 9b5c3570d..b3f64cf0d 100644 --- a/src/modules/QueryFilters/components/abstract-enum-filter.vue +++ b/src/modules/QueryFilters/components/abstract-enum-filter.vue @@ -4,6 +4,7 @@ :value="value" :options="localizedOptions" :label="label" + :allow-custom-values="allowCustomValues" :track-by="filterSchema.storedProp" :multiple="filterSchema.multiple" @input="setValue({ filter: filterQuery, value: $event })" diff --git a/src/modules/QueryFilters/mixins/enumFilterMixin.js b/src/modules/QueryFilters/mixins/enumFilterMixin.js index bb26ee55f..b84ddd421 100644 --- a/src/modules/QueryFilters/mixins/enumFilterMixin.js +++ b/src/modules/QueryFilters/mixins/enumFilterMixin.js @@ -2,6 +2,13 @@ import baseFilterMixin from './baseFilterMixin/baseFilterMixin'; export default { mixins: [baseFilterMixin], + props: { + // for more detail, see allowCustomValues wt-select component prop + allowCustomValues: { + type: Boolean, + default: false, + }, + }, computed: { options() { return this.filterSchema?.options; @@ -38,12 +45,34 @@ export default { restoreValue(value) { let newValue; if (Array.isArray(value)) { + /* + restore not just value, but value with all client-side properties like locale + */ newValue = this.localizedOptions .filter((option) => value .some((value) => value === option[this.storedProp])); + + /* + but if allowCustomValues is true, we should also restore custom values, + which isn't present in localizedOptions + */ + if (this.allowCustomValues) { + newValue = newValue.concat( + value + .filter((val) => !this.localizedOptions + .some((option) => val === option[this.storedProp])) + .map((val) => ({ [this.storedProp]: val, name: val })), + ); + } } else { + /* + see comments above + */ newValue = this.localizedOptions .find((option) => value === option[this.storedProp]); + if (this.allowCustomValues) { + newValue = newValue || { [this.storedProp]: value, name: value }; + } } this.setValue({ filter: this.filterQuery, value: newValue }); },