Skip to content

Latest commit

 

History

History
141 lines (102 loc) · 4.59 KB

README.md

File metadata and controls

141 lines (102 loc) · 4.59 KB

entities-manager-ui

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).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Entities Manager UI

This is a Vue.js frontend application that interacts with an API to manage customers, sites, meters, and circuits.

Features

  • CRUD Operations: Users can create, read, update, and delete customers, sites, meters, and circuits.
  • Dashboard: Users can view an overview of their entities in a visual representation.
  • Vue Router: Navigation is handled using Vue Router to create different pages.
  • element-plus: The app is styled using element-plus, a popular Vue.js component framework.
  • Pinia: The app uses Pinia for state management.

Project Setup

  1. Clone the repository:
   git clone <repository-url>
  1. Install the dependencies:
cd vue-frontend-app
npm install

  1. Configure the API base URL:

    • Open src/api/config.js.
    • Replace the BASE_URL with the base URL of your API.

  2. Run the development server:

npm run serve

The app will be accessible at http://localhost:8080. 5. Build the production-ready bundle:

    npm run build

The compiled assets will be located in the dist directory.

Known issues relate to (to be investigated):

  • Pages don't always refresh after POST/DELETE
  • Certain resolution, the view port hides the content, open devtools or resize the browser to fix.

Usage

  1. Explore the various pages to manage your profile, sites, meters, and circuits.
  2. Use the navigation sidebar to switch between pages.

API Documentation

For detailed API documentation, please refer to the API Documentation for information on available endpoints and request/response formats.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Feel free to modify and customize this `README.md` file according to your specific project requirements and details.

TODO

  • Use element-plus Cascader component for dropdowns with business logic.
  • We want the ability to create a site.
  • We want to be able to create a meter and a circuit as a direct link to the site when creating a new site.
    • If there are no meters or circuits, the user should be able to create one.
  • We want to be able to create a meter.
  • We want to be able to create a circuit as a direct link (child) to the new meter being created.
  • We want to be able to create a circuit.
  • We want to be able to create a circuit as a direct link (child) to the new circuit being created.
  • We want to be able to create a circuit as a direct link (child) to the meter when creating a new circuit.
  • We want to be able to create a circuit as a direct link (child) to the site when creating a new circuit.

Site

Create meter Create circuit Link to meter Link to circuit

Meter

Create circuit Link to site

Circuit

Create circuit Link to meter Link to site