feature: add display settings[WTEL-3818]

src/app/router/_internals/NavigationPages.lookup.js

@@ -169,6 +169,11 @@ const nav = Object.freeze([
         locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHANGELOGS}`,
         route: 'changelogs',
       },
+      {
+        value: AdminSections.SETTINGS,
+        locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.SETTINGS}`,
+        route: 'settings',
+      },
     ],
   },
 ]);

src/app/router/_internals/RouteNames.enum.js

@@ -47,6 +47,7 @@ export default Object.freeze({
 
   // SYSTEM
   CHANGELOGS: 'changelogs',
+  SETTINGS: 'settings',
 
   SETTINGS_PAGE: 'settings',
   PAGE_403: 'access-denied',

src/app/router/router.js

@@ -66,6 +66,7 @@ const OpenedImportCsv = () => import('../../modules/integrations/modules/import-
 const OpenedTrigger = () => import('../../modules/integrations/modules/triggers/components/opened-trigger.vue');
 const Changelogs = () => import('../../modules/system/modules/changelogs/components/the-changelogs.vue');
 const OpenedChangelog = () => import('../../modules/system/modules/changelogs/components/opened-changelog.vue');
+const OpenedSettings = () => import('../../modules/system/modules/settings/components/opened-settings.vue');
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
@@ -577,6 +578,11 @@ const router = createRouter({
           name: `${RouteNames.CHANGELOGS}-edit`,
           component: OpenedChangelog,
         },
+        {
+          path: '/system/settings',
+          name: RouteNames.SETTINGS,
+          component: OpenedSettings,
+        },
       ],
     },
     {

src/modules/system/modules/settings/api/settings.js

@@ -0,0 +1,55 @@
+import {
+  getDefaultGetListResponse,
+  getDefaultGetParams,
+} from '@webitel/ui-sdk/src/api/defaults';
+import applyTransform, {
+  merge, mergeEach, notify, snakeToCamel,
+  starToSearch,
+} from '@webitel/ui-sdk/src/api/transformers';
+import { SystemSettingServiceApiFactory } from 'webitel-sdk';
+import instance from '../../../../../app/api/instance';
+import configuration from '../../../../../app/api/openAPIConfig';
+
+const service = new SystemSettingServiceApiFactory(configuration, '', instance);
+
+const getList = async (params = {}) => {
+  const {
+    page,
+    size,
+    search,
+    sort,
+    fields,
+  } = params;
+
+  try {
+    const response = await service.searchSystemSetting(
+      page,
+      size,
+      search,
+      sort,
+      fields,
+    );
+    const { items, next } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return {
+      items,
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+const SettingsAPI = {
+  getList,
+  // get,
+  // add,
+  // update,
+  // delete: deleteItem,
+};
+
+export default SettingsAPI;

src/modules/system/modules/settings/components/opened-settings.vue

@@ -0,0 +1,94 @@
+<template>
+  <wt-page-wrapper
+    :actions-panel="false"
+  >
+    <template v-slot:header>
+      <wt-page-header
+        :primary-action="save"
+        :primary-text="saveText"
+        :hide-secondary="true"
+      >
+        <wt-headline-nav :path="path"></wt-headline-nav>
+      </wt-page-header>
+    </template>
+
+    <template v-slot:main>
+      <section>
+        <header class="content-header">
+          <h3 class="content-title">{{ $t('settings.settings') }}</h3>
+          <wt-icon-action
+            action="add"
+            @click="addSetting"
+          ></wt-icon-action>
+        </header>
+        <div class="object-input-grid">
+          <div class="variables">
+            <div
+              class="value-pair"
+              v-for="(item, key) in itemInstance"
+              :key="key"
+            >
+              <wt-input
+                :value="item.name"
+                :placeholder="$t('objects.directory.users.varKey')"
+                @input="setSettingProp({index: key, prop: 'name', value: $event})"
+              ></wt-input>
+              <wt-input
+                :value="item.value"
+                :placeholder="$t('objects.directory.users.varVal')"
+                @input="setSettingProp({index: key, prop: 'value', value: $event})"
+              ></wt-input>
+              <wt-icon-action
+                action="delete"
+                class="value-pair__delete-button"
+                @click="deleteSetting(key)"
+              ></wt-icon-action>
+            </div>
+          </div>
+        </div>
+      </section>
+    </template>
+
+  </wt-page-wrapper>
+</template>
+
+<script>
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { mapActions, mapState } from 'vuex';
+
+export default {
+  name: 'opened-settings',
+  data: () => ({
+    namespace: 'system/settings',
+  }),
+  computed: {
+    ...mapState({
+      itemInstance(state) {
+        return getNamespacedState(state, this.namespace).itemInstance;
+      },
+    }),
+    path() {
+      return [
+        { name: this.$t('objects.system.system') },
+        { name: this.$t('settings.settings'), route: this.namespace },
+      ];
+    },
+  },
+  methods: {
+    ...mapActions({
+      loadSettings(dispatch, payload) {
+        return dispatch(`${this.namespace}/LOAD_SETTINGS`, payload);
+      },
+      setSettingProp(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_SETTING_PROPERTY`, payload);
+      },
+      addSetting(dispatch, payload) {
+        return dispatch(`${this.namespace}/ADD_SETTING`, payload);
+      },
+    }),
+  },
+  mounted() {
+    this.loadSettings();
+  },
+};
+</script>

src/modules/system/modules/settings/store/settings.js

@@ -0,0 +1,45 @@
+import SettingsAPI from '../api/settings';
+import ObjectStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/ObjectStoreModule';
+
+const resettableState = {
+  itemInstance: {
+  },
+};
+
+const actions = {
+  LOAD_SETTINGS: async (context, params) => {
+    const { items } = await SettingsAPI.getList(params);
+    context.commit('SET_SETTINGS', items);
+  },
+  SET_SETTING_PROPERTY: (context, { index, prop, value }) => {
+    context.commit('SET_SETTING_PROPERTY', { index, prop, value });
+    context.commit('SET_ITEM_PROPERTY', { prop: '_dirty', value: true });
+  },
+  ADD_SETTING: (context) => {
+    const pair = { name: '', value: '' };
+    context.commit('ADD_SETTING', pair);
+    context.commit('SET_ITEM_PROPERTY', { prop: '_dirty', value: true });
+  },
+};
+
+const mutations = {
+  SET_SETTINGS: (state, items) => {
+    state.itemInstance = items;
+  },
+  SET_SETTING_PROPERTY: (state, { index, prop, value }) => {
+    state.itemInstance[index][prop] = value;
+  },
+  SET_ITEM_PROPERTY: (state, { prop, value }) => {
+    state.itemInstance[prop] = value;
+  },
+  ADD_SETTING: (state, pair) => {
+    state.itemInstance.push(pair);
+  },
+};
+
+const settings = new ObjectStoreModule({ resettableState })
+.attachAPIModule(SettingsAPI)
+.generateAPIActions()
+.getModule({ actions, mutations });
+
+export default settings;

src/modules/system/store/system.js

@@ -1,8 +1,10 @@
 import changelogs from '../modules/changelogs/store/changelogs';
+import settings from '../modules/settings/store/settings';
 
 export default {
   namespaced: true,
   modules: {
     changelogs,
+    settings,
   },
 };