octopus-vue-tools v1.7.0

Octopus Vue Tools

Install

Install using npm:

npm install gitlab:BGDataPLM/octopus/octopus-vue-tools

If you need at least a specific version, you can add the semver using this syntax:

npm install gitlab:BGDataPLM/octopus/octopus-vue-tools#semver:^1.6.1

See npm install docs

Configure

Add to your Vue project:

import Vue from 'vue'
import OctopusVueTools from 'octopus-vue-tools'

Vue.use(OctopusVueTools, {
  apiURL: 'http://localhost:8000',
  appName: 'yourAppName',
  appVersion: '0.36.12',
  // optional themes definitions, here are default colors
  themes: {
    light: {
      primary: '#bf9973',
      background: 'white',
      text: '#343131'
    },
    dark: {
      primary: '#eee',
      background: '#222',
      text: 'white'
    }
  },
  // add this to avoid redirection to login page if there is no authenticated user
  requireAuth: false,
  // redirect to login page if an API request results to 401 with message Unauthenticated.
  redirectOn401: true
  // force dark theme
  darkMode: true,
  // callback function called after handshake api call
  afterHandshake: user => console.log("authenticated user:", user),
  // callback function called when the darkMode is initialized and changed
  onDarkModeChange: value => console.log("dark mode:", value),
  // callback function called on axios error.
  onError: (e, status, message) => alert('intercepted error: ' + message),
  // connect to Pusher after handshake
  connectToPusher: true
})

Components

You can then use the <octopus-header>, <octopus-logo>, <bulgari-logo>, <bulgari-font> and <octopus-user-avatar> components in your templates:

<octopus-header>
  <template v-slot:title>
    <h4 style="flex:1">
      <bulgari-font>YOVR APP</bulgari-font>
    </h4>
  </template>
  <div>
    Toolbar element 1
  </div>
  <div>
    Toolbar element 2
  </div>
</octopus-header>

Methods

api

All requests to Octopus API should be made using something like:

this.$octopus.api("your/uri").then(response => {
  console.log(response.data)
})

The api method returns an axios promise. Errors can be handled in a callback function passed in the .catch method.

The second parameter corresponds to the axios configuration. Example:

this.$octopus.api("things", {
  data: { name: this.name },
  method: "put"
})

post

The post method is a shortcut for api with method "post" and data as second argument.

this.$octopus.api("card", {
  data: { title: "Card title" },
  method: "post"
})
// is equivalent to
this.$octopus.post("card", { title: "Card title" })

getColor

Returns a instance of Chroma for the given color of the current theme.

var color = this.$octopus.getColor('primary') // #bf9973
var lighter = color.brighten() // #f3caa2

lightbox

Open images (Octopus media objects) selection in a lightbox.

this.$octopus.lightbox(medias, {
  assetSize: 't', // the asset to load before loading full-size image
  index: 2, // index of image to open in the array
  showMediaName: true, // Use media name as legend
  counterEl: true // any of the option in PhotoSwipe
})

Lightbox is extended from PhotoSwipe.

Default options:

{
  assetSize: undefined,
  showMediaName: false,
  index: 0,
  history: false,
  shareEl: false,
  counterEl: false,
  zoomEl: false,
  fullscreenEl: false,
}

Attributes

user, userRoles, multi

You can access user data and roles using the $octopus.user object:

var user = this.$octopus.user
var completeName = `${user.first_name} ${user.last_name} (${user.username})`
var roles = user.roles // roles on the application, retrieved via the appName option
var alsoRoles = this.$octopus.userRoles // other way to obtain roles, or an empty array if there is no user
var ok = roles.includes("admin")
var multiMode = this.$octopus.multi // true if user is a group

darkMode, themes, theme, colors

$octopus.darkMode can be used to get or set dark mode.

Returs the theming object. Containing a light and a dark attribute. Each theme contains colors for primary, background and text.

The computed property $octopus.theme returns "dark" or "light", according to the darkMode.

The computed property $octopus.colors returns the theme object of the selected theme.

helpUrl

$octopus.helpUrl can be set to open a modal containing an <iframe> to the given URL.

pusher

If the option connectToPusher is true at module initialization, a connection will be made to Pusher after the handshake.

The app to connect to is referenced by the pusherKey attribute received from handhake call.

Then, the Pusher instance is accessible via $octopus.pusher. To subscribe to a channel, you could do something like:

let channel = $octopus.pusher.subscribe('channel-name')

channel.bind('event-name', (data) => {
  console.log('event received', data)
})

Vuetify's theme initialization

In your main.js, you can initialize the Vuetify theme based on darkMode in the created callback:

new Vue({
  created () {
    this.$vuetify.theme.dark = this.$octopus.darkMode
  },
  vuetify,
  render: h => h(App)
}).$mount("#app")