farmstar-survey-ui/pages/distributor.vue

166 lines
6.3 KiB
Vue

<template>
<div class="lg:flex items-start justify-center mt-4">
<FormSheet class="mx-2 mb-4 lg:w-3/4">
<ClientOnly>
<Vueform
v-if="!formSubmitted"
ref="form$"
validate-on="change"
:form-data="(form$) => form$.requestData"
@response="handleResponse"
endpoint="distributor"
>
<div class="text-xl mb-1 col-span-12">
<div class="border-b border-gray-300 pb-2">
Distributor onboarding survey
</div>
</div>
<TextElement
name="phone"
label="What is your primary phone number?"
description="Enter a valid Kenyan phone number starting with 07 or 01 that you registered with."
rules="required|phone"
/>
<SelectElement
name="distributor_name"
label="What is the name of the agri-input distributor you work with?"
: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',
}"
rules="required"
/>
<SelectElement
name="type"
label="What types of fertilizers do you current stock at your distributor?"
:native="false"
:items="{
synthetic: 'Synthetic/Chemical',
organic: 'Organic',
both: 'Both',
}"
rules="required"
/>
<TextElement
name="synthetic_percentage"
label="In the past six months, what percentage of your fertilizer sales comprised synthetic fertilizers?"
description="Enter a percentage value"
rules="required|min:0|numeric|max:100"
input-type="number"
:conditions="[['type', 'both']]"
/>
<TextElement
name="organic_percentage"
label="In the past six months, what percentage of your fertilizer sales comprised organic fertilizers?"
description="Enter a percentage value"
rules="required|min:0|numeric|max:100"
input-type="number"
:conditions="[['type', 'both']]"
/>
<TagsElement
name="synthetic_factors"
label="What factors do you believe influence farmers' preferences for synthetic fertilizers? (Select all that apply)"
:items="{
increased_crop_yield: 'Increased Crop Yield',
cost_effective: 'Cost-effectiveness',
ease_of_application: 'Ease of application',
availability: 'Availability',
marketing: 'Marketing/Advertising',
govt_incentives: 'Government Incentives',
other: 'Other',
}"
rules="required"
:conditions="[['type', ['both', 'synthetic']]]"
/>
<TagsElement
name="organic_factors"
label="What factors do you believe influence farmers' preferences for organic fertilizers? (Select all that apply)"
:items="{
increased_crop_yield: 'Increased Crop Yield',
cost_effective: 'Cost-effectiveness',
ease_of_application: 'Ease of application',
availability: 'Availability',
marketing: 'Marketing/Advertising',
govt_incentives: 'Government Incentives',
other: 'Other',
environmental_concerns: 'Environmental concerns',
soil_health: 'Soil health improvement',
consumer_demand: 'Consumer demand for organic produce',
}"
rules="required"
:conditions="[['type', ['both', 'organic']]]"
/>
<TextareaElement
name="trends"
rules="required|max:250"
label="Have you noticed any specific trends or patterns in farmers' choices between synthetic and organic fertilizers?"
/>
<TextareaElement
name="obstacles"
rules="required|max:250"
:conditions="[['type', ['both', 'organic']]]"
label="Are there any obstacles faced in promoting or selling organic fertilizers compared to synthetic fertilizers? If yes, please specify."
/>
<SelectElement
name="need_education"
label="Do farmers express a need for more education or information about the benefits of organic fertilizers compared to synthetic ones?"
:native="false"
:items="{
yes: 'Yes',
no: 'No',
}"
rules="required"
:conditions="[['type', ['both', 'organic']]]"
/>
<TextareaElement
name="organic_strategies"
rules="required|max:250"
:conditions="[['type', ['both', 'organic']]]"
label="What strategies have been most effective in encouraging the adoption of organic fertilizers among walk-in farmers?"
/>
<TextareaElement
name="farmstar_strategies"
rules="required|max:500"
:conditions="[['type', ['both', 'organic']]]"
label="In your opinion, what strategies could Farm Star use to encourage an increased adoption of organic fertilizers among farmers?"
/>
<ButtonElement name="submit" add-class="mt-2" submits>
Submit
</ButtonElement>
</Vueform>
<SuccessAlert
v-else
title="Submission Successful"
subtitle="Thank you for submitting the form."
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 {
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>