fixed date selection in trxn table (#2245)

* fixed date selection in trxn table Signed-off-by: Kial Jinnah <[email protected]> * datepicker fixes Signed-off-by: Kial Jinnah <[email protected]> --------- Signed-off-by: Kial Jinnah <[email protected]>
bcgov · Feb 10, 2023 · 06c46e6 · 06c46e6
1 parent 772b779
commit 06c46e6
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 145 deletions.
diff --git a/auth-web/src/components/DatePicker.vue b/auth-web/src/components/DatePicker.vue
@@ -77,7 +77,6 @@ interface DatePickerI {
   datePickerKey: number
   endDate: string,
   startDate: string,
-  defaultMonth: ComputedRef<string>
   today: ComputedRef<string>
 }
 
@@ -95,20 +94,18 @@ export default defineComponent({
       datePickerKey: 0,
       endDate: null,
       startDate: null,
-      defaultMonth: computed((): string => {
-        const todayDate = new Date()
-        return todayDate.toISOString().substring(0, 8)
-      }),
       today: computed((): string => {
         const todayDate = new Date()
-        return todayDate.toLocaleDateString('en-CA')
+        const localYear = todayDate.toLocaleDateString('en-CA', { year: 'numeric' })
+        const localMonth = todayDate.toLocaleDateString('en-CA', { month: '2-digit' })
+        const localDay = todayDate.toLocaleDateString('en-CA', { day: '2-digit' })
+        return [localYear, localMonth, localDay].join('-')
       })
     }) as unknown) as DatePickerI
 
     const emitDateRange = (): void => {
-      const datesAreDefault = state.startDate === state.defaultMonth.value || state.endDate === state.defaultMonth.value
-      const startDate = datesAreDefault ? null : state.startDate
-      const endDate = datesAreDefault ? null : state.endDate
+      const startDate = state.startDate
+      const endDate = state.endDate
       emit('submit', { endDate: endDate, startDate: startDate })
     }
     const resetDateRange = (): void => {
@@ -137,6 +134,7 @@ export default defineComponent({
     })
     watch(() => props.setStartDate, (val: string) => {
       if (!val) {
+        state.startDate = null
         // rerender to reset default date (so it opens at the default date again)
         state.datePickerKey++
       } else state.startDate = val
@@ -159,6 +157,7 @@ export default defineComponent({
   border-radius: 5px;
   z-index: 10;
   left: 50%;
+  margin-top: 120px;
   overflow: auto;
   padding: 24px 34px 24px 34px;
   position: absolute;

diff --git a/auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue b/auth-web/src/components/auth/account-settings/transaction/TransactionsDataTable.vue
@@ -222,9 +222,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "$assets/scss/theme.scss";
-.date-picker {
-  margin-top: 120px;
-}
 .section-heading {
   background-color: $app-background-blue;
   border-radius: 5px 5px 0 0;

diff --git a/auth-web/src/components/auth/common/DatePicker.vue b/auth-web/src/components/auth/common/DatePicker.vue
diff --git a/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue
@@ -97,7 +97,7 @@ import { mapActions, mapState } from 'vuex'
 import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
 import { DataOptions } from 'vuetify'
-import DatePicker from '@/components/auth/common/DatePicker.vue'
+import { DatePicker } from '@/components'
 import PaginationMixin from '@/components/auth/mixins/PaginationMixin.vue'
 import { ProductCode } from '@/models/Staff'
 import moment from 'moment'

diff --git a/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue
@@ -86,7 +86,7 @@ import { mapActions, mapState } from 'vuex'
 import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
 import { DataOptions } from 'vuetify'
-import DatePicker from '@/components/auth/common/DatePicker.vue'
+import { DatePicker } from '@/components'
 import PaginationMixin from '@/components/auth/mixins/PaginationMixin.vue'
 import { ProductCode } from '@/models/Staff'
 import moment from 'moment'