Add new fields to metadata modal

app/assets/stylesheets/common/form-content.css.scss

@@ -103,6 +103,7 @@ $sLabel-width: 140px;
   font-weight: $sFontWeight-normal;
   @include nicer-lato-typography();
   color: $cTypography-paragraphs;
+  text-transform: capitalize;
 }
 .Form-label.Form-label--verticalAlignTop {
   line-height: inherit;

app/assets/stylesheets/editor/select.css.scss

@@ -23,7 +23,7 @@
 .Select .select2-container {
   .select2-choice,
   .select2-choice:hover {
-    border-color: $cStructure-mainLine;
+    border-color: $cForms-border;
     color: $cTypography-paragraphs;
     padding-top: 11px;
     padding-left: 12px;
@@ -44,7 +44,7 @@
       position: absolute;
       top: 14px;
       right: 12px;
-      content: "\E048";
+      content: "\E04B"; // ChevronDown
       font-size: 9px;
       color: $cTypography-paragraphs;
     }

app/helpers/application_helper.rb

@@ -84,7 +84,8 @@ def frontend_config
       tumblr_api_key:             Cartodb.config[:tumblr]['api_key'],
       max_asset_file_size:        Cartodb.config[:assets]["max_file_size"],
       watcher_ttl:                Cartodb.config[:watcher].try("fetch", 'ttl', 60),
-      upgrade_url:                cartodb_com_hosted? ? "''" : "#{current_user.upgrade_url(request.protocol)}"
+      upgrade_url:                cartodb_com_hosted? ? "''" : "#{current_user.upgrade_url(request.protocol)}",
+      licenses:                   Carto::License.all
     }
 
     if Cartodb.config[:datasource_search].present? && Cartodb.config[:datasource_search]['twitter_search'].present? \

lib/assets/javascripts/cartodb/common/dialogs/edit_vis_metadata/edit_vis_form.jst.ejs

@@ -1,9 +1,9 @@
 <div class="Form-row">
   <div class="Form-rowLabel">
-    <label class="Form-label"><%- visTypeCapitalized %> name</label>
+    <label class="Form-label"><%- visType %> name</label>
   </div>
   <div class="Form-rowData Form-rowData--long">
-    <input class="Form-input Form-input--long js-name <% if (!isNameEditable) { %>is-disabled<% } %>" placeholder="<%- visType %> name is required" value="<%- visValue %>" <% if (!isNameEditable) { %>readonly<% } %>/>
+    <input class="Form-input Form-input--long js-name <% if (!isNameEditable) { %>is-disabled<% } %>" placeholder="<%- visType %> name is required" value="<%- visValue %>" <% if (!isNameEditable) { %>readonly="readonly"<% } %>/>
   </div>
   <div class="Form-rowInfo"></div>
 </div>
@@ -13,7 +13,7 @@
     <label class="Form-label">Description</label>
   </div>
   <div class="Form-rowData Form-rowData--withLabel Form-rowData--long">
-    <textarea maxlength="<%- maxLength %>" class="Form-input Form-input--long Form-textarea js-description <% if (!isMetadataEditable) { %>is-disabled<% } %>" placeholder="<% if (isMetadataEditable) { %>Type your description here...<% } else { %>Empty description<% } %>" <% if (!isMetadataEditable) { %>readonly<% } %>><%- visDescription %></textarea>
+    <textarea maxlength="<%- maxLength %>" class="Form-input Form-input--long Form-textarea js-description <% if (!isMetadataEditable) { %>is-disabled<% } %>" placeholder="<% if (isMetadataEditable) { %>Type your description here...<% } else { %>Empty description<% } %>" <% if (!isMetadataEditable) { %>readonly="readonly"<% } %>><%- visDescription %></textarea>
     <% if (isMetadataEditable) { %>
       <label class="EditVisMetadata-markdown js-markdown" data-title="<em>_italics_</em><br/><b>*bold*</b><br/>[link](http://link.com)">
         <span class="EditVisMetadata-markdownIcon">
@@ -27,6 +27,35 @@
   <div class="Form-rowInfo"></div>
 </div>
 
+<div class="Form-row">
+  <div class="Form-rowLabel">
+    <label class="Form-label">Source</label>
+  </div>
+  <div class="Form-rowData Form-rowData">
+    <input class="Form-input Form-input--long js-source <% if (!isMetadataEditable) { %>is-disabled<% } %>" placeholder="Enter the source of the data" value="<%- visSource %>" <% if (!isMetadataEditable) { %>readonly="readonly"<% } %>/>
+  </div>
+  <div class="Form-rowInfo"></div>
+</div>
+
+<div class="Form-row">
+  <div class="Form-rowLabel">
+    <label class="Form-label">Attributions</label>
+  </div>
+  <div class="Form-rowData Form-rowData">
+    <input class="Form-input Form-input--long js-attributions <% if (!isMetadataEditable) { %>is-disabled<% } %>" placeholder="Enter the attributions of the data" value="<%- visAttributions %>" <% if (!isMetadataEditable) { %>readonly="readonly"<% } %>/>
+  </div>
+  <div class="Form-rowInfo"></div>
+</div>
+
+<div class="Form-row">
+  <div class="Form-rowLabel">
+    <label class="Form-label">License</label>
+  </div>
+  <div class="Form-rowData js-license">
+  </div>
+  <div class="Form-rowInfo"></div>
+</div>
+
 <div class="Form-row">
   <div class="Form-rowLabel">
     <label class="Form-label">Tags</label>
@@ -56,14 +85,14 @@
 <div class="Dialog-stickyFooter">
   <div class="Dialog-footer EditVisMetadata-formFooter">
     <div><%/* placeholder for flex layout */%></div>
-    <% if (!isMetadataEditable) { %>
-      <button type="button" class="Button Button--main Button--inline cancel">
-        <span>Close</span>
-      </button>
-    <% } else { %>
+    <% if (isMetadataEditable) { %>
       <button type="submit" class="Button Button--main Button--inline js-submit">
         <span>Save</span>
       </button>
+    <% } else { %>
+      <button type="button" class="Button Button--main Button--inline cancel">
+        <span>Close</span>
+      </button>
     <% }  %>
   </div>
 </div>

lib/assets/javascripts/cartodb/common/dialogs/edit_vis_metadata/edit_vis_form_view.js

@@ -7,8 +7,6 @@ var Utils = require('cdb.Utils');
  *  Edit visualization (dataset or map) dialog
  *
  */
-
-
 module.exports = cdb.core.View.extend({
 
   options: {
@@ -29,14 +27,14 @@ module.exports = cdb.core.View.extend({
   render: function() {
     this.clearSubViews();
     this._destroyTags();
-    var visType = this.model.getVisType();
     this.$el.html(
       this.template({
-        visType: visType,
-        visTypeCapitalized: visType.charAt(0).toUpperCase() + visType.slice(1),
+        visType: this.model.getVisType(),
         visValue: this.model.get('name'),
         visDescription: this.model.get('description'),
         visPrivacy: this.model.get('privacy').toLowerCase(),
+        visSource: this.model.get('source'),
+        visAttributions: this.model.get('attributions'),
         isNameEditable: this.model.isNameEditable(),
         isMetadataEditable: this.model.isMetadataEditable(),
         maxLength: this.options.maxLength
@@ -59,7 +57,7 @@ module.exports = cdb.core.View.extend({
       new cdb.common.TipsyTooltip({
         el: this.$('.js-markdown'),
         html: true,
-        title: function(e) {
+        title: function() {
           return $(this).data('title');
         }
       })
@@ -69,15 +67,15 @@ module.exports = cdb.core.View.extend({
     this.addView(
       new cdb.common.TipsyTooltip({
         el: this.$('.js-name'),
-        title: function(e) {
+        title: function() {
           return self.model.getError();
         }
       })
     );
 
     // Tags
     _.each(this.model.get('tags'), function(li) {
-      this.$(".js-tagsList").append("<li>" + li + "</li>");
+      this.$(".js-tagsList").append("<li>" + cdb.core.sanitize.html(li) + "</li>");
     }, this);
 
     var tagsPlaceholder = (!this.model.isMetadataEditable() && this.model.get('tags').length === 0) ? 'No tags' : 'Add tags';
@@ -102,6 +100,33 @@ module.exports = cdb.core.View.extend({
         return false;
       }
     });
+
+    // Licenses dropdown
+    var licenseDropdown = new cdb.forms.Combo({
+      className: 'Select',
+      width: '100%',
+      disabled: !this.model.isMetadataEditable(),
+      model: this.model,
+      property: 'license',
+      extra: this._getLicensesForFormsCombo()
+    });
+    licenseDropdown.on('change', this._onChangeLicense, this);
+    this.addView(licenseDropdown);
+    this.$('.js-license').append(licenseDropdown.render().el);
+  },
+
+  _getLicensesForFormsCombo: function() {
+    var items = cdb.config.get('licenses');
+    var emptyOption = [{
+      id: '',
+      name: '-'
+    }];
+    return _.chain(emptyOption.concat(items))
+      .compact()
+      .map(function(d) {
+        return [d.name, d.id];
+      })
+      .value();
   },
 
   _setFields: function() {
@@ -137,8 +162,11 @@ module.exports = cdb.core.View.extend({
     if (this.model.isMetadataEditable()) {
       attrs['description'] = Utils.removeHTMLEvents(this.$('.js-description').val());
       attrs['tags'] = this.$('.js-tagsList').tagit("assignedTags");
+      attrs.source = this.$('.js-source').val();
+      attrs.attributions = this.$('.js-attributions').val();
     }
-
+
+
     this.model.set(attrs);
 
     if (this.model.isValid()) {

lib/assets/javascripts/cartodb/common/dialogs/edit_vis_metadata/edit_vis_metadata_dialog_model.js

@@ -12,17 +12,20 @@ module.exports = cdb.core.Model.extend({
   defaults: {
     name: '',
     description: '',
+    source: '',
+    attributions: '',
+    license: '',
     tags: '',
     privacy: ''
   },
 
   initialize: function(attrs, opts) {
     if (!opts || !opts.vis || !opts.user || !opts.dataLayer) {
-      throw new Error('Visualization, user and dataLayer models are necessary');
+      throw new Error('Visualization, user and dataLayer models are required');
     }
     this.vis = opts.vis;
     this.user = opts.user;
-    this.dataLayer = opts.dataLayer
+    this.dataLayer = opts.dataLayer;
 
     // Validation control variable
     this.validationError = '';
@@ -39,8 +42,7 @@ module.exports = cdb.core.Model.extend({
   },
 
   // Validation
-
-  _validate: function(attrs, options) {
+  _validate: function(attrs) {
     var valid = cdb.core.Model.prototype._validate.apply(this, arguments);
     if (valid) {
       this.trigger('valid')
@@ -54,7 +56,7 @@ module.exports = cdb.core.Model.extend({
     if (!attrs) return;
 
     if (!attrs.name) {
-      return "Name can't be blank" 
+      return "Name can't be blank"
     }
   },
 
@@ -76,11 +78,7 @@ module.exports = cdb.core.Model.extend({
   },
 
   isVisEditable: function() {
-    if (this.vis.permission.isOwner(this.user)) {
-      return true
-    } else {
-      return false
-    }
+    return this.vis.permission.isOwner(this.user);
   },
 
   isAttributeEditable: function(type) {
@@ -106,4 +104,4 @@ module.exports = cdb.core.Model.extend({
     return this.isAttributeEditable('rest');
   }
 
-})
+});

lib/assets/javascripts/cartodb/common/dialogs/edit_vis_metadata/edit_vis_metadata_dialog_view.js

@@ -11,8 +11,6 @@ var _ = require('underscore');
  *  Edit visualization (dataset or map) dialog
  *
  */
-
-
 module.exports = BaseDialog.extend({
 
   events: BaseDialog.extendEvents({
@@ -34,6 +32,9 @@ module.exports = BaseDialog.extend({
     this.model = new EditVisMetadataModel({
       name: this.vis.get('name'),
       description: this.vis.get('description'),
+      source: this.vis.get('source'),
+      attributions: this.vis.get('attributions'),
+      license: this.vis.get('license'),
       tags: this.vis.get('tags'),
       privacy: this.vis.get('privacy')
     }, {
@@ -117,7 +118,7 @@ module.exports = BaseDialog.extend({
           self.vis.set(oldAttrs);
           self._panes.active('error');
         }
-      })  
+      })
     } else {
       this.hide();
     }
@@ -132,4 +133,4 @@ module.exports = BaseDialog.extend({
     this._panes.active('form');
   }
 
-});
+});

lib/assets/test/spec/cartodb/editor/edit_vis_metadata_dialog.spec.js

@@ -9,6 +9,8 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
       type: 'derived',
       name: 'hello vis',
       description: 'hello hello description',
+      source: 'http://foobar.com',
+      attributions: 'CC',
       tags: ['hello', 'hey', 'howdy'],
       privacy: 'PUBLIC'
     });
@@ -41,6 +43,8 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
       expect(this.model.get('description')).toBe(this.vis.get('description'));
       expect(this.model.get('tags')).toBe(this.vis.get('tags'));
       expect(this.model.get('privacy')).toBe(this.vis.get('privacy'));
+      expect(this.model.get('source')).toBe(this.vis.get('source'));
+      expect(this.model.get('attributions')).toBe(this.vis.get('attributions'));
     });
 
     describe('vis type derived', function() {
@@ -57,7 +61,7 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
           type: 'table',
           name: 'hello_dataset'
         });
-      })
+      });
 
       it("should let edit name and rest of attributes when vis is table", function() {
         spyOn(this.dataLayer, 'isInSQLView').and.returnValue(false);
@@ -121,6 +125,10 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
       expect(this.view.$('.js-name').val()).toBe('hello vis');
       expect(this.view.$('.js-description').length).toBe(1);
       expect(this.view.$('.js-description').val()).toBe('hello hello description');
+      expect(this.view.$('.js-source').length).toBe(1);
+      expect(this.view.$('.js-source').val()).toBe('http://foobar.com');
+      expect(this.view.$('.js-attributions').length).toBe(1);
+      expect(this.view.$('.js-attributions').val()).toBe('CC');
       expect(this.view.$('.js-tags').length).toBe(1);
       expect(this.view.$('.js-tagsList .tagit-choice').length).toBe(3);
       expect(this.view.$('.js-privacy').length).toBe(1);
@@ -141,6 +149,8 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
         this.view.render();
         expect(this.view.$('.js-name').is('[readonly]')).toBeFalsy();
         expect(this.view.$('.js-description').is('[readonly]')).toBeFalsy();
+        expect(this.view.$('.js-source').is('[readonly]')).toBeFalsy();
+        expect(this.view.$('.js-attributions').is('[readonly]')).toBeFalsy();
         expect(this.view.$('.js-tags').hasClass('is-disabled')).toBeFalsy();
         expect(this.view.$('.js-privacy').length).toBe(1);
       });
@@ -151,6 +161,8 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
         this.view.render();
         expect(this.view.$('.js-name').is('[readonly]')).toBeTruthy();
         expect(this.view.$('.js-description').is('[readonly]')).toBeTruthy();
+        expect(this.view.$('.js-source').is('[readonly]')).toBeTruthy();
+        expect(this.view.$('.js-attributions').is('[readonly]')).toBeTruthy();
         expect(this.view.$('.js-tags').hasClass('is-disabled')).toBeTruthy();
         expect(this.view.$('.js-privacy').length).toBe(0);
       });
@@ -161,6 +173,8 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
         this.view.render();
         expect(this.view.$('.js-name').is('[readonly]')).toBeTruthy();
         expect(this.view.$('.js-description').is('[readonly]')).toBeFalsy();
+        expect(this.view.$('.js-source').is('[readonly]')).toBeFalsy();
+        expect(this.view.$('.js-attributions').is('[readonly]')).toBeFalsy();
         expect(this.view.$('.js-tags').hasClass('is-disabled')).toBeFalsy();
         expect(this.view.$('.js-privacy').length).toBe(1);
       });
@@ -172,6 +186,8 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
         this.view.render();
         expect(this.view.$('.js-name').is('[readonly]')).toBeTruthy();
         expect(this.view.$('.js-description').is('[readonly]')).toBeTruthy();
+        expect(this.view.$('.js-source').is('[readonly]')).toBeTruthy();
+        expect(this.view.$('.js-attributions').is('[readonly]')).toBeTruthy();
         expect(this.view.$('.js-tags').hasClass('is-disabled')).toBeTruthy();
         expect(this.view.$('.js-privacy').length).toBe(0);
       });
@@ -246,4 +262,4 @@ describe("common/dialogs/edit_vis_metadata_dialog", function() {
     this.view.clean()
   })
 
-});
+});