farmstar-survey-ui/pages/transaction.vue

153 lines
5.6 KiB
Vue

<template>
<div class="lg:flex items-start justify-center mt-4">
<FormSheet class="mx-2 lg:w-3/4">
<ClientOnly>
<Vueform
v-if="!formSubmitted"
ref="form$"
validate-on="change"
:form-data="(form$) => form$.requestData"
@response="handleResponse"
endpoint="transaction"
>
<div class="text-xl mb-4 col-span-12">
<div class="border-b border-gray-300 pb-2">Record a purchase</div>
</div>
<TextElement
name="phone"
label="What is your phone number?"
description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
rules="required|phone"
/>
<SelectElement
name="tx"
:native="false"
label="Did you buy or sell EverGrow Organic Fertilizer?"
:items="{
buy: 'Buy',
sell: 'Sell',
}"
/>
<SelectElement
name="distributor_name"
label="Select the name of the distributor you purchased EverGrow from."
:native="false"
:items="{
maraba_investments: 'Maraba Investments',
farmers_center: 'Farmers Center',
farmers_world: 'Farmers World',
farmers_desk: 'Farmers Desk',
mazao_na_afya: 'Mazao na Afya',
modez_agrovet: 'Modez organic',
wakulima_supplies: 'Wakulima supplies',
volcano: 'Volcano',
makutano_agrovet: 'Makutano agrovet',
kipkomo_agrovet: 'Kipkomo agrovet',
pioneer: 'Pioneer',
golden_agrovet: 'Golden agrovet',
skynet_agrovet: 'Skynet Agrovet',
mkulima_bora: 'Mkulima Bora',
beta_green: 'Beta Green',
mwangaza_agrovet: 'Mwangaza agrovet',
prima_met_agrovet: 'Prima met Agrovet',
ikolomani_dairy_coop: 'Ikolomani Dairy Cooperative Society',
bungoma_cane_growers: 'Bungoma Cane Growers',
sochoi_agro_stores: 'Sochoi Agro Stores',
lessos_agrovet_shop: 'Lessos Agrovet Shop',
mkulima_agro_engineer: 'Mkulima Agro-Engineer',
kfa_kapsabet: 'KFA Kapsabet',
mashambani_agrovet_lessos: 'Mashambani Agrovet - Lessos',
baraton_farm_solution: 'Baraton farm solution',
new_kamoiywo: 'New Kamoiywo',
moi_agro_stores_kaptumo: 'Moi agro stores kaptumo',
}"
rules="required"
:conditions="[['tx', 'buy']]"
/>
<TextElement
name="buy"
label="Enter the phone number of the counter agent you bought EverGrow from."
rules="required|phone"
description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
:conditions="[['tx', 'buy']]"
/>
<TextElement
name="sell"
label="Enter the phone number of the customer you sold EverGrow to."
rules="required|phone"
description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
:conditions="[['tx', 'sell']]"
/>
<DateElement
:min="new Date(2024, 0, 23)"
name="buy_date"
label="When did you make this purchase?"
rules="required"
:conditions="[['tx', 'buy']]"
/>
<DateElement
:min="new Date(2024, 0, 23)"
name="sell_date"
label="When did you make this sale?"
rules="required"
:conditions="[['tx', 'sell']]"
/>
<TextElement
name="evergrow_quantity_purchase"
label="How much EverGrow did you purchase?"
description="in 50kg bags of EverGrow. 1x50kg bag = 1, 2x50kg bags = 2, etc."
rules="required|numeric|min:1|max:20"
input-type="number"
:conditions="[['tx', 'buy']]"
/>
<TextElement
name="evergrow_quantity_sale"
label="How much EverGrow did you sell?"
description="in 50kg bags of EverGrow. 1x50kg bag = 1, 2x50kg bags = 2, etc."
rules="required|numeric|min:1|max:20"
input-type="number"
:conditions="[['tx', 'sell']]"
/>
<TextareaElement
name="feedback"
:conditions="[['tx', ['sell', 'buy']]]"
rules="max:300"
label="Do you have any comments or feedback for FarmStar?"
/>
<ButtonElement name="submit" add-class="mt-2" submits>
Submit
</ButtonElement>
</Vueform>
<SuccessAlert
v-else
title="Submission Successful"
subtitle="Transaction details submitted successfully."
link="/"
action="Home"
/>
</ClientOnly>
</FormSheet>
</div>
</template>
<script setup>
const form$ = ref(null);
const formSubmitted = ref(false);
const handleResponse = async (response, form$) => {
if (response.status <= 201) {
formSubmitted.value = true;
} else if (response.status >= 400) {
form$.messageBag.append(response.data?.message);
form$.messageBag.append(response.data?.error);
if (Object.keys(response.data.data)[0]?.message) {
form$.messageBag.append(
Object.keys(response.data.data)[0] +
": " +
Object.values(response.data.data)[0]?.message
);
}
}
};
</script>