Skip to content

Commit

Permalink
Merge pull request #14 from QuantumStack/dev
Browse files Browse the repository at this point in the history 
Version 1.3.1
  • Loading branch information
@fishdev
fishdev authored Feb 3, 2019
2 parents 8165842 + 386771a commit bcf0bc8
Show file tree
Hide file tree
Showing 12 changed files with 85 additions and 51 deletions.
1 change: 0 additions & 1 deletion server/public/javascripts/bulma-quickview.min.js
View file

This file was deleted.

21 changes: 16 additions & 5 deletions server/public/javascripts/dataview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ var DataView = function (_React$Component) {
sort: {
date: -1
},
filtersActive: false,
modalActive: false,
downloadData: '',
downloadType: ''
Expand All @@ -32,6 +33,7 @@ var DataView = function (_React$Component) {
_this.downloadData = _this.downloadData.bind(_this);
_this.toggleModal = _this.toggleModal.bind(_this);
_this.deleteData = _this.deleteData.bind(_this);
_this.toggleFilters = _this.toggleFilters.bind(_this);
_this.updateFilters = _this.updateFilters.bind(_this);
_this.updateSort = _this.updateSort.bind(_this);
_this.assignLab = _this.assignLab.bind(_this);
Expand Down Expand Up @@ -91,8 +93,9 @@ var DataView = function (_React$Component) {
}, {
key: 'toggleModal',
value: function toggleModal() {
this.setState(function (state) {
return { modalActive: !state.modalActive };
this.setState(function (_ref) {
var modalActive = _ref.modalActive;
return { modalActive: !modalActive };
});
}
}, {
Expand All @@ -110,10 +113,17 @@ var DataView = function (_React$Component) {
return _this4.setState({ error: err });
});
}
}, {
key: 'toggleFilters',
value: function toggleFilters() {
this.setState(function (_ref2) {
var filtersActive = _ref2.filtersActive;
return { filtersActive: !filtersActive };
});
}
}, {
key: 'updateFilters',
value: function updateFilters(e) {
console.log(e);
if (['all', 'flags', 'good'].includes(e)) {
this.setState(function (state) {
var filters = state.filters;
Expand Down Expand Up @@ -187,6 +197,7 @@ var DataView = function (_React$Component) {
entries = _state.entries,
filters = _state.filters,
sort = _state.sort,
filtersActive = _state.filtersActive,
modalActive = _state.modalActive,
downloadData = _state.downloadData,
downloadType = _state.downloadType;
Expand All @@ -209,8 +220,8 @@ var DataView = function (_React$Component) {
return React.createElement(
'div',
null,
React.createElement(FilterPane, { filters: filters, updateFilters: this.updateFilters, getData: this.getData }),
React.createElement(DataViewBar, { entriesCount: entries.length, filters: filters, updateFilters: this.updateFilters, getData: this.getData, downloadData: this.downloadData, deleteData: this.deleteData }),
React.createElement(FilterPane, { filters: filters, filtersActive: filtersActive, toggleFilters: this.toggleFilters, updateFilters: this.updateFilters, getData: this.getData }),
React.createElement(DataViewBar, { entriesCount: entries.length, filters: filters, toggleFilters: this.toggleFilters, updateFilters: this.updateFilters, getData: this.getData, downloadData: this.downloadData, deleteData: this.deleteData }),
React.createElement(DataDownload, { isActive: modalActive, toggleModal: this.toggleModal, data: downloadData, type: downloadType }),
React.createElement(DataTable, { sort: sort, entries: entries, updateSort: this.updateSort, assignLab: this.assignLab })
);
Expand Down
41 changes: 24 additions & 17 deletions server/public/javascripts/dataviewbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,21 @@ var DataViewBar = function (_React$Component) {
var _this = _possibleConstructorReturn(this, (DataViewBar.__proto__ || Object.getPrototypeOf(DataViewBar)).call(this, props));

_this.state = {
deleteConfirmation: false,
deleteActive: false
};
_this.onDeleteConfirmationChange = _this.onDeleteConfirmationChange.bind(_this);
_this.toggleDelete = _this.toggleDelete.bind(_this);
_this.toggleThenDelete = _this.toggleThenDelete.bind(_this);
return _this;
}

_createClass(DataViewBar, [{
key: 'onDeleteConfirmationChange',
value: function onDeleteConfirmationChange(e) {
this.setState({ deleteConfirmation: e.target.checked });
}
}, {
key: 'toggleDelete',
value: function toggleDelete() {
this.setState(function (_ref) {
Expand All @@ -33,23 +40,24 @@ var DataViewBar = function (_React$Component) {
}, {
key: 'toggleThenDelete',
value: function toggleThenDelete() {
this.toggleDelete();
this.props.deleteData();
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
bulmaQuickview.attach();
if (this.state.deleteConfirmation) {
this.toggleDelete();
this.setState({ deleteConfirmation: false });
this.props.deleteData();
}
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
filters = _props.filters,
toggleFilters = _props.toggleFilters,
updateFilters = _props.updateFilters,
getData = _props.getData,
downloadData = _props.downloadData;
var deleteActive = this.state.deleteActive;
var _state = this.state,
deleteConfirmation = _state.deleteConfirmation,
deleteActive = _state.deleteActive;

return React.createElement(
'nav',
Expand Down Expand Up @@ -191,7 +199,7 @@ var DataViewBar = function (_React$Component) {
{ className: 'level-item' },
React.createElement(
'a',
{ className: 'button is-small is-link', 'data-show': 'quickview', 'data-target': 'quickviewDefault' },
{ className: 'button is-small is-link', onClick: toggleFilters },
React.createElement(
'span',
{ className: 'icon' },
Expand Down Expand Up @@ -234,15 +242,14 @@ var DataViewBar = function (_React$Component) {
'div',
{ className: 'dropdown-item' },
React.createElement(
'p',
null,
'Are you sure? You will ',
'div',
{ className: 'field' },
React.createElement(
'strong',
null,
'never'
),
' be able to recover this data.'
'label',
{ className: 'checkbox' },
React.createElement('input', { type: 'checkbox', checked: deleteConfirmation, onChange: this.onDeleteConfirmationChange }),
'\xA0 I\'m sure about this'
)
)
),
React.createElement(
Expand Down
6 changes: 4 additions & 2 deletions server/public/javascripts/filterpane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,14 @@ var FilterPane = function (_React$Component) {
value: function render() {
var _props = this.props,
filters = _props.filters,
filtersActive = _props.filtersActive,
toggleFilters = _props.toggleFilters,
updateFilters = _props.updateFilters,
getData = _props.getData;

return React.createElement(
'div',
{ id: 'quickviewDefault', className: 'quickview' },
{ className: 'quickview ' + (filtersActive ? 'is-active' : '') },
React.createElement(
'header',
{ className: 'quickview-header' },
Expand All @@ -55,7 +57,7 @@ var FilterPane = function (_React$Component) {
React.createElement('i', { className: 'fas fa-filter' })
)
),
React.createElement('span', { className: 'delete', 'data-dismiss': 'quickview' })
React.createElement('span', { className: 'delete', onClick: toggleFilters })
),
React.createElement(
'div',
Expand Down
15 changes: 10 additions & 5 deletions server/public/javascripts/react/dataview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class DataView extends React.Component {
sort: {
date: -1,
},
filtersActive: false,
modalActive: false,
downloadData: '',
downloadType: '',
Expand All @@ -19,6 +20,7 @@ class DataView extends React.Component {
this.downloadData = this.downloadData.bind(this);
this.toggleModal = this.toggleModal.bind(this);
this.deleteData = this.deleteData.bind(this);
this.toggleFilters = this.toggleFilters.bind(this);
this.updateFilters = this.updateFilters.bind(this);
this.updateSort = this.updateSort.bind(this);
this.assignLab = this.assignLab.bind(this);
Expand Down Expand Up @@ -61,7 +63,7 @@ class DataView extends React.Component {
}

toggleModal() {
this.setState(state => ({ modalActive: !state.modalActive }));
this.setState(({ modalActive }) => ({ modalActive: !modalActive }));
}

deleteData() {
Expand All @@ -72,8 +74,11 @@ class DataView extends React.Component {
}), err => this.setState({ error: err }));
}

toggleFilters() {
this.setState(({ filtersActive }) => ({ filtersActive: !filtersActive }));
}

updateFilters(e) {
console.log(e);
if (['all', 'flags', 'good'].includes(e)) {
this.setState((state) => {
const { filters } = state;
Expand Down Expand Up @@ -130,7 +135,7 @@ class DataView extends React.Component {

render() {
const {
error, isLoaded, entries, filters, sort, modalActive, downloadData, downloadType,
error, isLoaded, entries, filters, sort, filtersActive, modalActive, downloadData, downloadType,
} = this.state;
if (error) {
return <div>Error: {error.message}</div>;
Expand All @@ -139,8 +144,8 @@ class DataView extends React.Component {
return <div className='has-text-centered'>Loading...</div>;
}
return <div>
<FilterPane filters={filters} updateFilters={this.updateFilters} getData={this.getData} />
<DataViewBar entriesCount={entries.length} filters={filters} updateFilters={this.updateFilters} getData={this.getData} downloadData={this.downloadData} deleteData={this.deleteData} />
<FilterPane filters={filters} filtersActive={filtersActive} toggleFilters={this.toggleFilters} updateFilters={this.updateFilters} getData={this.getData} />
<DataViewBar entriesCount={entries.length} filters={filters} toggleFilters={this.toggleFilters} updateFilters={this.updateFilters} getData={this.getData} downloadData={this.downloadData} deleteData={this.deleteData} />
<DataDownload isActive={modalActive} toggleModal={this.toggleModal} data={downloadData} type={downloadType} />
<DataTable sort={sort} entries={entries} updateSort={this.updateSort} assignLab={this.assignLab} />
</div>;
Expand Down
31 changes: 21 additions & 10 deletions server/public/javascripts/react/dataviewbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,35 @@ class DataViewBar extends React.Component {
constructor(props) {
super(props);
this.state = {
deleteConfirmation: false,
deleteActive: false,
};
this.onDeleteConfirmationChange = this.onDeleteConfirmationChange.bind(this);
this.toggleDelete = this.toggleDelete.bind(this);
this.toggleThenDelete = this.toggleThenDelete.bind(this);
}

onDeleteConfirmationChange(e) {
this.setState({ deleteConfirmation: e.target.checked });
}

toggleDelete() {
this.setState(({ deleteActive }) => ({ deleteActive: !deleteActive }));
}

toggleThenDelete() {
this.toggleDelete();
this.props.deleteData();
}

componentDidMount() {
bulmaQuickview.attach();
if (this.state.deleteConfirmation) {
this.toggleDelete();
this.setState({ deleteConfirmation: false });
this.props.deleteData();
}
}

render() {
const {
filters, updateFilters, getData, downloadData,
filters, toggleFilters, updateFilters, getData, downloadData,
} = this.props;
const { deleteActive } = this.state;
const { deleteConfirmation, deleteActive } = this.state;
return <nav className='level'>
<div className='level-left'>
<div className='level-item'>
Expand Down Expand Up @@ -85,7 +90,7 @@ class DataViewBar extends React.Component {
}
</p>
<p className='level-item'>
<a className='button is-small is-link' data-show='quickview' data-target='quickviewDefault'>
<a className='button is-small is-link' onClick={toggleFilters}>
<span className='icon'>
<i className='fa fa-filter'></i>
</span>
Expand All @@ -103,7 +108,13 @@ class DataViewBar extends React.Component {
<div className='dropdown-menu' role='menu'>
<div className='dropdown-content'>
<div className='dropdown-item'>
<p>Are you sure? You will <strong>never</strong> be able to recover this data.</p>
<div className='field'>
<label className='checkbox'>
<input type='checkbox' checked={deleteConfirmation} onChange={this.onDeleteConfirmationChange} />
&nbsp;
I'm sure about this
</label>
</div>
</div>
<a className='dropdown-item has-text-danger' onClick={this.toggleThenDelete}>
<span className='icon'>
Expand Down
6 changes: 3 additions & 3 deletions server/public/javascripts/react/filterpane.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@ class FilterPane extends React.Component {
}

render() {
const { filters, updateFilters, getData } = this.props;
return <div id='quickviewDefault' className='quickview'>
const { filters, filtersActive, toggleFilters, updateFilters, getData } = this.props;
return <div className={`quickview ${filtersActive ? 'is-active' : ''}`}>
<header className='quickview-header'>
<p className='title'>
Filter Data
<span className='icon'>
<i className='fas fa-filter'></i>
</span>
</p>
<span className='delete' data-dismiss='quickview'></span>
<span className='delete' onClick={toggleFilters}></span>
</header>

<div className='quickview-body'>
Expand Down
Loading

0 comments on commit bcf0bc8

Please sign in to comment.