20015 - Fixing modal not opening in details (#2740)

* Fixing modal not opening

* Dropdown pointer

* Passing props.selectedShortName

* Watch update

Author: rodrigo-barraza

auth-web/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.5.12",
+  "version": "2.5.13",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/package.json

@@ -120,7 +120,7 @@
                     @click="viewDetails(index)"
                   >
                     <v-icon small>mdi-format-list-bulleted</v-icon>
-                    <span class="pl-1">View Detail</span>
+                    <span class="pl-1 cursor-pointer">View Detail</span>
                   </v-list-item-subtitle>
                 </v-list-item>
               </v-list>
@@ -264,7 +264,7 @@ export default defineComponent({
       root.$router?.push({
         name: 'shortnamedetails',
         params: {
-          'shortNameId': state.results[index].id
+          'shortNameId': state.results[index].id.toString()
         }
       })
     }
@@ -354,6 +354,14 @@ export default defineComponent({
 @import '@/assets/scss/actions.scss';
 @import '@/assets/scss/ShortnameTables.scss';
 
+.actions-dropdown_item {
+  padding: 0.5rem 1rem;
+  &:hover {
+    background-color: $gray1;
+    color: $app-blue !important;
+  }
+}
+
 #unlinked-bank-short-names {
   border: 1px solid #e9ecef
 }

auth-web/src/components/pay/UnlinkedShortNameTable.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card v-if="shortNameDetails.shortName">
     <ShortNameLinkingDialog
-      :isShortNameLinkingDialogOpen="state.isShortNameLinkingDialogOpen"
+      :isShortNameLinkingDialogOpen="isShortNameLinkingDialogOpen"
       :selectedShortName="shortNameDetails"
       @close-short-name-linking-dialog="closeShortNameLinkingDialog"
       @on-link-account="onLinkAccount"
@@ -43,7 +43,7 @@
 </template>
 <script lang="ts">
 
-import { computed, defineComponent, reactive } from '@vue/composition-api'
+import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
 import ConfigHelper from '@/util/config-helper'
 import { SessionStorageKeys } from '@/util/constants'
 import ShortNameLinkingDialog from '@/components/pay/eft/ShortNameLinkingDialog.vue'
@@ -85,7 +85,7 @@ export default defineComponent({
     }
 
     return {
-      state,
+      ...toRefs(state),
       isLinked,
       accountDisplayText,
       openAccountLinkingDialog,

auth-web/src/components/pay/eft/ShortNameAccountLink.vue

@@ -168,9 +168,9 @@ export default defineComponent({
     onMounted(async () => {
     })
 
-    watch(() => props.selectedShortName, (selectedShortNameNewValue) => {
+    watch(() => [props.selectedShortName, props.isShortNameLinkingDialogOpen], ([selectedShortNameNewValue]) => {
       if (props.isShortNameLinkingDialogOpen && selectedShortNameNewValue) {
-        openAccountLinkingDialog(props.selectedShortName)
+        openAccountLinkingDialog(selectedShortNameNewValue)
       }
     })