mirror of
https://github.com/grassrootseconomics/farmstar-survey-ui.git
synced 2024-12-05 00:16:10 +01:00
init: farmstar-survey-ui
This commit is contained in:
commit
2ff68432a2
GPG Key ID:
7DD45520C01CD85D
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
37
README.md
Normal file
37
README.md
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
# FarmStar Survey UI
|
||||||
|
|
||||||
|
## Required env variables
|
||||||
|
|
||||||
|
- `BASE_URL`
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
22
app.vue
Normal file
22
app.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<AppNavbar />
|
||||||
|
<div class="bg-gray-100">
|
||||||
|
<div class="max-w-screen-xl mx-auto">
|
||||||
|
<NuxtPage />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
useHead({
|
||||||
|
title: "FarmStar Survey",
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* You can keep or remove the body style depending on your preference */
|
||||||
|
body {
|
||||||
|
background-color: #f3f4f6; /* You can use the color code for light grey */
|
||||||
|
margin: 0; /* Remove default body margin */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
assets/css/input.css
Normal file
3
assets/css/input.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
72
components/App/AppNavbar.vue
Normal file
72
components/App/AppNavbar.vue
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="border-gray-200 bg-gray-900">
|
||||||
|
<div
|
||||||
|
class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
|
||||||
|
>
|
||||||
|
<NuxtLink to="/" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||||
|
<span
|
||||||
|
class="self-center text-2xl font-semibold whitespace-nowrap text-white"
|
||||||
|
>FarmStar Survey</span
|
||||||
|
></NuxtLink
|
||||||
|
>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="toggleMenu"
|
||||||
|
data-collapse-toggle="navbar-default"
|
||||||
|
type="button"
|
||||||
|
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
|
||||||
|
aria-controls="navbar-default"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 17 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M1 1h15M1 7h15M1 13h15"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
:class="{ hidden: !isMenuOpen, 'lg:flex': isMenuOpen }"
|
||||||
|
class="w-full md:block md:w-auto"
|
||||||
|
id="navbar-default"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="font-medium flex flex-col p-4 md:p-0 mt-4 border rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 bg-gray-900 border-gray-700"
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<NuxtLink
|
||||||
|
to="/about"
|
||||||
|
class="block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
|
||||||
|
>About</NuxtLink
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<NuxtLink
|
||||||
|
to="/help"
|
||||||
|
class="block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
|
||||||
|
>Help</NuxtLink
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const isMenuOpen = ref(false);
|
||||||
|
|
||||||
|
const toggleMenu = () => {
|
||||||
|
isMenuOpen.value = !isMenuOpen.value;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
15
components/Card.vue
Normal file
15
components/Card.vue
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="bg-white mx-2 p-4 rounded border border-gray-300 mb-4 md:min-w-[250px] md:w-full md:mx-0 lg:mx-4"
|
||||||
|
>
|
||||||
|
<h2 class="text-l font-bold mb-2">{{ title }}</h2>
|
||||||
|
<p class="text-sm text-gray-600 mb-4">{{ subtitle }}</p>
|
||||||
|
<NuxtLink :to="link">
|
||||||
|
<button class="bg-blue-500 text-white px-4 py-2 rounded">Open</button>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps(["title", "subtitle", "link"]);
|
||||||
|
</script>
|
||||||
5
components/FormSheet.vue
Normal file
5
components/FormSheet.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bg-white rounded border border-gray-300 p-3">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
28
components/Notice.vue
Normal file
28
components/Notice.vue
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
id="alert-additional-content-1"
|
||||||
|
class="p-4 mb-4 text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-4 h-4 me-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Info</span>
|
||||||
|
<h3 class="text-lg font-medium">Info</h3>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 text-sm">{{ subtitle }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps(["subtitle"]);
|
||||||
|
</script>
|
||||||
51
components/SuccessAlert.vue
Normal file
51
components/SuccessAlert.vue
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
id="alert-additional-content-3"
|
||||||
|
class="p-4 mb-4 text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-4 h-4 me-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Info</span>
|
||||||
|
<h3 class="text-lg font-medium">{{ title }}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 mb-4 text-sm">
|
||||||
|
{{ subtitle }}
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<NuxtLink :to="link">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-white bg-green-800 hover:bg-green-900 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="me-2 h-3 w-3"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{{ action }}
|
||||||
|
</button>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps(["title", "subtitle", "link", "action"]);
|
||||||
|
</script>
|
||||||
5
nuxt.config.ts
Normal file
5
nuxt.config.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
devtools: { enabled: false },
|
||||||
|
modules: [ '@nuxtjs/tailwindcss', '@vueform/nuxt'],
|
||||||
|
})
|
||||||
11459
package-lock.json
generated
Normal file
11459
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "farmstar-suvey-ui",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"dev:host": "nuxt dev --host",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@nuxt/devtools": "latest",
|
||||||
|
"@nuxtjs/tailwindcss": "^6.10.0",
|
||||||
|
"@vueform/nuxt": "^1.4.0",
|
||||||
|
"flowbite": "^2.2.0",
|
||||||
|
"nuxt": "^3.8.2",
|
||||||
|
"vue": "^3.3.8",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
pages/about.vue
Normal file
1
pages/about.vue
Normal file
@ -0,0 +1 @@
|
|||||||
|
<template></template>
|
||||||
165
pages/distributor.vue
Normal file
165
pages/distributor.vue
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
<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?.message);
|
||||||
|
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>
|
||||||
434
pages/farmer.vue
Normal file
434
pages/farmer.vue
Normal file
@ -0,0 +1,434 @@
|
|||||||
|
<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="farmer"
|
||||||
|
>
|
||||||
|
<div class="text-xl mb-1 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">
|
||||||
|
Farmer 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"
|
||||||
|
/>
|
||||||
|
<div class="text mb-1 mt-1 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">Farm Details</div>
|
||||||
|
</div>
|
||||||
|
<GroupElement name="farm_details">
|
||||||
|
<SelectElement
|
||||||
|
name="county"
|
||||||
|
label="What county are you located in?"
|
||||||
|
:native="false"
|
||||||
|
:items="{
|
||||||
|
kirinyaga: 'Kirinyaga',
|
||||||
|
muranga: 'Muranga',
|
||||||
|
nakuru: 'Nakuru',
|
||||||
|
meru: 'Meru',
|
||||||
|
uasin_gishu: 'Uasin Gishu',
|
||||||
|
kajiado: 'Kajiado',
|
||||||
|
}"
|
||||||
|
rules="required"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="sub_county"
|
||||||
|
label="What sub-county are you located in?"
|
||||||
|
rules="required|max:50"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="farming_area_acres"
|
||||||
|
input-type="number"
|
||||||
|
label="How many acres of land are you currently farming?"
|
||||||
|
rules="required|min:1|numeric"
|
||||||
|
/>
|
||||||
|
<TagsElement
|
||||||
|
name="planned_crops"
|
||||||
|
label="Which crops do you plan to grow in the coming season?"
|
||||||
|
:items="{
|
||||||
|
rice: 'Rice',
|
||||||
|
coffee: 'Coffee',
|
||||||
|
tea: 'Tea',
|
||||||
|
sugarcane: 'Sugarcane',
|
||||||
|
miraa: 'Miraa',
|
||||||
|
avocados: 'Avocados',
|
||||||
|
maize: 'Maize',
|
||||||
|
potatoes: 'Potatoes',
|
||||||
|
sorghum: 'Sorghum',
|
||||||
|
other_fruits: 'Other fruits',
|
||||||
|
other_vegetables: 'Other vegetables',
|
||||||
|
other_grains: 'Other grains',
|
||||||
|
}"
|
||||||
|
rules="required"
|
||||||
|
description="Select all options that apply."
|
||||||
|
/>
|
||||||
|
</GroupElement>
|
||||||
|
<div class="text mt-4 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">
|
||||||
|
Past Harvest Details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12">
|
||||||
|
<Notice
|
||||||
|
subtitle="Select all the crops that you have planted in the last 3 years, the average harvest you have gotten (in kg/acre) and how much you have earned (in ksh/kg) on selling each crop."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ListElement
|
||||||
|
name="past_harvest_details"
|
||||||
|
label="Harvest details for the last 3 years"
|
||||||
|
:min="1"
|
||||||
|
>
|
||||||
|
<template #default="{ index }">
|
||||||
|
<p>Crop {{ index + 1 }}</p>
|
||||||
|
<ObjectElement :name="index">
|
||||||
|
<SelectElement
|
||||||
|
name="crop_type"
|
||||||
|
rules="required"
|
||||||
|
:search="true"
|
||||||
|
:items="{
|
||||||
|
rice: 'Rice',
|
||||||
|
coffee: 'Coffee',
|
||||||
|
tea: 'Tea',
|
||||||
|
sugarcane: 'Sugarcane',
|
||||||
|
miraa: 'Miraa',
|
||||||
|
avocados: 'Avocados',
|
||||||
|
maize: 'Maize',
|
||||||
|
potatoes: 'Potatoes',
|
||||||
|
sorghum: 'Sorghum',
|
||||||
|
other_fruits: 'Other fruits',
|
||||||
|
other_vegetables: 'Other vegetables',
|
||||||
|
other_grains: 'Other grains',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="average_harvest"
|
||||||
|
label="Average harvest"
|
||||||
|
description="Average yield/output in kg/acre."
|
||||||
|
rules="required|min:1|numeric"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="average_earning"
|
||||||
|
label="Average earning"
|
||||||
|
description="Average yield/output in ksh/kg."
|
||||||
|
rules="required|min:1|numeric"
|
||||||
|
/>
|
||||||
|
<div class="col-span-12">
|
||||||
|
<div class="border-t border-gray-300 mt-1"></div>
|
||||||
|
</div>
|
||||||
|
</ObjectElement>
|
||||||
|
</template>
|
||||||
|
</ListElement>
|
||||||
|
<div class="text mt-4 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">
|
||||||
|
Budget and Expenditure Details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<TextElement
|
||||||
|
name="total_expenditure"
|
||||||
|
input-type="number"
|
||||||
|
label="On average, how much do you spend on seeds, fertilizers, and crop protection (herbicides, pesticides, etc.) for a year?"
|
||||||
|
description="Average in ksh. per year"
|
||||||
|
rules="required|min:1|numeric"
|
||||||
|
/>
|
||||||
|
<GroupElement name="expenditure_details">
|
||||||
|
<StaticElement
|
||||||
|
name="static"
|
||||||
|
description="Total percentage should add upto 100%"
|
||||||
|
>How would you say your budget is split between seeds,
|
||||||
|
fertilizers, and crop protection?</StaticElement
|
||||||
|
>
|
||||||
|
<TextElement
|
||||||
|
columns="4"
|
||||||
|
name="seeds_expenditure_percentage"
|
||||||
|
input-type="number"
|
||||||
|
label="Seeds %"
|
||||||
|
rules="required|min:0|numeric|max:100"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
columns="4"
|
||||||
|
name="fertilizer_expenditure_percentage"
|
||||||
|
input-type="number"
|
||||||
|
label="Fertilizer %"
|
||||||
|
rules="required|min:0|numeric|max:100"
|
||||||
|
F
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
columns="4"
|
||||||
|
name="crops_protection_expenditure_percentage"
|
||||||
|
input-type="number"
|
||||||
|
label="Crops Protection %"
|
||||||
|
rules="required|min:0|numeric|max:100"
|
||||||
|
/>
|
||||||
|
</GroupElement>
|
||||||
|
<GroupElement name="fertilizer_expenditure_details">
|
||||||
|
<StaticElement
|
||||||
|
name="static"
|
||||||
|
description="Total percentage should add upto 100%"
|
||||||
|
>How is your spend on fertilizers split between
|
||||||
|
synthetic/inorganic fertilizers (like DAP, NPK, etc.) and
|
||||||
|
organic/natural fertilizers (like manure, compost,
|
||||||
|
etc.)</StaticElement
|
||||||
|
>
|
||||||
|
<TextElement
|
||||||
|
columns="6"
|
||||||
|
name="synthetic_fertilizers_expenditure_percentage"
|
||||||
|
input-type="number"
|
||||||
|
label="Synthetic Fertilizers %"
|
||||||
|
rules="required|min:0|numeric|max:100"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
columns="6"
|
||||||
|
name="natural_fertilizers_expenditure_percentage"
|
||||||
|
input-type="number"
|
||||||
|
label="Natural Fertilizers %"
|
||||||
|
rules="required|min:0|numeric|max:100"
|
||||||
|
/>
|
||||||
|
</GroupElement>
|
||||||
|
|
||||||
|
<StaticElement
|
||||||
|
name="static"
|
||||||
|
description="You can add upto 3 expenses."
|
||||||
|
>Which input—seeds, fertilizers, or crop protection—has increased
|
||||||
|
the most in cost for you over the past 3 years?</StaticElement
|
||||||
|
>
|
||||||
|
<ListElement name="increased_expenses" :min="0">
|
||||||
|
<template #default="{ index }">
|
||||||
|
<p>Expense</p>
|
||||||
|
<ObjectElement :name="index">
|
||||||
|
<SelectElement
|
||||||
|
rules="required"
|
||||||
|
name="expense_type"
|
||||||
|
:native="false"
|
||||||
|
:items="{
|
||||||
|
fertilizers: 'Fertilizers',
|
||||||
|
seeds: 'Seeds',
|
||||||
|
crop_protection: 'Crop Protection',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<TagsElement
|
||||||
|
rules="required"
|
||||||
|
name="increased_expense_actions"
|
||||||
|
label="How have you dealt with the cost increase?"
|
||||||
|
:items="{
|
||||||
|
no_change: 'No Change',
|
||||||
|
cheap_alternative: 'Purchased and used cheaper alternative',
|
||||||
|
less_quantity: 'Purchased and used less quantity',
|
||||||
|
more_quantity: 'Purchased more',
|
||||||
|
other: 'Other',
|
||||||
|
}"
|
||||||
|
description="Select all options that apply."
|
||||||
|
/>
|
||||||
|
<SelectElement
|
||||||
|
name="expense_action_overall_effect"
|
||||||
|
label="Have these changes affected how much you harvest?"
|
||||||
|
:native="false"
|
||||||
|
rules="required"
|
||||||
|
:items="{
|
||||||
|
increased_yields: 'Increased yields',
|
||||||
|
no_change_yields: 'No change to yields',
|
||||||
|
decreased_yields: 'Decreased yields',
|
||||||
|
other: 'Other',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<div class="col-span-12">
|
||||||
|
<div class="border-t border-gray-300 mt-1"></div>
|
||||||
|
</div>
|
||||||
|
</ObjectElement>
|
||||||
|
</template>
|
||||||
|
</ListElement>
|
||||||
|
<div class="text mt-4 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">EverGrow</div>
|
||||||
|
</div>
|
||||||
|
<SelectElement
|
||||||
|
name="evergrow_past"
|
||||||
|
:native="false"
|
||||||
|
label="Have you used EverGrow before?"
|
||||||
|
rules="required"
|
||||||
|
:items="{
|
||||||
|
yes: 'Yes',
|
||||||
|
no: 'No',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="evergrow_first"
|
||||||
|
label="What year did you first begin using EverGrow?"
|
||||||
|
:conditions="[['evergrow_past', 'yes']]"
|
||||||
|
input-type="number"
|
||||||
|
rules="required|min:2018|numeric"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="evergrow_application"
|
||||||
|
label="What is your typical application rate of EverGrow?"
|
||||||
|
description="Average in kg/acre."
|
||||||
|
:conditions="[['evergrow_past', 'yes']]"
|
||||||
|
input-type="number"
|
||||||
|
rules="required|min:1|numeric"
|
||||||
|
/>
|
||||||
|
<TagsElement
|
||||||
|
name="evergrow_crops"
|
||||||
|
label="What crops have you seen the most success with using EverGrow?"
|
||||||
|
:items="{
|
||||||
|
rice: 'Rice',
|
||||||
|
coffee: 'Coffee',
|
||||||
|
tea: 'Tea',
|
||||||
|
sugarcane: 'Sugarcane',
|
||||||
|
miraa: 'Miraa',
|
||||||
|
avocados: 'Avocados',
|
||||||
|
maize: 'Maize',
|
||||||
|
potatoes: 'Potatoes',
|
||||||
|
sorghum: 'Sorghum',
|
||||||
|
other_fruits: 'Other fruits',
|
||||||
|
other_vegetables: 'Other vegetables',
|
||||||
|
other_grains: 'Other grains',
|
||||||
|
}"
|
||||||
|
:conditions="[['evergrow_past', 'yes']]"
|
||||||
|
description="Select all options that apply."
|
||||||
|
rules="required"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
columns="12"
|
||||||
|
name="evergrow_yield"
|
||||||
|
input-type="number"
|
||||||
|
label="How much have your yields typically improved by when using EverGrow (vs. when not)?"
|
||||||
|
description="Enter a percentage value"
|
||||||
|
:conditions="[['evergrow_past', 'yes']]"
|
||||||
|
rules="required|min:0|max:100|numeric"
|
||||||
|
/>
|
||||||
|
<div class="text mt-4 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">Other Fertilizers</div>
|
||||||
|
</div>
|
||||||
|
<SelectElement
|
||||||
|
label="Do you use any other types of fertilizer on your land?"
|
||||||
|
name="other_fertilizers"
|
||||||
|
:native="false"
|
||||||
|
:items="{
|
||||||
|
yes: 'Yes',
|
||||||
|
no: 'No',
|
||||||
|
not_sure: 'Not Sure',
|
||||||
|
}"
|
||||||
|
rules="required"
|
||||||
|
/>
|
||||||
|
<StaticElement
|
||||||
|
:conditions="[['other_fertilizers', 'yes']]"
|
||||||
|
name="static"
|
||||||
|
description="You can add upto 3 other fertilizer types."
|
||||||
|
>Select all other fertilizer types that you have used in the
|
||||||
|
past?</StaticElement
|
||||||
|
>
|
||||||
|
<ListElement
|
||||||
|
name="other_fertilizers_details"
|
||||||
|
:conditions="[['other_fertilizers', 'yes']]"
|
||||||
|
rules="required"
|
||||||
|
>
|
||||||
|
<template #default="{ index }">
|
||||||
|
<p>Fertilizer</p>
|
||||||
|
<ObjectElement :name="index">
|
||||||
|
<SelectElement
|
||||||
|
rules="required"
|
||||||
|
name="other_fertilizer_type"
|
||||||
|
:native="false"
|
||||||
|
:items="{
|
||||||
|
synthetic: 'Synthetic Fertilizer',
|
||||||
|
commercial_organic: 'Commercial Organic Fertilizer',
|
||||||
|
self_made: 'Self-made fertilizer/manure',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="other_fertilizer_application"
|
||||||
|
input-type="number"
|
||||||
|
label="What is your typical application rate of this type of fertilizer?"
|
||||||
|
description="Average in kg/acre."
|
||||||
|
rules="required|min:1|numeric"
|
||||||
|
/>
|
||||||
|
<TagsElement
|
||||||
|
rules="required"
|
||||||
|
name="other_fertilizer_crops"
|
||||||
|
label="What crops have you seen the most success with using this type of fertilizer"
|
||||||
|
:items="{
|
||||||
|
rice: 'Rice',
|
||||||
|
coffee: 'Coffee',
|
||||||
|
tea: 'Tea',
|
||||||
|
sugarcane: 'Sugarcane',
|
||||||
|
miraa: 'Miraa',
|
||||||
|
avocados: 'Avocados',
|
||||||
|
maize: 'Maize',
|
||||||
|
potatoes: 'Potatoes',
|
||||||
|
sorghum: 'Sorghum',
|
||||||
|
other_fruits: 'Other fruits',
|
||||||
|
other_vegetables: 'Other vegetables',
|
||||||
|
other_grains: 'Other grains',
|
||||||
|
}"
|
||||||
|
description="Select all options that apply."
|
||||||
|
/>
|
||||||
|
<div class="col-span-12">
|
||||||
|
<div class="border-t border-gray-300 mt-1"></div>
|
||||||
|
</div>
|
||||||
|
</ObjectElement>
|
||||||
|
</template>
|
||||||
|
</ListElement>
|
||||||
|
<div class="text mt-4 col-span-12">
|
||||||
|
<div class="border-b border-gray-300 pb-2">
|
||||||
|
Fertilizer Purchase Details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-12">
|
||||||
|
<Notice
|
||||||
|
subtitle="This applies for all types of fertilizers you purchase including Evergrow. "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<TagsElement
|
||||||
|
name="purchase_channels"
|
||||||
|
rules="required"
|
||||||
|
label="Where do you typically purchase your fertilizer from?"
|
||||||
|
:items="{
|
||||||
|
manufacturers: 'Direct from manufacturers',
|
||||||
|
distributors: 'Distributors',
|
||||||
|
resellers: 'Resellers',
|
||||||
|
farmers: 'Fellow farmers',
|
||||||
|
other: 'Other',
|
||||||
|
}"
|
||||||
|
description="Select all options that apply."
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
1
pages/help.vue
Normal file
1
pages/help.vue
Normal file
@ -0,0 +1 @@
|
|||||||
|
<template></template>
|
||||||
24
pages/index.vue
Normal file
24
pages/index.vue
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mt-4 flex flex-col md:flex-row md:space-x-4">
|
||||||
|
<Card
|
||||||
|
title="Sign up"
|
||||||
|
subtitle="To join the FarmStar rewards program."
|
||||||
|
link="/registration"
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
title="Farmer onboarding survey"
|
||||||
|
subtitle="Tell us about what and how you farm!"
|
||||||
|
link="/farmer"
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
title="Distributor onboarding survey"
|
||||||
|
subtitle="Tell us about the agri-inputs you sell!"
|
||||||
|
link="/distributor"
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
title="Record a purchase"
|
||||||
|
subtitle="Of EverGrow organic fertilizer."
|
||||||
|
link="/transaction"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
94
pages/registration.vue
Normal file
94
pages/registration.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<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 {
|
||||||
|
form$.messageBag.append(response.data?.message);
|
||||||
|
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>
|
||||||
126
pages/transaction.vue
Normal file
126
pages/transaction.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<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?"
|
||||||
|
rules="required"
|
||||||
|
/>
|
||||||
|
<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',
|
||||||
|
}"
|
||||||
|
rules="required"
|
||||||
|
:conditions="[['tx', 'buy']]"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="buy"
|
||||||
|
label="Enter the phone number of the person you bought EverGrow from."
|
||||||
|
rules="required"
|
||||||
|
:conditions="[['tx', 'buy']]"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="sell"
|
||||||
|
label="Enter the phone number of the customer you sold EverGrow to."
|
||||||
|
rules="required"
|
||||||
|
: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"
|
||||||
|
label="How much EverGrow did you purchase?"
|
||||||
|
description="1x50kg bag of EverGrow = 1, 2 bags = 2, etc."
|
||||||
|
rules="required|numeric|min:1|max:20"
|
||||||
|
input-type="number"
|
||||||
|
:conditions="[['tx', 'buy']]"
|
||||||
|
/>
|
||||||
|
<TextElement
|
||||||
|
name="evergrow_quantity"
|
||||||
|
label="How much EverGrow did you sell?"
|
||||||
|
description="1x50kg bag of EverGrow = 1, 2 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 {
|
||||||
|
form$.messageBag.append(response.data?.message);
|
||||||
|
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>
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
22
tailwind.config.js
Normal file
22
tailwind.config.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./components/**/*.{js,vue,ts}",
|
||||||
|
"./layouts/**/*.vue",
|
||||||
|
"./pages/**/*.vue",
|
||||||
|
"./plugins/**/*.{js,ts}",
|
||||||
|
"./nuxt.config.{js,ts}",
|
||||||
|
'./vueform.config.{js,ts}',
|
||||||
|
'./node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
|
||||||
|
'./node_modules/@vueform/vueform/themes/tailwind/**/*.js',
|
||||||
|
'./node_modules/flowbite/**/*.{js,ts}'
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('flowbite/plugin'),
|
||||||
|
require('@vueform/vueform/tailwind')
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
42
vueform.config.js
Normal file
42
vueform.config.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import en from '@vueform/vueform/locales/en'
|
||||||
|
import tailwind from '@vueform/vueform/themes/tailwind'
|
||||||
|
|
||||||
|
import { Validator } from '@vueform/vueform'
|
||||||
|
|
||||||
|
const phoneRule = class extends Validator {
|
||||||
|
get message() {
|
||||||
|
return 'The What is your primary phone number? filed requires a valid phone number'
|
||||||
|
}
|
||||||
|
|
||||||
|
check(value) {
|
||||||
|
return /^(07|01)(\d){8}$/.test(value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
theme: tailwind,
|
||||||
|
locales: { en },
|
||||||
|
locale: 'en',
|
||||||
|
floatPlaceholders: false,
|
||||||
|
rules: {
|
||||||
|
phone: phoneRule,
|
||||||
|
},
|
||||||
|
endpoints: {
|
||||||
|
registration: {
|
||||||
|
url: `${process.env.BASE_URL}/registration`,
|
||||||
|
method: 'post'
|
||||||
|
},
|
||||||
|
transaction: {
|
||||||
|
url: `${process.env.BASE_URL}/transaction`,
|
||||||
|
method: 'post'
|
||||||
|
},
|
||||||
|
farmer: {
|
||||||
|
url: `${process.env.BASE_URL}/farmer`,
|
||||||
|
method: 'post'
|
||||||
|
},
|
||||||
|
distributor: {
|
||||||
|
url: `${process.env.BASE_URL}/distributor`,
|
||||||
|
method: 'post'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user