Status: release
🙏 Easy work with CLM presentations!
This is a vue-cli 3.x plugin to help developing with MI Touch, Pharma Touch and Veeva CRM systems.
⭐ 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
-
Create
vue create --preset OptionParalysis/vue-preset-veeva my-project
Or create manually new project with following features:
router
,vuex
,babel
,scss
, and add plugin to your project.vue add clm-helper
-
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.
-
Generate the necessary files to the project structure:
yarn generate
-
Start your app:
yarn dev
Plugin generator inject generate
, build
and dev
commands to package.json
.
Plugin CLI commands can run with fully-named --clm veeva,mi-touch
or short-named -c v,mt
syntax.
ℹ️ For using standard vue build, just run yarn build-standard
.
Convert valid structure from excel-file in root-folder to clm.config.json
.
yarn excel
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
| +-- assets
| | +-- images
| | | +-- <sl.path> // empty folders for unique images for a slide
| +-- data
| | +-- <lang>
| | | +-- <sl.path>.js // templates for text
| +-- slides
| | +-- <sl.path>.vue // all slide-componens
-
yarn generate [lang]
-
lang
- optional parameter, regular expression, must match one or more oflanguages
key insrc/clm.config.json
-
ℹ️ For correct passing regular expressions from terminal, please wrap it in double quotes.
yarn generate --lang "ua|ru" // will generated "ua" and "ru" templates
Running development server.
Actually, duplicates command yarn serve
to customary command yarn dev
and increase JavaScript heap of memory.
yarn dev
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
andpharma-touch
-
options
- optional, can be:no-screens
,no-clear-js
andno-clear-assets
-
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 no-screens --filter "slide-1_1|slide-2_1" --lang ua
Short-named syntax:
yarn build -c mt -o ns -f "slide-1_1|slide-2_1" -l ua
Plugin generator create vue.config.js
with necessary options.
See official documentation for full details.
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
All project depend of src/clm.config.json
path
key for necessary slide
in structure
key in clm.config
.
CLM platform options:
-
-
String
,Reauired
, must be named under rule:<PROJECT-NAME>_<CYCLE>_<YEAR>
.During build to
productId
will added language and slide id parts. -
String
,Required
, Usually this is the same name as the root folder (only for Veeva and Pharma Touch) -
Boolean
,Optional
, enable/disable auto preventing swipes between flows⚠️ At the moment, work only with MI Touch. -
Object
,Optional
, contains information for creating a CSV file (only for Veeva)String
, default: "Ukraine"String
, default: "INCH"
-
-
Array
,Required
, to build different language versions just add necessary language.Valid values for cyrilic languages:
ua
,ru
.languages: ["ua", "ru", "fr"]
-
-
Object
,Required
, device resolution will export to shared styles.Also resolution using for creating slide screenshots.
"device": { "resolution": { // Pixels "width": "2048", "height": "1536" } },
-
-
Array
,Required
, each slide must be specified in thestructure
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 insrc/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
. Ifobject
- 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
andprev
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 } ]
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
.
This plugin adds basic functions for CLM presentations and useful utilities for development.
Most of the basic functions defined in src/app-helper
.
// main.js
import mixins from "@/app-helper/mixins"
...
Vue.mixin(mixins.global);
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")
}
}
A global method that sends a calldialog response to the required clm database.
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");
}
}
A global method for opening PDF-files in on iOS devises.
Using in vue instance:
methods: {
showPdf() {
this.$openPdfIos("pdf/instructions.pdf");
}
}
// each slide-component
import mixins from "@/app-helper/mixins"
...
export default {
mixins: [ ...mixins.slide ],
}
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
| +-- data
| | +-- ua
| | | +-- my-data.js
| | +-- ru
| | | +-- my-data.js
Each slide-component
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
.
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>
Each slide-component
already has "personal info" in slide
key. This is just an object from the current slide in the structure.
ℹ️ In addition, Text data
, and Slide info data
will be passed to the vuex store
as currentData
and currentSlide
.
// 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.
Thank Vue CLI Team for the excellent tool and documents.
Thank vue-cli-plugin-apollo and Nuxt.org for great documentation example.