Frontend

The OMS frontend is a rewrite of open-source template called Vue Admin . This library is based on Vue (JS framework) and Bulma (CSS framework).

It uses Webpack as a build system to compile all of the CSS, JS and HTML into single files to be served to users.

Folders structure

build/ - Webpack scripts for building assets
client/ - the actual app
client/components/ - default components (sidebar, navbar, footer etc.)
client/router/ - Vue router (see below)
client/static - static files
client/store - Vue store management
client/views - user components
config/ - Webpack configs
dist/ - compiled assets, this folder is served to user with nginx
docker/ - Dockerfiles and stuff

Routes file

The routes list and meta info is stored in the file located at client/store/components.json. It's a JSON file describing which menu categories and entries are there and some meta info (e.g. if it's required to hide sidebar on this route, if it requires auth or not etc.) Check comments in client/store/modules/menu/index.js for reference.

This file describes which menu entries and categories are there and the routes list is build based on this file. (see client/router/index.js and the function generateRouteForComponents() ).

Docker stuff

There are 2 Docker containers running with the system:

oms-frontend - contains Webpack and build the assets
oms-frontend-nginx - serves the assets files to user with nginx.

Services list

There is client/services.json file that contains all of the services URLs. If you want to add another service to make requests to it within your components, you can add it there.
After that, you will be able to use it in your application that way:

<template>
  <!-- some component -->
</template>

<script>
import { mapGetters } from 'vuex' // Importing store methods

export default {
  name: 'YourNewShinyComponent',
  data () {
    return {
      // your data there
    }
  },
  methods: {
    yourNewShinyMethod () {
      this.axios.get(this.services['your-service-name'] + '/some-service-endpoint/').then((response) => {
        // do something with response
      }).catch((err) => {
        // do something with error
      })
    }
  },
  mounted () {
    this.yourNewShinyMethod() // calling your function when the component is mounted
  },
  computed: mapGetters({
    services: 'services' // and here we import the `services` getter from the store, so we can use it as `this.services['your-service-name']`
  })
}
</script>

Making requests to API

You can make requests to your (and not only your) API using Axios library. See the example above and the Axios GitHub for documentation.

This application also uses some custom interceptors.
For the request, it takes the token stored in localStorage obtained when logged in and sets the X-Auth-Token header to it.
For the response, if the response return 401 (Unauthorized), it will renew the access token using the refresh token (also obtained when logged in) and then tries to re-do the request. So, that means that if the user did not provide X-Auth-Token header or the auth from the core failed, your API should always return 401, otherwise the request won't be redone if the access token was removed or expired.

Buefy

This library also uses Buefy library for fancy stuff.
For example, toast notifications:

this.$toast.open('Something happened')

// or even more customizable
this.$toast.open({
    duration: 5000,
    message: `Something's not good, also I'm on bottom`,
    position: 'is-bottom',
    type: 'is-danger'
})

For more info, check out its documentation.