@plusscommunities/pluss-core-web 1.2.8 → 1.2.9

package/dist/index.cjs.js

@@ -10188,8 +10188,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleColumn", function (key) {
-      var source = _this.props.source;
-
       var columns = ___default['default'].cloneDeep(_this.state.columns);
 
       var column = columns.find(function (c) {
@@ -10205,25 +10203,132 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         var selectedHeaders = columns.filter(function (c) {
           return c.key && c.selected;
         });
-        var selectedheaderKeys = selectedHeaders.map(function (h) {
-          return h.key;
+
+        _this.setState({
+          columns: columns,
+          selectedHeaders: selectedHeaders
+        });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleStartDateFilter", function () {
+      var filterDateStartVisible = _this.state.filterDateStartVisible;
+
+      if (filterDateStartVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateStartVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateStartVisible: true
         });
-        var selectedSource = source.map(function (i) {
-          return ___default['default'].pick(i, selectedheaderKeys);
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleEndDateFilter", function () {
+      var filterDateEndVisible = _this.state.filterDateEndVisible;
+
+      if (filterDateEndVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateEndVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateEndVisible: true
         });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterStartChanged", function (date) {
+      var filterDateEnd = _this.state.filterDateEnd;
+      var start = moment__default['default'](date);
 
+      if (start.isSameOrBefore(filterDateEnd)) {
         _this.setState({
-          columns: columns,
-          selectedHeaders: selectedHeaders,
-          selectedSource: selectedSource
+          filterDateStart: start.startOf('day'),
+          filterDateStartVisible: false
+        });
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterEndChanged", function (date) {
+      var filterDateStart = _this.state.filterDateStart;
+      var end = moment__default['default'](date);
+
+      if (end.isSameOrAfter(filterDateStart)) {
+        _this.setState({
+          filterDateEnd: end.endOf('day'),
+          filterDateEndVisible: false
         });
       }
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getSelectedSource", function () {
+      var source = _this.props.source;
+      var selectedHeaders = _this.state.selectedHeaders;
+      var result = source; // apply timestamp filter
+
+      if (_this.props.timestampFilter) {
+        var _this$state = _this.state,
+            filterDateStart = _this$state.filterDateStart,
+            filterDateEnd = _this$state.filterDateEnd;
+        var filterKey = _this.props.timestampFilter.filterKey;
+        var minDate = filterDateStart.valueOf();
+        var maxDate = filterDateEnd.valueOf();
+        result = ___default['default'].filter(source, function (item) {
+          return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+        });
+      } // map result to columns
+
+
+      var selectedheaderKeys = selectedHeaders.map(function (h) {
+        return h.key;
+      });
+      return result.map(function (i) {
+        return ___default['default'].pick(i, selectedheaderKeys);
+      });
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderTimestampFilter", function () {
+      if (!_this.props.timestampFilter) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+        id: "dateStart",
+        label: "Start Date",
+        alwaysShowLabel: true,
+        placeholder: 'Select start date',
+        value: _this.state.filterDateStart.format('DD/MM/YYYY'),
+        onClick: _this.onToggleStartDateFilter,
+        readOnly: true
+      }), _this.state.filterDateStartVisible ? /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateStart,
+        selectDate: _this.onDateFilterStartChanged
+      }) : null, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+        id: "dateEnd",
+        label: "End Date",
+        alwaysShowLabel: true,
+        placeholder: 'Select end date',
+        value: _this.state.filterDateEnd.format('DD/MM/YYYY'),
+        onClick: _this.onToggleEndDateFilter,
+        readOnly: true
+      }), _this.state.filterDateEndVisible ? /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateEnd,
+        selectDate: _this.onDateFilterEndChanged
+      }) : null);
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderContent", function () {
-      var _this$state = _this.state,
-          saving = _this$state.saving,
-          columns = _this$state.columns;
+      var _this$state2 = _this.state,
+          saving = _this$state2.saving,
+          columns = _this$state2.columns;
 
       if (saving) {
         return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10258,27 +10363,35 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }));
     });
 
-    _this.state = {
+    var state = {
       columns: props.columns,
+      selectedHeaders: props.columns.filter(function (c) {
+        return c.key && c.selected;
+      }),
       selectedSource: [],
       saving: false
     };
+
+    if (props.timestampFilter) {
+      state.filterDateStart = props.timestampFilter.startDate;
+      state.filterDateEnd = props.timestampFilter.endDate;
+    }
+
+    _this.state = state;
     return _this;
   }
 
   _createClass__default['default'](ExportCsvPopup, [{
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          selectedHeaders = _this$state2.selectedHeaders,
-          selectedSource = _this$state2.selectedSource;
+      var selectedHeaders = this.state.selectedHeaders;
       var filename = this.props.filename;
       var buttons = [{
         type: 'primary',
         isActive: this.canSave(),
         text: /*#__PURE__*/React__default['default'].createElement(reactCsv.CSVLink, {
           headers: selectedHeaders,
-          data: selectedSource,
+          data: this.getSelectedSource(),
           style: {
             textDecoration: 'none',
             color: '#fff'
@@ -10294,7 +10407,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }];
       return /*#__PURE__*/React__default['default'].createElement(Popup, {
         title: "Confirm Export",
-        subtitle: "Select which columns to include in the export",
         boxClasses: "flex flex-column",
         innerClasses: "flex flex-column fillSpace flex-1",
         minWidth: 500,
@@ -10304,7 +10416,9 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         hasPadding: true,
         onClose: this.onClose,
         buttons: buttons
-      }, this.renderContent());
+      }, this.renderTimestampFilter(), /*#__PURE__*/React__default['default'].createElement(Text, {
+        type: "bodyLarge"
+      }, "Select which columns to include in the export"), this.renderContent());
     }
   }]);
 

package/dist/index.esm.js

@@ -10161,8 +10161,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onToggleColumn", function (key) {
-      var source = _this.props.source;
-
       var columns = _.cloneDeep(_this.state.columns);
 
       var column = columns.find(function (c) {
@@ -10178,25 +10176,132 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         var selectedHeaders = columns.filter(function (c) {
           return c.key && c.selected;
         });
-        var selectedheaderKeys = selectedHeaders.map(function (h) {
-          return h.key;
+
+        _this.setState({
+          columns: columns,
+          selectedHeaders: selectedHeaders
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToggleStartDateFilter", function () {
+      var filterDateStartVisible = _this.state.filterDateStartVisible;
+
+      if (filterDateStartVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateStartVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateStartVisible: true
         });
-        var selectedSource = source.map(function (i) {
-          return _.pick(i, selectedheaderKeys);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onToggleEndDateFilter", function () {
+      var filterDateEndVisible = _this.state.filterDateEndVisible;
+
+      if (filterDateEndVisible) {
+        setTimeout(function () {
+          return _this.setState({
+            filterDateEndVisible: false
+          });
+        }, 200);
+      } else {
+        _this.setState({
+          filterDateEndVisible: true
         });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDateFilterStartChanged", function (date) {
+      var filterDateEnd = _this.state.filterDateEnd;
+      var start = moment(date);
 
+      if (start.isSameOrBefore(filterDateEnd)) {
         _this.setState({
-          columns: columns,
-          selectedHeaders: selectedHeaders,
-          selectedSource: selectedSource
+          filterDateStart: start.startOf('day'),
+          filterDateStartVisible: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onDateFilterEndChanged", function (date) {
+      var filterDateStart = _this.state.filterDateStart;
+      var end = moment(date);
+
+      if (end.isSameOrAfter(filterDateStart)) {
+        _this.setState({
+          filterDateEnd: end.endOf('day'),
+          filterDateEndVisible: false
         });
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getSelectedSource", function () {
+      var source = _this.props.source;
+      var selectedHeaders = _this.state.selectedHeaders;
+      var result = source; // apply timestamp filter
+
+      if (_this.props.timestampFilter) {
+        var _this$state = _this.state,
+            filterDateStart = _this$state.filterDateStart,
+            filterDateEnd = _this$state.filterDateEnd;
+        var filterKey = _this.props.timestampFilter.filterKey;
+        var minDate = filterDateStart.valueOf();
+        var maxDate = filterDateEnd.valueOf();
+        result = _.filter(source, function (item) {
+          return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+        });
+      } // map result to columns
+
+
+      var selectedheaderKeys = selectedHeaders.map(function (h) {
+        return h.key;
+      });
+      return result.map(function (i) {
+        return _.pick(i, selectedheaderKeys);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTimestampFilter", function () {
+      if (!_this.props.timestampFilter) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GenericInput, {
+        id: "dateStart",
+        label: "Start Date",
+        alwaysShowLabel: true,
+        placeholder: 'Select start date',
+        value: _this.state.filterDateStart.format('DD/MM/YYYY'),
+        onClick: _this.onToggleStartDateFilter,
+        readOnly: true
+      }), _this.state.filterDateStartVisible ? /*#__PURE__*/React.createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateStart,
+        selectDate: _this.onDateFilterStartChanged
+      }) : null, /*#__PURE__*/React.createElement(GenericInput, {
+        id: "dateEnd",
+        label: "End Date",
+        alwaysShowLabel: true,
+        placeholder: 'Select end date',
+        value: _this.state.filterDateEnd.format('DD/MM/YYYY'),
+        onClick: _this.onToggleEndDateFilter,
+        readOnly: true
+      }), _this.state.filterDateEndVisible ? /*#__PURE__*/React.createElement(DatePicker, {
+        hideTop: true,
+        selectedDate: _this.state.filterDateEnd,
+        selectDate: _this.onDateFilterEndChanged
+      }) : null);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderContent", function () {
-      var _this$state = _this.state,
-          saving = _this$state.saving,
-          columns = _this$state.columns;
+      var _this$state2 = _this.state,
+          saving = _this$state2.saving,
+          columns = _this$state2.columns;
 
       if (saving) {
         return /*#__PURE__*/React.createElement("div", {
@@ -10231,27 +10336,35 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }));
     });
 
-    _this.state = {
+    var state = {
       columns: props.columns,
+      selectedHeaders: props.columns.filter(function (c) {
+        return c.key && c.selected;
+      }),
       selectedSource: [],
       saving: false
     };
+
+    if (props.timestampFilter) {
+      state.filterDateStart = props.timestampFilter.startDate;
+      state.filterDateEnd = props.timestampFilter.endDate;
+    }
+
+    _this.state = state;
     return _this;
   }
 
   _createClass(ExportCsvPopup, [{
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          selectedHeaders = _this$state2.selectedHeaders,
-          selectedSource = _this$state2.selectedSource;
+      var selectedHeaders = this.state.selectedHeaders;
       var filename = this.props.filename;
       var buttons = [{
         type: 'primary',
         isActive: this.canSave(),
         text: /*#__PURE__*/React.createElement(CSVLink, {
           headers: selectedHeaders,
-          data: selectedSource,
+          data: this.getSelectedSource(),
           style: {
             textDecoration: 'none',
             color: '#fff'
@@ -10267,7 +10380,6 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
       }];
       return /*#__PURE__*/React.createElement(Popup, {
         title: "Confirm Export",
-        subtitle: "Select which columns to include in the export",
         boxClasses: "flex flex-column",
         innerClasses: "flex flex-column fillSpace flex-1",
         minWidth: 500,
@@ -10277,7 +10389,9 @@ var ExportCsvPopup = /*#__PURE__*/function (_Component) {
         hasPadding: true,
         onClose: this.onClose,
         buttons: buttons
-      }, this.renderContent());
+      }, this.renderTimestampFilter(), /*#__PURE__*/React.createElement(Text, {
+        type: "bodyLarge"
+      }, "Select which columns to include in the export"), this.renderContent());
     }
   }]);
 

package/dist/index.umd.js

@@ -10163,8 +10163,6 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleColumn", function (key) {
-        var source = _this.props.source;
-
         var columns = ___default['default'].cloneDeep(_this.state.columns);
 
         var column = columns.find(function (c) {
@@ -10180,25 +10178,132 @@
           var selectedHeaders = columns.filter(function (c) {
             return c.key && c.selected;
           });
-          var selectedheaderKeys = selectedHeaders.map(function (h) {
-            return h.key;
+
+          _this.setState({
+            columns: columns,
+            selectedHeaders: selectedHeaders
+          });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleStartDateFilter", function () {
+        var filterDateStartVisible = _this.state.filterDateStartVisible;
+
+        if (filterDateStartVisible) {
+          setTimeout(function () {
+            return _this.setState({
+              filterDateStartVisible: false
+            });
+          }, 200);
+        } else {
+          _this.setState({
+            filterDateStartVisible: true
           });
-          var selectedSource = source.map(function (i) {
-            return ___default['default'].pick(i, selectedheaderKeys);
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleEndDateFilter", function () {
+        var filterDateEndVisible = _this.state.filterDateEndVisible;
+
+        if (filterDateEndVisible) {
+          setTimeout(function () {
+            return _this.setState({
+              filterDateEndVisible: false
+            });
+          }, 200);
+        } else {
+          _this.setState({
+            filterDateEndVisible: true
           });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterStartChanged", function (date) {
+        var filterDateEnd = _this.state.filterDateEnd;
+        var start = moment__default['default'](date);
 
+        if (start.isSameOrBefore(filterDateEnd)) {
           _this.setState({
-            columns: columns,
-            selectedHeaders: selectedHeaders,
-            selectedSource: selectedSource
+            filterDateStart: start.startOf('day'),
+            filterDateStartVisible: false
+          });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDateFilterEndChanged", function (date) {
+        var filterDateStart = _this.state.filterDateStart;
+        var end = moment__default['default'](date);
+
+        if (end.isSameOrAfter(filterDateStart)) {
+          _this.setState({
+            filterDateEnd: end.endOf('day'),
+            filterDateEndVisible: false
           });
         }
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getSelectedSource", function () {
+        var source = _this.props.source;
+        var selectedHeaders = _this.state.selectedHeaders;
+        var result = source; // apply timestamp filter
+
+        if (_this.props.timestampFilter) {
+          var _this$state = _this.state,
+              filterDateStart = _this$state.filterDateStart,
+              filterDateEnd = _this$state.filterDateEnd;
+          var filterKey = _this.props.timestampFilter.filterKey;
+          var minDate = filterDateStart.valueOf();
+          var maxDate = filterDateEnd.valueOf();
+          result = ___default['default'].filter(source, function (item) {
+            return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+          });
+        } // map result to columns
+
+
+        var selectedheaderKeys = selectedHeaders.map(function (h) {
+          return h.key;
+        });
+        return result.map(function (i) {
+          return ___default['default'].pick(i, selectedheaderKeys);
+        });
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderTimestampFilter", function () {
+        if (!_this.props.timestampFilter) {
+          return null;
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+          id: "dateStart",
+          label: "Start Date",
+          alwaysShowLabel: true,
+          placeholder: 'Select start date',
+          value: _this.state.filterDateStart.format('DD/MM/YYYY'),
+          onClick: _this.onToggleStartDateFilter,
+          readOnly: true
+        }), _this.state.filterDateStartVisible ? /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+          hideTop: true,
+          selectedDate: _this.state.filterDateStart,
+          selectDate: _this.onDateFilterStartChanged
+        }) : null, /*#__PURE__*/React__default['default'].createElement(GenericInput, {
+          id: "dateEnd",
+          label: "End Date",
+          alwaysShowLabel: true,
+          placeholder: 'Select end date',
+          value: _this.state.filterDateEnd.format('DD/MM/YYYY'),
+          onClick: _this.onToggleEndDateFilter,
+          readOnly: true
+        }), _this.state.filterDateEndVisible ? /*#__PURE__*/React__default['default'].createElement(DatePicker, {
+          hideTop: true,
+          selectedDate: _this.state.filterDateEnd,
+          selectDate: _this.onDateFilterEndChanged
+        }) : null);
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderContent", function () {
-        var _this$state = _this.state,
-            saving = _this$state.saving,
-            columns = _this$state.columns;
+        var _this$state2 = _this.state,
+            saving = _this$state2.saving,
+            columns = _this$state2.columns;
 
         if (saving) {
           return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -10233,27 +10338,35 @@
         }));
       });
 
-      _this.state = {
+      var state = {
         columns: props.columns,
+        selectedHeaders: props.columns.filter(function (c) {
+          return c.key && c.selected;
+        }),
         selectedSource: [],
         saving: false
       };
+
+      if (props.timestampFilter) {
+        state.filterDateStart = props.timestampFilter.startDate;
+        state.filterDateEnd = props.timestampFilter.endDate;
+      }
+
+      _this.state = state;
       return _this;
     }
 
     _createClass__default['default'](ExportCsvPopup, [{
       key: "render",
       value: function render() {
-        var _this$state2 = this.state,
-            selectedHeaders = _this$state2.selectedHeaders,
-            selectedSource = _this$state2.selectedSource;
+        var selectedHeaders = this.state.selectedHeaders;
         var filename = this.props.filename;
         var buttons = [{
           type: 'primary',
           isActive: this.canSave(),
           text: /*#__PURE__*/React__default['default'].createElement(reactCsv.CSVLink, {
             headers: selectedHeaders,
-            data: selectedSource,
+            data: this.getSelectedSource(),
             style: {
               textDecoration: 'none',
               color: '#fff'
@@ -10269,7 +10382,6 @@
         }];
         return /*#__PURE__*/React__default['default'].createElement(Popup, {
           title: "Confirm Export",
-          subtitle: "Select which columns to include in the export",
           boxClasses: "flex flex-column",
           innerClasses: "flex flex-column fillSpace flex-1",
           minWidth: 500,
@@ -10279,7 +10391,9 @@
           hasPadding: true,
           onClose: this.onClose,
           buttons: buttons
-        }, this.renderContent());
+        }, this.renderTimestampFilter(), /*#__PURE__*/React__default['default'].createElement(Text, {
+          type: "bodyLarge"
+        }, "Select which columns to include in the export"), this.renderContent());
       }
     }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-web",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Core extension package for Pluss Communities platform",
   "main": "dist/index.cjs.js",
   "scripts": {

package/src/components/ExportCsvPopup.js

@@ -1,19 +1,31 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
+import moment from 'moment';
 import FontAwesome from 'react-fontawesome';
 import { CSVLink } from 'react-csv';
 import { Popup } from './Popup';
 import { CheckBox } from './CheckBox';
+import { GenericInput } from './GenericInput';
+import { DatePicker } from './DatePicker';
+import { Text } from './Text';
 
 class ExportCsvPopup extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
+    const state = {
       columns: props.columns,
+      selectedHeaders: props.columns.filter((c) => c.key && c.selected),
       selectedSource: [],
       saving: false,
     };
+
+    if (props.timestampFilter) {
+      state.filterDateStart = props.timestampFilter.startDate;
+      state.filterDateEnd = props.timestampFilter.endDate;
+    }
+
+    this.state = state;
   }
 
   canSave = () => {
@@ -29,19 +41,106 @@ class ExportCsvPopup extends Component {
   };
 
   onToggleColumn = (key) => {
-    const { source } = this.props;
     const columns = _.cloneDeep(this.state.columns);
     const column = columns.find((c) => c.key === key);
     if (column) {
       column.selected = !column.selected;
       if (!column.key) columns.map((c) => (c.selected = column.selected)); // Toggle all
       const selectedHeaders = columns.filter((c) => c.key && c.selected);
-      const selectedheaderKeys = selectedHeaders.map((h) => h.key);
-      const selectedSource = source.map((i) => _.pick(i, selectedheaderKeys));
-      this.setState({ columns, selectedHeaders, selectedSource });
+      this.setState({ columns, selectedHeaders });
     }
   };
 
+  onToggleStartDateFilter = () => {
+    const { filterDateStartVisible } = this.state;
+    if (filterDateStartVisible) {
+      setTimeout(() => this.setState({ filterDateStartVisible: false }), 200);
+    } else {
+      this.setState({ filterDateStartVisible: true });
+    }
+  };
+
+  onToggleEndDateFilter = () => {
+    const { filterDateEndVisible } = this.state;
+    if (filterDateEndVisible) {
+      setTimeout(() => this.setState({ filterDateEndVisible: false }), 200);
+    } else {
+      this.setState({ filterDateEndVisible: true });
+    }
+  };
+
+  onDateFilterStartChanged = (date) => {
+    const { filterDateEnd } = this.state;
+    const start = moment(date);
+    if (start.isSameOrBefore(filterDateEnd)) {
+      this.setState({ filterDateStart: start.startOf('day'), filterDateStartVisible: false });
+    }
+  };
+
+  onDateFilterEndChanged = (date) => {
+    const { filterDateStart } = this.state;
+    const end = moment(date);
+    if (end.isSameOrAfter(filterDateStart)) {
+      this.setState({ filterDateEnd: end.endOf('day'), filterDateEndVisible: false });
+    }
+  };
+
+  getSelectedSource = () => {
+    const { source } = this.props;
+    const { selectedHeaders } = this.state;
+
+    let result = source;
+
+    // apply timestamp filter
+    if (this.props.timestampFilter) {
+      const { filterDateStart, filterDateEnd } = this.state;
+      const { filterKey } = this.props.timestampFilter;
+      const minDate = filterDateStart.valueOf();
+      const maxDate = filterDateEnd.valueOf();
+      result = _.filter(source, (item) => {
+        return item[filterKey] >= minDate && item[filterKey] <= maxDate;
+      });
+    }
+
+    // map result to columns
+    const selectedheaderKeys = selectedHeaders.map((h) => h.key);
+    return result.map((i) => _.pick(i, selectedheaderKeys));
+  };
+
+  renderTimestampFilter = () => {
+    if (!this.props.timestampFilter) {
+      return null;
+    }
+    return (
+      <div>
+        <GenericInput
+          id="dateStart"
+          label="Start Date"
+          alwaysShowLabel
+          placeholder={'Select start date'}
+          value={this.state.filterDateStart.format('DD/MM/YYYY')}
+          onClick={this.onToggleStartDateFilter}
+          readOnly
+        />
+        {this.state.filterDateStartVisible ? (
+          <DatePicker hideTop selectedDate={this.state.filterDateStart} selectDate={this.onDateFilterStartChanged} />
+        ) : null}
+        <GenericInput
+          id="dateEnd"
+          label="End Date"
+          alwaysShowLabel
+          placeholder={'Select end date'}
+          value={this.state.filterDateEnd.format('DD/MM/YYYY')}
+          onClick={this.onToggleEndDateFilter}
+          readOnly
+        />
+        {this.state.filterDateEndVisible ? (
+          <DatePicker hideTop selectedDate={this.state.filterDateEnd} selectDate={this.onDateFilterEndChanged} />
+        ) : null}
+      </div>
+    );
+  };
+
   renderContent = () => {
     const { saving, columns } = this.state;
 
@@ -72,7 +171,7 @@ class ExportCsvPopup extends Component {
   };
 
   render() {
-    const { selectedHeaders, selectedSource } = this.state;
+    const { selectedHeaders } = this.state;
     const { filename } = this.props;
 
     const buttons = [
@@ -82,7 +181,7 @@ class ExportCsvPopup extends Component {
         text: (
           <CSVLink
             headers={selectedHeaders}
-            data={selectedSource}
+            data={this.getSelectedSource()}
             style={{ textDecoration: 'none', color: '#fff' }}
             filename={filename || 'export.csv'}
             onClick={this.onConfirm}
@@ -102,7 +201,6 @@ class ExportCsvPopup extends Component {
     return (
       <Popup
         title="Confirm Export"
-        subtitle="Select which columns to include in the export"
         boxClasses="flex flex-column"
         innerClasses="flex flex-column fillSpace flex-1"
         minWidth={500}
@@ -113,6 +211,8 @@ class ExportCsvPopup extends Component {
         onClose={this.onClose}
         buttons={buttons}
       >
+        {this.renderTimestampFilter()}
+        <Text type="bodyLarge">Select which columns to include in the export</Text>
         {this.renderContent()}
       </Popup>
     );