changes to meet acceptance criteria (#754)

Author: nitheesh-aot

auth-web/src/components/auth/Transactions.vue

@@ -44,7 +44,7 @@
                 </v-list-item>
               </v-list-item-group>
             </v-list>
-            <div class="date-filter-btns px-6 d-flex flex-end">
+            <div class="date-filter-btns px-6 mt-4 d-flex flex-end">
               <v-btn large
                 color="primary"
                 class="font-weight-bold flex-grow-1"
@@ -63,21 +63,29 @@
               </v-btn>
             </div>
           </div>
-          <div class="pa-6">
-            <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
-              :show-current="false"
-              :class="{'date-picker-disable': disableDatePicker}"
-              first-day-of-week="1"
-            ></v-date-picker>
+          <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>
         </v-card>
       </v-menu>
@@ -196,32 +204,29 @@ export default class Transactions extends Vue {
       code: DATEFILTER_CODES.CUSTOMRANGE
     }
   ]
-  private dateFilterSelectedIndex: number = 0
-  private dateFilterSelected: any = this.dateFilterRanges[this.dateFilterSelectedIndex]
+  private dateFilterSelectedIndex: number = null
+  private dateFilterSelected: any = {}
   private dateFilterProp: any = {}
   private folioFilterProp: string = ''
   private updateTransactionTableCounter: number = 0
   private folioNumberSearch: string = ''
   private filterArray = []
   private totalTransactionsCount: number = 0
+  private pickerDate: string = ''
 
   private beforeMount () {
     this.initDatePicker()
   }
 
   private get showDateRangeSelected () {
     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')}`
+      return `${this.dateFilterSelected?.label} - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[0], 'MMM DD, YYYY')}`
     }
-    return `${this.dateFilterSelected.label} 
+    return `${this.dateFilterSelected?.label} 
       - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[0], 'MMM DD, YYYY')} 
       - ${CommonUtils.formatDisplayDate(this.dateRangeSelected[1], 'MMM DD, YYYY')}`
   }
 
-  private get disableDatePicker () {
-    return this.dateFilterSelected?.code !== DATEFILTER_CODES.CUSTOMRANGE
-  }
-
   // apply filter button enable only if the date ranges are selected and start date <= end date
   private get isApplyFilterBtnValid () {
     return this.dateRangeSelected[0] && this.dateRangeSelected[1] && (this.dateRangeSelected[0] <= this.dateRangeSelected[1])
@@ -232,7 +237,9 @@ export default class Transactions extends Vue {
       this.formatDatePickerDate(moment(this.dateFilterProp?.startDate)),
       this.formatDatePickerDate(moment(this.dateFilterProp?.endDate))
     ]
-    this.dateFilterSelected = this.dateFilterRanges[this.dateFilterSelectedIndex]
+    if (this.dateFilterSelectedIndex) {
+      this.dateFilterSelected = this.dateFilterRanges[this.dateFilterSelectedIndex]
+    }
   }
 
   openDateFilter () {
@@ -243,30 +250,43 @@ export default class Transactions extends Vue {
   dateFilterChange (val) {
     if (val > -1) {
       this.dateFilterSelected = this.dateFilterRanges[val]
-      switch (this.dateFilterSelected.code) {
+      switch (this.dateFilterSelected?.code) {
+        case DATEFILTER_CODES.TODAY:
+          const today = this.formatDatePickerDate(moment())
+          this.dateRangeSelected = [today, today]
+          this.pickerDate = today.slice(0, -3)
+          break
         case DATEFILTER_CODES.YESTERDAY:
           const yesterday = this.formatDatePickerDate(moment().subtract(1, 'days'))
           this.dateRangeSelected = [yesterday, yesterday]
+          this.pickerDate = yesterday.slice(0, -3)
           break
         case DATEFILTER_CODES.LASTWEEK:
           // Week should start from  Monday and Ends on Sunday
           const weekStart = this.formatDatePickerDate(moment().subtract(1, 'weeks').startOf('isoWeek'))
           const weekEnd = this.formatDatePickerDate(moment().subtract(1, 'weeks').endOf('isoWeek'))
           this.dateRangeSelected = [weekStart, weekEnd]
+          this.pickerDate = weekStart.slice(0, -3)
           break
         case DATEFILTER_CODES.LASTMONTH:
           const monthStart = this.formatDatePickerDate(moment().subtract(1, 'months').startOf('month'))
           const monthEnd = this.formatDatePickerDate(moment().subtract(1, 'months').endOf('month'))
           this.dateRangeSelected = [monthStart, monthEnd]
+          this.pickerDate = monthStart.slice(0, -3)
           break
         case DATEFILTER_CODES.CUSTOMRANGE:
-        case DATEFILTER_CODES.TODAY:
-          const today = this.formatDatePickerDate(moment())
-          this.dateRangeSelected = [today, today]
+          this.pickerDate = ''
       }
     }
   }
 
+  private dateClick (date) {
+    this.pickerDate = ''
+    // ideally it should find using DATEFILTER_CODES.CUSTOMRANGE, but since its static and date click is often, better give the index as it is
+    this.dateFilterSelectedIndex = 4 // 4 = Custom Range
+    this.dateFilterSelected = this.dateFilterRanges[this.dateFilterSelectedIndex]
+  }
+
   // date formatting required by the date picker
   private formatDatePickerDate (dateObj) {
     return dateObj.format('YYYY-MM-DD')
@@ -315,13 +335,13 @@ export default class Transactions extends Vue {
     if (isAll) {
       this.dateFilterProp = {}
       this.folioNumberSearch = this.folioFilterProp = ''
-      this.dateFilterSelectedIndex = 0
+      this.dateFilterSelectedIndex = null
       this.filterArray = []
     } else {
       switch (filter.type) {
         case 'DATE':
           this.dateFilterProp = {}
-          this.dateFilterSelectedIndex = 0
+          this.dateFilterSelectedIndex = null
           break
         case 'FOLIO':
           this.folioNumberSearch = this.folioFilterProp = ''