From 9964106407aa75b7cce233782681469825096d6f Mon Sep 17 00:00:00 2001 From: dlohvinov Date: Mon, 5 Feb 2024 23:04:27 +0200 Subject: [PATCH] 24.02.44: custom value restore after refresh in query filters [WTEL-3181] --- package.json | 2 +- src/assets/icons/sprite/index.js | 2 +- ...lled.svg => select-custom-value-enter.svg} | 5 +-- src/components/wt-select/_multiselect.scss | 4 +- src/components/wt-select/wt-select.vue | 37 ++++++++++++++++--- .../components/abstract-enum-filter.vue | 1 + .../QueryFilters/mixins/enumFilterMixin.js | 29 +++++++++++++++ 7 files changed, 68 insertions(+), 12 deletions(-) rename src/assets/icons/sprite/{call-merge-filled.svg => select-custom-value-enter.svg} (92%) diff --git a/package.json b/package.json index 52e68099..c3a113a9 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 3a2b53f6..938be9d5 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 ac0d23ba..f0348f7c 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 66a70562..45018862 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 c12de481..56b1863f 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 9b5c3570..b3f64cf0 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 bb26ee55..b84ddd42 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 }); },