MV Template Page

Installation

yarn add @mv-template/[project_name]
or
npm i @mv-template/[project_name]

Example

<template>
  <mv-template
    :title="title"
    :dashboard-ids="dashboardIds"
    :token="configToken"
    :is-dark="isDark"
    :filters.sync="filters"
    :update-filters.sync="updateFilters"
    :code="code"
    :links="links"
    :additional="additional"
  />
</template>
<script>
import MvTemplate from 'mv-template'
import 'mv-template/dist/mv-template-page.css'

export default {
  components: {
    MvTemplate,
  },
  data() {
    return {
      title: 'Dev Testing',
      configToken: `Bearer ${localStorage.getItem('accessToken')}`,
      isDark: false,
      dashboardIds: [
        {
          title: 'Summary',
          id: '60dad4302722b900132f807e',
        },
        {
          title: 'Analytics',
          id: '60ebc0914a0a130012db902b',
        },
      ],
      filters: [
        {
          name: 'Filter-1',
          operator: '=',
          property: 'group_exams_gender',
          propertyType: 'string',
          value: 'male',
          widgets: ['60c18c69c65520001422e662'],
          _id: '60c61f3a471c96001211a619',
        },
      ],
      updateFilters: [
        {
          name: 'Filter-1',
          value: 'male',
          operator: '=',
        },
      ],
      code: 'PAGE-DevTest',
      links: [
        'http://metabase.machinevision.global:3009/public/dashboard/fa6e40b6-3b72-4ed6-a1aa-a86a93da1f74',
        'http://metabase.machinevision.global:3009/public/dashboard/f69f02da-4910-433e-94d7-2b1b48418f17',
      ],
      additional: {
        linkHeights: [2200, 1650],
        orders: [
          {
            type: 'DASHBOARD',
            order: 1,
          },
          {
            type: 'URL',
            order: 2,
          },
        ],
        baseUrl: 'https://backbone.machinevision.global/data-core/api/plants/',
        logo: 'https://backbone.machinevision.global/file-storage/api/static/image_1624852365272.png',
      },
    },
  },
}
</script>

Create New Branch

1. Create new local branch from 'boilerplate'
2. Branch name represent your project name
3. Edit project name in file 'package.json'

"name": "@mv-template/[your_project_name]",

Add New Page

1. Create new folder under 'components' folder using this format 'page-[code]'
2. Create 'MainComponent.vue' into component folder that you have already created. If you want to create other component for your new page, make sure it registered in this 'MainComponent.vue'
3. 'MainComponent.vue' must have this props:
   • title
   • token
   • dashboardIds
   • isDark
   • filters
   • updateFilters
   • additional
4. Import your 'MainComponent.vue' into 'MVTemplate.vue' and create new code for your new component
5. Register your new code in MES Admin ('Template Setting' menu) and fill additional properties (optional)