zhongjin
/
cartodb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Apply changes to DB connectors

Browse Source
pull/15462/head
alejandraarri 5 years ago
parent c38c33e6c2
commit 5a6faa7cdd
7 changed files with 84 additions and 51 deletions
Show Stats Download Patch File Download Diff File

2
assets/stylesheets/common/create/listing/imports_options.scss
Unescape View File

@ -138,7 +138,7 @@ $w: $sLayout-width;
}
&__feedback {
padding-top: 75px;
padding-top: 60px;
text-align: center;
}
}

4
lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-bigquery/import-bigquery-form.tpl
Unescape View File

@ -28,11 +28,11 @@
</div>
<div class="Form-row u-flex__align--start">
<div class="Form-rowLabel ImportOptions__label">
<label class="Form-label CDB-Text CDB-Size-medium u-mainTextColor"><%- _t('components.modals.add-layer.imports.bigquery.import-as-field') %></label>
<label class="Form-label CDB-Text CDB-Size-medium u-mainTextColor"><%- _t('components.modals.add-layer.imports.database.import-as-field') %></label>
</div>
<div>
<input type="text" class="ImportOptions__input--long Form-input CDB-Text CDB-Size-medium js-textInput" value="" />
<div class="ImportOptions__hint CDB-Text CDB-Size-medium u-altTextColor u-mt--8"><%= _t('components.modals.add-layer.imports.bigquery.import-as-hint') %></div>
<div class="ImportOptions__hint CDB-Text CDB-Size-medium u-altTextColor u-mt--8"><%= _t('components.modals.add-layer.imports.database.import-as-hint') %></div>
</div>
</div>
<div class="Form-row">

9
lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-header-view.js
Unescape View File

@ -7,6 +7,10 @@ const ImportDataHeaderView = require('builder/components/modals/add-layer/conten
module.exports = ImportDataHeaderView.extend({
events: {
'click .js-back': '_goToPreviusStep'
},
render: function () {
var acceptSync = this.options.acceptSync && this._userModel.get('actions') && this._userModel.isActionEnabled('sync_tables') && this.model.get('type') !== 'file';
@ -30,5 +34,10 @@ module.exports = ImportDataHeaderView.extend({
} else {
this.hide();
}
},
_goToPreviusStep: function () {
this.model.set('state', 'connected');
this.model.set('service_name', 'connector');
}
});

6
lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-header.tpl
Unescape View File

@ -5,3 +5,9 @@
<%- _t('components.modals.add-layer.imports.header-import.sync-options') %>
<% } %>
</p>
<% if (state === "selected") { %>
<button class="ImportPanel-headerButton CDB-Text is-semibold u-upperCase CDB-Size-medium u-actionTextColor js-back">
<i class="CDB-IconFont is-semibold CDB-IconFont-arrowPrev u-mr--4"></i>
<span><%= _t('components.modals.add-layer.imports.header-import.go-back') %></span>
</button>
<% } %>

99
lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-query-form-view.js
Unescape View File

@ -1,12 +1,13 @@
const _ = require('underscore');
const ImportDataView = require('builder/components/modals/add-layer/content/imports/import-data/import-data-form-view');
const ImportDataFormView = require('builder/components/modals/add-layer/content/imports/import-data/import-data-form-view');
const template = require('./import-database-query-form.tpl');
const CodeMirror = require('codemirror');
const common = require('./import-database-common');
module.exports = ImportDataView.extend({
module.exports = ImportDataFormView.extend({
events: {
'keyup .js-textInput': '_onTextChanged',
'submit .js-form': '_onSubmitForm'
},
@ -21,8 +22,9 @@ module.exports = ImportDataView.extend({
this._initCodeMirror();
if (this.sqlQuery) {
this.codeEditor.setValue(this.sqlQuery);
if (this.formFields) {
this.codeEditor.setValue(this.formFields.sqlQuery);
this.$el.find('.js-textInput')[0].value = this.formFields.importAs;
}
return this;
},
@ -47,21 +49,44 @@ module.exports = ImportDataView.extend({
this.model.bind('change:errorMessage', this.render, this);
},
_checkVisibility: function () {
const state = this.model.get('state');
if (state === 'connected') {
this.show();
} else {
this.hide();
}
},
_onTextChanged: function () {
const query = this.codeEditor.getValue();
(query ? common.enableButton(this.$('.js-submit')) : common.disableButton(this.$('.js-submit')));
(this._isFormFilled() ? common.enableButton(this.$('.js-submit')) : common.disableButton(this.$('.js-submit')));
},
_isFormFilled: function () {
return this.codeEditor.getValue() !== '' &&
this.$('.js-textInput').val() !== '';
},
_onSubmitForm: function (e) {
if (e) this.killEvent(e);
const query = this.codeEditor.getValue().replace(/\n/g, ' ');
const query = this.codeEditor.getValue();
if (!query) {
return;
}
this.sqlQuery = query;
this.formFields = {
sqlQuery: query,
importAs: this.$('.js-textInput').val()
};
this._prepareUploadModel(query);
this._updateUploadModel();
this._goSelectDataset();
},
_prepareUploadModel: function (query) {
// Change file attributes :S
this.trigger('urlSelected', this);
// Change model
@ -72,48 +97,32 @@ module.exports = ImportDataView.extend({
service_item_id: query,
state: 'idle'
});
if (this.model.get('state') !== 'error') {
this.model.set('state', 'selected');
this.trigger('urlSubmitted', this);
}
},
_checkVisibility: function () {
const state = this.model.get('state');
if (state === 'connected') {
this.show();
} else {
this.hide();
_updateUploadModel: function () {
try {
const connector = {
provider: this.options.service,
connection: this.model.connection,
sql_query: this.formFields.sqlQuery.replace(/\n/g, ' '),
import_as: this.formFields.importAs
};
this.model.set('service_item_id', JSON.stringify(connector));
} catch (e) {
this.model.set('state', 'connected');
this.model.setUpload({
value: '',
service_item_id: ''
});
this.model.set('errorMessage', _t('components.modals.add-layer.imports.database.sql-error'));
}
this._prepareData(state);
},
_prepareData: function (state) {
if (state === 'selected') {
try {
const connector = {
provider: this.options.service,
connection: this.model.connection,
sql_query: this.model.get('service_item_id'),
import_as: this._extractTableName(this.model.get('service_item_id'))
};
this.model.set('service_item_id', JSON.stringify(connector));
} catch (e) {
this.model.set('state', 'connected');
this.model.setUpload({
value: '',
service_item_id: ''
});
this.model.set('errorMessage', _t('components.modals.add-layer.imports.database.sql-error'));
}
_goSelectDataset: function () {
if (this.model.get('state') !== 'error') {
this.model.set('state', 'selected');
this.trigger('urlSubmitted', this);
}
},
_extractTableName: function (sql) {
const parts = sql.split(' from ');
const table = parts[1].split(' ')[0];
return table.split('.').join('_');
}
});

9
lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-query-form.tpl
Unescape View File

@ -15,6 +15,15 @@
<div class="ImportOptions__hint CDB-Text CDB-Size-medium u-altTextColor u-mt--8"><%- _t('components.modals.add-layer.imports.database.sql-hint') %></div>
</div>
</div>
<div class="Form-row u-flex__align--start">
<div class="Form-rowLabel ImportOptions__label">
<label class="Form-label CDB-Text CDB-Size-medium u-mainTextColor"><%- _t('components.modals.add-layer.imports.database.import-as-field') %></label>
</div>
<div>
<input type="text" class="ImportOptions__input--long Form-input CDB-Text CDB-Size-medium js-textInput" value="" />
<div class="ImportOptions__hint CDB-Text CDB-Size-medium u-altTextColor u-mt--8"><%= _t('components.modals.add-layer.imports.database.import-as-hint') %></div>
</div>
</div>
<div class="Form-row">
<div class="Form-rowLabel ImportOptions__label"></div>
<div class="Form-row ImportOptions__input--long u-flex__justify--end">

6
lib/assets/javascripts/locale/en.json
Unescape View File

@ -1359,9 +1359,7 @@
"bigquery": {
"field-billing-project": "Billing Project ID",
"billing-project-hint": "Project ID for the Google Cloud project that will run the queries and be charged for the expenses. Example: my-project-identifier. More info <a href='https://cloud.google.com/resource-manager/docs/creating-managing-projects#identifying_project' target='_blank'>here</a>.",
"placeholder": "SELECT *, ST_GeogPoint(longitude, latitude) AS the_geom FROM project.dataset.table",
"import-as-field": "CARTO Dataset",
"import-as-hint": "Name of the new Dataset that will be created in your CARTO Dashboard with the imported data."
"placeholder": "SELECT *, ST_GeogPoint(longitude, latitude) AS the_geom FROM project.dataset.table"
},
"database": {
"title": "Enter your %{brand} credentials",
@ -1382,6 +1380,8 @@
"field-sql-query": "SQL query",
"sql-hint": "If your query contains geographic data in EPSG:4326 format, name that column with an accepted name so that it’s imported correctly: “the_geom”, “geom“, “geometry“...",
"sql-error": "There has been an error parsing your query",
"import-as-field": "CARTO Dataset",
"import-as-hint": "Name of the new Dataset that will be created in your CARTO Dashboard with the imported data.",
"run": "Run SQL query",
"placeholder": "SELECT *, ST_GeogPoint(longitude, latitude) AS the_geom FROM table",
"sidebar-connect": {

Write Preview
Loading…
Cancel
Save