diff --git a/public/js/databases.js b/public/js/databases.js
index d83b7b87..a5d75886 100644
--- a/public/js/databases.js
+++ b/public/js/databases.js
@@ -6,20 +6,11 @@ export class Databases extends Component {
super(props);
this.state = { type: '' };
this.preSelectedDbs = this.props.preSelectedDbs;
- this.databases = this.databases.bind(this);
- this.nselected = this.nselected.bind(this);
- this.categories = this.categories.bind(this);
- this.handleClick = this.handleClick.bind(this);
- this.handleToggle = this.handleToggle.bind(this);
- this.renderDatabases = this.renderDatabases.bind(this);
- this.renderDatabase = this.renderDatabase.bind(this);
+ this.updateDatabaseType = this.updateDatabaseType.bind(this);
+ this.getCategories = this.getCategories.bind(this);
}
- componentDidUpdate() {
- if (this.databases() && this.databases().length === 1) {
- $('.databases').find('input').prop('checked', true);
- this.handleClick(this.databases()[0]);
- }
+ componentDidUpdate() {
if (this.preSelectedDbs) {
var selectors = this.preSelectedDbs.map((db) => `input[value=${db.id}]`);
$(selectors.join(',')).prop('checked', true);
@@ -28,8 +19,58 @@ export class Databases extends Component {
}
this.props.onDatabaseTypeChanged(this.state.type);
}
- databases(category) {
- var databases = this.props.databases;
+
+ getCategories() {
+ return _.uniq(_.map(this.props.databases, _.iteratee('type'))).sort();
+ }
+
+ updateDatabaseType (type) {
+ if (type != this.state.type) this.setState({ type });
+
+ }
+
+ render() {
+ return (
+
+ {_.map(this.getCategories(), (category) =>(
+
+ ))}
+
+ );
+ }
+}
+
+export class DatabaseCategory extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { allSelected: false, selectedDbs: [] };
+ this.databases = this.props.databases;
+ this.category = this.props.category;
+ this.getCategories = this.props.getCategories;
+ this.getDatabases = this.getDatabases.bind(this);
+ this.nselected = this.nselected.bind(this);
+ this.handleClick = this.handleClick.bind(this);
+ this.handleToggle = this.handleToggle.bind(this);
+ this.renderPanelHeading = this.renderPanelHeading.bind(this);
+ this.renderDatabase = this.renderDatabase.bind(this);
+
+ }
+ componentDidUpdate() {
+ // SELECT DATABASE by default if only one is present
+ if (this.getDatabases() && this.getDatabases().length === 1) {
+ $('.databases').find('input').prop('checked', true);
+ this.handleClick(this.getDatabases()[0]);
+ }
+ }
+ getDatabases(category) {
+ var databases = this.databases;
if (category) {
databases = _.select(databases, (database) => database.type === category);
}
@@ -41,67 +82,96 @@ export class Databases extends Component {
return $('input[name="databases[]"]:checked').length;
}
- categories() {
- return _.uniq(_.map(this.props.databases, _.iteratee('type'))).sort();
- }
+ handleClick(checked, database, category) {
+ const getSelectedDbs = (currentState) =>
+ checked
+ ? currentState.selectedDbs.concat([database.id])
+ : currentState.selectedDbs.filter((db) => db !== database.id);
- handleClick(database) {
+ this.setState(
+ (prevState) => ({
+ selectedDbs: getSelectedDbs(prevState),
+ allSelected:
+ getSelectedDbs(prevState).length === this.getDatabases(category).length,
+ })
+ );
var type = this.nselected() ? database.type : '';
- if (type != this.state.type) this.setState({ type: type });
+ this.props.updateDatabaseType(type);
}
- handleToggle(toggleState, type) {
- switch (toggleState) {
- case '[Select all]':
- $(`.${type} .database input:not(:checked)`).click();
- break;
- case '[Deselect all]':
- $(`.${type} .database input:checked`).click();
- break;
- }
- this.forceUpdate();
+ handleToggle(type) {
+ this.state.allSelected
+ ? $(`.${type} .database input:checked`).click()
+ : $(`.${type} .database input:not(:checked)`).click();
}
- renderDatabases(category) {
- // Panel name and column width.
- var panelTitle = category[0].toUpperCase() + category.substring(1).toLowerCase() + ' databases';
- var columnClass = this.categories().length === 1 ? 'col-md-12' : 'col-md-6';
+ renderDatabase(database){
+ var disabled = this.props.type && this.props.type !== database.type;
+
+ return (
+
+ );
+ }
+
+ renderPanelHeading(){
+ // Panel name and column width.
+ var panelTitle =
+ this.category[0].toUpperCase() +
+ this.category.substring(1).toLowerCase() +
+ ' databases';
// Toggle button.
- var toggleState = '[Select all]';
+ var toggleState =
+ this.state.allSelected ? '[Deselect all]' : '[Select all]';
var toggleClass = 'btn-link';
- var toggleShown = this.databases(category).length > 1;
- var toggleDisabled = this.state.type && this.state.type !== category;
+ var toggleShown = this.getDatabases(this.category).length > 1;
+ var toggleDisabled = this.props.type && this.props.type !== this.category;
if (toggleShown && toggleDisabled) toggleClass += ' disabled';
if (!toggleShown) toggleClass += ' hidden';
- if (this.nselected() === this.databases(category).length) {
- toggleState = '[Deselect all]';
- }
+ return (
+
+
{panelTitle}
+
+ );
+ }
+
+ render() {
+ var columnClass = this.getCategories().length === 1 ? 'col-md-12' : 'col-md-6';
// JSX.
return (
-
+
-
-
{panelTitle}
-
-
-