fix: replaced date pickers with frappe ui's datepickers
This commit is contained in:
Shariq Ansari
parent
8e4fd7054b
commit
5bde6b723a
@ -1,270 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
@open="selectCurrentMonthYear"
|
||||
class="flex w-full [&>div:first-child]:w-full"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Input
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="value && formatter ? formatter(value) : value"
|
||||
@focus="!readonly ? togglePopover() : null"
|
||||
class="w-full"
|
||||
:class="inputClass"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ togglePopover }">
|
||||
<div
|
||||
class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="flex items-center p-1 text-gray-500">
|
||||
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-left"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
<div class="flex-1 text-center text-base font-medium text-gray-700">
|
||||
{{ formatMonth }}
|
||||
</div>
|
||||
<Button variant="ghost" class="h-7 w-7" @click="nextMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-right"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 p-1">
|
||||
<TextInput
|
||||
class="text-sm"
|
||||
type="text"
|
||||
:value="value"
|
||||
@change="
|
||||
selectDate(getDate($event.target.value)) || togglePopover()
|
||||
"
|
||||
/>
|
||||
<Button
|
||||
:label="__('Today')"
|
||||
class="text-sm"
|
||||
@click="selectDate(getDate()) || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-1 text-gray-800"
|
||||
>
|
||||
<div class="flex items-center text-xs uppercase">
|
||||
<div
|
||||
class="flex h-6 w-8 items-center justify-center text-center"
|
||||
v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
|
||||
:key="i"
|
||||
>
|
||||
{{ __(d) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-for="(week, i) in datesAsWeeks"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-for="date in week"
|
||||
:key="toValue(date)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
|
||||
:class="{
|
||||
'text-gray-400': date.getMonth() !== currentMonth - 1,
|
||||
'font-extrabold text-gray-900':
|
||||
toValue(date) === toValue(today),
|
||||
'bg-gray-800 text-white hover:bg-gray-800':
|
||||
toValue(date) === value,
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
selectDate(date)
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ __(date.getDate()) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end p-1">
|
||||
<Button
|
||||
:label="__('Clear')"
|
||||
class="text-sm"
|
||||
@click="
|
||||
() => {
|
||||
selectDate('')
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popover from '@/components/frappe-ui/Popover.vue'
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
|
||||
emits: ['change'],
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentYear: null,
|
||||
currentMonth: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCurrentMonthYear()
|
||||
},
|
||||
computed: {
|
||||
today() {
|
||||
return this.getDate()
|
||||
},
|
||||
datesAsWeeks() {
|
||||
let datesAsWeeks = []
|
||||
let dates = this.dates.slice()
|
||||
while (dates.length) {
|
||||
let week = dates.splice(0, 7)
|
||||
datesAsWeeks.push(week)
|
||||
}
|
||||
return datesAsWeeks
|
||||
},
|
||||
dates() {
|
||||
if (!(this.currentYear && this.currentMonth)) {
|
||||
return []
|
||||
}
|
||||
let monthIndex = this.currentMonth - 1
|
||||
let year = this.currentYear
|
||||
|
||||
let firstDayOfMonth = this.getDate(year, monthIndex, 1)
|
||||
let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
|
||||
let leftPaddingCount = firstDayOfMonth.getDay()
|
||||
let rightPaddingCount = 6 - lastDayOfMonth.getDay()
|
||||
|
||||
let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
|
||||
let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
|
||||
let daysInMonth = this.getDaysInMonth(monthIndex, year)
|
||||
let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
|
||||
|
||||
let dates = [
|
||||
...leftPadding,
|
||||
firstDayOfMonth,
|
||||
...datesInMonth,
|
||||
...rightPadding,
|
||||
]
|
||||
if (dates.length < 42) {
|
||||
const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
|
||||
dates = dates.concat(...finalPadding)
|
||||
}
|
||||
return dates
|
||||
},
|
||||
formatMonth() {
|
||||
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
|
||||
let month = __(
|
||||
date.toLocaleString('en-US', {
|
||||
month: 'long',
|
||||
})
|
||||
)
|
||||
return `${month}, ${date.getFullYear()}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
selectDate(date) {
|
||||
this.$emit('change', this.toValue(date))
|
||||
},
|
||||
selectCurrentMonthYear() {
|
||||
let date = this.value ? this.getDate(this.value) : this.getDate()
|
||||
if (date === 'Invalid Date') {
|
||||
date = this.getDate()
|
||||
}
|
||||
this.currentYear = date.getFullYear()
|
||||
this.currentMonth = date.getMonth() + 1
|
||||
},
|
||||
prevMonth() {
|
||||
this.changeMonth(-1)
|
||||
},
|
||||
nextMonth() {
|
||||
this.changeMonth(1)
|
||||
},
|
||||
changeMonth(adder) {
|
||||
this.currentMonth = this.currentMonth + adder
|
||||
if (this.currentMonth < 1) {
|
||||
this.currentMonth = 12
|
||||
this.currentYear = this.currentYear - 1
|
||||
}
|
||||
if (this.currentMonth > 12) {
|
||||
this.currentMonth = 1
|
||||
this.currentYear = this.currentYear + 1
|
||||
}
|
||||
},
|
||||
getDatesAfter(date, count) {
|
||||
let incrementer = 1
|
||||
if (count < 0) {
|
||||
incrementer = -1
|
||||
count = Math.abs(count)
|
||||
}
|
||||
let dates = []
|
||||
while (count) {
|
||||
date = this.getDate(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate() + incrementer
|
||||
)
|
||||
dates.push(date)
|
||||
count--
|
||||
}
|
||||
if (incrementer === -1) {
|
||||
return dates.reverse()
|
||||
}
|
||||
return dates
|
||||
},
|
||||
|
||||
getDaysInMonth(monthIndex, year) {
|
||||
let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||
let daysInMonth = daysInMonthMap[monthIndex]
|
||||
if (monthIndex === 1 && this.isLeapYear(year)) {
|
||||
return 29
|
||||
}
|
||||
return daysInMonth
|
||||
},
|
||||
|
||||
isLeapYear(year) {
|
||||
if (year % 400 === 0) return true
|
||||
if (year % 100 === 0) return false
|
||||
if (year % 4 === 0) return true
|
||||
return false
|
||||
},
|
||||
|
||||
toValue(date) {
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
|
||||
// toISOString is buggy and reduces the day by one
|
||||
// this is because it considers the UTC timestamp
|
||||
// in order to circumvent that we need to use luxon/moment
|
||||
// but that refactor could take some time, so fixing the time difference
|
||||
// as suggested in this answer.
|
||||
// https://stackoverflow.com/a/16084846/3541205
|
||||
date.setHours(0, -date.getTimezoneOffset(), 0, 0)
|
||||
return date.toISOString().slice(0, 10)
|
||||
},
|
||||
|
||||
getDate(...args) {
|
||||
let d = new Date(...args)
|
||||
return d
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,314 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
@open="selectCurrentMonthYear"
|
||||
class="flex w-full [&>div:first-child]:w-full"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Input
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="formatter ? formatDates(value) : value"
|
||||
@focus="!readonly ? togglePopover() : null"
|
||||
class="w-full"
|
||||
:class="inputClass"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ togglePopover }">
|
||||
<div
|
||||
class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="flex items-center p-1 text-gray-500">
|
||||
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-left"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
<div class="flex-1 text-center text-base font-medium text-gray-700">
|
||||
{{ formatMonth }}
|
||||
</div>
|
||||
<Button variant="ghost" class="h-7 w-7" @click="nextMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-right"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 p-1">
|
||||
<TextInput class="w-28 text-sm" type="text" v-model="fromDate" />
|
||||
<TextInput class="w-28 text-sm" type="text" v-model="toDate" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-1 text-gray-800"
|
||||
>
|
||||
<div class="flex items-center text-xs uppercase">
|
||||
<div
|
||||
class="flex h-6 w-8 items-center justify-center text-center"
|
||||
v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
|
||||
:key="i"
|
||||
>
|
||||
{{ __(d) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-for="(week, i) in datesAsWeeks"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-for="date in week"
|
||||
:key="toValue(date)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
|
||||
:class="{
|
||||
'text-gray-400': date.getMonth() !== currentMonth - 1,
|
||||
'text-gray-900': date.getMonth() === currentMonth - 1,
|
||||
'font-extrabold text-gray-900':
|
||||
toValue(date) === toValue(today),
|
||||
'rounded-none bg-gray-100': isInRange(date),
|
||||
'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
|
||||
fromDate && toValue(date) === toValue(fromDate),
|
||||
'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
|
||||
toDate && toValue(date) === toValue(toDate),
|
||||
}"
|
||||
@click="() => handleDateClick(date)"
|
||||
>
|
||||
{{ date.getDate() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-1 p-1">
|
||||
<Button
|
||||
:label="__('Clear')"
|
||||
@click="() => clearDates() | togglePopover()"
|
||||
:disabled="!fromDate || !toDate"
|
||||
/>
|
||||
<Button
|
||||
variant="solid"
|
||||
:label="__('Apply')"
|
||||
:disabled="!fromDate || !toDate"
|
||||
@click="() => selectDates() | togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popover from '@/components/frappe-ui/Popover.vue'
|
||||
export default {
|
||||
name: 'DateRangePicker',
|
||||
props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
|
||||
emits: ['change'],
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
data() {
|
||||
const fromDate = this.value ? this.value[0] : ''
|
||||
const toDate = this.value ? this.value[1] : ''
|
||||
return {
|
||||
currentYear: null,
|
||||
currentMonth: null,
|
||||
fromDate,
|
||||
toDate,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCurrentMonthYear()
|
||||
},
|
||||
computed: {
|
||||
today() {
|
||||
return this.getDate()
|
||||
},
|
||||
datesAsWeeks() {
|
||||
let datesAsWeeks = []
|
||||
let dates = this.dates.slice()
|
||||
while (dates.length) {
|
||||
let week = dates.splice(0, 7)
|
||||
datesAsWeeks.push(week)
|
||||
}
|
||||
return datesAsWeeks
|
||||
},
|
||||
dates() {
|
||||
if (!(this.currentYear && this.currentMonth)) {
|
||||
return []
|
||||
}
|
||||
let monthIndex = this.currentMonth - 1
|
||||
let year = this.currentYear
|
||||
|
||||
let firstDayOfMonth = this.getDate(year, monthIndex, 1)
|
||||
let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
|
||||
let leftPaddingCount = firstDayOfMonth.getDay()
|
||||
let rightPaddingCount = 6 - lastDayOfMonth.getDay()
|
||||
|
||||
let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
|
||||
let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
|
||||
let daysInMonth = this.getDaysInMonth(monthIndex, year)
|
||||
let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
|
||||
|
||||
let dates = [
|
||||
...leftPadding,
|
||||
firstDayOfMonth,
|
||||
...datesInMonth,
|
||||
...rightPadding,
|
||||
]
|
||||
if (dates.length < 42) {
|
||||
const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
|
||||
dates = dates.concat(...finalPadding)
|
||||
}
|
||||
return dates
|
||||
},
|
||||
formatMonth() {
|
||||
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
|
||||
let month = __(
|
||||
date.toLocaleString('en-US', {
|
||||
month: 'long',
|
||||
})
|
||||
)
|
||||
return `${month}, ${date.getFullYear()}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleDateClick(date) {
|
||||
if (this.fromDate && this.toDate) {
|
||||
this.fromDate = this.toValue(date)
|
||||
this.toDate = ''
|
||||
} else if (this.fromDate && !this.toDate) {
|
||||
this.toDate = this.toValue(date)
|
||||
} else {
|
||||
this.fromDate = this.toValue(date)
|
||||
}
|
||||
this.swapDatesIfNecessary()
|
||||
},
|
||||
selectDates() {
|
||||
if (!this.fromDate && !this.toDate) {
|
||||
return this.$emit('change', '')
|
||||
}
|
||||
this.$emit('change', `${this.fromDate},${this.toDate}`)
|
||||
},
|
||||
swapDatesIfNecessary() {
|
||||
if (!this.fromDate || !this.toDate) {
|
||||
return
|
||||
}
|
||||
// if fromDate is greater than toDate, swap them
|
||||
let fromDate = this.getDate(this.fromDate)
|
||||
let toDate = this.getDate(this.toDate)
|
||||
if (fromDate > toDate) {
|
||||
let temp = fromDate
|
||||
fromDate = toDate
|
||||
toDate = temp
|
||||
}
|
||||
this.fromDate = this.toValue(fromDate)
|
||||
this.toDate = this.toValue(toDate)
|
||||
},
|
||||
selectCurrentMonthYear() {
|
||||
let date = this.toDate ? this.getDate(this.toDate) : this.today
|
||||
this.currentYear = date.getFullYear()
|
||||
this.currentMonth = date.getMonth() + 1
|
||||
},
|
||||
prevMonth() {
|
||||
this.changeMonth(-1)
|
||||
},
|
||||
nextMonth() {
|
||||
this.changeMonth(1)
|
||||
},
|
||||
changeMonth(adder) {
|
||||
this.currentMonth = this.currentMonth + adder
|
||||
if (this.currentMonth < 1) {
|
||||
this.currentMonth = 12
|
||||
this.currentYear = this.currentYear - 1
|
||||
}
|
||||
if (this.currentMonth > 12) {
|
||||
this.currentMonth = 1
|
||||
this.currentYear = this.currentYear + 1
|
||||
}
|
||||
},
|
||||
getDatesAfter(date, count) {
|
||||
let incrementer = 1
|
||||
if (count < 0) {
|
||||
incrementer = -1
|
||||
count = Math.abs(count)
|
||||
}
|
||||
let dates = []
|
||||
while (count) {
|
||||
date = this.getDate(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate() + incrementer
|
||||
)
|
||||
dates.push(date)
|
||||
count--
|
||||
}
|
||||
if (incrementer === -1) {
|
||||
return dates.reverse()
|
||||
}
|
||||
return dates
|
||||
},
|
||||
|
||||
getDaysInMonth(monthIndex, year) {
|
||||
let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||
let daysInMonth = daysInMonthMap[monthIndex]
|
||||
if (monthIndex === 1 && this.isLeapYear(year)) {
|
||||
return 29
|
||||
}
|
||||
return daysInMonth
|
||||
},
|
||||
|
||||
isLeapYear(year) {
|
||||
if (year % 400 === 0) return true
|
||||
if (year % 100 === 0) return false
|
||||
if (year % 4 === 0) return true
|
||||
return false
|
||||
},
|
||||
|
||||
toValue(date) {
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
if (typeof date === 'string') {
|
||||
return date
|
||||
}
|
||||
|
||||
// toISOString is buggy and reduces the day by one
|
||||
// this is because it considers the UTC timestamp
|
||||
// in order to circumvent that we need to use luxon/moment
|
||||
// but that refactor could take some time, so fixing the time difference
|
||||
// as suggested in this answer.
|
||||
// https://stackoverflow.com/a/16084846/3541205
|
||||
date.setHours(0, -date.getTimezoneOffset(), 0, 0)
|
||||
return date.toISOString().slice(0, 10)
|
||||
},
|
||||
|
||||
getDate(...args) {
|
||||
let d = new Date(...args)
|
||||
return d
|
||||
},
|
||||
|
||||
isInRange(date) {
|
||||
if (!this.fromDate || !this.toDate) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
date >= this.getDate(this.fromDate) && date <= this.getDate(this.toDate)
|
||||
)
|
||||
},
|
||||
|
||||
formatDates(value) {
|
||||
if (!value) {
|
||||
return ''
|
||||
}
|
||||
const values = value.split(',')
|
||||
return this.formatter(values[0]) + ' to ' + this.formatter(values[1])
|
||||
},
|
||||
clearDates() {
|
||||
this.fromDate = ''
|
||||
this.toDate = ''
|
||||
this.selectDates()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,384 +0,0 @@
|
||||
<template>
|
||||
<Popover
|
||||
@open="selectCurrentMonthYear"
|
||||
class="flex w-full [&>div:first-child]:w-full"
|
||||
>
|
||||
<template #target="{ togglePopover }">
|
||||
<Input
|
||||
readonly
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="value && formatter ? formatter(value) : value"
|
||||
@focus="!readonly ? togglePopover() : null"
|
||||
class="w-full"
|
||||
:class="inputClass"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
<template #body="{ togglePopover }">
|
||||
<div
|
||||
class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="flex items-center p-1 text-gray-500">
|
||||
<Button variant="ghost" class="h-7 w-7" @click="prevMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-left"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
<div class="flex-1 text-center text-base font-medium text-gray-700">
|
||||
{{ formatMonth }}
|
||||
</div>
|
||||
<Button variant="ghost" class="h-7 w-7" @click="nextMonth">
|
||||
<FeatherIcon
|
||||
:stroke-width="2"
|
||||
name="chevron-right"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 p-1">
|
||||
<TextInput
|
||||
class="text-sm"
|
||||
type="text"
|
||||
:value="value"
|
||||
@change="updateDate($event.target.value) || togglePopover()"
|
||||
/>
|
||||
<Button
|
||||
:label="__('Now')"
|
||||
class="text-sm"
|
||||
@click="selectDate(getDate(), false, true) || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-1 text-gray-800"
|
||||
>
|
||||
<div class="flex items-center text-xs uppercase">
|
||||
<div
|
||||
class="flex h-6 w-8 items-center justify-center text-center"
|
||||
v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
|
||||
:key="i"
|
||||
>
|
||||
{{ __(d) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center"
|
||||
v-for="(week, i) in datesAsWeeks"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-for="date in week"
|
||||
:key="toValue(date)"
|
||||
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
|
||||
:class="{
|
||||
'text-gray-400': date.getMonth() !== currentMonth - 1,
|
||||
'font-extrabold text-gray-900':
|
||||
toValue(date) === toValue(today),
|
||||
'bg-gray-800 text-white hover:bg-gray-800':
|
||||
toValue(date) === value,
|
||||
}"
|
||||
@click="
|
||||
() => {
|
||||
selectDate(date)
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ date.getDate() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-around gap-2 p-1">
|
||||
<div>
|
||||
{{ twoDigit(hour) }} : {{ twoDigit(minute) }} :
|
||||
{{ twoDigit(second) }}
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="slider flex min-h-4 items-center justify-center">
|
||||
<TextInput
|
||||
v-model="hour"
|
||||
name="hours"
|
||||
type="range"
|
||||
min="0"
|
||||
max="23"
|
||||
step="1"
|
||||
@change="() => changeTime() || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div class="slider flex min-h-4 items-center justify-center">
|
||||
<TextInput
|
||||
v-model="minute"
|
||||
name="minutes"
|
||||
type="range"
|
||||
min="0"
|
||||
max="59"
|
||||
step="1"
|
||||
@change="() => changeTime() || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
<div class="slider flex min-h-4 items-center justify-center">
|
||||
<TextInput
|
||||
v-model="second"
|
||||
name="seconds"
|
||||
type="range"
|
||||
min="0"
|
||||
max="59"
|
||||
step="1"
|
||||
@change="() => changeTime() || togglePopover()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end p-1">
|
||||
<Button
|
||||
:label="__('Clear')"
|
||||
class="text-sm"
|
||||
@click="
|
||||
() => {
|
||||
selectDate('')
|
||||
togglePopover()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popover from '@/components/frappe-ui/Popover.vue'
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
|
||||
emits: ['change'],
|
||||
components: {
|
||||
Popover,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentYear: null,
|
||||
currentMonth: null,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCurrentMonthYear()
|
||||
},
|
||||
computed: {
|
||||
today() {
|
||||
return this.getDate()
|
||||
},
|
||||
datesAsWeeks() {
|
||||
let datesAsWeeks = []
|
||||
let dates = this.dates.slice()
|
||||
while (dates.length) {
|
||||
let week = dates.splice(0, 7)
|
||||
datesAsWeeks.push(week)
|
||||
}
|
||||
return datesAsWeeks
|
||||
},
|
||||
dates() {
|
||||
if (!(this.currentYear && this.currentMonth)) {
|
||||
return []
|
||||
}
|
||||
let monthIndex = this.currentMonth - 1
|
||||
let year = this.currentYear
|
||||
|
||||
let firstDayOfMonth = this.getDate(year, monthIndex, 1)
|
||||
let lastDayOfMonth = this.getDate(year, monthIndex + 1, 0)
|
||||
let leftPaddingCount = firstDayOfMonth.getDay()
|
||||
let rightPaddingCount = 6 - lastDayOfMonth.getDay()
|
||||
|
||||
let leftPadding = this.getDatesAfter(firstDayOfMonth, -leftPaddingCount)
|
||||
let rightPadding = this.getDatesAfter(lastDayOfMonth, rightPaddingCount)
|
||||
let daysInMonth = this.getDaysInMonth(monthIndex, year)
|
||||
let datesInMonth = this.getDatesAfter(firstDayOfMonth, daysInMonth - 1)
|
||||
|
||||
let dates = [
|
||||
...leftPadding,
|
||||
firstDayOfMonth,
|
||||
...datesInMonth,
|
||||
...rightPadding,
|
||||
]
|
||||
if (dates.length < 42) {
|
||||
const finalPadding = this.getDatesAfter(dates.at(-1), 42 - dates.length)
|
||||
dates = dates.concat(...finalPadding)
|
||||
}
|
||||
return dates
|
||||
},
|
||||
formatMonth() {
|
||||
let date = this.getDate(this.currentYear, this.currentMonth - 1, 1)
|
||||
let month = __(
|
||||
date.toLocaleString('en-US', {
|
||||
month: 'long',
|
||||
})
|
||||
)
|
||||
return `${month}, ${date.getFullYear()}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeTime() {
|
||||
let date = this.value ? this.getDate(this.value) : this.getDate()
|
||||
this.selectDate(date, true)
|
||||
},
|
||||
selectDate(date, isTimeChange = false, isNow = false) {
|
||||
if (!isTimeChange) {
|
||||
let currentDate =
|
||||
this.value && !isNow ? this.getDate(this.value) : this.getDate()
|
||||
this.hour = currentDate.getHours()
|
||||
this.minute = currentDate.getMinutes()
|
||||
this.second = currentDate.getSeconds()
|
||||
}
|
||||
this.$emit('change', this.toValue(date))
|
||||
},
|
||||
selectCurrentMonthYear() {
|
||||
let date = this.value ? this.getDate(this.value) : this.getDate()
|
||||
if (date === 'Invalid Date') {
|
||||
date = this.getDate()
|
||||
}
|
||||
this.currentYear = date.getFullYear()
|
||||
this.currentMonth = date.getMonth() + 1
|
||||
this.hour = date.getHours()
|
||||
this.minute = date.getMinutes()
|
||||
this.second = date.getSeconds()
|
||||
},
|
||||
prevMonth() {
|
||||
this.changeMonth(-1)
|
||||
},
|
||||
nextMonth() {
|
||||
this.changeMonth(1)
|
||||
},
|
||||
changeMonth(adder) {
|
||||
this.currentMonth = this.currentMonth + adder
|
||||
if (this.currentMonth < 1) {
|
||||
this.currentMonth = 12
|
||||
this.currentYear = this.currentYear - 1
|
||||
}
|
||||
if (this.currentMonth > 12) {
|
||||
this.currentMonth = 1
|
||||
this.currentYear = this.currentYear + 1
|
||||
}
|
||||
},
|
||||
getDatesAfter(date, count) {
|
||||
let incrementer = 1
|
||||
if (count < 0) {
|
||||
incrementer = -1
|
||||
count = Math.abs(count)
|
||||
}
|
||||
let dates = []
|
||||
while (count) {
|
||||
date = this.getDate(
|
||||
date.getFullYear(),
|
||||
date.getMonth(),
|
||||
date.getDate() + incrementer
|
||||
)
|
||||
dates.push(date)
|
||||
count--
|
||||
}
|
||||
if (incrementer === -1) {
|
||||
return dates.reverse()
|
||||
}
|
||||
return dates
|
||||
},
|
||||
getDaysInMonth(monthIndex, year) {
|
||||
let daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
||||
let daysInMonth = daysInMonthMap[monthIndex]
|
||||
if (monthIndex === 1 && this.isLeapYear(year)) {
|
||||
return 29
|
||||
}
|
||||
return daysInMonth
|
||||
},
|
||||
isLeapYear(year) {
|
||||
if (year % 400 === 0) return true
|
||||
if (year % 100 === 0) return false
|
||||
if (year % 4 === 0) return true
|
||||
return false
|
||||
},
|
||||
twoDigit(number) {
|
||||
return number.toString().padStart(2, '0')
|
||||
},
|
||||
toValue(date) {
|
||||
if (!date) return ''
|
||||
|
||||
date.setHours(this.hour, this.minute, this.second, 0)
|
||||
// "YYYY-MM-DD HH:MM:SS"
|
||||
return `${date.getFullYear()}-${this.twoDigit(
|
||||
date.getMonth() + 1
|
||||
)}-${this.twoDigit(date.getDate())} ${this.twoDigit(
|
||||
date.getHours()
|
||||
)}:${this.twoDigit(date.getMinutes())}:${this.twoDigit(
|
||||
date.getSeconds()
|
||||
)}`
|
||||
},
|
||||
getDate(...args) {
|
||||
let d = new Date(...args)
|
||||
return d
|
||||
},
|
||||
updateDate(date) {
|
||||
date = this.getDate(date)
|
||||
this.hour = date.getHours()
|
||||
this.minute = date.getMinutes()
|
||||
this.second = date.getSeconds()
|
||||
this.selectDate(date, true)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slider {
|
||||
--trackHeight: 1px;
|
||||
--thumbRadius: 10px;
|
||||
}
|
||||
:deep(.slider input[type='range']) {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.slider input[type='range']::-webkit-slider-runnable-track) {
|
||||
appearance: none;
|
||||
background: #000;
|
||||
height: var(--trackHeight);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
:deep(.slider input[type='range']:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:deep(.slider input[type='range']::-webkit-slider-thumb) {
|
||||
width: var(--thumbRadius);
|
||||
height: var(--thumbRadius);
|
||||
margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
pointer-events: all;
|
||||
appearance: none;
|
||||
outline: 1px solid #777777;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:deep(.slider:hover input[type='range']::-webkit-slider-thumb) {
|
||||
outline: 1px solid #000;
|
||||
}
|
||||
:deep(.slider input[type='range']::-webkit-slider-thumb) {
|
||||
width: var(--thumbRadius);
|
||||
height: var(--thumbRadius);
|
||||
margin-top: calc((var(--trackHeight) - var(--thumbRadius)) / 2);
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
pointer-events: all;
|
||||
appearance: none;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
@ -132,19 +132,15 @@
|
||||
</template>
|
||||
</NestedPopover>
|
||||
</div>
|
||||
<DatetimePicker
|
||||
<DateTimePicker
|
||||
v-else-if="field.type === 'Datetime'"
|
||||
icon-left="calendar"
|
||||
:value="data[field.name]"
|
||||
@change="(val) => (data[field.name] = val)"
|
||||
v-model="data[field.name]"
|
||||
:placeholder="__(field.placeholder || field.label)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
<DatePicker
|
||||
v-else-if="field.type === 'Date'"
|
||||
icon-left="calendar"
|
||||
:value="data[field.name]"
|
||||
@change="(val) => (data[field.name] = val)"
|
||||
v-model="data[field.name]"
|
||||
:placeholder="__(field.placeholder || field.label)"
|
||||
input-class="border-none"
|
||||
/>
|
||||
@ -173,15 +169,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import NestedPopover from '@/components/NestedPopover.vue'
|
||||
import DropdownItem from '@/components/DropdownItem.vue'
|
||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { Tooltip } from 'frappe-ui'
|
||||
import { Tooltip, DatePicker, DateTimePicker } from 'frappe-ui'
|
||||
|
||||
const { getUser } = usersStore()
|
||||
|
||||
|
||||
@ -34,10 +34,10 @@
|
||||
v-for="(f, i) in filters"
|
||||
:key="i"
|
||||
id="filter-list"
|
||||
class="sm:mb-3 mb-4"
|
||||
class="mb-4 sm:mb-3"
|
||||
>
|
||||
<div v-if="isMobileView" class="flex flex-col gap-2">
|
||||
<div class="flex w-full items-center justify-between -mb-2">
|
||||
<div class="-mb-2 flex w-full items-center justify-between">
|
||||
<div class="text-base text-gray-600">
|
||||
{{ i == 0 ? __('Where') : __('And') }}
|
||||
</div>
|
||||
@ -155,14 +155,18 @@
|
||||
</NestedPopover>
|
||||
</template>
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import DateRangePicker from '@/components/Controls/DateRangePicker.vue'
|
||||
import NestedPopover from '@/components/NestedPopover.vue'
|
||||
import FilterIcon from '@/components/Icons/FilterIcon.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
|
||||
import { FormControl, createResource, Tooltip } from 'frappe-ui'
|
||||
import {
|
||||
FormControl,
|
||||
createResource,
|
||||
Tooltip,
|
||||
DatePicker,
|
||||
DateTimePicker,
|
||||
DateRangePicker,
|
||||
} from 'frappe-ui'
|
||||
import { h, computed, onMounted } from 'vue'
|
||||
import { isMobileView } from '@/composables/settings'
|
||||
|
||||
@ -395,10 +399,11 @@ function getValSelect(f) {
|
||||
} else if (typeNumber.includes(fieldtype)) {
|
||||
return h(FormControl, { type: 'number' })
|
||||
} else if (typeDate.includes(fieldtype) && operator == 'between') {
|
||||
return h(DateRangePicker, { value: f.value })
|
||||
return h(DateRangePicker, { value: f.value, iconLeft: '' })
|
||||
} else if (typeDate.includes(fieldtype)) {
|
||||
return h(fieldtype == 'Date' ? DatePicker : DatetimePicker, {
|
||||
return h(fieldtype == 'Date' ? DatePicker : DateTimePicker, {
|
||||
value: f.value,
|
||||
iconLeft: '',
|
||||
})
|
||||
} else {
|
||||
return h(FormControl, { type: 'text' })
|
||||
|
||||
@ -34,10 +34,9 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
|
||||
import { FormControl, call, createResource, TextEditor } from 'frappe-ui'
|
||||
import { FormControl, call, createResource, TextEditor, DatePicker } from 'frappe-ui'
|
||||
import { ref, computed, onMounted, h } from 'vue'
|
||||
|
||||
const typeCheck = ['Check']
|
||||
|
||||
@ -91,11 +91,9 @@
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Link>
|
||||
<DatetimePicker
|
||||
<DateTimePicker
|
||||
class="datepicker w-36"
|
||||
icon-left="calendar"
|
||||
:value="_task.due_date"
|
||||
@change="(val) => (_task.due_date = val)"
|
||||
v-model="_task.due_date"
|
||||
:placeholder="__('01/04/2024 11:30 PM')"
|
||||
input-class="border-none"
|
||||
/>
|
||||
@ -120,8 +118,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { taskStatusOptions, taskPriorityOptions } from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import { TextEditor, Dropdown, Tooltip, call } from 'frappe-ui'
|
||||
import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<component
|
||||
v-else-if="['Date', 'Datetime'].includes(filter.type)"
|
||||
class="border-none"
|
||||
:is="filter.type === 'Date' ? DatePicker : DatetimePicker"
|
||||
:is="filter.type === 'Date' ? DatePicker : DateTimePicker"
|
||||
:value="filter.value"
|
||||
@change="(v) => updateFilter(filter, v)"
|
||||
:placeholder="filter.label"
|
||||
@ -39,10 +39,8 @@
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import DatePicker from '@/components/Controls/DatePicker.vue'
|
||||
import DatetimePicker from '@/components/Controls/DatetimePicker.vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
import { TextInput, FormControl } from 'frappe-ui'
|
||||
import { TextInput, FormControl, DatePicker, DateTimePicker } from 'frappe-ui'
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user