Create Input date

This commit is contained in:
Kevin Martinez 2023-12-11 13:10:28 -04:00
parent 9eab901be4
commit 8db1b0f9ac
10 changed files with 150 additions and 489 deletions

View File

@ -0,0 +1,76 @@
<script setup>
import { computed, ref } from 'vue';
import { toDate } from 'src/filters';
const props = defineProps({
modelValue: {
type: String,
default: null,
},
readonly: {
type: Boolean,
default: false,
}
});
const emit = defineEmits(['update:modelValue']);
const value = computed({
get() {
return props.modelValue;
},
set(value) {
emit('update:modelValue', value ? new Date(value).toISOString() : null);
},
});
const isPopupOpen = ref(false);
const onDateUpdate = (date) => {
value.value = date;
isPopupOpen.value = false;
};
const padDate = (value) => value.toString().padStart(2, '0');
const formatDate = (dateString) => {
const date = new Date(dateString || '');
return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
date.getDate()
)}`;
};
</script>
<template>
<QInput
class="vn-input-date"
rounded
readonly
:model-value="toDate(value)"
v-bind="$attrs"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
v-model="isPopupOpen"
cover
transition-show="scale"
transition-hide="scale"
:no-parent-event="props.readonly"
>
<QDate
:model-value="formatDate(value)"
@update:model-value="onDateUpdate"
/>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</template>
<style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid;
}
.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
border-style: solid;
}
</style>

View File

@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInputDate from "components/common/VnInputDate.vue";
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -108,33 +109,7 @@ const statesFilter = {
/> />
</div> </div>
<div class="col"> <div class="col">
<QInput <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
v-model="data.created"
mask="####-##-##"
fill-mask="_"
autofocus
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="data.created" mask="YYYY-MM-DD">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</div> </div>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">

View File

@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -150,33 +151,7 @@ const states = ref();
</QItem> --> </QItem> -->
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate v-model="params.created" :label="t('Created')" />
v-model="params.created"
:label="t('Created')"
autofocus
readonly
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.created">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QExpansionItem> </QExpansionItem>

View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -76,78 +77,16 @@ function isValidNumber(value) {
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.from" v-model="params.from"
:label="t('From')" :label="t('From')"
mask="date"
placeholder="yyyy/mm/dd"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.from" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/> />
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.to" v-model="params.to"
:label="t('To')" :label="t('To')"
mask="date"
placeholder="yyyy/mm/dd"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.to" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/> />
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QList> </QList>

View File

@ -3,6 +3,7 @@ import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -116,128 +117,35 @@ function setWorkers(data) {
<QExpansionItem :label="t('More options')" expand-separator> <QExpansionItem :label="t('More options')" expand-separator>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.issued"
:label="t('Issued')" :label="t('Issued')"
dense dense
mask="date"
outlined outlined
rounded rounded
v-model="params.issued"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-hide="scale"
transition-show="scale"
>
<QDate v-model="params.issued" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/> />
<QBtn
:label="t('globals.confirm')"
@click="save"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.created"
:label="t('Created')" :label="t('Created')"
dense dense
mask="date"
outlined outlined
rounded rounded
v-model="params.created"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-hide="scale"
transition-show="scale"
>
<QDate v-model="params.created" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/> />
<QBtn
:label="t('globals.confirm')"
@click="save"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.dued"
:label="t('Dued')" :label="t('Dued')"
dense dense
mask="date"
outlined outlined
rounded rounded
v-model="params.dued"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-hide="scale"
transition-show="scale"
>
<QDate v-model="params.dued" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/> />
<QBtn
:label="t('globals.confirm')"
@click="save"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QExpansionItem> </QExpansionItem>

View File

@ -3,9 +3,9 @@ import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js'; import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toDate } from 'src/filters';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnInputDate from "components/common/VnInputDate.vue";
const { t } = useI18n(); const { t } = useI18n();
const invoiceOutGlobalStore = useInvoiceOutGlobalStore(); const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@ -111,64 +111,18 @@ onMounted(async () => {
outlined outlined
rounded rounded
/> />
<QInput <VnInputDate
dense v-model="formData.invoiceDate"
outlined
rounded
placeholder="dd-mm-aaa"
:label="t('invoiceDate')" :label="t('invoiceDate')"
:model-value="toDate(formData.invoiceDate)"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="formData.invoiceDate">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
<QInput
dense dense
outlined outlined
rounded rounded />
placeholder="dd-mm-aaa" <VnInputDate
v-model="formData.maxShipped"
:label="t('maxShipped')" :label="t('maxShipped')"
:model-value="toDate(formData.maxShipped)" dense
> outlined
<template #append> rounded />
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="formData.maxShipped">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
<VnSelectFilter <VnSelectFilter
:label="t('company')" :label="t('company')"
v-model="formData.companyFk" v-model="formData.companyFk"

View File

@ -7,7 +7,7 @@ import invoiceOutService from 'src/services/invoiceOut.service';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import { QCheckbox, QBtn } from 'quasar'; import { QCheckbox, QBtn } from 'quasar';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js'; import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { toDate } from 'src/filters'; import VnInputDate from 'components/common/VnInputDate.vue';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore(); const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@ -15,8 +15,8 @@ const rows = ref([]);
const { t } = useI18n(); const { t } = useI18n();
const dateRange = reactive({ const dateRange = reactive({
from: Date.vnFirstDayOfMonth(), from: Date.vnFirstDayOfMonth().toISOString(),
to: Date.vnLastDayOfMonth(), to: Date.vnLastDayOfMonth().toISOString(),
}); });
const selectedCustomerId = ref(0); const selectedCustomerId = ref(0);
@ -174,7 +174,7 @@ const columns = ref([
]); ]);
const downloadCSV = async () => { const downloadCSV = async () => {
invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to); await invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
}; };
const search = async () => { const search = async () => {
@ -186,20 +186,26 @@ const search = async () => {
}); });
} }
}); });
const searchFilter = {
limit: 20
}
if (and.length) {
searchFilter.where = {
and
}
}
const params = { const params = {
...dateRange, ...dateRange,
filter: { filter: JSON.stringify(searchFilter),
limit: 20,
where: { and },
},
}; };
rows.value = await invoiceOutService.getNegativeBases(params); rows.value = await invoiceOutService.getNegativeBases(params);
}; };
const refresh = () => { const refresh = () => {
dateRange.from = Date.vnFirstDayOfMonth(); dateRange.from = Date.vnFirstDayOfMonth().toISOString();
dateRange.to = Date.vnLastDayOfMonth(); dateRange.to = Date.vnLastDayOfMonth().toISOString();
filter.value = { filter.value = {
company: null, company: null,
country: null, country: null,
@ -241,68 +247,24 @@ onMounted(async () => {
> >
<template #top-left> <template #top-left>
<div class="row justify-start items-end"> <div class="row justify-start items-end">
<QInput <VnInputDate
dense v-model="dateRange.from"
lazy-rules
outlined
rounded
placeholder="dd-mm-aaa"
:label="t('invoiceOut.negativeBases.from')" :label="t('invoiceOut.negativeBases.from')"
class="q-mr-md q" class="q-mr-md"
:model-value="toDate(dateRange.from)" dense
> lazy-rules
<template #append> outlined
<QIcon name="event" class="cursor-pointer"> rounded
<QPopupProxy />
cover <VnInputDate
transition-show="scale" v-model="dateRange.to"
transition-hide="scale" :label="t('invoiceOut.negativeBases.to')"
> class="q-mr-md"
<QDate v-model="dateRange.from">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
<QInput
dense dense
lazy-rules lazy-rules
outlined outlined
rounded rounded
placeholder="dd-mm-aaa"
:label="t('invoiceOut.negativeBases.to')"
class="q-mr-md q"
:model-value="toDate(dateRange.to)"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="dateRange.to">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/> />
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
<QBtn <QBtn
color="primary" color="primary"
icon-right="archive" icon-right="archive"
@ -363,8 +325,8 @@ onMounted(async () => {
props.col.name !== 'hasToInvoice' && props.col.name !== 'hasToInvoice' &&
props.col.name !== 'verifiedData' props.col.name !== 'verifiedData'
" "
>{{ props.value }}</template >{{ props.value }}
> </template>
<CustomerDescriptorProxy <CustomerDescriptorProxy
v-if="props.col.name === 'clientId'" v-if="props.col.name === 'clientId'"
:id="selectedCustomerId" :id="selectedCustomerId"

View File

@ -3,6 +3,7 @@ import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInputDate from "components/common/VnInputDate.vue";
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -111,35 +112,7 @@ const countries = ref();
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput <VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" />
:label="t('route.cmr.list.shipped')"
v-model="params.shipped"
mask="date"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="rotate"
transition-hide="rotate"
>
<QDate v-model="params.shipped" minimal>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.close')"
color="primary"
flat
@click="save"
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
</QList> </QList>

View File

@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import toDateString from 'filters/toDateString'; import toDateString from 'filters/toDateString';
import VnInputDate from "components/common/VnInputDate.vue";
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -71,69 +72,10 @@ const warehouses = ref();
</QItem> </QItem>
<QItem> <QItem>
<QItemSection> <QItemSection>
<QInput v-model="params.from" :label="t('From')" mask="date"> <VnInputDate v-model="params.from" :label="t('From')" />
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.from" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
<QItemSection> <QItemSection>
<QInput v-model="params.to" :label="t('To')" mask="date"> <VnInputDate v-model="params.to" :label="t('To')" />
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.to" landscape>
<div
class="row items-center justify-end q-gutter-sm"
>
<QBtn
:label="t('globals.cancel')"
color="primary"
flat
v-close-popup
/>
<QBtn
:label="t('globals.confirm')"
color="primary"
flat
@click="save"
v-close-popup
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem> <QItem>

View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue'; import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import { toDate } from 'src/filters'; import VnInputDate from 'components/common/VnInputDate.vue';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
@ -135,68 +135,24 @@ const decrement = (paramsObj, key) => {
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.shippedFrom"
:label="t('params.shippedFrom')"
dense dense
outlined outlined
rounded rounded
placeholder="dd-mm-aaa"
:label="t('params.shippedFrom')"
:model-value="toDate(params.shippedFrom)"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.shippedFrom">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/> />
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
<QItemSection> <QItemSection>
<QInput <VnInputDate
v-model="params.landedTo"
:label="t('params.landedTo')"
dense dense
outlined outlined
rounded rounded
placeholder="dd-mm-aaa"
:model-value="toDate(params.landedTo)"
:label="t('params.landedTo')"
>
<template #append>
<QIcon name="event" class="cursor-pointer">
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate v-model="params.landedTo">
<div class="row items-center justify-end">
<QBtn
v-close-popup
:label="t('globals.close')"
color="primary"
flat
/> />
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</QItemSection> </QItemSection>
</QItem> </QItem>
<QItem class="q-mb-sm"> <QItem class="q-mb-sm">
@ -272,6 +228,7 @@ const decrement = (paramsObj, key) => {
.input-number >>> input[type='number'] { .input-number >>> input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.input-number >>> input::-webkit-outer-spin-button, .input-number >>> input::-webkit-outer-spin-button,
.input-number >>> input::-webkit-inner-spin-button { .input-number >>> input::-webkit-inner-spin-button {
appearance: none; appearance: none;