refactor: refactoring links, popups, etc [WTEL-4531, WTEL-4528]

package.json

@@ -16,7 +16,7 @@
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.3.0",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.4.28",
+    "@webitel/ui-sdk": "^24.6.0",
     "axios": "^1.6.8",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",

src/app/components/utils/adm-item-link.vue

@@ -0,0 +1,38 @@
+<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>

src/app/components/utils/object-list-popup/object-list-popup.vue

@@ -1,6 +1,7 @@
 <template>
   <wt-popup
-    min-width="480"
+    size="sm"
+    v-bind="$attrs"
     @close="close"
   >
     <template #title>

src/app/components/utils/selection-popup/selection-popup.vue

@@ -1,8 +1,8 @@
 <template>
   <wt-popup
-    :min-width="minWidth"
     class="selection-popup"
     overflow
+    v-bind="$attrs"
     @close="close"
   >
     <template #title>
@@ -18,8 +18,8 @@
           @click="selectOption(option)"
         >
           <slot
-            name="option"
             :option="option"
+            name="option"
           >
             <wt-icon
               v-if="option.icon"
@@ -84,10 +84,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    minWidth: {
-      type: [String, Number],
-      default: 480,
-    },
   },
   methods: {
     add() {

src/app/mixins/baseMixins/baseObjectMixin/baseObjectMixin.js

@@ -15,18 +15,24 @@ export default {
   mixins: [resetOnDestroyMixin, openedObjectValidationMixin],
 
   computed: {
+    id() {
+      throw new Error('Override id param for a component');
+    },
+    new() {
+      return this.$route.params.new;
+    },
     saveText() {
       // if it's a new item
       // OR any fields have changed
-      return !this.id || this.itemInstance._dirty
+      return this.new || this.itemInstance._dirty
         ? this.$t('objects.save') : this.$t('objects.saved');
     },
 
     disabledSave() {
       // if there's a validation problem
       // OR it's edit and any fields haven't changed
       return this.checkValidations() ||
-        (!this.itemInstance._dirty && !!this.id);
+        (!this.itemInstance._dirty && !this.new);
     },
   },
 
@@ -45,7 +51,7 @@ export default {
 
     async save() {
       if (!this.disabledSave) {
-        if (this.id) {
+        if (!this.new) {
           await this.updateItem();
         } else {
           try {
@@ -60,12 +66,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 },
       });
     },
   },

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

@@ -85,7 +85,11 @@ export default {
       },
     }),
     create() {
-      this.$router.push({ name: `${this.routeName}-new` });
+      this.$router.push({
+        params: {
+          id: 'new',
+        },
+      });
     },
     edit(item) {
       this.$router.push(this.editLink(item));

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

@@ -5,7 +5,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;
     },
   },

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

@@ -60,6 +60,7 @@ export default {
     }),
 
     async loadPageData() {
+      if (this.new) return;
       await this.setId(this.$route.params.id);
       return this.loadItem();
     },

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

@@ -5,7 +5,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;
     },
   },

src/app/mixins/objectPagesMixins/openedObjectTableTabMixin/openedObjectTableTabMixin.js

@@ -120,9 +120,8 @@ export default {
         try {
           if (!this.parentId) {
             await this.addParentItem();
-            const routeName = this.$route.name.replace('-new', '-edit');
             await this.$router.replace({
-              name: routeName,
+              ...this.$route,
               params: { id: this.parentId },
             });
           }