@webitel/ui-sdk 3.0.12 → 3.1.0-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.0.12",
+  "version": "3.1.0-2",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/store/BaseStoreModules/ApiStoreModule.js

@@ -0,0 +1,29 @@
+import BaseStoreModule
+  from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
+
+export default class ApiStoreModule extends BaseStoreModule {
+  generateAPIActions(api) {
+    if (!api) throw new ReferenceError('pass API module!');
+    this.actions
+      .GET_LIST = (
+      context,
+      params = {},
+    ) => api.getList({ ...context.state, ...params });
+    this.actions
+      .GET_ITEM = (
+      context,
+      params = {},
+    ) => api.get({ ...context.state, ...params });
+    this.actions
+      .POST_ITEM = (context) => api.add(context.state);
+    this.actions
+      .PATCH_ITEM = (context, { id, changes }) => (
+      api.patch({ ...context.state, id, changes })
+    );
+    this.actions
+      .UPD_ITEM = (context) => api.update(context.state);
+    this.actions
+      .DELETE_ITEM = (context, id) => api.delete({ ...context.state, id });
+    return this;
+  }
+}

package/src/store/BaseStoreModules/CardStoreModule.js

@@ -0,0 +1,78 @@
+import BaseStoreModule
+  from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
+import deepCopy from 'deep-copy';
+
+export default class CardStoreModule extends BaseStoreModule {
+  state = {
+    itemId: 0,
+    itemInstance: {},
+  };
+
+  actions = {
+    SET_PARENT_ITEM_ID: (context, id) => {
+      context.commit('SET_PARENT_ITEM_ID', id);
+    },
+    SET_ITEM_ID: (context, id) => {
+      if (id !== 'new') context.commit('SET_ITEM_ID', id);
+      else context.commit('SET_ITEM_ID', 0);
+    },
+    LOAD_ITEM: async (context) => {
+      if (context.state.itemId) {
+        const item = await context.dispatch('GET_ITEM');
+        context.commit('SET_ITEM', item);
+      }
+    },
+    ADD_ITEM: async (context) => {
+      if (!context.state.itemId) {
+        const { id } = await context.dispatch('POST_ITEM');
+        await context.dispatch('SET_ITEM_ID', id);
+        context.dispatch('LOAD_ITEM');
+      }
+    },
+    UPDATE_ITEM: async (context) => {
+      if (context.state.itemInstance._dirty) {
+        await context.dispatch('UPD_ITEM');
+        context.dispatch('LOAD_ITEM');
+      }
+    },
+    SET_ITEM_PROPERTY: (context, payload) => {
+      context.commit('SET_ITEM_PROPERTY', payload);
+      context.commit('SET_ITEM_PROPERTY', { prop: '_dirty', value: true });
+    },
+    RESET_ITEM_STATE: async (context) => {
+      context.commit('RESET_ITEM_STATE');
+    },
+  };
+
+  mutations = {
+    SET_PARENT_ITEM_ID: (state, id) => {
+      state.parentId = id;
+    },
+    SET_ITEM_ID: (state, id) => {
+      state.itemId = id;
+    },
+    SET_ITEM_PROPERTY: (state, { prop, value }) => {
+      state.itemInstance[prop] = value;
+    },
+    SET_ITEM: (state, item) => {
+      state.itemInstance = item;
+    },
+    RESET_ITEM_STATE: (state) => {
+      Object.assign(state, deepCopy(this.state));
+    },
+  };
+
+  getModule({
+              state = {},
+              ...rest
+            } = {}) {
+    this.state = {
+      ...this.state,
+      state,
+    };
+    return super.getModule({
+      state: deepCopy(this.state),
+      ...rest,
+    });
+  }
+}

package/src/store/BaseStoreModules/TableStoreModule.js

@@ -0,0 +1,181 @@
+import {
+  SortSymbols,
+  sortToQueryAdapter,
+} from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+import BaseStoreModule
+  from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
+
+export default class TableStoreModule extends BaseStoreModule {
+  state = {
+    headers: [],
+    dataList: [],
+    size: 10,
+    search: '',
+    page: 1,
+    sort: '',
+    isNextPage: false,
+  };
+
+  actions = {
+    // HOOKS TO BE OVERRIDEN, IF NEEDED
+    BEFORE_SET_DATA_LIST_HOOK: (context, { items, next }) => ({ items, next }),
+    AFTER_SET_DATA_LIST_HOOK: (context, { items, next }) => ({ items, next }),
+
+    LOAD_DATA_LIST: async (context, _query) => {
+      const query = { ...context.getters['filters/GET_FILTERS'], ..._query };
+      try {
+        let {
+          items = [],
+          next = false,
+        } = await context.dispatch('api/GET_LIST', query);
+        /* we should set _isSelected property to all items in tables cause their checkbox selection
+        * is based on this property. Previously, this prop was set it api consumers, but now
+        * admin-specific were replaced by webitel-sdk consumers and i supposed it will be
+        * weird to set this property in each api file through defaultListObject */
+        items = items.map((item) => ({ ...item, _isSelected: false }));
+        const afterHook = await context.dispatch('BEFORE_SET_DATA_LIST_HOOK', {
+          items,
+          next,
+        });
+        context.commit('SET_DATA_LIST', afterHook.items);
+        context.commit('SET_IS_NEXT', afterHook.next);
+        context.dispatch('AFTER_SET_DATA_LIST_HOOK', afterHook);
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    SET_SIZE: async (context, size) => {
+      context.commit('SET_SIZE', size);
+      await context.dispatch('RESET_PAGE');
+    },
+    SET_SEARCH: async (context, search) => {
+      context.commit('SET_SEARCH', search);
+      await context.dispatch('RESET_PAGE');
+    },
+    NEXT_PAGE: (context) => {
+      const page = context.state.page + 1;
+      context.commit('SET_PAGE', page);
+      context.dispatch('LOAD_DATA_LIST');
+    },
+    PREV_PAGE: (context) => {
+      if (context.state.page > 1) {
+        const page = context.state.page - 1;
+        context.commit('SET_PAGE', page);
+        context.dispatch('LOAD_DATA_LIST');
+      }
+    },
+    RESET_PAGE: (context) => {
+      const page = 1;
+      context.commit('SET_PAGE', page);
+    },
+    SET_HEADERS: (context, headers) => context.commit('SET_HEADERS', headers),
+    SORT: async (context, { header, nextSortOrder }) => {
+      const sort = nextSortOrder
+        ? `${sortToQueryAdapter(nextSortOrder)}${header.field}`
+        : nextSortOrder;
+      context.commit('SET_SORT', sort);
+      context.dispatch('UPDATE_HEADER_SORT', { header, nextSortOrder });
+      await context.dispatch('RESET_PAGE');
+      return context.dispatch('LOAD_DATA_LIST');
+    },
+    UPDATE_HEADER_SORT: (context, { header, nextSortOrder }) => {
+      const headers = context.state.headers.map((oldHeader) => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (oldHeader.sort !== undefined) {
+          return {
+            ...oldHeader,
+            sort: oldHeader.field === header.field
+              ? nextSortOrder
+              : SortSymbols.NONE,
+          };
+        }
+        return oldHeader;
+      });
+      context.commit('SET_HEADERS', headers);
+    },
+    PATCH_ITEM_PROPERTY: async (context, {
+      item, index, prop, value,
+    }) => {
+      await context.commit('PATCH_ITEM_PROPERTY', { index, prop, value });
+      const id = item?.id || context.state.dataList[index].id;
+      const changes = { [prop]: value };
+      try {
+        await context.dispatch('api/PATCH_ITEM', { id, changes });
+        context.commit('PATCH_ITEM_PROPERTY', {
+          item, index, prop, value,
+        });
+      } catch {
+        context.dispatch('LOAD_DATA_LIST');
+      }
+    },
+    DELETE: async (context, deleted) => {
+      let action = 'DELETE_SINGLE';
+      if (Array.isArray(deleted)) {
+        if (deleted.length) action = 'DELETE_BULK';
+        else action = 'DELETE_ALL';
+      }
+      try {
+        await context.dispatch(action, deleted);
+      } catch (err) {
+        throw err;
+      } finally {
+        await context.dispatch('LOAD_DATA_LIST');
+      }
+    },
+    DELETE_SINGLE: async (context, { id }) => {
+      try {
+        await context.dispatch('api/DELETE_ITEM', id);
+      } catch (err) {
+        throw err;
+      }
+    },
+    DELETE_BULK: async (
+      context,
+      deleted,
+    ) => Promise.allSettled(deleted.map((item) => context.dispatch('DELETE_SINGLE', item))),
+    // REMOVE_ITEM: async (context, index) => {
+    //   const id = context.state.dataList[index].id;
+    //   context.commit('REMOVE_ITEM', index);
+    //   try {
+    //     await context.dispatch('DELETE_ITEM', id);
+    //   } catch (err) {
+    //     throw err;
+    //   }
+    // },
+  };
+
+  mutations = {
+    SET_DATA_LIST: (state, items) => {
+      state.dataList = items;
+    },
+    SET_SIZE: (state, size) => {
+      state.size = size;
+    },
+    SET_SEARCH: (state, search) => {
+      state.search = search;
+    },
+    SET_PAGE: (state, page) => {
+      state.page = page;
+    },
+    SET_SORT: (state, sort) => {
+      state.sort = sort;
+    },
+    SET_IS_NEXT: (state, next) => {
+      state.isNextPage = next;
+    },
+    SET_HEADERS: (state, headers) => {
+      state.headers = headers;
+    },
+    PATCH_ITEM_PROPERTY: (state, { index, prop, value }) => {
+      state.dataList[index][prop] = value;
+    },
+    // REMOVE_ITEM: (state, index) => {
+    //   state.dataList.splice(index, 1);
+    // },
+  };
+
+  constructor({ headers = [] }) {
+    super();
+    this.state.headers = headers;
+  }
+}