https://github.com/opencdms/opencdms-app
OpenCDMS Web Application (application shell can be configured to contain components)
https://github.com/opencdms/opencdms-app
Last synced: about 1 year ago
JSON representation
OpenCDMS Web Application (application shell can be configured to contain components)
- Host: GitHub
- URL: https://github.com/opencdms/opencdms-app
- Owner: opencdms
- License: mit
- Created: 2022-10-25T09:07:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-12T16:37:40.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T10:53:14.031Z (about 1 year ago)
- Language: Vue
- Homepage:
- Size: 17.1 MB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenCDMS app
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
## App Configuration
This application can be configured to selectively display pages declared in the route list. By default, only the Dashboard link will appear on the sidebar navigation menu. To add more links in the sidebar menu:
1. All the routes would be declared as the src/routes/routes.js as in a normal vuejs application.
2. Go to `src/registry.json` file. Each entry in the registry represents a navigation link.
3. Set the display property to the desired value (true or false). Only the links with display set to true would be visible in the navigation bar and the final build routes.
This implies that the registry entries set to false would not be available in the application.
eg
```
// src/registry.json
[
{
"component": "CNavItem", // Name of the render component
"name": "Hidden", // The name of the element visible to the user on the side navigation bar
"to": "/hidden", // Path must correspond to the route path declared in src/routes/route.js
"icon": "cil-drop", // Display icon
"display": false // will not be displayed and user will not be able to see this page
"routeName": "Hidden", // The vuejs routename for this entry
"package": "@opencdms/hidden" // The npm package name of the webcomponent to be rendered in this page
},
{
"component": "CNavItem", // Name of the render component
"name": "Test Page", // The name of the element visible to the user
"to": "/test-page", // Path must correspond to the route path declared in src/routes/route.js
"icon": "cil-drop", // Display icon
"display": true // will be displayed
"routeName": "Test", // The vuejs routename for this entry
"package": "@opencdms/helloworld" // The npm package name of the webcomponent to be rendered in this page
}
]
```
### Web Components
We can render web components built using any javascript framework in this application shell.
To render a web component:
1. Create the web component and publish in npm or define it in the `src/web-components` folder.
2. Ensure that the tagname of the web component is prefixed with `opencdms-` eg `....`.
3. Install the webcomponent by running npm install --save @opencdms/webcomponentName.
4. Create a registry entry in src/registry.json for the page created above. Set the display to true or false as you desire.
5. Generate the view files by running `npm run views:generate`
The generated view filenames in src/views folder corresponds to the routeName property in the registry.json file hence routeName property must be unique. You can customise the generated view files as you want. Running the views:generate command does not overwrite existing files.
6. Launch the application. npm run serve