feature: refactoring of configuration-popup.vue and adding ExportSett…

package.json

@@ -37,7 +37,7 @@
     "vue-router": "^4.2.5",
     "vue2-dropzone": "^3.6.0",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^24.2.12"
+    "webitel-sdk": "^24.4.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",

src/modules/system/modules/configuration/components/configuration-popup.vue

@@ -24,13 +24,42 @@
         <div
           v-if="itemInstance.name"
         >
-          <!--          https://github.com/vuejs/core/issues/2279#issuecomment-701266701-->
-          <component
-            :is="componentConfig.component"
-            :label="componentConfig.label"
-            v-bind="componentConfig.bind"
-            v-on="componentConfig.on"
+          <wt-switcher
+            v-if="displayedConfigurationType.boolean"
+            :label="$t('reusable.state')"
+            :v="v$.itemInstance.value"
+            :value="itemInstance.value"
+            required
+            @change="setItemProp({ prop: 'value', value: $event })"
           />
+          <wt-input
+            v-if="displayedConfigurationType.number"
+            :label="$tc('vocabulary.values', 1)"
+            :v="v$.itemInstance.value"
+            :value="itemInstance.value"
+            required
+            type="number"
+            @input="setItemProp({ prop: 'value', value: +$event })"
+          />
+          <div v-if="isExportSettingsConfigurationType">
+            <wt-select
+              :clearable="false"
+              :label="$t('vocabulary.format')"
+              :options="exportSettingOptions"
+              :v="v$.itemInstance.format"
+              :value="itemInstance.format"
+              required
+              @input="selectHandler"
+            />
+            <wt-input
+              v-if="isExportSettingsFormatXls"
+              :label="$t('objects.CSV.separator')"
+              :v="v$.itemInstance.separator"
+              :value="itemInstance.separator"
+              required
+              @input="inputHandler"
+            />
+          </div>
         </div>
       </form>
     </template>
@@ -60,6 +89,7 @@ import openedObjectMixin from '../../../../../app/mixins/objectPagesMixins/opene
 import openedTabComponentMixin
   from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
 import ConfigurationAPI from '../api/configuration';
+import TypesExportedSettings from '../enum/TypesExportedSettings.enum.js';
 import ConfigurationValueTypes from '../utils/configurationValueTypes';
 
 export default {
@@ -76,66 +106,86 @@ export default {
   setup: () => ({
     v$: useVuelidate(),
   }),
-  validations: {
-    itemInstance: {
-      name: { required },
-      value: {
-        required,
-        minValue: minValue(0),
+  validations() {
+    const defaults = {
+      itemInstance: {
+        name: { required },
       },
-    },
-  },
-  computed: {
-    valueType() {
-      return ConfigurationValueTypes[this.itemInstance.name];
-    },
-    componentConfig() {
-      const defaultConfig = {
-        bind: {
-          value: this.itemInstance.value,
-          v: this.v$.itemInstance.value,
-          required: true,
-        },
-      };
+    };
 
-      const defaultBooleanConfig = deepmerge(defaultConfig, {
-        component: 'wt-switcher',
-        label: this.$t('reusable.state'),
-        on: {
-          change: (event) => this.setItemProp({ prop: 'value', value: event }),
+    const defaultBooleanConfig = {
+      itemInstance: {
+        value: {
+          required,
         },
-      });
-      const defaultNumberConfig = deepmerge(defaultConfig, {
-        component: 'wt-input',
-        label: this.$tc('vocabulary.values', 1),
-        bind: {
-          type: 'number',
+      },
+    };
+
+    const defaultNumberConfig = {
+      itemInstance: {
+        value: {
+          required,
+          minValue: minValue(0),
         },
-        on: {
-          input: (event) => this.setItemProp({ prop: 'value', value: +event }),
+      },
+    };
+
+    let defaultSelectConfig;
+    defaultSelectConfig = {
+      itemInstance: {
+        format: { required },
+      },
+    };
+    if (this.isExportSettingsFormatXls) {
+      defaultSelectConfig = {
+        itemInstance: {
+          format: { required },
+          separator: { required },
         },
-      });
+      };
+    }
 
-      switch (this.itemInstance.name) {
-        case EngineSystemSettingName.EnableOmnichannel: {
-          return defaultBooleanConfig;
-        }
-        case EngineSystemSettingName.AmdCancelNotHuman: {
-          return defaultBooleanConfig;
-        }
-        case EngineSystemSettingName.Enable2fa: {
-          return defaultBooleanConfig;
-        }
-        case EngineSystemSettingName.MemberChunkSize: {
-          return defaultNumberConfig;
-        }
-        case EngineSystemSettingName.SchemeVersionLimit: {
-          return defaultNumberConfig;
-        }
-        default: {
-          return {};
-        }
-      }
+    switch (this.itemInstance.name) {
+      case EngineSystemSettingName.EnableOmnichannel:
+        return deepmerge(defaults, defaultBooleanConfig);
+      case EngineSystemSettingName.AmdCancelNotHuman:
+        return deepmerge(defaults, defaultBooleanConfig);
+      case EngineSystemSettingName.Enable2fa:
+        return deepmerge(defaults, defaultBooleanConfig);
+      case EngineSystemSettingName.MemberChunkSize:
+        return deepmerge(defaults, defaultNumberConfig);
+      case EngineSystemSettingName.SchemeVersionLimit:
+        return deepmerge(defaults, defaultNumberConfig);
+      case EngineSystemSettingName.SearchNumberLength:
+        return deepmerge(defaults, defaultNumberConfig);
+      case EngineSystemSettingName.ExportSettings:
+        return deepmerge(defaults, defaultSelectConfig);
+      default:
+        return defaults;
+    }
+  },
+  data() {
+    return {
+      TypesExportedSettings,
+      EngineSystemSettingName,
+    };
+  },
+  computed: {
+    exportSettingOptions() {
+      return Object.keys(TypesExportedSettings)
+      .map(key => ({ name: TypesExportedSettings[key], value: TypesExportedSettings[key], id: TypesExportedSettings[key] }));
+    },
+    valueType() {
+      return ConfigurationValueTypes[this.itemInstance.name];
+    },
+    displayedConfigurationType() {
+      return { [this.valueType]: true };
+    },
+    isExportSettingsFormatXls() {
+      return this.itemInstance?.format?.value === TypesExportedSettings.XLS;
+    },
+    isExportSettingsConfigurationType() {
+      return this.itemInstance.name === EngineSystemSettingName.ExportSettings;
     },
   },
   methods: {
@@ -160,6 +210,24 @@ export default {
     close() {
       this.$emit('close');
     },
+
+    handleDefaultSelectConfigInput() {
+      this.setItemProp({
+        prop: 'value',
+        value: { format: this.itemInstance.format.name, separator: this.itemInstance.separator },
+      });
+    },
+    selectHandler(selectedValue) {
+      this.itemInstance.format = selectedValue;
+      if (!this.isExportSettingsFormatXls) {
+        delete this.itemInstance.separator;
+      }
+      this.handleDefaultSelectConfigInput();
+    },
+    inputHandler(inputValue) {
+      this.itemInstance.separator = inputValue;
+      this.handleDefaultSelectConfigInput();
+    },
     async loadParameterList(params) {
       return await ConfigurationAPI.getObjectsList({ ...params, size: 5000 });
     },

src/modules/system/modules/configuration/enum/TypesExportedSettings.enum.js

@@ -0,0 +1,4 @@
+export default Object.freeze({
+  CSV: 'csv',
+  XLS: 'xls',
+});

src/modules/system/modules/configuration/utils/configurationValueTypes.js

@@ -6,6 +6,8 @@ const ConfigurationValueTypes = Object.freeze({
     [EngineSystemSettingName.Enable2fa]: 'boolean',
     [EngineSystemSettingName.MemberChunkSize]: 'number',
     [EngineSystemSettingName.SchemeVersionLimit]: 'number',
+    [EngineSystemSettingName.SearchNumberLength]: 'number',
+    [EngineSystemSettingName.ExportSettings]: 'select',
   },
 );