VCA4D

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

Install

Install Node.js (which installs npm in the process)

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint and prettier

npm run lint

npm run prettier

Add a new study

Navigate to the /admin-import url. A link is available in the footer.
Click the Browse button and submit your Excel file.
In case there is no errors, the page displays some information it retrieved from the excel file. Your study is now available in the Home page, you can browse it like any other study.

Add the study permanently on the website

Download the two files (using the two blue buttons).
With the current github hosting, you just need to replace the data.json file and add the study file in /data/ in a Pull Request on the main branch.
Merging on main will automatically deploy the new website
If you have a 6-page PDF summary you want to submit with the study, you can add it in public/study-briefs in your Pull Request. The PDF name should have the same name as the study json file. (For example, if the study file is named banana-bostwana-social.json or banana-bostwana-eco.json, the pdf should be named banana-bostwana.pdf)

Unknown commodity

If the study you have added has its commodity in the Unknown category, you can fix this by modifying the data.json file. In the "categories" section, you will see that your commodity is in the "unknown" section, you can remove it from there and add it in the section of your choice in the "commodities" array.

Icons

If a commodity doesn't have an icon, you can add one in src/images/icons/products (it should be a .svg file).

Ex: Let's add the 'peanut' icon

Add a peanut.svg in src/images/icons/products/peanut.svg
Import it in src/views/HomeView.vue

import PeanutLogo from '../images/icons/products/peanut.svg'

Add a case in this section

const getProductLogo = (product) => {
    switch(product) {
        case 'milk':
            return MilkLogo
        case 'groundnut':
            return PeanutLogo
    }
}

Unknown Currency

For now currency rates are hardcoded in const CHANGE_RATES in src/utils/currency.js. You can add values to cover new currencies. A future version should use an API to automatically retrieve currency rates.

leonarf/VCA4D