vue-cli-plugin-clm-helper-up-up

• Automatically generate file structure.
• Multi language

• Build for necessary CRM system

• Development

• Project config

Table of contents

• Getting started
• Plugin CLI Commands

• Configuration

- [clm](#clm)
  - [productId](#productid)
  - [productName](#productname)
  - [disableSwipeBetweenFlows](#disableswipebetweenflows)
  - [csv](#csv)
    - [country](#country)
    - [product](#product)
- [languages](#languages)
- [device](#device)
  - [resolution](#resolution)
- [structure](#structure)

• Additional Info

- [Global Functionality](#global-functionality)
  - [$navigateTo](#$navigateto)
  - [$addData](#$adddata)
  - [$openPdfIos](#$openpdfios)
- [Slide Functionality](#slide-functionality)
  - [Text data](#text-data)
  - [Slide info data](#slide-info-data)
- [App Functionality](#app-functionality)

• Acknowledgments

Getting started

1. Create

[**Create with preset**](https://cli.vuejs.org/guide/plugins-and-presets.html#remote-presets):

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

Or [**create**](https://cli.vuejs.org/guide/creating-a-project.html) manually new project with following **features**: `router`, `vuex`, `babel`, `scss`, and add plugin to your project.

```
vue add clm-helper
```

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

**Put Exсel File** with [valid structure](./commands/generate/default-templates/Structure_Example.xlsx) in root-folder, and [convert structure](#excel) 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](#clm-config) file manually.

1. Generate the necessary files to the project structure:

```
yarn generate
```

1. Start your app:

```
yarn dev
```

Plugin CLI Commands

• yarn excel

Generate

+-- 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]

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

yarn dev

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

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

Restricted Workspace

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

CLM Config

• clm

`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

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

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

- ###### country

`String`, default: "Ukraine"

- ###### product

`String`, default: "INCH"

• languages

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

• device

`Object`, `Required`, device resolution will export to [shared styles](#vue-config).

Also resolution using for [creating slide screenshots](./lib/screens-maker.js).

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

• 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": {

"prev": "prevent" // block back swipe
      },
      "isHidden": true // This slide not be displayed
    }

Additional Info

Slide Component

Basic Functionality

Global Functionality

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

$navigateTo

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

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

$addData

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

$openPdfIos (only MI Touch)

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

import getData from '@/data'

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

+-- src
|   +-- data
|   |   +-- ua
|   |   |   +-- my-data.js
|   |   +-- ru
|   |   |   +-- my-data.js

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"
  }
}

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

Slide info data

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

Acknowledgments