20415 - Fixes to modal updates (bcgov#2890)

JazzarKarim · Jul 2, 2024 · fea3094 · fea3094
1 parent 182a33e
commit fea3094
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 16 deletions.
diff --git a/auth-web/src/assets/scss/ShortnameTables.scss b/auth-web/src/assets/scss/ShortnameTables.scss
@@ -9,9 +9,6 @@
     padding-top: 16px;
   }
 
-  .base-table__header > tr:first-child > th  {
-    padding: 0 0 0 0 !important;
-  }
   .base-table__header__filter {
     padding-left: 16px;
     padding-right: 4px;

diff --git a/auth-web/src/components/pay/ShortNameLookup.vue b/auth-web/src/components/pay/ShortNameLookup.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="short-name-lookup">
     <v-autocomplete
-      item-disabled="linkedBy"
+      :item-disabled="item => item.statusCode === ShortNameStatus.LINKED"
       :search-input.sync="searchField"
       :hide-no-data="state != LookupStates.NO_RESULTS"
       :items="searchResults"
@@ -89,7 +89,7 @@
             class="result-action"
           >
             <span
-              v-if="item.linkedBy"
+              v-if="item.statusCode === ShortNameStatus.LINKED"
               class="linked"
             >Linked</span>
             <span
@@ -109,6 +109,7 @@ import CommonUtils from '@/util/common-util'
 import { EFTShortnameResponse } from '@/models/eft-transaction'
 import { LookupType } from '@/models/business-nr-lookup'
 import PaymentService from '@/services/payment.services'
+import { ShortNameStatus } from '@/util/constants'
 import _ from 'lodash'
 import { useOrgStore } from '@/stores/org'
 
@@ -251,6 +252,7 @@ export default defineComponent({
       onItemSelected,
       LookupStates,
       LookupType,
+      ShortNameStatus,
       reset
     }
   }

diff --git a/auth-web/src/components/pay/ShortNameSummaryTable.vue b/auth-web/src/components/pay/ShortNameSummaryTable.vue
@@ -315,7 +315,7 @@ export default defineComponent({
 
     async function onLinkAccount (account: any) {
       emit('on-link-account', account)
-      await loadTableSummaryData()
+      await loadTableSummaryData('page', 1)
     }
 
     async function updateDateRange ({ endDate, startDate }: { endDate?: string, startDate?: string }): void {

diff --git a/auth-web/src/components/pay/eft/ShortNameAccountLink.vue b/auth-web/src/components/pay/eft/ShortNameAccountLink.vue
@@ -19,15 +19,15 @@
 
     <v-card-text
       v-if="isLinked"
-      class="pa-5 linked-text"
+      class="pa-0 linked-text"
     >
       <v-btn
         id="link-shortname-btn"
         color="primary"
         outlined
         dark
         large
-        class="mt-0 mr-4 font-weight-regular"
+        class="mt-4 ml-4 font-weight-regular"
         @click="openAccountLinkingDialog()"
       >
         + Link a New Account
@@ -253,9 +253,9 @@ export default defineComponent({
       state.isShortNameLinkingDialogOpen = false
     }
 
-    function onLinkAccount (account: any) {
-      loadShortNameLinks()
-      emit('on-link-account', account)
+    async function onLinkAccount (account: any) {
+      await loadShortNameLinks()
+      emit('on-link-account', account, state.results)
     }
 
     async function unlinkAccount (item) {
@@ -340,8 +340,29 @@ export default defineComponent({
 .base-table__item-row-green {
   background-color: $table-green !important;
 }
+.v-card {
+  > div:first-of-type {
+    padding: 0!important;
+  }
+}
 
 ::v-deep {
+  table {
+    box-sizing: content-box;
+    thead {
+      tr {
+        th:first-of-type {
+        }
+      }
+    }
+    tbody {
+      tr {
+        td:first-of-type {
+          padding-left: 20px !important;
+        }
+      }
+    }
+  }
   .base-table__item-cell {
     padding: 16px 0 16px 0
   }

diff --git a/auth-web/src/views/pay/eft/ShortNameDetailsView.vue b/auth-web/src/views/pay/eft/ShortNameDetailsView.vue
@@ -20,7 +20,7 @@
       </p>
     </div>
 
-    <ShortNameAccountLinkage
+    <ShortNameAccountLink
       class="mb-12"
       :shortNameDetails="shortNameDetails"
       :highlightIndex="highlightIndex"
@@ -36,12 +36,12 @@
 import { PropType, computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CommonUtils from '@/util/common-util'
 import PaymentService from '@/services/payment.services'
-import ShortNameAccountLinkage from '@/components/pay/eft/ShortNameAccountLink.vue'
+import ShortNameAccountLink from '@/components/pay/eft/ShortNameAccountLink.vue'
 import ShortNameTransactions from '@/components/pay/eft/ShortNameTransactions.vue'
 
 export default defineComponent({
   name: 'ShortNameMappingView',
-  components: { ShortNameAccountLinkage, ShortNameTransactions },
+  components: { ShortNameAccountLink, ShortNameTransactions },
   props: {
     shortNameId: {
       type: String as PropType<string>,
@@ -67,10 +67,11 @@ export default defineComponent({
       return `Unsettled Amount for ${details.shortName}: ${unsettledAmount}`
     })
 
-    async function onLinkAccount () {
+    async function onLinkAccount (account: any, results: Array<any>) {
+      const indexOf = results.findIndex((result) => result.id === account.id)
       await loadShortname(props.shortNameId)
       state.snackbarText = `Bank short name ${state.shortNameDetails.shortName} was successfully linked.`
-      state.highlightIndex = 1 // highlight indexOf when multi-linking is implemented
+      state.highlightIndex = indexOf
       state.snackbar = true
 
       setTimeout(() => {