mirror of
https://github.com/grassrootseconomics/farmstar-survey-ui.git
synced 2024-12-05 00:16:10 +01:00
96 lines
2.9 KiB
Vue
96 lines
2.9 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="registration"
|
|
>
|
|
<div class="text-xl mb-4 col-span-12">
|
|
<div class="border-b border-gray-300 pb-2">Sign up</div>
|
|
</div>
|
|
<GroupElement name="personal_information">
|
|
<TextElement
|
|
name="name"
|
|
label="What is your full name?"
|
|
rules="required|max:150"
|
|
/>
|
|
<SelectElement
|
|
name="age_group"
|
|
:native="false"
|
|
label="How old are you?"
|
|
description="Select the age group you fall into."
|
|
:items="['20-29', '30-39', '40-49', '50-59', '60-69', '70+']"
|
|
rules="required"
|
|
/>
|
|
<SelectElement
|
|
name="gender"
|
|
label="What is your gender?"
|
|
:native="false"
|
|
:items="{
|
|
female: 'Female',
|
|
male: 'Male',
|
|
transgender: 'Transgender',
|
|
other: 'Other',
|
|
no_response: 'Prefer not to response',
|
|
}"
|
|
rules="required"
|
|
/>
|
|
<TextElement
|
|
name="phone"
|
|
label="What is your primary phone number?"
|
|
description="Enter a valid Kenyan phone number starting with 07 or 01."
|
|
rules="required|phone"
|
|
/>
|
|
<SelectElement
|
|
name="participant_type"
|
|
label="Are you a farmer or a distributor?"
|
|
:native="false"
|
|
:items="{
|
|
farmer: 'Farmer',
|
|
distributor: 'Distributor',
|
|
}"
|
|
rules="required"
|
|
/>
|
|
</GroupElement>
|
|
<ButtonElement name="submit" add-class="mt-2" submits>
|
|
Register
|
|
</ButtonElement>
|
|
</Vueform>
|
|
<SuccessAlert
|
|
v-else
|
|
title="Submission Successful"
|
|
subtitle="Registration details submitted successfully. Your survey account is pending approval."
|
|
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>
|