wbuezas
/
hedera-web-mindshore
forked from verdnatura/hedera-web
0
1
Fork 0
Code Pull Requests Activity

WIP

This commit is contained in:
William Buezas 2024-08-23 16:09:50 -03:00
parent 57880705d0
commit facbe9b990
1 changed files with 184 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/pages/Ecomerce/CheckoutView.vue
View File

@ -18,22 +18,12 @@ const appStore = useAppStore();
const stepperRef = ref(null);
const steps = {
AGENCY: [
{ name: 'method' },
{ name: 'date' },
{ name: 'address' },
{ name: 'agency' },
{ name: 'confirm-delivery' }
],
PICKUP: []
};
const loading = ref(false);
const today = ref(null);
const addresses = ref([]);
const agencies = ref([]);
const currentStep = ref(1);
const lastStep = 5;
const currentStep = ref('method');
// const lastStep = 'confirm';
const id = route.params.id;
const orderForm = ref({
method: '',
@ -42,6 +32,81 @@ const orderForm = ref({
agency: ''
});
const steps = {
AGENCY: [
{
name: 'method',
stepDone: false,
validateStep: () => {
const validation = !!orderForm.value.method;
console.log('validation:', validation);
if (!validation) {
notify(t('pleaseSelectADate'), 'negative');
}
return validation;
}
},
{
name: 'date',
stepDone: false,
validateStep: () => {
const validation = !!orderForm.value.date;
console.log('validation:', validation);
if (!validation) {
notify(t('pleaseSelectAnOption'), 'negative');
}
return validation;
}
},
{
name: 'address',
validateStep: () => {
const validation = !!orderForm.value.address;
if (!validation) {
notify(t('pleaseSelectAnAddress'), 'negative');
}
return validation;
}
},
{
name: 'agency',
onStepMounted: async () => {
await getAgencies();
},
validateStep: () => {
const validation = !!orderForm.value.agency;
if (!validation) {
notify(t('pleaseSelectAnAgency'), 'negative');
}
return validation;
}
},
{
name: 'confirm',
onBeforeNextStep: async () => {
await submit();
}
}
],
PICKUP: [
{
name: 'method'
// validateStep: () => {
// const validation = orderForm.value.method !== '';
// if (!validation) {
// notify('Please select a method', 'negative');
// }
// return validation;
// }
},
{ name: 'date' },
{ name: 'address' },
{ name: 'pickup' },
{ name: 'confirm' }
]
};
const confirmArrivalText = computed(() => {
if (!orderForm.value.agency) return '';
return `${t('arrival')} ${formatDateTitle(orderForm.value.date)}`;
@ -96,30 +161,57 @@ const getAgencies = async () => {
}
);
agencies.value = results[1].data;
console.log('agencies:', agencies.value);
console.log('AGENCIES:', agencies.value);
} catch (error) {
console.error('Error getting agencies:', error);
}
};
const onAddressSelected = id => {
orderForm.value.address = id;
stepperRef.value.next();
const onNextStep = async stepIndex => {
console.log('on next step');
const currentStep = steps[orderForm.value.method][stepIndex];
console.log('currentStep:', currentStep);
if (currentStep.onBeforeNextStep) {
await currentStep.onBeforeNextStep();
}
if (currentStep.validateStep && !currentStep.validateStep()) {
return;
}
currentStep.stepDone = true;
await stepperRef.value.next();
const nextStep = steps[orderForm.value.method][stepIndex + 1];
console.log('nextStep:', nextStep);
if (nextStep && nextStep.onStepMounted) {
await nextStep.onStepMounted();
}
};
const onStepChange = async step => {
console.log('step:', step);
if (step === 4) {
await getAgencies();
} else if (step === lastStep) {
submit();
const onPreviousStep = async stepIndex => {
console.log('on previous step');
const currentStep = steps[orderForm.value.method][stepIndex];
console.log('step:', currentStep);
await stepperRef.value.previous();
const previousStep = steps[orderForm.value.method][stepIndex - 1];
if (previousStep.onStepMounted) {
await previousStep.onStepMounted();
}
// console.log('event:', event);
};
const getDefaultValues = async () => {
return await jApi.query(
`SELECT deliveryMethod, agencyModeFk, addressFk, defaultAgencyFk
FROM myBasketDefaults`
);
};
const submit = async () => {
loading.value = true;
// const id = route.params.id;
let query =
'CALL myOrder_create(@orderId, #date, #method, #agency, #address); SELECT @orderId;';
if (id) {
@ -179,8 +271,12 @@ const submit = async () => {
onMounted(async () => {
today.value = Date.vnNew();
today.value.setHours(0, 0, 0, 0);
// if (id) {
// }
const [defaultValues] = await getDefaultValues();
console.log('defaultValues:', defaultValues);
if (defaultValues) {
orderForm.value.method = defaultValues.deliveryMethod;
}
getAddresses();
});
</script>
@ -188,15 +284,24 @@ onMounted(async () => {
<template>
<QPage class="vn-w-sm">
<QStepper
v-if="steps[orderForm.method] && steps[orderForm.method].length"
v-model="currentStep"
ref="stepperRef"
animated
keep-alive
class="default-radius"
@update:model-value="onStepChange"
>
<QStep name="1" :done="currentStep > 1" done-color="accent">
<div class="column justify-center items-center">
<QStep
v-for="(step, stepIndex) in steps[orderForm.method]"
:key="stepIndex"
:name="step.name"
:done="step.stepDone"
done-color="accent"
>
<div
v-if="step.name === 'method'"
class="column justify-center items-center"
>
<span class="text-h6 text-bold tex q-mb-md text-center">
{{ t('receiveOrPickOrder') }}
</span>
@ -213,11 +318,12 @@ onMounted(async () => {
/>
</div>
</div>
</QStep>
<QStep :name="2" :done="currentStep > 2" done-color="accent">
<div class="flex justify-center items-center">
<div
v-if="step.name === 'date'"
class="flex justify-center items-center"
>
<span class="text-h6 text-bold tex q-mb-md text-center">
{{ t('receiveOrPickOrder') }}
{{ t('orderDateDelivery') }}
</span>
<QDate
v-model="orderForm.date"
@ -225,31 +331,34 @@ onMounted(async () => {
color="accent"
/>
</div>
</QStep>
<QStep :name="3" :done="currentStep > 3" done-color="accent">
<QList
v-if="orderForm.method === 'AGENCY'"
v-if="step.name === 'address'"
class="vn-w-xs q-gutter-y-sm"
>
<QItem
v-for="(address, index) in addresses"
:key="index"
class="column"
clickable
tag="label"
v-ripple
@click="onAddressSelected(address.id)"
>
<QItemLabel class="text-bold text-subtitle1">
{{ address.nickname }}
</QItemLabel>
<QItemLabel class="text-subtitle1">
{{ address.street }}
</QItemLabel>
<QItemSection avatar>
<QRadio
v-model="orderForm.address"
:val="address.id"
/>
</QItemSection>
<QItemSection>
<QItemLabel>{{ address.nickname }}</QItemLabel>
<QItemLabel caption>
{{ address.street }}
</QItemLabel>
</QItemSection>
</QItem>
</QList>
</QStep>
<QStep :name="4" :done="currentStep > 4" done-color="accent">
<div class="flex justify-center items-center">
<div
v-if="step.name === 'agency'"
class="flex justify-center items-center"
>
<span class="text-h6 text-bold tex q-mb-md text-center">
{{ t('orderDateDelivery') }}
</span>
@ -258,12 +367,12 @@ onMounted(async () => {
option-label="description"
option-value="id"
:options="agencies"
@update:model-value="stepperRef.next()"
/>
</div>
</QStep>
<QStep :name="5" :done="currentStep > 5" done-color="accent">
<div class="flex column justify-center items-center">
<div
v-if="step.name === 'confirm'"
class="flex column justify-center items-center"
>
<span class="text-h6 text-bold tex q-mb-md text-center">
{{ t('confirmData') }}
</span>
@ -273,24 +382,22 @@ onMounted(async () => {
<span>{{ confirmAgencyText }}</span>
</div>
</div>
</QStep>
<template #navigation>
<QStepperNavigation class="flex justify-between">
<QBtn
flat
color="primary"
@click="stepperRef.previous()"
@click="onPreviousStep(stepIndex)"
label="Back"
class="q-ml-sm"
:class="{ invisible: currentStep === 1 }"
/>
<QBtn
@click="stepperRef.next()"
@click="onNextStep(stepIndex)"
color="primary"
label="next"
/>
</QStepperNavigation>
</template>
</QStep>
</QStepper>
<pre>{{ orderForm }}</pre>
</QPage>
@ -308,6 +415,10 @@ en-US:
confirmData: Confirm data
arrival: Arrival
orderUpdated: Order updated
pleaseSelectAnOption: Please select an option
pleaseSelectADate: Please select a date
pleaseSelectAnAddress: Please select an address
pleaseSelectAnAgency: Please select an agency
es-ES:
receiveOrPickOrder: ¿Quieres recibir o recoger el pedido?
receiveOrder: Recibir en mi tienda
@ -317,6 +428,10 @@ es-ES:
confirmData: Confirma los datos
arrival: Llegada
orderUpdated: Pedido actualizado
pleaseSelectAnOption: Por favor, selecciona una opción
pleaseSelectADate: Por favor, selecciona una fecha
pleaseSelectAnAddress: Por favor, selecciona una dirección
pleaseSelectAnAgency: Por favor, selecciona una agencia
ca-ES:
receiveOrPickOrder: Vols rebre o recollir la comanda?
receiveOrder: Rebre en mi tenda
@ -326,6 +441,10 @@ ca-ES:
confirmData: Confirma les dades
arrival: Arribada
orderUpdated: Comanda actualitzada
pleaseSelectAnOption: Si us plau tria una opció
pleaseSelectADate: Si us plau tria una data
pleaseSelectAnAddress: Si us plau tria una adreça
pleaseSelectAnAgency: Si us plau tria una agència
fr-FR:
receiveOrPickOrder: Voulez-vous recevoir ou récuperer l'ordre?
receiveOrder: Livraison à la boutique
@ -335,6 +454,10 @@ fr-FR:
confirmData: Confirmez les coordonnées
arrival: Arrivée
orderUpdated: Mise à jour commande
pleaseSelectAnOption: Veuillez choisir une option
pleaseSelectADate: Veuillez choisir une date
pleaseSelectAnAddress: Veuillez choisir une adresse
pleaseSelectAnAgency: Veuillez choisir une agence
pt-PT:
receiveOrPickOrder: Queres receber ou levantar a encomenda?
receiveOrder: Receber na minha loja
@ -343,4 +466,8 @@ pt-PT:
confirmData: Confirme os dados
arrival: Chegada
orderUpdated: Encomenda actualizada
pleaseSelectAnOption: Por favor, escolha uma opção
pleaseSelectADate: Por favor, escolha uma data
pleaseSelectAnAddress: Por favor, escolha um endereço
pleaseSelectAnAgency: Por favor, escolha uma agência
</i18n>