transaction role based fixes (#775)

bcgov · Jun 15, 2020 · 71490e4 · 71490e4
1 parent eb8960c
commit 71490e4
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 56 deletions.
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
@@ -20,7 +20,7 @@
     "moment": "^2.24.0",
     "regenerator-runtime": "^0.13.3",
     "register-service-worker": "^1.6.2",
-    "sbc-common-components": "^2.1.30",
+    "sbc-common-components": "^2.1.34",
     "vue": "^2.6.11",
     "vue-i18n": "^8.0.0",
     "vue-property-decorator": "^8.3.0",

diff --git a/auth-web/src/components/auth/Transactions.vue b/auth-web/src/components/auth/Transactions.vue
@@ -64,28 +64,21 @@
             </div>
           </div>
           <div class="pa-6 align-self-center">
-            <template v-if="dateFilterSelected && dateFilterSelected.code">
-              <div class="date-range-label mb-6">
-                {{showDateRangeSelected}}
-              </div>
-              <v-date-picker
-                color="primary"
-                width="400"
-                class="text-center"
-                v-model="dateRangeSelected"
-                no-title
-                range
-                :first-day-of-week="1"
-                :show-current="false"
-                :picker-date="pickerDate"
-                @click:date="dateClick"
-              ></v-date-picker>
-            </template>
-            <template v-else>
-              <p class="pa-8">
-                No Dates Selected
-              </p>
-            </template>
+            <div class="date-range-label mb-6">
+              {{showDateRangeSelected}}
+            </div>
+            <v-date-picker
+              color="primary"
+              width="400"
+              class="text-center"
+              v-model="dateRangeSelected"
+              no-title
+              range
+              :first-day-of-week="1"
+              :show-current="false"
+              :picker-date="pickerDate"
+              @click:date="dateClick"
+            ></v-date-picker>
           </div>
         </v-card>
       </v-menu>
@@ -118,7 +111,7 @@
         @click="exportCSV"
       >Export CSV</v-btn>
     </div>
-    <div class="filter-results d-inline-flex align-center mb-5">
+    <div class="filter-results d-inline-flex align-center mb-5" v-if="filterArray.length">
       <div class="filter-results-label py-2 mr-7">{{totalTransactionsCount}} Records found</div>
       <v-chip
         class="mr-2 filter-chip"
@@ -151,11 +144,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Account, Pages } from '@/util/constants'
+import { Component, Mixins, Prop, Vue } from 'vue-property-decorator'
+import { Member, MembershipType, Organization } from '@/models/Organization'
 import { TransactionFilterParams, TransactionTableList } from '@/models/transaction'
+import { mapActions, mapState } from 'vuex'
+import AccountChangeMixin from '@/components/auth/mixins/AccountChangeMixin.vue'
 import CommonUtils from '@/util/common-util'
 import TransactionsDataTable from '@/components/auth/TransactionsDataTable.vue'
-import { mapActions } from 'vuex'
 import moment from 'moment'
 
 const DATEFILTER_CODES = {
@@ -174,10 +170,18 @@ const DATEFILTER_CODES = {
     ...mapActions('org', [
       'getTransactionReport'
     ])
+  },
+  computed: {
+    ...mapState('org', [
+      'currentOrganization',
+      'currentMembership'
+    ])
   }
 })
-export default class Transactions extends Vue {
+export default class Transactions extends Mixins(AccountChangeMixin) {
   @Prop({ default: '' }) private orgId: string;
+  private readonly currentMembership!: Member
+  private readonly currentOrganization!: Organization
   private readonly getTransactionReport!: (filterParams: any) => TransactionTableList
   private showDateFilter: boolean = false
   private dateRangeSelected: any = []
@@ -213,32 +217,49 @@ export default class Transactions extends Vue {
   private totalTransactionsCount: number = 0
   private pickerDate: string = ''
 
-  private beforeMount () {
-    this.initDatePicker()
+  private async mounted () {
+    this.setAccountChangedHandler(this.initFilter)
+    this.initFilter()
+  }
+
+  private initFilter () {
+    if (this.isTransactionsAllowed) {
+      this.initDatePicker()
+      this.dateFilterProp = {}
+      this.dateFilterSelectedIndex = null
+      this.dateRangeSelected = []
+      this.folioNumberSearch = this.folioFilterProp = ''
+      this.filterArray = []
+      this.updateTransactionTableCounter++
+    } else {
+      // if the account switing happening when the user is already in the transaction page,
+      // redirect to account info if its a basic account
+      this.$router.push(`/${Pages.MAIN}/${this.currentOrganization.id}/settings/account-info`)
+    }
   }
 
   private get showDateRangeSelected () {
+    let dateText = ''
     if ((this.dateFilterSelected?.code === DATEFILTER_CODES.TODAY) || (this.dateFilterSelected?.code === DATEFILTER_CODES.YESTERDAY)) {
-      return `${this.dateFilterSelected?.label} - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[0], 'MMM DD, YYYY')}`
+      dateText = `${this.dateFilterSelected?.label} - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[0], 'MMM DD, YYYY')}`
+    } else {
+      dateText = `${this.dateFilterSelected?.label} 
+        - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[0], 'MMM DD, YYYY')} 
+        - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[1], 'MMM DD, YYYY')}`
     }
-    return `${this.dateFilterSelected?.label} 
-      - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[0], 'MMM DD, YYYY')} 
-      - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[1], 'MMM DD, YYYY')}`
+    return (this.dateFilterSelected?.code) ? dateText : 'No Dates Selected'
   }
 
   // apply filter button enable only if the date ranges are selected and start date <= end date
   private get isApplyFilterBtnValid () {
+    if (this.dateRangeSelected?.length === 2 && this.dateRangeSelected[0] > this.dateRangeSelected[1]) {
+      this.dateRangeSelected = [this.dateRangeSelected[1], this.dateRangeSelected[0]]
+    }
     return this.dateRangeSelected[0] && this.dateRangeSelected[1] && (this.dateRangeSelected[0] <= this.dateRangeSelected[1])
   }
 
   private initDatePicker () {
-    this.dateRangeSelected = [
-      this.formatDatePickerDate(moment(this.dateFilterProp?.startDate)),
-      this.formatDatePickerDate(moment(this.dateFilterProp?.endDate))
-    ]
-    if (this.dateFilterSelectedIndex) {
-      this.dateFilterSelected = this.dateFilterRanges[this.dateFilterSelectedIndex]
-    }
+    this.dateFilterSelected = (this.dateFilterSelectedIndex) ? this.dateFilterRanges[this.dateFilterSelectedIndex] : {}
   }
 
   openDateFilter () {
@@ -332,15 +353,13 @@ export default class Transactions extends Vue {
 
   private clearFilter (filter, isAll: boolean = false) {
     if (isAll) {
-      this.dateFilterProp = {}
-      this.folioNumberSearch = this.folioFilterProp = ''
-      this.dateFilterSelectedIndex = null
-      this.filterArray = []
+      this.initFilter()
     } else {
       switch (filter.type) {
         case 'DATE':
           this.dateFilterProp = {}
           this.dateFilterSelectedIndex = null
+          this.dateRangeSelected = []
           break
         case 'FOLIO':
           this.folioNumberSearch = this.folioFilterProp = ''
@@ -350,8 +369,8 @@ export default class Transactions extends Vue {
       if (index > -1) {
         this.filterArray.splice(index, 1)
       }
+      this.updateTransactionTableCounter++
     }
-    this.updateTransactionTableCounter++
   }
 
   private setTotalTransactionCount (value) {
@@ -372,6 +391,11 @@ export default class Transactions extends Vue {
     const downloadData = await this.getTransactionReport(filterParams)
     CommonUtils.fileDownload(downloadData, `bcregistry-transactions-${moment().format('MM-DD-YYYY')}.csv`)
   }
+
+  private get isTransactionsAllowed (): boolean {
+    return (this.currentOrganization?.orgType === Account.PREMIUM) &&
+      [MembershipType.Admin, MembershipType.Coordinator].includes(this.currentMembership.membershipTypeCode)
+  }
 }
 </script>
 

diff --git a/auth-web/src/router.ts b/auth-web/src/router.ts
@@ -1,5 +1,5 @@
-import { LoginSource, Pages, Role, SessionStorageKeys } from '@/util/constants'
-import { Member, MembershipStatus, Organization } from '@/models/Organization'
+import { Account, LoginSource, Pages, Role, SessionStorageKeys } from '@/util/constants'
+import { Member, MembershipStatus, MembershipType, Organization } from '@/models/Organization'
 import Router, { Route, RouteConfig } from 'vue-router'
 import AcceptInviteLandingView from '@/views/auth/AcceptInviteLandingView.vue'
 import AcceptInviteView from '@/views/auth/AcceptInviteView.vue'
@@ -109,7 +109,10 @@ export function getRoutes (): RouteConfig[] {
         {
           path: 'transactions',
           name: 'transactions',
-          component: transaction
+          component: transaction,
+          meta: {
+            isPremiumOnly: true
+          }
         }
       ]
     },
@@ -177,6 +180,18 @@ router.beforeEach((to, from, next) => {
         query: { redirect: to.fullPath }
       })
     }
+    if (to.matched.some(record => record.meta.isPremiumOnly)) {
+      const currentOrganization: Organization = (store.state as any)?.org?.currentOrganization
+      const currentMembership: Member = (store.state as any)?.org?.currentMembership
+      // redirect to unauthorized page if the account selected is not Premium
+      if (!(currentOrganization?.orgType === Account.PREMIUM &&
+        [MembershipType.Admin, MembershipType.Coordinator].includes(currentMembership.membershipTypeCode))) {
+        return next({
+          path: '/unauthorized',
+          query: { redirect: to.fullPath }
+        })
+      }
+    }
   }
 
   // Enforce navigation guards are checked before navigating anywhere else

diff --git a/auth-web/src/views/auth/AccountSettings.vue b/auth-web/src/views/auth/AccountSettings.vue
@@ -73,22 +73,29 @@
 
 <script lang="ts">
 
+import { Account, LoginSource } from '@/util/constants'
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Member, MembershipType, Organization } from '@/models/Organization'
 import ConfigHelper from '@/util/config-helper'
 import { KCUserProfile } from 'sbc-common-components/src/models/KCUserProfile'
 import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
-import { LoginSource } from '@/util/constants'
-
 import { mapState } from 'vuex'
 
 @Component({
   computed: {
-    ...mapState('user', ['currentUser'])
+    ...mapState('user', [
+      'currentUser'
+    ]),
+    ...mapState('org', [
+      'currentOrganization',
+      'currentMembership'
+    ])
   }
 })
 export default class AccountSettings extends Vue {
   @Prop({ default: '' }) private orgId: string
-
+  private readonly currentMembership!: Member
+  private readonly currentOrganization!: Organization
   private readonly currentUser!: KCUserProfile
   private isLoading = true
   private isDirSearchUser: boolean = false
@@ -111,7 +118,13 @@ export default class AccountSettings extends Vue {
   }
 
   private get showTransactions (): boolean {
-    return LaunchDarklyService.getFlag('transaction-history') || false
+    return (LaunchDarklyService.getFlag('transaction-history') || false) &&
+      this.isPremiumAccount &&
+      [MembershipType.Admin, MembershipType.Coordinator].includes(this.currentMembership.membershipTypeCode)
+  }
+
+  private get isPremiumAccount (): boolean {
+    return this.currentOrganization?.orgType === Account.PREMIUM
   }
 
   private mounted () {