127 lines
3.8 KiB
Vue
127 lines
3.8 KiB
Vue
<script>
|
|
import { storeToRefs } from "pinia";
|
|
import { defineComponent, ref } from "vue";
|
|
|
|
import { apiBack } from "src/boot/axios";
|
|
import { quasarNotify } from "src/functions/quasarNotify";
|
|
import { useFormStore } from "src/stores/forms";
|
|
import * as M from "src/utils/zod/messages";
|
|
import IconPostalCode from "../icons/IconPostalCode.vue";
|
|
|
|
export default defineComponent({
|
|
name: "postal-code",
|
|
components: { IconPostalCode /* IconInfo, */ /* IconSearch */ },
|
|
props: ["modelValue", "bindValue", "setFieldError"],
|
|
setup({ setFieldError, modelValue }, { emit }) {
|
|
const formStore = useFormStore();
|
|
const { postalCodeValid } = storeToRefs(formStore);
|
|
|
|
const postalCodeInput = ref(modelValue);
|
|
|
|
function updateModel(value) {
|
|
emit("update:modelValue", value);
|
|
postalCodeInput.value = value;
|
|
}
|
|
|
|
const isPostalCodeLoading = ref(false);
|
|
async function onBlur() {
|
|
try {
|
|
if (postalCodeInput.value.length < 5) {
|
|
quasarNotify({
|
|
type: "info",
|
|
message: `${M.fiveLength}, Cantidad de caracteres: ${postalCodeInput.value.length}`,
|
|
});
|
|
setFieldError("postalCode", M.fiveLength);
|
|
return;
|
|
}
|
|
|
|
isPostalCodeLoading.value = true;
|
|
|
|
//TODO - Promesa consultando la api para ver las fechas existentes
|
|
const {
|
|
data: { data },
|
|
} = await apiBack.get(`/delivery/dates`, {
|
|
params: { postalCode: postalCodeInput.value },
|
|
});
|
|
const dates = data.map(({ nextDay }) => {
|
|
const getDate = new Date(nextDay);
|
|
const day = getDate.getDate().toString().padStart(2, "0");
|
|
const month = (getDate.getMonth() + 1).toString().padStart(2, "0");
|
|
const year = getDate.getFullYear();
|
|
const formattedDate = `${year}/${month}/${day}`;
|
|
|
|
return formattedDate;
|
|
});
|
|
|
|
if(!dates.length) {
|
|
quasarNotify({
|
|
type: "erro",
|
|
message: `No tenemos fechas de entrega posibles para este código postal`,
|
|
});
|
|
setFieldError("postalCode", M.fiveLength);
|
|
postalCodeValid.value.isValid = false;
|
|
} else {
|
|
postalCodeValid.value.isValid = true;
|
|
let calendar = null;
|
|
if(document.querySelector("#carousel-form .calendar .custom-date-btn")) calendar = document.querySelector("#carousel-form .calendar .custom-date-btn");
|
|
else if(document.querySelector("#filters-form .calendar .custom-date-btn")) calendar = document.querySelector("#filters-form .calendar .custom-date-btn");
|
|
calendar.click();
|
|
}
|
|
|
|
postalCodeValid.value.dataOptions = dates;
|
|
isPostalCodeLoading.value = false;
|
|
} catch (error) {
|
|
quasarNotify({
|
|
type: "erro",
|
|
message:
|
|
"Se ha producido un error en el proceso de identificación del código postal",
|
|
});
|
|
console.log(error)
|
|
isPostalCodeLoading.value = false;
|
|
} finally {
|
|
|
|
}
|
|
}
|
|
|
|
return { updateModel, onBlur, isPostalCodeLoading };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="custom-input-el postal-code">
|
|
<IconPostalCode />
|
|
|
|
<div class="custom-block-content">
|
|
<p class="custom-head-paragraph">
|
|
¿Dónde?
|
|
<!-- <IconInfo /> -->
|
|
</p>
|
|
|
|
<q-input
|
|
:model-value="modelValue"
|
|
@update:model-value="updateModel"
|
|
v-bind="bindValue"
|
|
class="custom-main-paragraph field-postal-code"
|
|
:error="false"
|
|
placeholder="código postal"
|
|
mask="#####"
|
|
borderless
|
|
dense
|
|
@blur="onBlur"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-input-el .custom-block-content .search-btn {
|
|
padding: 8px;
|
|
& .q-btn__content {
|
|
& svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
}
|
|
</style> |