Skip to content

User Interface

Introduction

The user interface (UI) of this application is built using the Vue.js framework. It utilizes pages, components, atoms, and routes.

  • A component is a reusable piece of code that can be used in multiple places. Components should be placed in the /components folder. Components can fetch data and have complex logic.

Warning

  • Component names should start with v_.
  • The file name should be the same as the component name, for example: v_test_component.js.
  • An atom is a simple element without any API integration or complex logic. Atoms should also be placed in the /components folder.
  • A page is a component with a specific route in the application. Pages should be placed in the /pages folder.
  • A route represents a path in the application that is associated with a page component. For example: /pages/testpage.

Read more about router and paths

Components properties

Extra attributes for debugging

  • data-component - component name
  • data-acl - acl
  • data-action - js action
  • data-api - api call

Enabling debug mode

JavaScript
1
2
3
debug_components(true) /toggle
localStorage.setItem("user-debug", 'false');
localStorage.setItem("user-debug", 'true');

SRS and Components

To simplify the development process, we have created a set of generic UI components that can be used to build the application's UI. For instance, you don't need to build any components to display a table with data from the API. By running the SRS {host}/srs/{srsid}/view, this component will be rendered in the UI.