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