vue-cli-plugin-clm-builder

Status: release

:pray: Easy work with CLM presentations!

This is a vue-cli 3.x plugin to help developing with MI Touch, Kadrige, Pharma Touch, Veeva, QuadraSoft, OCE/OCE-separate, Bayer CRM systems.

:star: Features:

• Automatically generate file structure.
• Multi language
  • One slide-instance in development
  • Automatic import necessary text data
• Build for necessary CRM system
  • Using regular expressions for selectively build
  • Thumbs creating
  • Creating archives
• Development
  • QR-code for opening external link
  • Opportunity for display CRM system elements
  • Included basic functionality
  • Understanding excel structure
  • Restricted Workspace (for big projects)
• Project config

Table of contents

• Getting started
• Plugin CLI Commands
  • Exсel
  • Generate
  • Dev
  • Build
• Configuration
  • Vue Config
  • Restricted Workspace
  • CLM Config
    • clm
      • productId
      • productName
      • disableSwipeBetweenFlows
      • csv
        • country
        • product
    • languages
    • device
      • resolution
    • structure
• Additional Info
  • Slide Component
  • Basic Functionality
    • Global Functionality
      • $navigateTo
      • $routeQuadraTo
      • $routeBayeraTo
      • $addData
      • $openPdfIos
    • Slide Functionality
      • Text data
      • Slide info data
    • App Functionality
• Acknowledgments

Getting started

:warning: Make sure you have vue-cli 3.x.x, node <= 10.17.1 and yarn.

1. Create

   Create with preset:

   vue create --preset serhiichuk/vue-preset-clm my-project

   Or create manually new project with following features: router, vuex, babel, scss, and add plugin to your project.

   vue add clm-builder

2. Complete the configuration file clm.config.json.

   Put Exсel File with valid structure in root-folder, and convert structure from the excel file to clm.config.json, and fill in the remaining fields where you need it:

   yarn excel

   Or, Fill the clm.config file manually.

3. Generate the necessary files to the project structure:

   yarn generate

4. Start your app:

   yarn dev

Plugin CLI Commands

Plugin generator inject excel, generate, build and dev commands to package.json.

Plugin CLI commands can run with fully-named --clm veeva,mi-touch,quadra-soft,oce,oce-separate,bayer,kadrige or short-named -c v,mt,qs,oce,ocesep,br,kd syntax.

:information_source: For using standard vue build, just run yarn build-standard.

Excel

Convert valid structure from excel-file in root-folder to clm.config.json.

 yarn excel

Generate

Generating slide-components to src/slides, assets folders for each slide to src/assets and all text data files to src/data by scheme bellow:

+-- src
|   +-- slides
|   |    +-- <slide-path>
|   |    |    +-- media
|   |    |    +-- <lang>
|   |    |    |   +-- index.js
|   |    |    +-- index.vue

• yarn generate [lang]

  • lang - optional parameter, regular expression, must match one or more of languages key in src/clm.config.json

:information_source: For correct passing regular expressions from terminal, please wrap it in double quotes.

yarn generate --lang "ua|ru" // will generated "ua" and "ru" templates

Dev

Running development server.

Actually, duplicates command yarn serve to customary command yarn dev and increase JavaScript heap of memory.

yarn dev

Build

Build slides for necessary CLM"s. Each slide will be built with webpack, have the necessary CLM files and be archived.

• yarn build <clm> [options] [filter] [lang]

  • clm - required parameter, can be: veeva, mi-touch, pharma-touch, quadra-soft, oce, oce-separate, bayer, kadrige
  • options - optional, can be: no-screens, no-clear-js, no-clear-assets and local(for local build)
  • filter - optional, regular expression for filtering around slide ID
  • lang - optional, regular expression for filtering around slide language

Fully-named syntax:

yarn build --clm mi-touch --options local --filter "slide-1_1|slide-2_1" --lang ua

Short-named syntax:

yarn build -c mt -o lc -f "slide-1_1|slide-2_1" -l ua

Or

yarn b-mt -f "slide-1_1|slide-2_1" -l ua

All build commands

• Mi Touch: build -c mt -o lc or b-mt
• Veeva: build -c v -o lc or b-v
• Pharma Touch: build -c pt -o lc or b-pt
• Quadra Soft: build -c qs -o lc or b-qs
• OCE: build -c oce -o lc or b-oce
• Bayer: build -c br -o lc or b-br
• Kadrige: build -c kd -o lc or b-kd

Configuration

Vue Config

Plugin generator create vue.config.js with necessary options.

See official documentation for full details.

Restricted Workspace

If you have a large project, you may have with the problem of too long compilation time.

So you can restrict your workspace by adding necessary filter to VUE_APP_RESTRICTED_WORKSPACE_REGEX in .env.development file;

For example:

VUE_APP_RESTRICTED_WORKSPACE_REGEX = slide-1_1$ // workking only with slide-1_1

CLM Config

All project depend of src/clm.config.json

:warning: All unique assets(public) for a particular slide must match the specified path in the path key for necessary slide in structure key in clm.config.

CLM platform options:

• clm

• productId

  String, Reauired, must be named under rule: <PROJECT-NAME>_<CYCLE>_<YEAR>.

  During build to productId will added language and slide id parts.

• productName

  String, Required, Usually this is the same name as the root folder (only for Veeva and Pharma Touch)

• disableSwipeBetweenFlows

  Boolean, Optional, enable/disable auto preventing swipes between flows

  :warning: At the moment, work only with MI Touch.

• csv

  Object, Optional, contains information for creating a CSV file (only for Veeva)

  • country

  String, default: "Ukraine"

  • product

  String, default: "INCH"

• languages

  Array, Required, to build different language versions just add necessary language.

  Valid values for cyrilic languages: ua, ru.

    languages: ["ua", "ru", "fr"]

• device

  • resolution

    Object, Required, device resolution will export to shared styles.

    Also resolution using for creating slide screenshots.

      "device": {
        "resolution": { // Pixels
          "width": "2048",
          "height": "1536"
        }
      },

• structure

  Array, Required, each slide must be specified in the structure with following keys:

  Option | Type | Specify | Description --- | --- | --- | --- id | String | Required | Unique slide identifier, must be named under rule: slide-<flow-number/name>_<slide-number> path | String | Required | Path to slide. All slide-components must contain in src/slides, and you can create difference folders structure here. name | String/Object | Required | Slide name. Required for creating "slides.json" in Pharma Touch build, usualy using in navigation-components. If object - keys names must match with languages items. flowName | String/Object | Optional | Flow name, have the same rules as name key. swipe | Object | Optional | Define swipe rules. Can have next and prev keys. swipe.next, swipe.prev | String | Optional | Appropriate swipe will navigate to or prevented CLM swipe with "prevent" value. callDialog | Array | Optional | List of questions for call dialog definition. (Only fo MI Touch). isHidden | Boolean | Optional | Set true to hide slide in menu list. (Only fo MI Touch).

  structure: [
    // required keys
    {
      "id": "slide-main",
      "path": "slide-main",
      "name": {"ua": "Назва", "ru": "Название"}
    },
    ...
    {
      "id": "slide-1_3",
      "path": "flow-3/slide-1_3",
      "name": {"ua": "Назва", "ru": "Название"}
      "callDialog": "[
        "My Question 1", // this question will have automatic generated quiesion-id (Q1)
        {
          "id": "custon_id", // custom question id
          "question": "My Question 2"
        }
      ]
    },
    ...
    {
      "id": "slide-4_20",
      "path": "flow-4/slide-4_20",
      "name": "Назва", // the same name for all languages
      "swipe": {
  	    "next": "slide-5_10", // custon next swipe
        "prev": "prevent" // block back swipe
      },
      "isHidden": true // This slide not be displayed
    }
  ]

Additional Info

Slide Component

Each slide-component have global and slide functionality and must be named under rule: slide-<flow-number/name>_<slide-number>.

All slide-components must contain in src/slides, and you can create difference folders structure here, just describe that in clm.config.json.

Basic Functionality

This plugin adds basic functions for CLM presentations and useful utilities for development.

Most of the basic functions defined in src/app-helper.

Global Functionality

// main.js
import mixins from "@/app-helper/mixins"
...
Vue.mixin(mixins.global);

$navigateTo

A global method that performs the function of navigating to the desired slide.

Takes required parameter id.

Have different functional for each CLM system or development.

During development, $navigateTo will check on existing parameter id in structure.

Using in template:

<button class="some-navigation-button" @touchend="$navigateTo("slide-1_4")"></button>

Using in vue instance:

methods: {
  someNavigateMethod() {
    ...
    this.$navigateTo("slide-1_4")
  }
}

$routeQuadraTo

A global method that performs the function of navigating to the desired slide for Quadra Soft CLM.

$routeBayeraTo

A global method that performs the function of navigating to the desired slide for Bayer CLM.

$addData

Global method that sends calldialog response to required clm database for Mi Touch CLM and Pharma Touch CLM.

In development method $addData will check on existing callDialog key in current slide.

Using in vue instance:

methods: {
  sendSomeData() {
    ...
    this.$addData("Q1", "Response for quiesion with automatic generated quiesion-id");
    this.$addData("custon_id", "Response for quiesion with custon id");
  }
}

$addData

Global method that sends calldialog response to required clm database for Veeva CLM.

The method can receive arguments: type, value, description, id, duration.

$openPdfIos

Global Method to Open PDF Files on iOS Devices for MI Touch CLM.

Using in vue instance:

methods: {
  showPdf() {
    this.$openPdfIos("pdf/instructions.pdf");
  }
}

Slide Functionality

// each slide-component
import mixins from "@/app-helper/mixins"
...
export default {
  mixins: [ ...mixins.slide ],
}

Text data

For import text data for current language just call: getData with relative (from language folder to file) path:

import getData from '@/data'

const myData = getData('/my-data.js')

+-- src
|   +-- slides
|   |   +-- <path-to-slide>
|   |   |   +-- <lang>
|   |   |   |   +-- index.js

Each slide already has appropriate imported text data in data key.

The text data file must have the same path as slide-component.

Also, for convenience, each slide-component have computed property t for data and l for current language.

Some slide-component:

mounted() {
  /* Text data for current slide, "content" and "popup" is required */
	console.log(this.data);
  // =>
  {
  	content: {
      	title: "This is Awesome Documentations"
    },
    popup: {...}
  }

  /* Easy way to get "data.content" */
  console.log(this.t);
  // =>
  {
  	title: "This is Awesome Documentations"
  }
}

Using computed property t in template:

<h1 class="awesome-title" v-html="t.title"></h1>

Slide info data

Each slide-component already has "personal info" in slide key. This is just an object from the current slide in the structure.

:information_source: In addition, Text data, and Slide info data will be passed to the vuex store as currentData and currentSlide.

App Functionality

// App.vue
import mixins from "@/app-helper/mixins"
...
export default {
  mixins: [...mixins.app]
}

In App.vue has functional for swipe control: v-touch:swipe="swipeHandler".

swipeHandler will get disableSwipeBetweenFlows, and swipe keys from clm.config, and depending on their values will call $navigateTo or prevent necessary swipe.

In addition, App.vue contains some development functionality, do not worry about it, all development functions will be deleted/disabled during the production build.

Acknowledgments

Thank Vue CLI Team for the excellent tool and documents.

Thank vue-cli-plugin-apollo and Nuxt.org for great documentation example.