Initial commit

lib/assets/javascripts/dashboard/views/data-library/content/content-view.js

@@ -0,0 +1,41 @@
+const CoreView = require('backbone/core-view');
+const randomQuote = require('builder/components/loading/random-quote');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'collection',
+  'model',
+  'template'
+];
+/*
+ *  Content result default view
+ */
+
+module.exports = CoreView.extend({
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.$el.html(this._template({
+      defaultUrl: '',
+      page: this._collection.options.get('page'),
+      isSearching: this._model.get('is_searching'),
+      tag: this._collection.options.get('tags'),
+      q: this._collection.options.get('q'),
+      quote: randomQuote(),
+      type: this._collection.options.get('type'),
+      totalItems: this._collection.size(),
+      totalEntries: this._collection.total_entries,
+      msg: ''
+    }));
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.listenTo(this._collection, 'change remove add reset', this.render);
+  }
+});

lib/assets/javascripts/dashboard/views/data-library/content/error-template.tpl

@@ -0,0 +1,10 @@
+<div class="IntermediateInfo">
+  <div class="LayoutIcon LayoutIcon--negative">
+    <i class="CDB-IconFont CDB-IconFont-cockroach"></i>
+  </div>
+  <% if (msg) { %>
+    <p class="CDB-Text CDB-Size-medium u-altTextColor u-tSpace-xl"><%= msg %></p>
+  <% } %>
+  <h4 class="CDB-Text CDB-Size-large u-mainTextColor u-secondaryTextColor u-bSpace--m u-tSpace-xl">Oouch! There has been an error</h4>
+  <p class="CDB-Text CDB-Size-medium u-altTextColor">If the problem persists contact us at <a class="js-mail-link" href="mailto:support@carto.com">support@carto.com</a>.</p>
+</div>

lib/assets/javascripts/dashboard/views/data-library/content/list/dataset-item-view.js

@@ -0,0 +1,80 @@
+const _ = require('underscore');
+const moment = require('moment');
+const CoreView = require('backbone/core-view');
+const Utils = require('builder/helpers/utils');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const MapCardPreview = require('dashboard/components/mapcard-preview-view');
+const template = require('./dataset-item.tpl');
+
+const GEOM_TYPES = ['point', 'polygon', 'line', 'raster'];
+
+const REQUIRED_OPTS = [
+  'configModel'
+];
+
+/**
+ * View representing an item in the list under datasets route.
+ */
+module.exports = CoreView.extend({
+  tagName: 'li',
+  className: 'MapsList-item',
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    const vis = this.model;
+    const date = vis.get('order') === 'updated_at' ? vis.get('updated_at') : vis.get('created_at');
+
+    this.$el.html(template({
+      vis: vis.attributes,
+      datasetSize: this._getDatasetSize(vis.get('table')['size']),
+      geomType: this._getGeometryType(vis.get('table')['geometry_types']),
+      account_host: this._configModel.get('account_host'),
+      dataset_base_url: this._configModel.get('dataset_base_url'),
+      dateFromNow: moment(date).fromNow()
+    }));
+
+    this._renderMapThumbnail();
+
+    return this;
+  },
+
+  _renderMapThumbnail: function () {
+    const username = this.model.get('permission')['owner']['username'];
+    const mapCardPreview = new MapCardPreview({
+      el: this.$('.js-header'),
+      username: username,
+      width: 298,
+      height: 220,
+      visId: this.model.get('id'),
+      mapsApiResource: this._configModel.getMapsResourceName(username),
+      config: this._configModel
+    });
+
+    if (this.imageURL) {
+      mapCardPreview.loadURL(this.imageURL);
+    } else {
+      mapCardPreview.load();
+    }
+
+    mapCardPreview.bind('loaded', function (url) {
+      this.imageURL = url;
+    }, this);
+
+    this.addView(mapCardPreview);
+  },
+
+  _getGeometryType: function (geomTypes) {
+    const geomType = (geomTypes && geomTypes[0] || '').toLowerCase();
+
+    return _.find(GEOM_TYPES, type => geomType.indexOf(type) !== -1);
+  },
+
+  _getDatasetSize: function (size) {
+    return size ? Utils.readablizeBytes(size, true).split(' ') : 0;
+  }
+});

lib/assets/javascripts/dashboard/views/data-library/content/list/dataset-item.tpl

@@ -0,0 +1,41 @@
+<div class="MapCard MapCard--borderless MapCard--squared js-card" data-vis-id="<%- vis.id %>" data-username="<%- vis.permission.owner.username %>">
+  <a href="<%- dataset_base_url %><%- vis.name %>" target="_blank" class="MapCard-header js-header">
+    <div class="MapCard-loader js-loader"></div>
+  </a>
+
+  <div class="MapCard-content">
+    <div class="MapCard-contentFooter MapCard-contentFooter--with-icon">
+      <div class="MapCard-contentFooterIcon">
+        <div class="DatasetsList-itemCategory is--<%= geomType %>Dataset"></div>
+      </div>
+      <div class="MapCard-contentFooterDetails u-ellipsLongText">
+        <div class="MapCard-contentFooterTitle">
+          <h3 class="MapCard-title DefaultTitle CDB-Text is-semibold CDB-Size-large">
+            <a href="<%- dataset_base_url %><%- vis.name %>" target="_blank" class="DefaultTitle-link u-ellipsLongText" title="<%- vis.display_name %>">
+              <% if (vis.display_name) { %>
+                <%- vis.display_name %>
+              <% } else { %>
+                <%- vis.name %>
+              <% } %>
+            </a>
+          </h3>
+        </div>
+
+        <div class="MapCard-contentFooterIcons CDB-Size-medium u-altTextColor">
+          <div class="MapCard-contentFooterDetails--left MapCard-contentFooterDetails--noright">
+            <div class="MapCard-contentFooterTimeDiff DefaultTimeDiff">
+              <i class="CDB-IconFont CDB-IconFont-clock DefaultTimeDiff-icon"></i>
+              <%- dateFromNow %>
+            </div>
+            <% if (datasetSize && datasetSize[0] > 0) { %>
+              <div class="MapCard-contentFooterIcon u-hideOnMobile">
+                <i class="CDB-IconFont CDB-IconFont-floppy SizeIndicator-icon"></i>
+                <span class="MapCardIcon-counter"><%- datasetSize[0] %></span> <span class="MapCardIcon-label"><%- datasetSize[1] %></span>
+              </div>
+            <% } %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

lib/assets/javascripts/dashboard/views/data-library/content/list/list-view.js

@@ -0,0 +1,82 @@
+const CoreView = require('backbone/core-view');
+const _ = require('underscore');
+const DatasetsItemView = require('./dataset-item-view');
+const PlaceholderItem = require('./placeholder-item-view');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'configModel',
+  'collection'
+];
+
+const MAP_CARDS_PER_ROW = 3;
+
+/**
+ *  View representing the list of items
+ */
+
+module.exports = CoreView.extend({
+
+  tagName: 'ul',
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initBinds();
+  },
+
+  render: function () {
+    if (this._collection.options.get('page') === 1) {
+      this.clearSubViews();
+    }
+
+    this._collection.each(this._addItem, this);
+
+    let className = 'MapsList';
+
+    if (this._collection._ITEMS_PER_PAGE * this._collection.options.get('page') >= this._collection.total_entries) {
+      className += ' is-bottom';
+    }
+
+    this.$el.attr('class', className);
+
+    if (this._collection.size() > 0) {
+      this._fillEmptySlotsWithPlaceholderItems();
+    }
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.listenTo(this._collection, 'reset loaded', this.render);
+  },
+
+  show: function () {
+    this.$el.removeClass('is-hidden');
+  },
+
+  hide: function () {
+    this.$el.addClass('is-hidden');
+  },
+
+  _addItem: function (model) {
+    const itemView = new DatasetsItemView({
+      model,
+      configModel: this._configModel
+    });
+    this.addView(itemView);
+    this.$el.append(itemView.render().el);
+  },
+
+  _fillEmptySlotsWithPlaceholderItems: function () {
+    _.times(this._emptySlotsCount(), function () {
+      var view = new PlaceholderItem();
+      this.$el.append(view.render().el);
+      this.addView(view);
+    }, this);
+  },
+
+  _emptySlotsCount: function () {
+    return (this._collection._ITEMS_PER_PAGE - this._collection.size()) % MAP_CARDS_PER_ROW;
+  }
+});

lib/assets/javascripts/dashboard/views/data-library/content/list/placeholder-item-template.tpl

@@ -0,0 +1,4 @@
+<div class="MapCard MapCard--squared MapCard--borderless">
+  <div class="MapCard-header MapCard-header--fake"></div>
+  <div class="MapCard-content"></div>
+</div>

lib/assets/javascripts/dashboard/views/data-library/content/list/placeholder-item-view.js

@@ -0,0 +1,20 @@
+const CoreView = require('backbone/core-view');
+const template = require('./placeholder-item-template.tpl');
+/**
+ * Represents a map card on data library.
+ */
+
+module.exports = CoreView.extend({
+
+  className: 'MapsList-item MapsList-item--fake',
+
+  tagName: 'li',
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.html(template());
+
+    return this;
+  }
+});

lib/assets/javascripts/dashboard/views/data-library/content/loader-template.tpl

@@ -0,0 +1,5 @@
+<div class="IntermediateInfo">
+  <div class="Spinner"></div>
+  <h4 class="CDB-Text CDB-Size-large u-mainTextColor u-secondaryTextColor u-bSpace--m"><%- q || tag  ? 'Searching' : 'Loading' %>...</h4>
+  <div class="CDB-Text CDB-Size-medium u-altTextColor"><%= quote %></div>
+</div>

lib/assets/javascripts/dashboard/views/data-library/content/more-template.tpl

@@ -0,0 +1,3 @@
+<div class="u-inner u-txt-center">
+  <button class="Button Button--gray Button--centered is-hidden js-more DataLibrary-more">View more</button>
+</div>

lib/assets/javascripts/dashboard/views/data-library/content/no-results-template.tpl

@@ -0,0 +1,11 @@
+<div class="IntermediateInfo">
+  <div class="LayoutIcon">
+    <i class="CDB-IconFont CDB-IconFont-lens" />
+  </div>
+  <h4 class="CDB-Text CDB-Size-large u-mainTextColor u-secondaryTextColor u-bSpace--m">
+    Oh! No results
+  </h4>
+  <p class="CDB-Text CDB-Size-medium u-altTextColor">
+    Your search was correct but returned no results, please try with a different set of parameters before running it again
+  </p>
+</div>

lib/assets/javascripts/dashboard/views/data-library/content/request-error-template.tpl

@@ -0,0 +1,11 @@
+<div class="IntermediateInfo">
+  <div class="LayoutIcon LayoutIcon--negative">
+    <i class="CDB-IconFont CDB-IconFont-info"></i>
+  </div>
+  <% if (msg) { %>
+    <h4 class="CDB-Text CDB-Size-large u-mainTextColor u-secondaryTextColor u-bSpace--m u-tSpace-xl"><%= msg %></h4>
+  <% } else { %>
+    <h4 class="CDB-Text CDB-Size-large u-mainTextColor u-secondaryTextColor u-bSpace--m u-tSpace-xl">Oouch! There has been an error</h4>
+  <% } %>
+  <p class="CDB-Text CDB-Size-medium u-altTextColor">If the problem persists contact us at <a class="js-mail-link" href="mailto:support@carto.com">support@carto.com</a>.</p>
+</div>