Merge pull request #738 from webitel/refactoring/routing

Refactoring/routing
webitel · Jul 31, 2024 · ac7b5c3 · ac7b5c3
2 parents f55e8b3 + 38f1b0b
commit ac7b5c3
Show file tree

Hide file tree

Showing 221 changed files with 6,091 additions and 2,895 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/utils/adm-item-link.vue b/src/app/components/utils/adm-item-link.vue
@@ -0,0 +1,34 @@
+<template>
+<wt-item-link
+  :link="link"
+  v-bind="attrs"
+>
+<slot />
+</wt-item-link>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue';
+import RouteNames from '../../router/_internals/RouteNames.enum.js';
+const props = defineProps({
+  routeName: {
+    type: String,
+    required: true,
+    validator: (v) => Object.values(RouteNames).includes(v),
+  },
+  id: {
+    type: [String, Number],
+    required: true,
+  },
+});
+const attrs = useAttrs();
+const link = computed(() => {
+  return {
+    name: `${props.routeName}-card`,
+    params: { id: props.id }
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/app/components/utils/object-list-popup/object-list-popup.vue b/src/app/components/utils/object-list-popup/object-list-popup.vue
@@ -1,5 +1,6 @@
 <template>
   <wt-popup
+    v-bind="$attrs"
     size="sm"
     min-width="480"
     @close="close"

diff --git a/src/app/components/utils/selection-popup/selection-popup.vue b/src/app/components/utils/selection-popup/selection-popup.vue
@@ -1,5 +1,6 @@
 <template>
   <wt-popup
+    v-bind="$attrs"
     :min-width="minWidth"
     size="sm"
     class="selection-popup"

diff --git a/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue b/src/app/components/utils/table-cell/one-plus-many-table-cell/one-plus-many-table-cell.vue
@@ -5,7 +5,7 @@
       class="nameLink"
       tabIndex="0"
       @click.prevent="inputHandler"
-      @keypress.enter.prevent="inputHandler"
+      @keydown.enter.prevent="inputHandler"
     >{{ collection[0].name }}</a>
     <wt-chip v-if="collection.length > 1">
       +{{ collection.length - 1 }}
@@ -32,6 +32,7 @@ export default {
 <style lang="scss" scoped>
 .nameLink {
   color: var(--text-main-color);
+  cursor: pointer;
 }
 
 .wt-chip {

diff --git a/src/app/mixins/baseMixins/baseObjectMixin/baseObjectMixin.js b/src/app/mixins/baseMixins/baseObjectMixin/baseObjectMixin.js
@@ -14,6 +14,12 @@ export default {
   mixins: [resetOnDestroyMixin, openedObjectValidationMixin],
 
   computed: {
+    id() {
+      throw new Error('Override id param for a component');
+    },
+    new() {
+      return this.$route.params.id === 'new';
+    },
     saveText() {
       // if it's a new item
       // OR any fields have changed
@@ -44,7 +50,7 @@ export default {
 
     async save() {
       if (!this.disabledSave) {
-        if (this.id) {
+        if (!this.new) {
           await this.updateItem();
         } else {
           try {
@@ -59,14 +65,10 @@ export default {
       }
     },
 
-    async redirectToEdit() {
-      const routeName = this.$route.name.replace('-new', '-edit');
+    async redirectToEdit(id = this.id) {
       return this.$router.replace({
-        name: routeName,
-        params: {
-          id: this.id,
-        },
-        hash: this.$route.hash,
+        ...this.$route,
+        params: { id },
       });
     },
   },

diff --git a/src/app/mixins/baseMixins/baseTableMixin/itemLinkMixin.js b/src/app/mixins/baseMixins/baseTableMixin/itemLinkMixin.js
@@ -7,12 +7,7 @@ export default {
   methods: {
     editLink({ id }) {
       const routeName = this.routeName || this.tableObjectRouteName;
-      return {
-        name: `${routeName}-edit`,
-        params: {
-          id,
-        },
-      };
+      return { name: `${routeName}-card`, params: { id } };
     },
   },
 };
diff --git a/src/app/mixins/objectPagesMixins/historyPopupMixin/historyPopupMixin.js b/src/app/mixins/objectPagesMixins/historyPopupMixin/historyPopupMixin.js
@@ -4,7 +4,7 @@ import tableComponentMixin from '../objectTableMixin/tableComponentMixin';
 
 export default {
   mixins: [tableComponentMixin],
-  destroyed() {
+  beforeUnmount() {
     this.resetState();
   },
   computed: {
@@ -15,6 +15,15 @@ export default {
       to(state) {
         return getNamespacedState(state, this.namespace).to;
       },
+      isHistoryOpened() {
+        return this.$route.params.historyId;
+      },
+      fromQuery() {
+        return this.$route.query.from;
+      },
+      toQuery() {
+        return this.$route.query.to;
+      },
     }),
   },
   methods: {
@@ -25,16 +34,61 @@ export default {
       setTo(dispatch, payload) {
         return dispatch(`${this.namespace}/SET_TO`, payload);
       },
+      setPeriod(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_PERIOD`, payload);
+      },
       resetState(dispatch, payload) {
         return dispatch(`${this.namespace}/RESET_ITEM_STATE`, payload);
       },
+      setParentItemId(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_PARENT_ITEM_ID`, payload);
+      },
     }),
+    selectForm(from) {
+      return this.$router.push({
+        ...this.$route,
+        query: { ...this.$route.query, from, to: this.toQuery || Date.now() },
+      })
+    },
+    selectTo(to){
+      return this.$router.push({
+        ...this.$route,
+        query: { ...this.$route.query, to, from: this.fromQuery || Date.now() },
+      })
+    },
     prettifyTime(time) {
       if (!time) return 'none';
       return new Date(+time).toLocaleString();
     },
     close() {
       this.$emit('close');
     },
+    initTableView() {
+      // just implement this method to use it with :shown prop.
+    },
+  },
+
+  watch: {
+    isHistoryOpened: {
+      async handler(id) {
+        if (id) {
+          this.setParentItemId(id);
+          await this.loadList();
+
+          if (this.fromQuery && this.toQuery) {
+            this.setPeriod({from: this.fromQuery, to: this.toQuery})
+          }
+
+        } else {
+          this.resetState();
+        }
+      }, immediate: true,
+    },
+    fromQuery(from) {
+      if (from) this.setFrom(from)
+    },
+    toQuery(to) {
+      if (to) this.setTo(to)
+    },
   },
 };
diff --git a/src/app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin.js b/src/app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin.js
@@ -84,9 +84,7 @@ export default {
       },
     }),
     create() {
-      this.$router.push({
-        name: `${this.routeName}-new`,
-      });
+      this.$router.push({ name: `${this.routeName}-card`, params: { id: 'new' } });
     },
     edit(item) {
       this.$router.push(this.editLink(item));

diff --git a/...p/mixins/objectPagesMixins/openedObjectMixin/_internals/openedObjectAccessControlMixin.js b/...p/mixins/objectPagesMixins/openedObjectMixin/_internals/openedObjectAccessControlMixin.js
@@ -4,7 +4,7 @@ export default {
   mixins: [accessControlMixin],
   computed: {
     hasSaveActionAccess() {
-      if (this.$route.name.includes('-edit')) return this.hasEditAccess;
+      if (this.$route.params.id === 'new') return this.hasEditAccess;
       return this.hasCreateAccess;
     },
   },

diff --git a/src/app/mixins/objectPagesMixins/openedObjectMixin/nestedObjectMixin.js b/src/app/mixins/objectPagesMixins/openedObjectMixin/nestedObjectMixin.js
@@ -11,9 +11,6 @@ import baseObjectMixin from '../../baseMixins/baseObjectMixin/baseObjectMixin';
  */
 export default {
   mixins: [baseObjectMixin],
-  created() {
-    this.loadItem();
-  },
 
   computed: {
     ...mapState({
@@ -31,6 +28,9 @@ export default {
       setItemProp(dispatch, payload) {
         return dispatch(`${this.namespace}/SET_ITEM_PROPERTY`, payload);
       },
+      setId(dispatch, payload) {
+        return dispatch(`${this.namespace}/SET_ITEM_ID`, payload);
+      },
     }),
 
     async save() {
@@ -50,5 +50,12 @@ export default {
     close() {
       this.$emit('close');
     },
+    handleIdChange(id) {
+      if (id) {
+        this.setId(id);
+        this.loadItem();
+      }
+      this.resetState();
+    }
   },
 };
diff --git a/src/app/mixins/objectPagesMixins/openedObjectMixin/openedObjectMixin.js b/src/app/mixins/objectPagesMixins/openedObjectMixin/openedObjectMixin.js
@@ -16,14 +16,8 @@ export default {
   components: {
     Permissions,
   },
-  data: () => ({
-    currentTab: {
-      value: 'general',
-    },
-  }),
 
   created() {
-    this.setInitialTab();
     this.loadPageData();
   },
 
@@ -40,8 +34,12 @@ export default {
       return {
         text: this.$tc('objects.permissions.permissions', 2),
         value: 'permissions',
+        pathName: this.permissionsTabPathName,
       };
     },
+    currentTab() {
+      return this.tabs.find(({pathName}) => this.$route.name === pathName) || this.tabs[0];
+    },
   },
 
   methods: {
@@ -65,9 +63,12 @@ export default {
 
       // 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
       if(window.history.length === 1) window.close();
-      this.$router.go(-1);
+      this.$router.push({name: this.routeName});
     },
+    changeTab(tab) {
+      this.$router.push({ ...this.$route, name: tab.pathName });
+    }
   },
 };
diff --git a/...ns/objectPagesMixins/openedObjectTabMixin/_internals/openedObjectTabAccessControlMixin.js b/...ns/objectPagesMixins/openedObjectTabMixin/_internals/openedObjectTabAccessControlMixin.js
@@ -4,7 +4,7 @@ export default {
   mixins: [accessControlMixin],
   computed: {
     disableUserInput() {
-      if (this.$route.name.includes('-edit')) return !this.hasEditAccess;
+      if (this.$route.params.id === 'new') return !this.hasEditAccess;
       return !this.hasCreateAccess;
     },
   },

diff --git a/src/app/mixins/objectPagesMixins/openedObjectTableTabMixin/openedObjectTableTabMixin.js b/src/app/mixins/objectPagesMixins/openedObjectTableTabMixin/openedObjectTableTabMixin.js
@@ -115,15 +115,12 @@ export default {
         try {
           if (!this.parentId) {
             await this.addParentItem();
-            const routeName = this.$route.name.replace('-new', '-edit');
             await this.$router.replace({
-              name: routeName,
-              params: {
-                id: this.parentId,
-              },
+              ...this.$route,
+              params: { id: this.parentId },
             });
           }
-          this.openPopup();
+          this.addItem();
         } catch (err) {
           throw err;
         }
@@ -134,11 +131,6 @@ export default {
         });
       }
     },
-
-    edit(item) {
-      this.setId(item.id);
-      this.openPopup();
-    },
     sort(...params) {
       this.dispatchSort({
         header: params[0],

diff --git a/src/app/mixins/objectPagesMixins/permissionsTabMixin/permissionsTabMixin.js b/src/app/mixins/objectPagesMixins/permissionsTabMixin/permissionsTabMixin.js
@@ -36,6 +36,9 @@ export default {
       isNext(state) {
         return getNamespacedState(state, `${this.namespace}/${this.subNamespace}`).isNextPage;
       },
+      permissionId() {
+        return this.$route.params.permissionId;
+      },
     }),
     headers() {
       if (!this.headersValue) return [];
@@ -116,11 +119,28 @@ export default {
         return dispatch(`${this.namespace}/${this.subNamespace}/RESET_ITEM_STATE`, payload);
       },
     }),
+    addItem() {
+      return this.$router.push({
+        ...this.$route,
+        params: { permissionId: 'new' },
+      });
+    },
     openRoleSelectPopup() {
       this.isRoleSelectPopup = true;
     },
     closeRoleSelectPopup() {
+      this.$router.go(-1);
       this.isRoleSelectPopup = false;
     },
   },
+  watch: {
+    permissionId: {
+      handler(value) {
+        if (value === 'new') {
+          this.openRoleSelectPopup();
+        }
+      },
+      immediate: true,
+    },
+  }
 };