mirror of
https://github.com/grassrootseconomics/farmstar-survey-ui.git
synced 2024-12-05 00:16:10 +01:00
189 lines
7.5 KiB
Vue
189 lines
7.5 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',
|
|
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"
|
|
/>
|
|
<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 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>
|