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