Skip to content

Commit

Permalink
Merge pull request #756 from bcgov/development
Browse files Browse the repository at this point in the history 
dev to test merge
  • Loading branch information
@saravanpa-aot
saravanpa-aot authored Jun 8, 2020
2 parents ef12a77 + 4b0495c commit 377473b
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 108 deletions.
104 changes: 66 additions & 38 deletions auth-web/src/components/auth/Transactions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</v-btn>
</template>
<v-card class="date-range-container d-flex">
<div class="date-range-options d-flex flex-column justify-space-between flex-grow-0 pb-6 pt-2">
<div class="date-range-options d-flex flex-column justify-space-between flex-grow-0 pb-6 pt-3">
<v-list dense class="py-0"
>
<v-list-item-group
Expand All @@ -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"
Expand All @@ -63,31 +63,39 @@
</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>
<div class="folio-number-filter d-inline-flex search-input-with-btn">
<v-text-field
dense
outlined
filled
single-line
hide-details
height="44"
height="43"
class="folio-number-field"
label="Folio #"
prepend-inner-icon="mdi-magnify"
Expand All @@ -104,15 +112,14 @@
</div>
<v-spacer></v-spacer>
<v-btn
large
color="primary"
class="font-weight-bold"
depressed
large
@click="exportCSV"
>Export CSV</v-btn>
</div>
<div class="filter-results d-inline-flex align-center mb-5">
<div class="filter-results-label py-2 mr-5">{{totalTransactionsCount}} Records found</div>
<div class="filter-results-label py-2 mr-7">{{totalTransactionsCount}} Records found</div>
<v-chip
class="mr-2 filter-chip"
close
Expand Down Expand Up @@ -196,32 +203,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])
Expand All @@ -232,7 +236,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 () {
Expand All @@ -243,30 +249,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')
Expand Down Expand Up @@ -315,13 +334,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 = ''
Expand Down Expand Up @@ -411,7 +430,16 @@ export default class Transactions extends Vue {
::v-deep {
.v-text-field--outlined.v-input--dense .v-label {
top: 12px;
top: 14px !important;
}
.v-text-field__slot input {
font-size: 0.875rem;
}
.v-label {
font-size: 0.875rem !important;
top: 12px !important;
}
.v-input__prepend-inner {
Expand Down
46 changes: 26 additions & 20 deletions auth-web/src/components/auth/TransactionsDataTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
:server-items-length="totalTransactionsCount"
:options.sync="tableDataOptions"
:loading="isDataLoading"
loading-text="loading text"
:footer-props="{
itemsPerPageOptions: getPaginationOptions
}"
Expand All @@ -20,27 +21,26 @@
{{header.text}}
<v-tooltip bottom color="grey darken-4">
<template v-slot:activator="{ on }">
<v-icon small class="status-tooltip-icon" v-on="on">mdi-information-outline</v-icon>
<v-icon class="status-tooltip-icon" v-on="on">mdi-information-outline</v-icon>
</template>
<div v-for="(status, index) in transactionStatus" :key="index">
{{status.status}} - {{status.description}}
</div>
</v-tooltip>
</template>
<template v-slot:item.transactionNames="{ item }">
<v-list-item-title
class="user-name"
<div class="product-purchased font-weight-bold"
:data-test="getIndexedTag('transaction-name', item.index)"
>
<div
<div class="product-name"
v-for="(name, nameIndex) in item.transactionNames"
:key="nameIndex">
{{ name }}
</div>
</v-list-item-title>
<v-list-item-subtitle
</div>
<div class="product-suite"
:data-test="getIndexedTag('transaction-sub', item.index)"
>Business Registry</v-list-item-subtitle>
>Business Registry</div>
</template>
<template v-slot:item.transactionDate="{ item }">
{{formatDate(item.transactionDate)}}
Expand All @@ -51,12 +51,7 @@
</div>
</template>
<template v-slot:item.status="{ item }">
<div
class="font-weight-bold text-uppercase"
v-bind:class="getStatusClass(item)"
>
{{item.status}}
</div>
{{item.status}}
</template>
</v-data-table>
</div>
Expand Down Expand Up @@ -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',
Expand All @@ -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
}
]
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
Expand Down
8 changes: 4 additions & 4 deletions auth-web/src/components/auth/stepper/InfoStepper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
]
Expand Down
Loading

0 comments on commit 377473b

Please sign in to comment.