Merge pull request #491 from FlowzPlatform/ComponentImportChange

dynamic component loading

Author: nikitam747

client/src/components/ListInstances.vue

@@ -17,7 +17,7 @@
           </tr>
         </thead>
         <tbody>
-            <tr v-for="(item, inx) in instanceEntries">
+            <tr v-for="(item, inx) in instanceEntries" :key="inx">
               <td>{{item.id}}</td>
               <td>
                 <Tag color="blue" type="border" class="uppercase">{{item.mainStatus}}</Tag>

client/src/components/SchemaSubForm.vue

@@ -204,9 +204,6 @@
 </template>
 <script>
 import $ from 'jquery'
-import SchemaSubForm from './SchemaSubForm'
-import SchemaSubFormView from './SchemaSubFormView'
-// import axios from 'axios'
 import moment from 'moment'
 import _ from 'lodash'
 import schemaModel from '@/api/schema'
@@ -230,8 +227,8 @@ export default {
     }
   },
   components: {
-    schemasubform: SchemaSubForm,
-    SchemaSubFormView: SchemaSubFormView
+    schemasubform: (resolve) => { require(['./SchemaSubForm'], resolve) },
+    SchemaSubFormView: (resolve) => { require(['./SchemaSubFormView'], resolve) }
   },
   methods: {
     async handleFileChange (e, index, fieldName) {

client/src/components/SchemaSubFormView.vue

@@ -63,8 +63,6 @@
 
 <script>
 import schemaModel from '@/api/schema'
-import SchemaSubFormView from './SchemaSubFormView'
-// import axios from 'axios'
 
 var AWS = require('aws-sdk')
 AWS.config.update({
@@ -81,7 +79,7 @@ export default {
     }
   },
   components: {
-    'schemasubformView': SchemaSubFormView
+    'schemasubformView': (resolve) => { require(['./SchemaSubFormView'], resolve) }
   },
   methods: {
     getStyle (field) {

client/src/components/SchemaView.vue

@@ -158,15 +158,8 @@
 import _ from 'lodash'
 import $ from 'jquery'
 
-import ListInstances from './ListInstances'
-import SchemaSubForm from './SchemaSubForm'
-import SchemaSubFormView from './SchemaSubFormView'
-import email from './email'
-
 import flowzdataModal from '@/api/flowzdata'
 import flowzModel from '@/api/flowz'
-
-import schemalist from '@/pages/user/SchemaList'
 import schemaModel from '@/api/schema'
 
 import finstanceModal from '@/api/finstance'
@@ -238,11 +231,11 @@ export default {
     }
   },
   components: {
-    'list-instances': ListInstances,
-    'schemasubform': SchemaSubForm,
-    'schemalist': schemalist,
-    'email': email,
-    'schemasubformview': SchemaSubFormView
+    'list-instances': (resolve) => { require(['./ListInstances'], resolve) },
+    'schemasubform': (resolve) => { require(['./SchemaSubForm'], resolve) },
+    'schemalist': (resolve) => { require(['@/pages/user/SchemaList'], resolve) },
+    'email': (resolve) => { require(['./email'], resolve) },
+    'schemasubformview': (resolve) => { require(['./SchemaSubFormView'], resolve) }
   },
   methods: {
     searchData (query) {
@@ -889,7 +882,6 @@ export default {
 
     getSchema () {
       return schemaModel.getAll(this.flowzData.schema).then(res => {
-        console.log(res)
         return res
       }).catch(err => {
         console.log('Error: ', err)

client/src/components/cellRender.vue

@@ -75,7 +75,6 @@
 import moment from 'moment'
 import flowzdataModal from '@/api/flowzdata'
 import schemaModel from '@/api/schema'
-import SchemaSubFormView from './SchemaSubFormView'
 
 export default {
   name: 'CellRender',
@@ -93,7 +92,7 @@ export default {
     }
   },
   components: {
-    'schemasubformview': SchemaSubFormView
+    'schemasubformview': (resolve) => { require(['./SchemaSubFormView'], resolve) }
   },
   filters: {
     getAgoStatus (item) {

client/src/components/email.vue

@@ -70,8 +70,8 @@ import schemaModel from '@/api/schema'
       // }
     },
     components: {
-      'editor': function (resolve) { require(['@tinymce/tinymce-vue'], resolve)},
-      'schemasubform': function (resolve) { require(['./SchemaSubForm'], resolve)}
+      'editor': (resolve) => { require(['@tinymce/tinymce-vue'], resolve) },
+      'schemasubform': (resolve) => { require(['./SchemaSubForm'], resolve) }
     },
     props: {
     'btnArr': Object,

client/src/components/emailtemplate.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import Editor from '@tinymce/tinymce-vue'
 import saveemailTemplate from '@/api/emailtemplate'
 import _ from 'lodash'
 
@@ -108,7 +107,7 @@ export default {
     }
   },
   components: {
-    'editor': Editor
+    'editor': (resolve) => { require(['@tinymce/tinymce-vue'], resolve) }
   },
   methods: {
     saveTemplate () {

client/src/masterLayout/Header.vue

@@ -81,11 +81,9 @@
 </template>
 <script>
   import psl from 'psl'
-  // import axios from 'axios'
-  import subscription from '@/components/subscription'
   export default {
     components: {
-      subscription
+      subscription: (resolve) => { require(['@/components/subscription'], resolve) }
     },
     computed: {
       getRole () {

client/src/masterLayout/Master.vue

@@ -18,15 +18,12 @@
 </template>
 
 <script>
-import Header from './Header'
-import SideBar from './SideBar'
-import Footer from './Footer'
 export default {
   name: 'app',
   components: {
-    'f-sidebar': SideBar,
-    'f-header': Header,
-    'f-footer': Footer
+    'f-sidebar': (resolve) => { require(['./SideBar'], resolve) },
+    'f-header': (resolve) => { require(['./Header'], resolve) },
+    'f-footer': (resolve) => { require(['./Footer'], resolve) }
   },
   data () {
     return {}

client/src/pages/flow/List.vue

@@ -170,7 +170,7 @@ import finstanceModal from '@/api/finstance'
 import axios from 'axios'
 import viewSVG from './viewSVG'
 import psl from 'psl'
-import subscription from '@/components/subscription'
+// import subscription from '@/components/subscription'
 
 import config from '@/config'
 import expandRow2 from './assigned_invite_table-expand.vue'
@@ -184,9 +184,9 @@ import moment from 'moment'
 export default {
   name: 'Flowz',
   components: {
-    'viewSVG': viewSVG,
-    expandRow2,
-    subscription
+    'viewSVG': (resolve) => { require(['./viewSVG'], resolve) },
+    expandRow2: (resolve) => { require(['./assigned_invite_table-expand.vue'], resolve) },
+    subscription: (resolve) => { require(['@/components/subscription'], resolve) }
   },
   data () {
     return {