Initial commit

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/ChangePrivacy.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import ChangePrivacyView from 'dashboard/views/dashboard/dialogs/change-privacy/change-privacy-view';
+import VisualizationModel from 'dashboard/data/visualization-model';
+import Dialog from 'new-dashboard/components/Backbone/Dialog';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+
+export default {
+  name: 'ChangePrivacy',
+  props: {
+    visualization: Object
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const modalModel = ModalModel({
+        create: createModalView => this.openDialog(createModalView),
+        destroy: () => this.$emit('close')
+      });
+
+      const visModel = new VisualizationModel(this.$props.visualization, {
+        configModel: this.$cartoModels.config
+      });
+
+      visModel.on('change', model => {
+        this.$store.dispatch('user/updateData');
+        this.$emit('updateVisualization', model);
+        this.$emit('deselectAll');
+      });
+
+      const changePrivacyView = new ChangePrivacyView({
+        visModel,
+        userModel: this.$cartoModels.user,
+        configModel: this.$cartoModels.config,
+        modals: modalModel,
+        modalModel,
+        el: this.$refs.injectionHTMLElement
+      });
+
+      changePrivacyView._onShareClose = () => {};
+      changePrivacyView.render();
+
+      return changePrivacyView;
+    },
+
+    openDialog (createModalView) {
+      const modalModel = {
+        destroy: () => {}
+      };
+
+      const modalView = createModalView(modalModel);
+      modalView.render();
+
+      this.$modal.show({
+        template: `
+        <Dialog @close="$emit('close')">
+          <div ref="dialogInjectionNode"></div>
+        </Dialog>`,
+        components: { Dialog },
+        mounted: function () {
+          // Replace injection node with Dialog
+          const reference = this.$refs.dialogInjectionNode;
+          const parentNode = reference.parentNode;
+          parentNode.replaceChild(modalView.el, reference);
+
+          // Hack to be able to close Share Modal
+          modalModel.destroy = () => {
+            this.$emit('close');
+          };
+        }
+      }, {}, { width: '100%', height: '100%' });
+
+      return modalModel;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.Dialog {
+  .OptionCards {
+    box-sizing: content-box;
+
+    * {
+      box-sizing: content-box;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded CreateDialog--new-dashboard" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import DialogView from 'dashboard/views/dashboard/dialogs/create-dialog/dialog-view';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+import VisualizationModel from 'dashboard/data/visualization-model';
+
+export default {
+  name: 'CreateDialog',
+  props: {
+    backgroundPollingView: Object,
+    mamufasImportView: Object,
+    dialogType: {
+      type: String,
+      default: 'maps'
+    },
+    selectedItems: Array
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const configModel = this.$cartoModels.config;
+      const userModel = this.$cartoModels.user;
+      const backgroundPollingModel = this.$cartoModels.backgroundPolling;
+
+      let selectedItems = [];
+      if (this.$props.selectedItems && this.$props.selectedItems.length) {
+        selectedItems = this.$props.selectedItems.map(
+          item => new VisualizationModel(item, { configModel })
+        );
+      }
+
+      const modalModel = ModalModel({
+        destroy: () => this.$emit('close')
+      });
+
+      const routerModel = {
+        isDatasets: () => this.$props.dialogType === 'dataset',
+        isMaps: () => this.$props.dialogType === 'maps'
+      };
+
+      DialogView.setViewProperties({
+        userModel,
+        configModel,
+        pollingModel: backgroundPollingModel,
+        pollingView: this.$props.backgroundPollingView,
+        routerModel: {
+          model: routerModel
+        }
+      });
+
+      DialogView.addProperties({
+        mamufasView: this.$props.mamufasImportView
+      });
+
+      const DialogViewInstance = DialogView.openDialog(
+        { modalModel },
+        {
+          selectedItems,
+          modalModel,
+          viewElement: this.$refs.injectionHTMLElement,
+          type: this.$props.dialogType
+        }
+      );
+
+      DialogViewInstance.render();
+
+      return DialogViewInstance;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.Dialog {
+  .CreateDialog--new-dashboard {
+    // We set content-box because it seems like
+    // older content was laid out that way
+    .Dialog-footer,
+    .ImportOptions {
+      box-sizing: content-box;
+
+      * {
+        box-sizing: content-box;
+      }
+    }
+
+    // Reset style for radio button
+    .RadioButton-input {
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/DatasetMetadata.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import DatasetMetadataDialog from 'builder/components/modals/dataset-metadata/dataset-metadata-view';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+import VisualizationModel from 'dashboard/data/visualization-model';
+
+export default {
+  name: 'DatasetMetadata',
+  props: {
+    dataset: Object
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const modalModel = ModalModel({
+        destroy: () => this.$emit('close')
+      });
+
+      const visDefinitionModel = new VisualizationModel(
+        this.$props.dataset,
+        { configModel: this.$cartoModels.config }
+      );
+
+      visDefinitionModel.on('change', model => {
+        this.$emit('updateVisualization', model);
+      });
+
+      const datasetMetadataView = new DatasetMetadataDialog({
+        modalModel,
+        visDefinitionModel,
+        configModel: this.$cartoModels.config,
+        isLocked: visDefinitionModel.getTableModel().isSync(),
+        el: this.$refs.injectionHTMLElement
+      });
+
+      datasetMetadataView.render();
+
+      return datasetMetadataView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/DeleteAccount.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+import DeleteAccount from 'dashboard/components/delete-account/delete-account-view';
+
+export default {
+  name: 'DeleteAccount',
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const userModel = this.$cartoModels.user;
+      const modalModel = ModalModel({
+        destroy: () => {
+          this.$emit('close');
+        }
+      });
+
+      const deleteAccountView = new DeleteAccount({
+        modalModel,
+        userModel,
+        client: this.$store.state.client,
+        el: this.$refs.injectionHTMLElement,
+        clean_on_hide: true
+      });
+
+      deleteAccountView.render();
+
+      return deleteAccountView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/DeleteDialog.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded">
+    <div ref="injectionHTMLElement"></div>
+  </div>
+</template>
+
+<script>
+import DeleteItemsView from 'dashboard/views/dashboard/dialogs/delete-items/delete-items-view';
+import DeleteItemsViewModel from 'dashboard/views/dashboard/dialogs/delete-items/delete-items-view-model';
+import VisualizationModel from 'dashboard/data/visualization-model';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+
+export default {
+  name: 'DeleteDialog',
+  props: {
+    visualizations: Array,
+    visualization: Object,
+    contentType: String
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const configModel = this.$cartoModels.config;
+      const modalModel = ModalModel({
+        destroy: function () { this.$emit('close'); }.bind(this)
+      });
+
+      const visualizationItems = this.$props.visualization
+        ? [new VisualizationModel(this.$props.visualization, { configModel })]
+        : this.$props.visualizations.map(visualization => new VisualizationModel(visualization, { configModel }));
+
+      const viewModel = new DeleteItemsViewModel(visualizationItems, {
+        contentType: this.$props.contentType
+      });
+
+      viewModel.bind('DeleteItemsDone', () => {
+        this.$store.dispatch('user/updateData'); // needed in order to keep the 'quota' synchronized
+        this.$emit('fetchList');
+        this.$emit('deselectAll');
+      });
+
+      const deleteItemsView = new DeleteItemsView({
+        modalModel,
+        viewModel,
+        configModel,
+        userModel: this.$cartoModels.user,
+        el: this.$refs.injectionHTMLElement
+      });
+
+      deleteItemsView.render();
+
+      return deleteItemsView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/DuplicateMap.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import DuplicateMap from 'dashboard/views/dashboard/dialogs/duplicate-vis/duplicate-vis-view';
+import VisualizationModel from 'dashboard/data/visualization-model';
+
+export default {
+  name: 'DuplicateMap',
+  props: {
+    visualization: Object
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const configModel = this.$cartoModels.config;
+      const visDefinitionModel = new VisualizationModel(this.$props.visualization, { configModel });
+      const table = visDefinitionModel.tableMetadata();
+
+      const duplicateMapView = new DuplicateMap({
+        model: visDefinitionModel,
+        table,
+        configModel,
+        userModel: this.$cartoModels.user,
+        el: this.$refs.injectionHTMLElement,
+        clean_on_hide: true
+      });
+
+      duplicateMapView.render();
+
+      return duplicateMapView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/LockVisualization.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded">
+    <div ref="injectionHTMLElement"></div>
+  </div>
+</template>
+
+<script>
+import ChangeLockView from 'dashboard/views/dashboard/dialogs/change-lock/change-lock-view';
+import ChangeLockViewModel from 'dashboard/views/dashboard/dialogs/change-lock/change-lock-view-model';
+import VisualizationModel from 'dashboard/data/visualization-model';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+
+export default {
+  name: 'LockVisualization',
+  props: {
+    visualizations: Array,
+    visualization: Object,
+    contentType: {
+      type: String,
+      required: true
+    }
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const configModel = this.$cartoModels.config;
+
+      const modalModel = ModalModel({
+        destroy: () => this.$emit('close')
+      });
+
+      const visualizationItems = this.$props.visualization
+        ? [new VisualizationModel(this.$props.visualization, { configModel })]
+        : this.$props.visualizations.map(visualization => new VisualizationModel(visualization, { configModel }));
+
+      const viewModel = new ChangeLockViewModel({
+        items: visualizationItems,
+        contentType: this.$props.contentType
+      });
+
+      viewModel.bind('change:state', () => {
+        if (viewModel.get('state') === 'ProcessItemsDone') {
+          this.$emit('fetchList');
+          this.$emit('deselectAll');
+          this.$emit('close');
+        }
+      });
+
+      const changeLockView = new ChangeLockView({
+        modalModel,
+        model: viewModel,
+        el: this.$refs.injectionHTMLElement
+      });
+
+      changeLockView.render();
+
+      return changeLockView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/MapMetadata.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import MapMetadataDialog from 'builder/components/modals/map-metadata/map-metadata-view';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+import VisualizationModel from 'dashboard/data/visualization-model';
+
+export default {
+  name: 'MapMetadata',
+  props: {
+    visualization: Object
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const modalModel = ModalModel({
+        destroy: () => this.$emit('close')
+      });
+
+      const visDefinitionModel = new VisualizationModel(
+        this.$props.visualization,
+        { configModel: this.$cartoModels.config }
+      );
+
+      visDefinitionModel.on('change', model => {
+        this.$emit('updateVisualization', model);
+      });
+
+      const mapMetadataView = new MapMetadataDialog({
+        modalModel,
+        visDefinitionModel,
+        el: this.$refs.injectionHTMLElement
+      });
+
+      mapMetadataView.render();
+
+      return mapMetadataView;
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/components/Backbone/Dialogs/Share.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="Dialog-content Dialog-content--expanded" ref="injectionHTMLElement"></div>
+</template>
+
+<script>
+import ShareView from 'dashboard/views/dashboard/dialogs/share/share-view';
+import VisualizationModel from 'dashboard/data/visualization-model';
+import Dialog from 'new-dashboard/components/Backbone/Dialog';
+import ModalModel from 'new-dashboard/plugins/backbone/modal-model';
+
+export default {
+  name: 'Share',
+  props: {
+    visualization: Object
+  },
+  mounted () {
+    this.dialog = this.renderDialog();
+  },
+  beforeDestroy () {
+    this.dialog.clean();
+  },
+  methods: {
+    renderDialog () {
+      const configModel = this.$cartoModels.config;
+      const userModel = this.$cartoModels.user;
+
+      const modalsServiceModel = {
+        create: createModalView => this.openDialog(createModalView)
+      };
+
+      const modalModel = ModalModel({
+        destroy: () => this.$emit('close')
+      });
+
+      const visModel = new VisualizationModel(this.$props.visualization, { configModel });
+
+      const permissionModel = visModel.getPermissionModel();
+      permissionModel.on('change', model => {
+        this.$emit('updateVisualization', visModel);
+      });
+
+      const viewModel = new ShareView({
+        configModel,
+        userModel,
+        visModel,
+        modals: modalsServiceModel,
+        modalModel,
+        onClose: () => {},
+        el: this.$refs.injectionHTMLElement
+      });
+
+      viewModel.render();
+
+      return viewModel;
+    },
+
+    openDialog (createModalView) {
+      const modalModel = {
+        destroy: () => {}
+      };
+
+      const modalView = createModalView(modalModel);
+      modalView.render();
+
+      this.$modal.show({
+        template: `
+        <Dialog v-on:close="$emit('close')">
+          <div ref="dialogInjectionNode"></div>
+        </Dialog>`,
+        components: { Dialog },
+        mounted: function () {
+          this.$refs.dialogInjectionNode.appendChild(modalView.el);
+
+          // Hack to be able to close Share Modal
+          modalModel.destroy = () => {
+            this.$emit('close');
+          };
+        }
+      }, {}, { width: '100%', height: '100%' });
+
+      return modalModel;
+    }
+  }
+};
+</script>