Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[explore] convert query and save btns to react #690

Merged
merged 2 commits into from
Jul 8, 2016
Merged

[explore] convert query and save btns to react #690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
51805b1
start to convert query and save btns to react
Jun 29, 2016
d3fda53
more explore.jsx to explore/
Jul 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';

const propTypes = {
canAdd: PropTypes.string.isRequired,
onQuery: PropTypes.func.isRequired,
};

export default class QueryAndSaveBtns extends React.Component {
render() {
const saveClasses = classnames('btn btn-default', {
'disabled disabledButton': this.props.canAdd !== 'True',
});

return (
<div className="btn-group query-and-save">
<button type="button" className="btn btn-primary" onClick={this.props.onQuery}>
<i className="fa fa-bolt"></i>Query
</button>
<button type="button"
className={saveClasses}
onClick={this.props.onSave}
data-target="#save_modal"
data-toggle="modal"
>
<i className="fa fa-plus-circle"></i>Save as
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

need to figure out a pattern for getting translated strings into js.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could use http://airbnb.io/polyglot.js/...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use Python's Babel on the backend, hopefully we can have a consistent take on translations where all strings to be translated are all in the same framework.
http://babel.pocoo.org/en/latest/

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

right, we should definitely continue to use babel. i should write a helper so we have a consistent way to pass translated text from the server to bootstrap the ui.

Copy link
Author

@ascott ascott Jul 1, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something like:

server:

bootstrap_data("phrase_bundle_name", {
  phrase_key: _("phrase_key"),
})

client:

BootstrapData.get('phrase_bundle_name');
// returns json blob with keys/translated phrases

</button>
</div>
);
}
}

QueryAndSaveBtns.propTypes = propTypes;
104 changes: 60 additions & 44 deletions caravel/assets/javascripts/explore.js → ...el/assets/javascripts/explore/explore.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,25 @@
// js
var $ = window.$ = require('jquery');
var jQuery = window.jQuery = $;
var px = require('./modules/caravel.js');
var showModal = require('./modules/utils.js').showModal;
var px = require('./../modules/caravel.js');
var showModal = require('./../modules/utils.js').showModal;

import React from 'react';
import ReactDOM from 'react-dom';
import QueryAndSaveBtns from './components/QueryAndSaveBtns.jsx';

require('jquery-ui');
$.widget.bridge('uitooltip', $.ui.tooltip); // Shutting down jq-ui tooltips
require('bootstrap');

require('./caravel-select2.js');
require('./../caravel-select2.js');

require('../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
require('../../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');

// css
require('../vendor/pygments.css');
require('../stylesheets/explore.css');
require('../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
require('../../vendor/pygments.css');
require('../../stylesheets/explore.css');
require('../../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');

var slice;

Expand Down Expand Up @@ -66,6 +70,7 @@ function query(force, pushState) {
}
$('#is_cached').hide();
prepForm();

if (pushState !== false) {
// update the url after prepForm() fix the field ids
history.pushState({}, document.title, slice.querystring());
Expand Down Expand Up @@ -333,9 +338,14 @@ function initExploreView() {
add_filter(undefined, "having");
});

$(".query").click(function () {
query(true);
});
const queryAndSaveBtnsEl = document.getElementById('js-query-and-save-btns');
ReactDOM.render(
<QueryAndSaveBtns
canAdd={queryAndSaveBtnsEl.getAttribute('data-can-add')}
onQuery={() => query(true)}
/>,
queryAndSaveBtnsEl
);

function create_choices(term, data) {
var filtered = $(data).filter(function () {
Expand Down Expand Up @@ -417,45 +427,51 @@ function initExploreView() {
$("#save_as_new").prop("checked", true);
setButtonsState();
});
$('#btn_modal_save').click(function () {
var action = $('input[name=rdo_save]:checked').val();
if (action === 'saveas') {
var slice_name = $('input[name=new_slice_name]').val();
if (slice_name === '') {
showModal({
title: "Error",
body: "You must pick a name for the new slice"
});
return;
}
document.getElementById("slice_name").value = slice_name;
}
var add_to_dash = $('input[name=add_to_dash]:checked').val();
if (add_to_dash === 'existing' && $('#save_to_dashboard_id').val() === '') {
showModal({
title: "Error",
body: "You must pick an existing dashboard"
});
return;
} else if (add_to_dash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
showModal({
title: "Error",
body: "Please enter a name for the new dashboard"
});
return;
}
$('#action').val(action);
prepForm();
$("#query").submit();
});
$('#btn_modal_save_goto_dash').click(function () {
document.getElementById("goto_dash").value = 'true';
$('#btn_modal_save').click();

$('#btn_modal_save').on('click', () => saveSlice());

$('#btn_modal_save_goto_dash').click(() => {
document.getElementById('goto_dash').value = 'true';
saveSlice();
});
}
prepSaveDialog();
}

function saveSlice() {
console.log('saveSlice')

var action = $('input[name=rdo_save]:checked').val();
if (action === 'saveas') {
var slice_name = $('input[name=new_slice_name]').val();
if (slice_name === '') {
showModal({
title: "Error",
body: "You must pick a name for the new slice"
});
return;
}
document.getElementById("slice_name").value = slice_name;
}
var add_to_dash = $('input[name=add_to_dash]:checked').val();
if (add_to_dash === 'existing' && $('#save_to_dashboard_id').val() === '') {
showModal({
title: "Error",
body: "You must pick an existing dashboard"
});
return;
} else if (add_to_dash === 'new' && $('input[name=new_dashboard_name]').val() === '') {
showModal({
title: "Error",
body: "Please enter a name for the new dashboard"
});
return;
}
$('#action').val(action);
prepForm();
$("#query").submit();
}

$(document).ready(function () {
initExploreView();

Expand Down
6 changes: 3 additions & 3 deletions caravel/assets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"brace": "^0.7.0",
"brfs": "^1.4.3",
"cal-heatmap": "3.5.4",
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"d3": "^3.5.14",
"d3-cloud": "^1.2.1",
Expand All @@ -66,16 +67,15 @@
"mapbox-gl": "^0.20.0",
"mustache": "^2.2.1",
"nvd3": "1.8.3",
"react": "^0.14.7",
"react": "^15.2.0",
"react-bootstrap": "^0.28.3",
"react-dom": "^0.14.7",
"react-dom": "^0.14.8",
"react-grid-layout": "^0.12.3",
"react-map-gl": "^1.0.0-beta-10",
"react-resizable": "^1.3.3",
"select2": "3.5",
"select2-bootstrap-css": "^1.4.6",
"style-loader": "^0.13.0",
"supercluster": "Pending PR at https://github.com/mapbox/supercluster/pull/12",
"supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
"topojson": "^1.6.22",
"transform-loader": "^0.2.3",
Expand Down
4 changes: 2 additions & 2 deletions caravel/assets/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ var config = {
entry: {
'css-theme': APP_DIR + '/javascripts/css-theme.js',
dashboard: APP_DIR + '/javascripts/dashboard.jsx',
explore: APP_DIR + '/javascripts/explore.js',
explore: APP_DIR + '/javascripts/explore/explore.jsx',
welcome: APP_DIR + '/javascripts/welcome.js',
sql: APP_DIR + '/javascripts/sql.js',
standalone: APP_DIR + '/javascripts/standalone.js',
common: APP_DIR + '/javascripts/common.js'
},
output: {
path: BUILD_DIR,
filename: '[name].entry.js'
filename: '[name].entry.jsx'
},
resolve: {
alias: {
Expand Down
20 changes: 5 additions & 15 deletions caravel/templates/caravel/explore.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,10 @@
<div class="datasource container-fluid">
<form id="query" method="GET" style="display: none;">
<div class="header">
<div class="btn-group query-and-save">
<button type="button" class="btn btn-primary query">
<i class="fa fa-bolt"></i>{{ _("Query") }}
</button>
<button
type="button"
id="btn_save"
class="btn btn-default"
{{ "disabled" if not can_add }}
data-target="#save_modal"
data-toggle="modal">
<i class="fa fa-plus-circle"></i>{{ _("Save") }}
</button>
</div>
<span id="js-query-and-save-btns"
data-can-add="{{ can_add }}"
></span>

<span title="Data Source" data-toggle="tooltip">
<select id="datasource_id" class="select2">
{% for ds in datasources %}
Expand Down Expand Up @@ -319,5 +309,5 @@ <h4 class="modal-title">{{ _("Save a Slice") }}</h4>

{% block tail_js %}
{{ super() }}
<script src="/static/assets/javascripts/dist/explore.entry.js"></script>
<script src="/static/assets/javascripts/dist/explore.entry.jsx"></script>
{% endblock %}