CreateDialogView

lib/assets/javascripts/dashboard/views/dashboard/dialogs/create-dialog/dialog-view.js

@@ -221,7 +221,8 @@ const CreateDialogView = CoreView.extend({
       userModel: this.userModel,
       pollingModel: this.pollingModel,
       routerModel: this.routerModel,
-      mamufasView: this.mamufasView
+      mamufasView: this.mamufasView,
+      el: dialogOpts.viewElement
     });
 
     createModel.bind('datasetCreated', tableMetadata => {

lib/assets/javascripts/new-dashboard/App.vue

@@ -2,16 +2,19 @@
   <div id="app">
     <NavigationBar :user="user"/>
     <router-view/>
+    <BackgroundPollingView ref="backgroundPollingView"/>
   </div>
 </template>
 
 <script>
 import NavigationBar from 'new-dashboard/components/NavigationBar/NavigationBar';
+import BackgroundPollingView from './components/Backbone/BackgroundPollingView.vue';
 
 export default {
   name: 'App',
   components: {
-    NavigationBar
+    NavigationBar,
+    BackgroundPollingView
   },
   computed: {
     user () {

lib/assets/javascripts/new-dashboard/components/Backbone/BackgroundPollingView.vue

@@ -0,0 +1,47 @@
+<template>
+  <section class="BackgroundPolling" ref="injectionHTMLElement">
+  </section>
+</template>
+
+<script>
+import BackgroundPollingView from 'dashboard/views/dashboard/background-polling/background-polling-view';
+
+export default {
+  name: 'BackgroundPollingView',
+  props: {
+    routeType: {
+      type: String,
+      default: 'maps'
+    }
+  },
+  mounted () {
+    this.backgroundPollingView = this.renderView();
+  },
+  beforeDestroy () {
+    this.backgroundPollingView.clean();
+  },
+  methods: {
+    getBackgroundPollingView () {
+      return this.backgroundPollingView;
+    },
+    renderView () {
+      const backgroundPollingModel = this.$cartoModels.backgroundPolling;
+      const configModel = this.$cartoModels.config;
+      const userModel = this.$cartoModels.user;
+
+      // Tener cuidado porque la ruta puede cambiar e isMaps no se actualizará
+      const backgroundPollingView = new BackgroundPollingView({
+        model: backgroundPollingModel,
+        createVis: this.$props.routeType === 'maps',
+        userModel,
+        configModel,
+        el: this.$refs.injectionHTMLElement
+      });
+
+      backgroundPollingView.render();
+
+      return backgroundPollingView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/CreateButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <button @click="openCreateModal">Create Map</button>
+</template>
+
+<script>
+import CreateDialog from 'new-dashboard/components/Dialogs/CreateDialog.vue';
+
+export default {
+  name: 'CreateButton',
+  props: {
+    visualizationType: {
+      type: String,
+      default: 'maps'
+    }
+  },
+  methods: {
+    openCreateModal () {
+      this.$modal.show({
+        template: `<CreateDialog :dialogType="dialogType" :backgroundPollingView="backgroundPollingView" v-on:close="$emit('close')"/>`,
+        props: ['dialogType', 'backgroundPollingView'],
+        components: { CreateDialog }
+      },
+      {
+        dialogType: this.$props.visualizationType,
+        backgroundPollingView: this.$parent.$parent.$refs.backgroundPollingView.getBackgroundPollingView()
+      },
+      {
+        width: '100%',
+        height: '100%'
+      });
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Dialogs/CreateDialog.vue

@@ -0,0 +1,80 @@
+<template>
+  <section class="Dialog is-white">
+    <div class="Dialog-contentWrapper Dialog-contentWrapper--withHeaderWrapper js-content">
+      <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+    </div>
+  </section>
+</template>
+
+<script>
+import DialogView from 'dashboard/views/dashboard/dialogs/create-dialog/dialog-view';
+import Factories from 'new-dashboard/plugins/backbone/factories';
+
+export default {
+  name: 'CreateDialog',
+  props: {
+    dialogType: String,
+    backgroundPollingView: Object
+  },
+  mounted () {
+    this.createDialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.createDialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const configModel = this.$cartoModels.config;
+      const userModel = this.$cartoModels.user;
+      const backgroundPollingModel = this.$cartoModels.backgroundPolling;
+
+      const modalModel = Factories.ModalModel({
+        destroy: function () { this.$emit('close'); }.bind(this)
+      });
+
+      const routerModel = {
+        isDatasets: () => this.$props.dialogType === 'datasets',
+        isMaps: () => this.$props.dialogType === 'maps'
+      };
+
+      DialogView.setViewProperties({
+        userModel,
+        configModel,
+        pollingModel: backgroundPollingModel,
+        pollingView: this.$props.backgroundPollingView,
+        routerModel: {
+          model: routerModel
+        }
+      });
+
+      DialogView.addProperties({
+        mamufasView: {
+          enable: () => {},
+          disable: () => {}
+        }
+      });
+
+      const DialogViewInstance = DialogView.openDialog(
+        { modalModel },
+        {
+          selectedItems: [],
+          modalModel,
+          viewElement: this.$refs.injectionHTMLElement
+        }
+      );
+
+      DialogViewInstance.render();
+
+      return DialogViewInstance;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.Dialog {
+  * {
+    box-sizing: content-box;
+  }
+}
+</style>

lib/assets/javascripts/new-dashboard/main.js

@@ -1,13 +1,18 @@
 import Vue from 'vue';
-import App from './App';
-import router from './router';
-import store from './store';
+import VueModal from 'vue-js-modal';
 import i18n from './i18n';
+import store from './store';
+import router from './router';
+import App from './App';
 
-import './plugins/backbone-core-models';
+// Legacy
+import 'dashboard/data/backbone/sync-options';
+import './plugins/backbone/backbone-core-models';
 
 Vue.config.productionTip = false;
 
+Vue.use(VueModal, { dynamic: true, injectModalsContainer: true });
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

lib/assets/javascripts/new-dashboard/pages/Maps.vue

@@ -1,10 +1,18 @@
 <template>
-  <h1>Maps Page</h1>
+  <section>
+    <h1>Maps Page</h1>
+    <CreateButton visualizationType="maps" />
+  </section>
 </template>
 
 <script>
+import CreateButton from 'new-dashboard/components/CreateButton.vue';
+
 export default {
-  name: 'MapsPage'
+  name: 'MapsPage',
+  components: {
+    CreateButton
+  }
 };
 </script>
 

lib/assets/javascripts/new-dashboard/plugins/backbone/factories/index.js

@@ -0,0 +1,6 @@
+
+import ModalModel from './modal-model';
+
+export default {
+  ModalModel
+};

lib/assets/javascripts/new-dashboard/plugins/backbone/factories/modal-model.js

@@ -0,0 +1,5 @@
+export default function createModalModel (handlers) {
+  return {
+    destroy: handlers.destroy
+  };
+}

package.json

@@ -53,6 +53,7 @@
     "url-parse": "^1.4.0",
     "vue": "^2.5.17",
     "vue-i18n": "^8.2.1",
+    "vue-js-modal": "^1.3.26",
     "vue-router": "^3.0.1",
     "vue-svg-inline-loader": "^1.2.1",
     "vuex": "^3.0.1",