Feat/ lookups - object pages mixins [WTEL-4740]

src/app/mixins/objectPagesMixins/objectTableMixin/_internals/objectTableAccessControlMixin.js

@@ -0,0 +1,10 @@
+import accessControlMixin from '../../../baseMixins/accessControlMixin/accessControlMixin';
+
+export default {
+  mixins: [accessControlMixin],
+  computed: {
+    hasTableActions() {
+      return this.hasEditAccess || this.hasDeleteAccess;
+    },
+  },
+};

src/app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin.js

@@ -0,0 +1,112 @@
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import baseTableMixin from '../../baseMixins/baseTableMixin/baseTableMixin';
+import objectTableAccessControlMixin from './_internals/objectTableAccessControlMixin';
+
+/**
+ * @fileOverview contains main tables (like the-contact-groups.vue) common logic
+ * @param {string} this.namespace - should be declared in data()
+ *      and contain a string name for storeModule like 'ccenter/agents/skills'
+ * @param {string} this.routeName - should be declared in data()
+ *      and contain a string name for edit and new entity route names
+ *      like 'cc-agent' for create() and edit() method standardization
+ * @extends baseTableMixin, objectTableAccessControlMixin
+ */
+export default {
+  mixins: [baseTableMixin, objectTableAccessControlMixin],
+  computed: {
+    ...mapState({
+      headersValue(state) {
+        return getNamespacedState(state, this.namespace).headers;
+      },
+      dataList(state) {
+        console.warn(getNamespacedState(state, this.namespace));
+        return getNamespacedState(state, this.namespace).dataList;
+      },
+      page(state) {
+        return getNamespacedState(state, this.namespace).page;
+      },
+      size(state) {
+        return getNamespacedState(state, this.namespace).size;
+      },
+      search(state) {
+        return getNamespacedState(state, this.namespace).search;
+      },
+      isNext(state) {
+        return getNamespacedState(state, this.namespace).isNextPage;
+      },
+    }),
+    ...mapGetters('appearance', {
+      darkMode: 'DARK_MODE',
+    }),
+    headers() {
+      if (!this.headersValue) return [];
+      return this.headersValue.map((header) => {
+        let localizedText;
+        // set "false" if no locale prop
+
+        if (header.locale) {
+          localizedText = !header.locale || typeof header.locale === 'string'
+              ? this.$t(header.locale)
+              : this.$t(...header.locale);
+        }
+        return {
+          ...header,
+          text: localizedText || header.text,
+        };
+      });
+    },
+    selectedRows() {
+      return this.dataList.filter((item) => item._isSelected);
+    },
+    // shows delete table action if some items are selected
+    anySelected() {
+      return !this.selectedRows?.length;
+    },
+  },
+  methods: {
+    ...mapActions({
+      loadDataList(dispatch, payload) {
+        return dispatch(`${this.namespace}/LOAD_DATA_LIST`, payload);
+      },
+      setSize(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_SIZE`, payload);
+      },
+      setSearch(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_SEARCH`, payload);
+      },
+      nextPage(dispatch, payload) {
+        return dispatch(`${this.namespace}/NEXT_PAGE`, payload);
+      },
+      prevPage(dispatch, payload) {
+        return dispatch(`${this.namespace}/PREV_PAGE`, payload);
+      },
+      dispatchSort(dispatch, payload) {
+        return dispatch(`${this.namespace}/SORT`, payload);
+      },
+      dispatchDelete(dispatch, payload) {
+        return dispatch(`${this.namespace}/DELETE`, payload);
+      },
+      patchItem(dispatch, payload) {
+        return dispatch(`${this.namespace}/PATCH_ITEM_PROPERTY`, payload);
+      },
+      resetState(dispatch, payload) {
+        return dispatch(`${this.namespace}/RESET_ITEM_STATE`, payload);
+      },
+    }),
+    create() {
+      this.resetState();
+      this.$router.push({ name: `${this.routeName}-card`, params: { id: 'new' } });
+    },
+    edit(item) {
+      this.resetState();
+      this.$router.push(this.editLink(item));
+    },
+    sort(...params) {
+      this.dispatchSort({
+        header: params[0],
+        nextSortOrder: params[1],
+      });
+    },
+  },
+};

src/app/mixins/objectPagesMixins/openedObjectMixin/_internals/openedObjectAccessControlMixin.js

@@ -0,0 +1,11 @@
+import accessControlMixin from '../../../baseMixins/accessControlMixin/accessControlMixin';
+
+export default {
+  mixins: [accessControlMixin],
+  computed: {
+    hasSaveActionAccess() {
+      if (this.$route.params.id === 'new') return this.hasEditAccess;
+      return this.hasCreateAccess;
+    },
+  },
+};

src/app/mixins/objectPagesMixins/openedObjectMixin/nestedObjectMixin.js

@@ -0,0 +1,54 @@
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { mapActions, mapState } from 'vuex';
+import baseObjectMixin from '../../baseMixins/baseObjectMixin/baseObjectMixin';
+
+/**
+ * @fileOverview contains nestedObject common logic
+ *      (popup entity inside objectTab like opened-agent-skills-popup.vue)
+ * @param {string} this.namespace - should be declared in data()
+ *      and contain a string name for storeModule like 'ccenter/agents/skills'
+ * @extends baseObjectMixin
+ */
+export default {
+  mixins: [baseObjectMixin],
+
+  computed: {
+    ...mapState({
+      id(state) {
+        return getNamespacedState(state, this.namespace).itemId;
+      },
+      itemInstance(state) {
+        return getNamespacedState(state, this.namespace).itemInstance;
+      },
+    }),
+  },
+
+  methods: {
+    ...mapActions({
+      setItemProp(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_ITEM_PROPERTY`, payload);
+      },
+      setId(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_ITEM_ID`, payload);
+      },
+    }),
+
+    async save() {
+      const invalid = this.checkValidations();
+      if (!invalid) {
+        try {
+          if (this.id) {
+            await this.updateItem();
+          } else {
+            await this.addItem();
+          }
+          this.close();
+        } catch {}
+      }
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};

src/app/mixins/objectPagesMixins/openedObjectMixin/openedObjectMixin.js

@@ -0,0 +1,78 @@
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { mapActions, mapState } from 'vuex';
+import Permissions from '../../../../modules/_shared/permissions-tab/components/permissions-tab.vue';
+import baseObjectMixin from '../../baseMixins/baseObjectMixin/baseObjectMixin';
+import headlineNavMixin from '../../baseMixins/headlineNavMixin/headlineNavMixin';
+import openedObjectAccessControlMixin from './_internals/openedObjectAccessControlMixin';
+
+/**
+ * @fileOverview contains openedObject (wrapper with tabs, like opened-agent.vue) common logic
+ * @param {string} this.namespace - should be declared in data()
+ *      and contain a string name for storeModule like 'ccenter/agents/skills'
+ * @extends baseObjectMixin
+ */
+export default {
+  mixins: [openedObjectAccessControlMixin, headlineNavMixin, baseObjectMixin],
+  components: {
+    Permissions,
+  },
+
+  created() {
+    this.loadPageData();
+  },
+
+  computed: {
+    ...mapState({
+      id(state) {
+        return getNamespacedState(state, this.namespace).itemId;
+      },
+      itemInstance(state) {
+        return getNamespacedState(state, this.namespace).itemInstance;
+      },
+    }),
+    permissionsTab() {
+      return {
+        text: this.$t('objects.permissions.permissions', 2),
+        value: 'permissions',
+        pathName: this.permissionsTabPathName,
+      };
+    },
+    currentTab() {
+      return this.tabs.find(({pathName}) => this.$route.name === pathName) || this.tabs[0];
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      setId(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_ITEM_ID`, payload);
+      },
+      resetState(dispatch, payload) {
+        return dispatch(`${this.namespace}/RESET_ITEM_STATE`, payload);
+      },
+    }),
+
+    async loadPageData() {
+      await this.setId(this.$route.params.id);
+      return this.loadItem();
+    },
+
+    setInitialTab() {
+      // eslint-disable-next-line prefer-destructuring
+      if (this.tabs) this.currentTab = this.tabs[0];
+    },
+
+    close() {
+
+      // Need to close the tab if it was open in a new tab
+      // https://webitel.atlassian.net/browse/WTEL-4575
+      // TODO delete close method in all opened objects and add to them routeName property
+      this.resetState();
+      if(window.history.length === 1) window.close();
+      this.$router.push({name: this.routeName});
+    },
+    changeTab(tab) {
+      this.$router.push({ ...this.$route, name: tab.pathName });
+    }
+  },
+};

src/app/mixins/objectPagesMixins/openedObjectTabMixin/_internals/openedObjectTabAccessControlMixin.js

@@ -0,0 +1,11 @@
+import accessControlMixin from '../../../baseMixins/accessControlMixin/accessControlMixin';
+
+export default {
+  mixins: [accessControlMixin],
+  computed: {
+    disableUserInput() {
+      if (this.$route.params.id === 'new') return !this.hasEditAccess;
+      return !this.hasCreateAccess;
+    },
+  },
+};

src/app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin.js

@@ -0,0 +1,44 @@
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { mapActions, mapState } from 'vuex';
+
+import openedObjectValidationMixin from '../../baseMixins/openedObjectValidationMixin/openedObjectValidationMixin';
+import openedObjectTabAccessControlMixin from './_internals/openedObjectTabAccessControlMixin';
+
+/**
+ * @fileOverview contains openedObject tab
+ *      (tab with subordinate entity, like opened-agent-general.vue) common logic
+ * @param {string} this.namespace - should be passed as prop from tabs wrapper
+ * @extends openedObjectValidationMixin, openedObjectTabAccessControlMixin
+ */
+export default {
+  mixins: [openedObjectValidationMixin, openedObjectTabAccessControlMixin],
+  props: {
+    namespace: {
+      type: String,
+      // required: true, FIXME: MAKE ME REQUIRED AFTER REFACTOR
+    },
+  },
+  computed: {
+    ...mapState({
+      itemInstance(state) {
+        return getNamespacedState(state, this.namespace).itemInstance;
+      },
+    }),
+  },
+  methods: {
+    ...mapActions({
+      setItemProp(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_ITEM_PROPERTY`, payload);
+      },
+      addVariable(dispatch, payload) {
+        return dispatch(`${this.namespace}/ADD_VARIABLE_PAIR`, payload);
+      },
+      deleteVariable(dispatch, payload) {
+        return dispatch(`${this.namespace}/DELETE_VARIABLE_PAIR`, payload);
+      },
+      setVariableProp(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_VARIABLE_PROP`, payload);
+      },
+    }),
+  },
+};