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 });
},