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/app/locale/en/en.js

@@ -961,6 +961,13 @@ export default {
       },
     },
 
+    configuration: {
+      configurationPopup: {
+        format: 'Format',
+        separator: 'Separator',
+      },
+    },
+
     integrations: {
       integrations: 'Integrations',
       emptyWorkspace: 'There are no profiles yet',

src/app/locale/ru/ru.js

@@ -959,6 +959,12 @@ export default {
         timerangeTo: 'До',
       },
     },
+    configuration: {
+      configurationPopup: {
+        format: 'Формат',
+        separator: 'Разделитель',
+      },
+    },
     integrations: {
       integrations: 'Интеграции',
       emptyWorkspace: 'Профили в разделе еще не созданы',

src/app/locale/ua/ua.js

@@ -960,6 +960,12 @@ export default {
         timerangeTo: 'До',
       },
     },
+    configuration: {
+      configurationPopup: {
+        format: 'Формат',
+        separator: 'Розділювач',
+      },
+    },
     integrations: {
       integrations: 'Інтеграції',
       emptyWorkspace: 'Профілі у розділі ще не створені',

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="specificControls.defaultBooleanConfig"
+            :label="$t('reusable.state')"
+            :v="v$.itemInstance.value"
+            :value="itemInstance.value"
+            required
+            @change="(event) => this.setItemProp({ prop: 'value', value: event })"
           />
+          <wt-input
+            v-if="specificControls.defaultNumberConfig"
+            :label="$tc('vocabulary.values', 1)"
+            :v="v$.itemInstance.value"
+            :value="itemInstance.value"
+            required
+            type="number"
+            @input="(event) => this.setItemProp({ prop: 'value', value: +event })"
+          />
+          <div v-if="specificControls.defaultSelectConfig">
+            <wt-select
+              :clearable="false"
+              :label="$t('objects.configuration.configurationPopup.format')"
+              :options="exportSettingOptions"
+              :v="v$.itemInstance.format"
+              :value="itemInstance.format"
+              required
+              @input="selectHandler"
+            />
+            <wt-input
+              v-if="itemInstance.format?.value === exportSettingsEnum.XLS"
+              :label="$t('objects.configuration.configurationPopup.separator')"
+              :v="v$.itemInstance.separator"
+              :value="itemInstance.separator"
+              required
+              @input="inputHandler"
+            />
+          </div>
         </div>
       </form>
     </template>
@@ -60,6 +89,8 @@ import openedObjectMixin from '../../../../../app/mixins/objectPagesMixins/opene
 import openedTabComponentMixin
   from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
 import ConfigurationAPI from '../api/configuration';
+import exportSettingsEnum from '../enum/exportSettings.enum.js';
+import ConfigurationTypeLookup from '../lookups/ConfigurationType.lookup.js';
 import ConfigurationValueTypes from '../utils/configurationValueTypes';
 
 export default {
@@ -76,66 +107,81 @@ export default {
   setup: () => ({
     v$: useVuelidate(),
   }),
-  validations: {
-    itemInstance: {
-      name: { required },
-      value: {
-        required,
-        minValue: minValue(0),
+  validations() {
+    const defaults = {
+      itemInstance: {
+        name: { required },
       },
-    },
+    };
+    const defaultBooleanConfig = {
+      itemInstance:{
+        value: {
+          required,
+        },
+      }
+    }
+    const defaultNumberConfig = {
+      itemInstance:{
+        value: {
+          required,
+          minValue: minValue(0),
+        },
+      }
+    }
+    const defaultSelectConfig = {
+      itemInstance: {
+        format: { required },
+        separator: { required },
+      },
+    }
+
+    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:
+        if (this.itemInstance.format === exportSettingsEnum.XLS) {
+          return deepmerge(defaults, defaultSelectConfig);
+        } else {
+          return deepmerge(defaults, {
+            itemInstance: {
+              format: { required },
+            },
+          });
+        }
+      default:
+        return defaults;
+    }
+  },
+
+  data() {
+    return {
+      exportSettingsEnum,
+    };
   },
   computed: {
+    exportSettingOptions() {
+      return Object.keys(exportSettingsEnum)
+      .map(key => ({ name: exportSettingsEnum[key], value: exportSettingsEnum[key], id: exportSettingsEnum[key] }));
+    },
     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 defaultNumberConfig = deepmerge(defaultConfig, {
-        component: 'wt-input',
-        label: this.$tc('vocabulary.values', 1),
-        bind: {
-          type: 'number',
-        },
-        on: {
-          input: (event) => this.setItemProp({ prop: 'value', value: +event }),
-        },
-      });
-
-      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 {};
-        }
-      }
+    specificControls() {
+      return ConfigurationTypeLookup[this.itemInstance.name].controls
+      .reduce((controls, control) => ({
+        ...controls,
+        [control]: true,
+      }), {});
     },
   },
   methods: {
@@ -160,6 +206,23 @@ export default {
     close() {
       this.$emit('close');
     },
+    selectHandler(selectedValue) {
+      this.itemInstance.format = selectedValue;
+      if (this.itemInstance.format?.value !== exportSettingsEnum.XLS) {
+        delete this.itemInstance.separator;
+      }
+      this.handleDefaultSelectConfigInput();
+    },
+    inputHandler(inputValue) {
+      this.itemInstance.separator = inputValue;
+      this.handleDefaultSelectConfigInput();
+    },
+    handleDefaultSelectConfigInput() {
+      this.setItemProp({
+        prop: 'value',
+        value: { format: this.itemInstance.format.name, separator: this.itemInstance.separator },
+      });
+    },
     async loadParameterList(params) {
       return await ConfigurationAPI.getObjectsList({ ...params, size: 5000 });
     },

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

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

src/modules/system/modules/configuration/lookups/ConfigurationType.lookup.js

@@ -0,0 +1,41 @@
+import { EngineSystemSettingName } from 'webitel-sdk';
+
+const ConfigurationTypeLookup = Object.freeze({
+  [EngineSystemSettingName.EnableOmnichannel]: {
+    controls: [
+      'defaultBooleanConfig',
+    ],
+  },
+  [EngineSystemSettingName.AmdCancelNotHuman]: {
+    controls: [
+      'defaultBooleanConfig',
+    ],
+  },
+  [EngineSystemSettingName.Enable2fa]: {
+    controls: [
+      'defaultBooleanConfig',
+    ],
+  },
+  [EngineSystemSettingName.MemberChunkSize]: {
+    controls: [
+      'defaultNumberConfig',
+    ],
+  },
+  [EngineSystemSettingName.SearchNumberLength]: {
+    controls: [
+      'defaultNumberConfig',
+    ],
+  },
+  [EngineSystemSettingName.SchemeVersionLimit]: {
+    controls: [
+      'defaultNumberConfig',
+    ],
+  },
+  [EngineSystemSettingName.ExportSettings]: {
+    controls: [
+      'defaultSelectConfig',
+    ],
+  },
+});
+
+export default ConfigurationTypeLookup;