19331 & 19330 - Unlinked + Linked Short Name Mapping tables (#2700)

* Adding in some code that could be potentially shared * Add in new linting rule * Minor changes to add in title * PascalCase * use v-sanitize * Minor update to populate table and hide pagination option * Wire this up to pay-api * rename fields * Filters working roughly * Remove debounce for now, not working currently, small UX tweaks * Small CSS fixes for top of tabs * Move table title over a bit * Fix filters being stuck on * Add in branchName to auth-api to update pay-api * Revert "Add in branchName to auth-api to update pay-api" This reverts commit 1d35c4d. * Styling, counts * Move component name * one more spot * Add in actions, remove redundant SCSS reuse old debounce that works * Move short names under different route * add in staff prot for now * Refactor, wire up infinite scroll * up page limit * Remove overrides, move some code * Remove comments * Rename, refactor into model * Minor change * Fix linting errors * minor changes * cleanup * cleanup * SCSS cleanup for view buttons * Test fixes * tidy up infinite scroll * Add in comments * Fix code smell * More typing fixes * Get rid of code duplication * Lint fixes * Add more return hints * Code complexity issue * Spacing issue * Unlinked shortname tab * Missing titles from refactor * Fix import linking * refactor SCSS * Spacing * refactor into scss * Typo * Use enum * More cleanup * Wire up counts * Use composable so we can share across the two components. * ShortNameLookup component * add in reachedEnd = false when setFiltering * remove debugger * refactor infinite scroll callback * refactor to reactive * Fix default value * Addin more typing * rename ShortName -> Shortname * use ShortName not Shortname * ShortNameLookup * Fix any * fix model reference * Short-name fix * Add comments * fix comment * Adding UnlinkedShortNameResults and State * Remove starting data * Add in unit test * Finish off unit test * Cleanup * Add in sandbox.restore(), restore formatAmount back to what it was, unit tests should pass for now * Remove duplicate code * Comment out ShortNameLookup * Code cleanup * Add in defineComponent so build doesn't fail * Cleanup * Testing * Remove onclick for now * refactor * Put back new Promise * Fix lint issue * Deposit date range support * Interface updates * Fix unit test * Display date range dates --------- Co-authored-by: Rodrigo Barraza <rodrigo.barraza@gov.bc.ca>
bcgov · Feb 5, 2024 · b76de3b · b76de3b
1 parent 4424eaf
commit b76de3b
Show file tree

Hide file tree

Showing 27 changed files with 1,505 additions and 61 deletions.
diff --git a/auth-web/.eslintrc.js b/auth-web/.eslintrc.js
@@ -48,6 +48,7 @@ module.exports = {
     'no-unused-expressions': 'off',
     '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true }],
     'vue/multi-word-component-names': ['error', { 'ignores': ['Transactions'] }],
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
     // Not ideal but shallowOnly option isn't working for this, so leaving it off for now.
     // https://eslint.vuejs.org/rules/no-mutating-props.html
     'vue/no-mutating-props': 'off'

diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -53,6 +53,7 @@
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^1.1.0",
     "@pinia/testing": "^0.1.3",
+    "@types/lodash": "^4.14.202",
     "@types/mime-types": "^2.1.0",
     "@types/vuelidate": "^0.7.13",
     "@typescript-eslint/eslint-plugin": "^6.4.0",

diff --git a/auth-web/src/assets/scss/ShortnameTables.scss b/auth-web/src/assets/scss/ShortnameTables.scss
@@ -0,0 +1,18 @@
+::v-deep {
+
+  .base-table__header > tr:first-child > th  {
+    padding: 0 0 0 0 !important;
+  }
+  .base-table__header__filter {
+    padding-left: 16px;
+    padding-right: 4px;
+  }
+  .base-table__item-row {
+    color: #495057;
+    font-weight: bold;
+  }
+  .base-table__item-cell {
+    padding: 16px 0 16px 16px;
+    vertical-align: middle;
+  }
+}
diff --git a/auth-web/src/assets/scss/actions.scss b/auth-web/src/assets/scss/actions.scss
@@ -0,0 +1,25 @@
+// For the dropdown text color.
+::v-deep .theme--light.v-list-item .v-list-item__action-text, .theme--light.v-list-item .v-list-item__subtitle {
+  color: $app-blue;
+  font-weight: normal;
+  .v-icon.v-icon {
+    color: $app-blue;
+  }
+}
+
+.new-actions {
+  height:30px;
+  .open-action-btn {
+    font-size: .875rem;
+    box-shadow: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: 1px;
+  }
+
+  .more-actions-btn {
+    box-shadow: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
diff --git a/auth-web/src/assets/scss/layout.scss b/auth-web/src/assets/scss/layout.scss
@@ -84,3 +84,7 @@
   font-size: 16px;
   color: #495057
 }
+
+.soft-corners-top {
+  border-radius: 5px 5px 0 0;
+}
diff --git a/auth-web/src/components/auth/account-settings/account-info/AccountDetails.vue b/auth-web/src/components/auth/account-settings/account-info/AccountDetails.vue
@@ -67,7 +67,7 @@
               </div>
             </div>
             <div v-else>
-              <account-business-type
+              <AccountBusinessType
                 :saving="false"
                 :isEditAccount="true"
                 @update:org-business-type="updateOrgBusinessType"

diff --git a/auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue b/auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <date-picker
+    <DatePicker
       v-show="showDatePicker"
       ref="datePicker"
       :reset="dateRangeReset"
@@ -28,7 +28,7 @@
         <span v-else>({{ transactions.totalResults }})</span>
       </h3>
     </div>
-    <base-v-data-table
+    <BaseVDataTable
       class="transaction-list"
       :clearFiltersTrigger="clearFiltersTrigger"
       itemKey="id"
@@ -58,9 +58,9 @@
       <!-- header title slots -->
       <template #header-title-slot-statusCode="{ header }">
         {{ header.value }}
-        <icon-tooltip icon="mdi-information-outline">
+        <IconTooltip icon="mdi-information-outline">
           <div v-html="getStatusCodeHelpText()" />
-        </icon-tooltip>
+        </IconTooltip>
       </template>
       <!-- header filter slots -->
       <template #header-filter-slot-createdOn>
@@ -126,18 +126,18 @@
             class="pl-1"
             align-self="center"
           >
-            <icon-tooltip
+            <IconTooltip
               v-if="[InvoiceStatus.OVERDUE, InvoiceStatus.REFUND_REQUESTED, InvoiceStatus.REFUNDED].includes(item.statusCode)"
               icon="mdi-information-outline"
               maxWidth="300px"
               :location="{top: true}"
             >
               <div v-sanitize="getHelpText(item)" />
-            </icon-tooltip>
+            </IconTooltip>
           </v-col>
         </v-row>
       </template>
-    </base-v-data-table>
+    </BaseVDataTable>
   </div>
 </template>
 
@@ -157,7 +157,7 @@ import { useTransactions } from '@/composables'
 
 export default defineComponent({
   name: 'TransactionsDataTable',
-  components: { BaseVDataTable, DatePicker, IconTooltip },
+  components: { BaseVDataTable: BaseVDataTable, DatePicker, IconTooltip },
   props: {
     extended: { default: false },
     headers: { default: [] as BaseTableHeaderI[] }

diff --git a/auth-web/src/components/auth/home/BcscPanel.vue b/auth-web/src/components/auth/home/BcscPanel.vue
@@ -86,7 +86,7 @@
           Create a BC Registries Account
         </v-btn>
       </template>
-      <learn-more-button :redirect-url="learnMoreUrl" />
+      <LearnMoreButton :redirect-url="learnMoreUrl" />
     </div>
   </v-container>
 </template>

diff --git a/auth-web/src/components/auth/manage-business/AffiliatedEntityTable.vue b/auth-web/src/components/auth/manage-business/AffiliatedEntityTable.vue
@@ -27,7 +27,7 @@
           </v-col>
         </v-row>
       </div>
-      <base-v-data-table
+      <BaseVDataTable
         id="affiliated-entity-table"
         :clearFiltersTrigger="clearFiltersTrigger"
         itemKey="businessIdentifier"
@@ -43,6 +43,7 @@
         :pageHide="true"
         :fixedHeader="true"
         :highlight-index="highlightIndex"
+        :useObserver="true"
         highlight-class="base-table__item-row-green"
       >
         <template #header-filter-slot-Actions>
@@ -166,7 +167,7 @@
             @show-manage-business-dialog="$emit('show-manage-business-dialog', $event)"
           />
         </template>
-      </base-v-data-table>
+      </BaseVDataTable>
     </v-card>
   </div>
 </template>

diff --git a/auth-web/src/components/auth/manage-business/AffiliationAction.vue b/auth-web/src/components/auth/manage-business/AffiliationAction.vue
@@ -646,37 +646,6 @@ export default defineComponent({
     text-align: center;
   }
 
-  .actions {
-    height:30px;
-    width: 140px;
-
-    .open-action {
-      border-right: 1px solid $gray1;
-    }
-
-    .open-action-btn {
-      font-size: .875rem;
-      box-shadow: none;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      margin-right: 1px;
-      max-height: 36px !important;
-      min-height: 36px !important;
-    }
-
-    .more-actions-btn {
-      box-shadow: none;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      max-height: 36px !important;
-      min-height: 36px !important;
-    }
-
-    .v-btn + .v-btn {
-      margin-left: 0.5rem;
-    }
-  }
-
   .new-actions {
     height:30px;
     width: 240px;

diff --git a/auth-web/src/components/datatable/BaseVDataTable.vue b/auth-web/src/components/datatable/BaseVDataTable.vue
@@ -19,6 +19,21 @@
     <!-- Headers (two rows) -->
     <template #header>
       <thead class="base-table__header">
+        <tr
+          v-if="title"
+          class="table-title-row"
+        >
+          <th
+            id="table-title-cell"
+            :colspan="headers.length"
+          >
+            <slot name="header-title">
+              <h2 class="ml-3 py-6">
+                {{ title }}
+              </h2>
+            </slot>
+          </th>
+        </tr>
         <!-- First row has titles. -->
         <slot
           name="header-title-slot"
@@ -55,7 +70,7 @@
                 :name="'header-filter-slot-' + header.col"
                 :header="header"
               />
-              <header-filter
+              <HeaderFilter
                 :filtering="filtering"
                 :filters="filters"
                 :header="header"
@@ -98,9 +113,9 @@
       </tr>
     </template>
     <template #[`body.append`]>
-      <tr v-if="pageHide && !reachedEnd">
+      <tr v-if="useObserver && !reachedEnd">
         <td :colspan="headers.length">
-          <table-observer @intersect="getNext()" />
+          <TableObserver @intersect="getNext()" />
         </td>
       </tr>
     </template>
@@ -161,7 +176,10 @@ export default defineComponent({
     filters: { default: { isActive: false, filterPayload: {} }, required: false },
     customPagination: { default: false },
     highlightIndex: { default: -1 },
-    highlightClass: { type: String, default: '' }
+    highlightClass: { type: String, default: '' },
+    title: { type: String, default: '' },
+    useObserver: { type: Boolean, required: false },
+    observerCallback: { type: Function as PropType<() => Promise<boolean>>, required: false, default: null }
   },
   emits: ['update-table-options'],
   setup (props, { emit }) {
@@ -180,7 +198,10 @@ export default defineComponent({
     const reachedEnd = ref(false)
 
     const getNext = _.debounce(async () => {
-      if (!props.loading && !reachedEnd.value && state.sortedItems.length > state.visibleItems.length) {
+      if (props.loading) return
+      if (props.observerCallback) {
+        reachedEnd.value = await props.observerCallback()
+      } else if (!reachedEnd.value && state.sortedItems.length > state.visibleItems.length) {
         currentPage.value++
         const start = (currentPage.value - 1) * perPage.value
         const end = start + perPage.value
@@ -201,17 +222,21 @@ export default defineComponent({
     }
 
     watch(() => state.sortedItems, () => {
-      if (props.setItems && props.pageHide) {
+      if (props.setItems && !props.observerCallback) {
         state.visibleItems = state.sortedItems.slice(0, perPage.value)
         firstItem.value = state.visibleItems[0]
         currentPage.value = 1
         reachedEnd.value = false
         scrollToTop()
       }
+      if (props.observerCallback) {
+        state.visibleItems = state.sortedItems
+      }
     }, { immediate: true })
 
     const setFiltering = (filter: boolean) => {
       state.filtering = filter
+      reachedEnd.value = false
     }
 
     const setSortedItems = (items: object[]) => {
@@ -254,6 +279,11 @@ export default defineComponent({
 @import '@/assets/scss/theme.scss';
 .base-table {
 
+  h2 {
+    font-size: 1.125rem;
+    letter-spacing: 0.25px;
+  }
+
   &__header {
 
     &__filter {
@@ -295,6 +325,10 @@ export default defineComponent({
     flex-shrink: 0;
   }
 
+  .table-title-row {
+    background-color: $BCgovBlue0;
+  }
+
   ::v-deep .v-data-footer {
     min-width: 100%;
   }

diff --git a/auth-web/src/components/datatable/components/HeaderFilter.vue b/auth-web/src/components/datatable/components/HeaderFilter.vue
@@ -40,7 +40,7 @@
 import { BaseSelectFilter, BaseTextFilter } from '../resources/base-filters'
 import { PropType, defineComponent, reactive } from '@vue/composition-api'
 import { BaseTableHeaderI } from '../interfaces'
-import _ from 'lodash'
+import debounce from '@/util/debounce'
 import { headerTypes } from '@/resources/table-headers/affiliations-table/headers'
 
 const tempHeader = {
@@ -71,15 +71,15 @@ export default defineComponent({
       sortedItems: [...props.sortedItems]
     }) as unknown) as BaseTableStateI
 
-    const serverSideFilter = async (header: BaseTableHeaderI) => {
+    const serverSideFilter = debounce(async (header: BaseTableHeaderI) => {
       props.setFiltering(true)
       await header.customFilter.filterApiFn(header.customFilter.value)
       props.setFiltering(false)
-    }
+    })
 
     const filter = async (header: BaseTableHeaderI) => {
       if (header.customFilter.filterApiFn) {
-        _.debounce(serverSideFilter(header), 500)
+        await serverSideFilter(header)
       } else {
         applyFilters(props, state, header)
       }