mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-27 11:41:09 -04:00
add v-calendar
This commit is contained in:
Asif Takavala
committed by
Mohit Panjwani
Mohit Panjwani
parent
bba14bf51a
commit
787619b907
@ -48,6 +48,7 @@
|
||||
"mini-svg-data-uri": "^1.3.3",
|
||||
"moment": "^2.29.1",
|
||||
"pinia": "^2.0.4",
|
||||
"v-calendar": "3.0.0-alpha.8",
|
||||
"v-money3": "3.16.1",
|
||||
"v-tooltip": "^4.0.0-alpha.1",
|
||||
"vue": "^3.2.0-beta.5",
|
||||
|
||||
@ -9,7 +9,7 @@ import { computed } from 'vue'
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: moment().format('YYYY-MM-DD hh:MM'),
|
||||
default: moment().format('YYYY-MM-DD HH:mm'),
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@ -32,6 +32,8 @@
|
||||
:content-loading="isLoading"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
:show-extra-options="true"
|
||||
:source-date="estimateStore.newEstimate.estimate_date"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
|
||||
@ -32,6 +32,8 @@
|
||||
:content-loading="isLoading"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
:show-extra-options="true"
|
||||
:source-date="invoiceStore.newInvoice.invoice_date"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
|
||||
@ -7,7 +7,33 @@
|
||||
/>
|
||||
</BaseContentPlaceholders>
|
||||
|
||||
<div v-else :class="computedContainerClass" class="relative flex flex-row">
|
||||
<div v-else :class="computedContainerClass">
|
||||
<date-picker
|
||||
ref="vCalendar"
|
||||
v-model="date"
|
||||
:mode="mode"
|
||||
:is24hr="time24hr"
|
||||
class="w-full"
|
||||
color="indigo"
|
||||
:input-debounce="500"
|
||||
:update-on-input="false"
|
||||
:is-range="false"
|
||||
trim-weeks
|
||||
:is-required="isRequired"
|
||||
:popover="{
|
||||
visibility: disabled ? 'hidden' : 'focus',
|
||||
showDelay: 0,
|
||||
hideDelay: 1,
|
||||
}"
|
||||
:attributes="attrs"
|
||||
:model-config="config"
|
||||
:masks="masks"
|
||||
:locale="global.locale"
|
||||
>
|
||||
<template
|
||||
#default="{ inputValue, inputEvents, togglePopover, hidePopover }"
|
||||
>
|
||||
<!-- calendar icon -->
|
||||
<svg
|
||||
v-if="showCalendarIcon && !hasIconSlot"
|
||||
viewBox="0 0 20 20"
|
||||
@ -24,7 +50,7 @@
|
||||
text-gray-400
|
||||
cursor-pointer
|
||||
"
|
||||
@click="onClickDp"
|
||||
@click="togglePopover()"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
@ -35,24 +61,54 @@
|
||||
|
||||
<slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
|
||||
|
||||
<FlatPickr
|
||||
ref="dp"
|
||||
v-model="date"
|
||||
v-bind="$attrs"
|
||||
:disabled="disabled"
|
||||
:config="config"
|
||||
<input
|
||||
:value="inputValue"
|
||||
:class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
|
||||
readonly
|
||||
v-on="inputEvents"
|
||||
@blur="hidePopover()"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-if="showExtraOptions" #footer>
|
||||
<div
|
||||
class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
|
||||
>
|
||||
<button type="button" class="extra-button" @click="moveToDate(sourceDate)">
|
||||
{{ global.t('date_picker.same_day') }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="extra-button" @click="withInDays(7)">
|
||||
{{ global.t('date_picker.within_7_days') }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="extra-button" @click="withInDays(15)">
|
||||
{{ global.t('date_picker.within_15_days') }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="extra-button" @click="withInDays(30)">
|
||||
{{ global.t('date_picker.within_30_days') }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="extra-button" @click="withInDays(45)">
|
||||
{{ global.t('date_picker.within_45_days') }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="extra-button" @click="withInDays(60)">
|
||||
{{ global.t('date_picker.within_60_days') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/babel" setup>
|
||||
import FlatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import { Calendar, DatePicker } from 'v-calendar'
|
||||
import 'v-calendar/dist/style.css'
|
||||
import { computed, reactive, watch, ref, useSlots } from 'vue'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
|
||||
const dp = ref(null)
|
||||
import moment from 'moment'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@ -90,36 +146,31 @@ const props = defineProps({
|
||||
defaultInputClass: {
|
||||
type: String,
|
||||
default:
|
||||
'font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||
'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
|
||||
},
|
||||
time24hr: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isRequired: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showExtraOptions: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
sourceDate: {
|
||||
type: [String, Date],
|
||||
default: () => new Date(),
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
let config = reactive({
|
||||
altInput: true,
|
||||
enableTime: props.enableTime,
|
||||
time_24hr: props.time24hr,
|
||||
})
|
||||
|
||||
const date = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value)
|
||||
},
|
||||
})
|
||||
|
||||
const carbonFormat = computed(() => {
|
||||
return companyStore.selectedCompanySettings?.carbon_date_format
|
||||
})
|
||||
const { global } = window.i18n
|
||||
const vCalendar = ref(null)
|
||||
|
||||
const hasIconSlot = computed(() => {
|
||||
return !!slots.icon
|
||||
@ -135,7 +186,6 @@ const inputInvalidClass = computed(() => {
|
||||
if (props.invalid) {
|
||||
return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
|
||||
@ -143,35 +193,97 @@ const inputDisabledClass = computed(() => {
|
||||
if (props.disabled) {
|
||||
return 'border border-solid rounded-md outline-none input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-gray-200 text-gray-600 border-gray-200'
|
||||
}
|
||||
|
||||
return ''
|
||||
})
|
||||
|
||||
function onClickDp(params) {
|
||||
dp.value.fp.open()
|
||||
// to convert YYYY-MM-DD | YYYY-MM-DD HH:mm format
|
||||
function convertYMDFormat(date) {
|
||||
let format = props.enableTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
|
||||
return date ? moment(date).format(format) : date
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.enableTime,
|
||||
(val) => {
|
||||
if (props.enableTime) {
|
||||
config.enableTime = props.enableTime
|
||||
}
|
||||
const date = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => {
|
||||
emit('update:modelValue', value)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
})
|
||||
|
||||
const mode = computed(() => {
|
||||
return props.enableTime ? 'dateTime' : 'date'
|
||||
})
|
||||
|
||||
const config = reactive({
|
||||
type: 'string',
|
||||
mask: 'YYYY-MM-DD', // Uses 'iso' if missing
|
||||
//timeAdjust: '00:00:00',
|
||||
})
|
||||
|
||||
const masks = reactive({
|
||||
input: null,
|
||||
inputDateTime: null,
|
||||
inputDateTime24hr: null,
|
||||
})
|
||||
|
||||
const attrs = reactive([
|
||||
{
|
||||
dates: new Date(),
|
||||
highlight: {
|
||||
fillMode: 'outline',
|
||||
},
|
||||
/* popover: {
|
||||
label: 'Today Date',
|
||||
visibility: 'hover',
|
||||
}, */
|
||||
},
|
||||
])
|
||||
|
||||
const carbonFormat = computed(() => {
|
||||
return companyStore.selectedCompanySettings?.moment_date_format
|
||||
})
|
||||
|
||||
watch(
|
||||
() => carbonFormat,
|
||||
() => {
|
||||
if (!props.enableTime) {
|
||||
config.altFormat = carbonFormat.value ? carbonFormat.value : 'd M Y'
|
||||
masks.input = carbonFormat.value ? carbonFormat.value : 'DD MMM YYYY'
|
||||
config.mask = 'YYYY-MM-DD'
|
||||
} else {
|
||||
config.altFormat = carbonFormat.value
|
||||
? `${carbonFormat.value} H:i `
|
||||
: 'd M Y H:i'
|
||||
let timeFormat = 'HH:mm'
|
||||
if (props.time24hr) {
|
||||
masks.inputDateTime24hr = carbonFormat.value
|
||||
? `${carbonFormat.value} ${timeFormat}`
|
||||
: `DD MMM YYYY ${timeFormat}`
|
||||
} else {
|
||||
masks.inputDateTime = carbonFormat.value
|
||||
? `${carbonFormat.value} ${timeFormat}`
|
||||
: `DD MMM YYYY ${timeFormat}`
|
||||
}
|
||||
config.mask = `YYYY-MM-DD ${timeFormat}`
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
async function moveToDate(_date) {
|
||||
const calendar = vCalendar.value
|
||||
_date = _date ? _date : convertYMDFormat(new Date())
|
||||
date.value = _date
|
||||
// await calendar.move(_date)
|
||||
calendar.hidePopover()
|
||||
}
|
||||
|
||||
async function withInDays(noOfDays) {
|
||||
if (!noOfDays) return false
|
||||
|
||||
let newDate = moment(props.sourceDate).add(noOfDays, 'days').toDate()
|
||||
newDate = convertYMDFormat(newDate)
|
||||
moveToDate(newDate)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.extra-button {
|
||||
@apply bg-primary-500 text-white text-sm font-semibold px-2 py-1 rounded hover:bg-primary-700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1527,5 +1527,13 @@
|
||||
"pdf_bill_to": "Bill to,",
|
||||
"pdf_ship_to": "Ship to,",
|
||||
"pdf_received_from": "Received from:",
|
||||
"pdf_tax_label": "Tax"
|
||||
"pdf_tax_label": "Tax",
|
||||
"date_picker": {
|
||||
"same_day": "Same Day",
|
||||
"within_7_days": "Within 7 Days",
|
||||
"within_15_days": "Within 15 Days",
|
||||
"within_30_days": "Within 30 Days",
|
||||
"within_45_days": "Within 45 Days",
|
||||
"within_60_days": "Within 60 Days"
|
||||
}
|
||||
}
|
||||
33
yarn.lock
33
yarn.lock
@ -156,6 +156,11 @@
|
||||
"@nodelib/fs.scandir" "2.1.5"
|
||||
fastq "^1.6.0"
|
||||
|
||||
"@popperjs/core@2.4.0":
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.0.tgz#0e1bdf8d021e7ea58affade33d9d607e11365915"
|
||||
integrity sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==
|
||||
|
||||
"@popperjs/core@^2.10.1", "@popperjs/core@^2.11.0", "@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
|
||||
version "2.11.4"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
|
||||
@ -378,6 +383,11 @@
|
||||
prosemirror-state "^1.3.4"
|
||||
prosemirror-view "^1.23.6"
|
||||
|
||||
"@types/lodash@^4.14.165":
|
||||
version "4.14.179"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.179.tgz#490ec3288088c91295780237d2497a3aa9dfb5c5"
|
||||
integrity sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
|
||||
|
||||
"@types/orderedmap@*":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/orderedmap/-/orderedmap-1.0.0.tgz#807455a192bba52cbbb4517044bc82bdbfa8c596"
|
||||
@ -928,6 +938,16 @@ csstype@^2.6.8:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
|
||||
integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
|
||||
|
||||
date-fns-tz@^1.0.12:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.0.tgz#6c83d4bdf20d54060cf176d96a3ca45043b36a84"
|
||||
integrity sha512-r6ye6PmGEvkF467/41qzU71oGwv9kHTnV3vtSZdyV6VThwPID47ZH7FtR7zQWrhgOUWkYySm2ems2w6ZfNUqoA==
|
||||
|
||||
date-fns@^2.16.1:
|
||||
version "2.28.0"
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
|
||||
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
|
||||
|
||||
debug@=3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
|
||||
@ -1663,7 +1683,7 @@ lodash.truncate@^4.4.2:
|
||||
resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
|
||||
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
|
||||
|
||||
lodash@^4.17.13, lodash@^4.17.21:
|
||||
lodash@^4.17.13, lodash@^4.17.20, lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
@ -2344,6 +2364,17 @@ util-deprecate@^1.0.2:
|
||||
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
|
||||
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
|
||||
|
||||
v-calendar@3.0.0-alpha.8:
|
||||
version "3.0.0-alpha.8"
|
||||
resolved "https://registry.yarnpkg.com/v-calendar/-/v-calendar-3.0.0-alpha.8.tgz#3bc8c69f4788fb527c39706f41fd2a502a17c827"
|
||||
integrity sha512-T23H5UbK0EomrwArlF/jrT2LFbV/lu+Bp9JroZ1paN6rPoaMyvE+HrLxvAmUgi+pODrdTURDMzM3+WPgeFKEBQ==
|
||||
dependencies:
|
||||
"@popperjs/core" "2.4.0"
|
||||
"@types/lodash" "^4.14.165"
|
||||
date-fns "^2.16.1"
|
||||
date-fns-tz "^1.0.12"
|
||||
lodash "^4.17.20"
|
||||
|
||||
v-money3@3.16.1:
|
||||
version "3.16.1"
|
||||
resolved "https://registry.yarnpkg.com/v-money3/-/v-money3-3.16.1.tgz#1cbc126792772ddd9f0d9605745961bae29f2e5a"
|
||||
|
||||
Reference in New Issue
Block a user