From f13a3c16e582a3c570bb9b62c331d855207daecb Mon Sep 17 00:00:00 2001 From: cameron-freshworks <53542131+cameron-freshworks@users.noreply.github.com> Date: Mon, 8 Jun 2020 06:55:04 -0700 Subject: [PATCH 1/3] #3917 launch page redirections (#750) * Updated Feature flagging in router * Flagged the navbar on the home route Co-authored-by: saravanpa-aot --- .../components/auth/stepper/InfoStepper.vue | 8 +- auth-web/src/router.ts | 87 +++++++++---------- 2 files changed, 46 insertions(+), 49 deletions(-) diff --git a/auth-web/src/components/auth/stepper/InfoStepper.vue b/auth-web/src/components/auth/stepper/InfoStepper.vue index 88d74741f3..4ff463cdac 100644 --- a/auth-web/src/components/auth/stepper/InfoStepper.vue +++ b/auth-web/src/components/auth/stepper/InfoStepper.vue @@ -39,25 +39,25 @@ export default class Stepper extends Vue { id: 'step-1-btn', step: 1, text: 'Decide on a Business Type', - to: '/home-dev/decide-business' + to: '/home/decide-business' }, { id: 'step-2-btn', step: 2, text: 'Request a Name', - to: '/home-dev/request-name' + to: '/home/request-name' }, { id: 'step-3-btn', step: 3, text: 'Incorporate or Register', - to: '/home-dev/incorporate-or-register' + to: '/home/incorporate-or-register' }, { id: 'step-4-btn', step: 4, text: 'Maintain Your Business', - to: '/home-dev/maintain-business' + to: '/home/maintain-business' } ] diff --git a/auth-web/src/router.ts b/auth-web/src/router.ts index edbe2c9582..9d0cebfabc 100644 --- a/auth-web/src/router.ts +++ b/auth-web/src/router.ts @@ -60,37 +60,11 @@ export function getRoutes (): RouteConfig[] { const transaction = () => import(/* webpackChunkName: "account-settings" */ './components/auth/Transactions.vue') const routes = [ { path: '/', name: 'root', redirect: 'home' }, - { path: '/home', name: 'home', component: HomeView, meta: { showNavBar: true } }, - { path: '/home-dev', - name: 'home-dev', - component: HomeViewDev, - children: [ - { - path: '', - redirect: 'decide-business' - }, - { - path: 'decide-business', - component: DecideBusinessView, - meta: { showNavBar: true } - }, - { - path: 'request-name', - component: RequestNameView, - meta: { showNavBar: true } - }, - { - path: 'incorporate-or-register', - component: IncorpOrRegisterView, - meta: { showNavBar: true } - }, - { - path: 'maintain-business', - component: MaintainBusinessView, - meta: { showNavBar: true } - } - ], - meta: { incorporationLaunchRoute: true, showNavBar: true } + { path: '/home', + name: 'home', + component: getEnvHomeView(), + children: getEnvChildRoutes(), + meta: { showNavBar: !flagCondition } }, { path: '/business', name: 'business-root', @@ -255,21 +229,44 @@ router.beforeEach((to, from, next) => { } }) -// Feature Flagging Routes +// Feature Flagging HomeView Components // For Development only -router.beforeEach((to, from, next) => { - if (to.matched.some(record => record.meta.incorporationLaunchRoute)) { - const flagCondition = LaunchDarklyService.getFlag('incorporations-launch-feature') - // this route requires condition to be accessed - // if not, redirect to home page. - if (!flagCondition) { - next({ path: '/home' }) - } else { - next() +const flagCondition = LaunchDarklyService.getFlag('incorporations-launch-feature') + +// Get the correct Homeview depending on Environment +const getEnvHomeView = () => { + return flagCondition ? HomeViewDev : HomeView +} + +// Get the child routes depending on environment +const getEnvChildRoutes = () => { + return flagCondition ? [ + { + path: '', + redirect: 'decide-business' + }, + { + path: 'decide-business', + component: DecideBusinessView, + meta: { showNavBar: false } + }, + { + path: 'request-name', + component: RequestNameView, + meta: { showNavBar: false } + }, + { + path: 'incorporate-or-register', + component: IncorpOrRegisterView, + meta: { showNavBar: false } + }, + { + path: 'maintain-business', + component: MaintainBusinessView, + meta: { showNavBar: false } } - } else { - next() - } -}) + ] + : [] +} export default router From c55af22d2ccaa0decbe5ee7f95207341fbece126 Mon Sep 17 00:00:00 2001 From: Nitheesh T Ganesh <60233274+nitheesh-aot@users.noreply.github.com> Date: Mon, 8 Jun 2020 09:23:42 -0700 Subject: [PATCH 2/3] changes to meet acceptance criteria (#754) --- auth-web/src/components/auth/Transactions.vue | 82 ++++++++++++------- 1 file changed, 51 insertions(+), 31 deletions(-) diff --git a/auth-web/src/components/auth/Transactions.vue b/auth-web/src/components/auth/Transactions.vue index be1affdb18..9406f51a62 100644 --- a/auth-web/src/components/auth/Transactions.vue +++ b/auth-web/src/components/auth/Transactions.vue @@ -44,7 +44,7 @@ -
+
-
-
- {{showDateRangeSelected}} -
- +
+ +
@@ -196,14 +204,15 @@ 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() @@ -211,17 +220,13 @@ export default class Transactions extends Vue { 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 = '' From 4b0495c851a167a9e680ed8680329e077e77644c Mon Sep 17 00:00:00 2001 From: jeznorth Date: Mon, 8 Jun 2020 09:47:23 -0700 Subject: [PATCH 3/3] UI updates for the transaction list (#752) Co-authored-by: Nitheesh T Ganesh <60233274+nitheesh-aot@users.noreply.github.com> --- auth-web/src/components/auth/Transactions.vue | 22 ++++++--- .../components/auth/TransactionsDataTable.vue | 46 +++++++++++-------- auth-web/src/util/common-util.ts | 2 +- 3 files changed, 42 insertions(+), 28 deletions(-) diff --git a/auth-web/src/components/auth/Transactions.vue b/auth-web/src/components/auth/Transactions.vue index 9406f51a62..c48967e256 100644 --- a/auth-web/src/components/auth/Transactions.vue +++ b/auth-web/src/components/auth/Transactions.vue @@ -23,7 +23,7 @@ -
+
Export CSV
-
{{totalTransactionsCount}} Records found
+
{{totalTransactionsCount}} Records found
{{status.status}} - {{status.description}} @@ -28,19 +29,18 @@
@@ -108,7 +103,8 @@ export default class TransactionsDataTable extends Vue { text: 'Folio #', align: 'left', sortable: false, - value: 'folioNumber' + value: 'folioNumber', + width: 115 }, { text: 'Initiated By', @@ -120,19 +116,22 @@ export default class TransactionsDataTable extends Vue { text: 'Date', align: 'left', value: 'transactionDate', - sortable: false + sortable: false, + width: 115 }, { text: 'Total Amount', - align: 'left', + align: 'right', value: 'totalAmount', - sortable: false + sortable: false, + width: 125 }, { text: 'Status', align: 'left', value: 'status', - sortable: false + sortable: false, + width: 115 } ] @@ -235,8 +234,9 @@ export default class TransactionsDataTable extends Vue { } .status-tooltip-icon { - margin-top: -2px; + margin-top: -4px; margin-right: 5px; + margin-left: 2px; } .v-tooltip__content:before { @@ -260,14 +260,20 @@ export default class TransactionsDataTable extends Vue { color: #000 } } + td { padding-top: 1rem; padding-bottom: 1rem; height: auto; vertical-align: top; + overflow: hidden; } - .v-list-item__title { + + .product-name { display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; font-weight: 700; } } diff --git a/auth-web/src/util/common-util.ts b/auth-web/src/util/common-util.ts index 71e976c722..e8aec176c8 100644 --- a/auth-web/src/util/common-util.ts +++ b/auth-web/src/util/common-util.ts @@ -51,7 +51,7 @@ export default class CommonUtils { // Formatting date in the desired format for displaying in the template static formatDisplayDate (date: Date, format?: string) { - return moment(date).format(format || 'DD MMM, YYYY') + return moment(date).format(format || 'MM-DD-YYYY') } // Formatting date in the desired format for vue date pickers