atst/js/components/pop_date_range.js

100 lines
2.5 KiB
JavaScript

import { format } from 'date-fns'
import { emitFieldChange } from '../lib/emitters'
import DateSelector from './date_selector'
const START_DATE = 'start_date'
const END_DATE = 'end_date'
export default {
name: 'pop-date-range',
components: {
DateSelector,
},
props: {
initialMinStartDate: String,
initialMaxEndDate: String,
initialStartDate: {
type: String,
default: null,
},
initialEndDate: {
type: String,
default: null,
},
clinIndex: Number,
},
data: function() {
let start = !!this.initialStartDate
? new Date(this.initialStartDate)
: false
let contractStart = new Date(this.initialMinStartDate)
let minEndDate = start && start > contractStart ? start : contractStart
let end = !!this.initialEndDate ? new Date(this.initialEndDate) : false
let contractEnd = new Date(this.initialMaxEndDate)
let maxStartDate = end && end < contractEnd ? end : contractEnd
// the maxStartDate and minEndDate change based on user input:
// the latest date the start can be is the PoP end date
// the earliest date the end can be is the PoP start date
// if the form is initialized with out a PoP, the maxStartDate and minEndDate
// default to the contract dates
return {
maxStartDate: maxStartDate,
minEndDate: minEndDate,
contractStart: contractStart,
contractEnd: contractEnd,
}
},
mounted: function() {
this.$on('field-change', this.handleFieldChange)
},
methods: {
handleFieldChange: function(event) {
if (event.name.includes(START_DATE) && event.valid) {
let date = new Date(event.value)
this.minEndDate = this.calcMinEndDate(date)
} else if (event.name.includes(END_DATE) && event.valid) {
let date = new Date(event.value)
this.maxStartDate = this.calcMaxStartDate(date)
}
emitFieldChange(this)
},
calcMaxStartDate: function(date) {
if (!!date && date < this.contractEnd) {
return date
} else {
return this.maxStartDate
}
},
calcMinEndDate: function(date) {
if (!!date && date > this.contractStart) {
return date
} else {
return this.minEndDate
}
},
},
computed: {
maxStartProp: function() {
return format(this.maxStartDate, 'YYYY-MM-DD')
},
minEndProp: function() {
return format(this.minEndDate, 'YYYY-MM-DD')
},
valid: function() {
return this.$children.every(child => child.valid)
},
},
}