diff --git a/server/public/javascripts/bulma-quickview.min.js b/server/public/javascripts/bulma-quickview.min.js deleted file mode 100644 index c0b753c..0000000 --- a/server/public/javascripts/bulma-quickview.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.bulmaQuickview=t():e.bulmaQuickview=t()}("undefined"!=typeof self?self:this,function(){return function(n){var i={};function r(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}return r.m=n,r.c=i,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),o=n(2),s=Object.assign||function(e){for(var t=1;t=a.length&&(l=!0)):l=!0),l&&(e.once&&(s[t]=null),e.callback(i))});-1!==s.indexOf(null);)s.splice(s.indexOf(null),1)}}]),t}();t.a=r},function(e,t,n){"use strict";t.a={}}]).default}); \ No newline at end of file diff --git a/server/public/javascripts/dataview.js b/server/public/javascripts/dataview.js index 23f9bca..cb8b029 100644 --- a/server/public/javascripts/dataview.js +++ b/server/public/javascripts/dataview.js @@ -24,6 +24,7 @@ var DataView = function (_React$Component) { sort: { date: -1 }, + filtersActive: false, modalActive: false, downloadData: '', downloadType: '' @@ -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); @@ -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 }; }); } }, { @@ -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; @@ -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; @@ -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 }) ); diff --git a/server/public/javascripts/dataviewbar.js b/server/public/javascripts/dataviewbar.js index 76173df..09a2d12 100644 --- a/server/public/javascripts/dataviewbar.js +++ b/server/public/javascripts/dataviewbar.js @@ -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) { @@ -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', @@ -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' }, @@ -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( diff --git a/server/public/javascripts/filterpane.js b/server/public/javascripts/filterpane.js index 62206b3..b4ae4cc 100644 --- a/server/public/javascripts/filterpane.js +++ b/server/public/javascripts/filterpane.js @@ -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' }, @@ -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', diff --git a/server/public/javascripts/react/dataview.jsx b/server/public/javascripts/react/dataview.jsx index 9bb4402..5c24ec8 100644 --- a/server/public/javascripts/react/dataview.jsx +++ b/server/public/javascripts/react/dataview.jsx @@ -11,6 +11,7 @@ class DataView extends React.Component { sort: { date: -1, }, + filtersActive: false, modalActive: false, downloadData: '', downloadType: '', @@ -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); @@ -61,7 +63,7 @@ class DataView extends React.Component { } toggleModal() { - this.setState(state => ({ modalActive: !state.modalActive })); + this.setState(({ modalActive }) => ({ modalActive: !modalActive })); } deleteData() { @@ -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; @@ -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
Error: {error.message}
; @@ -139,8 +144,8 @@ class DataView extends React.Component { return
Loading...
; } return
- - + +
; diff --git a/server/public/javascripts/react/dataviewbar.jsx b/server/public/javascripts/react/dataviewbar.jsx index f3f0287..88bad5a 100644 --- a/server/public/javascripts/react/dataviewbar.jsx +++ b/server/public/javascripts/react/dataviewbar.jsx @@ -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