OpenDP - App Design

A Vue.js application

This is a front-end application for the OpenDP project, powered using Vue.js and Vuetify, a Material Component Framework for Vue.js.

Prerequisites

Install Node.js if not already present
This project uses yarn instead of npm as the package manager.
- If you don't have yarn, just do this after installing Node.js:
```
npm install -g yarn
```

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Recommended VS Code Extension for TODO search

TODO marks were added to the code to help with the task of connecting the app with the backend. With an extension like this one, it is easier to find those marks and face them.

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

Vuetify UI Components

1. Application

Documentation: https://vuetifyjs.com/en/components/application/
Components used:
- v-app
- v-main

2. Grid System

Documentation: https://vuetifyjs.com/en/components/grids/
Components used:
- v-container
- v-row
- v-col
- v-spacer

3. Navigation drawers

Documentation: https://vuetifyjs.com/en/components/navigation-drawers/
Components used:
- v-navigation-drawer

4. Lists

Documentation: https://vuetifyjs.com/en/components/lists/
Components used:
- v-list
- v-list-item
- v-list-item-icon
- v-list-item-title

5. Dividers

Documentation: https://vuetifyjs.com/en/components/dividers/
Components used:
- v-divider

6. Cards

Documentation: https://vuetifyjs.com/en/components/cards/
Components used:
- v-card
- v-card-title
- v-card-text
- v-card-actions

7. Data tables

Documentation: https://vuetifyjs.com/en/components/data-tables/
Components used:
- v-data-table

8. Pagination

Documentation: https://vuetifyjs.com/en/components/paginations/
Components used:
- v-pagination

9. Forms inputs & controls

9.1 Forms

Documentation: https://vuetifyjs.com/en/components/forms/
Components used:
- v-form

9.2 Text Fields

Documentation: https://vuetifyjs.com/en/components/text-fields/
Components used:
- v-text-field

9.3 Textareas

Documentation: https://vuetifyjs.com/en/components/textareas/
Components used:
- v-textarea

10. Buttons

Documentation: https://vuetifyjs.com/en/components/buttons/
Components used:
- v-btn

11. Checkboxes

Documentation: https://vuetifyjs.com/en/components/checkboxes/
Components used:
- v-checkbox

12. Radio buttons

Documentation: https://vuetifyjs.com/en/components/radio-buttons/
Components used:
- v-radio
- v-radio-group

13. App bars

Documentation: https://vuetifyjs.com/en/components/app-bars/
Components used:
- v-app-bar
- v-app-bar-nav-icon

14. Selects

Documentation: https://vuetifyjs.com/en/components/selects/
Components used:
- v-select

15. Steppers

Documentation: https://vuetifyjs.com/en/components/steppers/
Components used:
- v-stepper
- v-stepper-content
- v-stepper-header
- v-stepper-items
- v-stepper-step

16. Combobox

Documentation: https://vuetifyjs.com/en/components/combobox/
Components used:
- v-combobox

17. Alerts

Documentation: https://vuetifyjs.com/en/components/alerts/
Components used:
- v-alert

18. Dialogs

Documentation: https://vuetifyjs.com/en/components/dialogs/
Components used:
- v-dialog

19. Overlays

Documentation: https://vuetifyjs.com/en/components/overlays/
Components used:
- v-overlay

20. Progress circular

Documentation: https://vuetifyjs.com/en/components/progress-circular/
Components used:
- v-progress-circular

21. Tooltips

Documentation: https://vuetifyjs.com/en/components/tooltips/
Components used:
- v-tooltip

22. Images

Documentation: https://vuetifyjs.com/en/components/images/
Components used:
- v-img

23. Icons

Documentation: https://vuetifyjs.com/en/components/icons/
Components used:
- v-icon

24. Chips

Documentation: https://vuetifyjs.com/en/components/chips/
Components used:
- v-chip

25. Sheets

Documentation: https://vuetifyjs.com/en/components/sheets/
Components used:
- v-sheet