diff --git a/src/components/NotificationTables/index.js b/src/components/NotificationTables/index.js
new file mode 100644
index 0000000..e8c31a0
--- /dev/null
+++ b/src/components/NotificationTables/index.js
@@ -0,0 +1,429 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import queryString from 'query-string';
+import { getCookie } from '../../utils/cookie';
+
+import _ from 'lodash';
+import {
+ Table,
+ Button,
+ Row,
+ Col,
+ Input,
+ Icon,
+ Pagination,
+ Tooltip,
+ notification,
+ Popconfirm,
+ message,
+ DatePicker,
+} from 'antd';
+
+import { DropdownExport } from 'components/Dropdown/index';
+import { fnQueryParams } from 'utils/helper';
+import { API_UNI_OIL, API_GET, API_DELETE } from 'utils/Api';
+import { API_GET_NOTIF } from 'utils/NotificationApi';
+import '../Tables/index.css';
+
+const { RangePicker } = DatePicker;
+
+class Index extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: null,
+ total: null,
+ loading: false,
+ selectedRowKeys: [],
+ columns: [],
+ search_filter: '',
+ visible: false,
+ mounted: false,
+ test: true,
+ updating: false,
+ };
+
+ this.delayFetchRequest = _.debounce(this.fetch, 500);
+ this.handleSearchChangeDebounce = _.debounce(this.handleSearchStateChange, 1000);
+ }
+
+ componentDidMount() {
+ this.setState({ mounted: true });
+ this.handleFilterChange({});
+ }
+
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if (prevState.updating !== prevProps.updating) {
+ this.setState({ updating: prevProps.updating });
+ }
+ }
+
+ shouldComponentUpdate(nextProps, nextState) {
+ if (nextProps.updating !== nextState.updating) {
+ this.handleFilterChange({});
+ return true;
+ }
+ return true;
+ }
+
+ componentWillMount() {
+ this.delayFetchRequest.cancel();
+ this.handleSearchChangeDebounce.cancel();
+ }
+
+ handleTableChange = (pagination, filters, sorter) => {
+ let _sort_order;
+ if (sorter.order) _sort_order = sorter.order === 'ascend' ? 'asc' : 'desc';
+
+ if (sorter.column) {
+ if (sorter.column.sortByValue) sorter.field = sorter.column.sortByValue;
+ }
+
+ this.handleFilterChange({
+ ...filters,
+ _sort_by: sorter.field,
+ _sort_order,
+ });
+ };
+
+ handleSearchChange = (e) => {
+ this.setState({ search_filter: e.target.value });
+ this.handleSearchChangeDebounce(e.target.value);
+ };
+
+ handleSearchStateChange = (search_filter) => {
+ this.setState({ search_filter });
+ this.handleFilterChange({ search: this.state.search_filter });
+ };
+
+ onPaginationChange = (page, page_size) => {
+ console.log("page")
+ console.log(page)
+ this.handleFilterChange({ page });
+ };
+
+ handleFilterChange = (props, isClearFilter) => {
+ console.log(props)
+ this.setState({ loading: true });
+
+ let { history, location } = this.props;
+ let { search, pathname } = location;
+ let urlParamsObject = isClearFilter ? props : queryString.parse(search);
+ urlParamsObject = props ? { ...urlParamsObject,page: 1, ...props } : {};
+ urlParamsObject = fnQueryParams(urlParamsObject);
+ urlParamsObject = queryString.parse(urlParamsObject);
+ history.push({ pathname, search: fnQueryParams(urlParamsObject) });
+ console.log({ pathname, search: fnQueryParams(urlParamsObject) })
+ this.delayFetchRequest(urlParamsObject);
+ };
+
+ clearFilters = () => {
+ let { history, location } = this.props;
+ let { search, pathname } = location;
+ let urlParamsObject = queryString.parse(search);
+ delete urlParamsObject['search'];
+ Object.keys(urlParamsObject).map((key, index) => {
+ if (this.props.filterValues.includes(key)) delete urlParamsObject[key];
+ });
+
+ history.push({ pathname, search: fnQueryParams(urlParamsObject) });
+ this.handleFilterChange(urlParamsObject, true);
+ };
+
+ clearAll = () => {
+ this.setState({ search_filter: '' });
+ this.handleFilterChange();
+ };
+
+ fetch = async (params = {}) => {
+ let defaulUrl;
+
+ if (this.props.defaultFilter) {
+ params = {
+ ...params,
+ ...this.props.defaultFilter,
+ };
+ }
+
+ if (this.props.url.defaultWithFilter) {
+ defaulUrl = this.props.url.defaultWithFilter;
+ } else {
+ defaulUrl = this.props.url.default;
+ }
+
+ try {
+ let response, data, total;
+ if(defaulUrl == 'notification'){
+ console.log(defaulUrl, params)
+ response = await API_GET_NOTIF('notification', params);
+ console.log(response.data, params, 'response');
+ console.log(getCookie('TOKEN').token);
+ data = response.data.data.length > 0 ? response.data.data : null;
+ total = response.data.total
+ }
+ console.table(data, 'data');
+ this.setState({ data, total, loading: false });
+ if (data == null && this.props.isEmptyMessagePopUp) {
+ message.info('No records found.');
+ }
+ if (this.props.dataResponse) {
+ this.props.dataResponse(data.length);
+ }
+ } catch (error) {
+ this.setState({ loading: false, total: 0 });
+ console.log('An error encountered: ' + error);
+ }
+ };
+
+ update = async (params = {}) => {
+ notification.success({
+ message: 'Success',
+ description: `Delete Successful.`,
+ });
+ };
+
+ remove = async (params = {}) => {
+ notification.error({
+ message: 'Error',
+ description: `Error message.`,
+ });
+ };
+
+ delete = async (uuid) => {
+ console.log(uuid)
+ let search = this.props.location;
+ console.log(search.pathname)
+ let api = process.env.REACT_APP_STATION_API
+ let path = search.pathname.substring(1)
+ try {
+ await API_UNI_OIL.delete(`${api}${path}/${uuid}`);
+ this.handleFilterChange({});
+ message.success('Record was successfully deleted.');
+ } catch ({ response: error }) {
+ this.handleFilterChange({});
+ notification.error({
+ message: 'Something went wrong deleting record!',
+ description: (
+
+
+ {error && error.data && error.data.message}
+
+
+ ),
+ duration: 4,
+ });
+ }
+ };
+
+ handleBatchDelete = async () => {
+ const data = { [this.props.keyValue]: this.state.selectedRowKeys };
+ this.setState({ selectedRowKeys: [] });
+
+ try {
+ // await API_UNI_OIL.delete(this.props.url.apiDelete, { data });
+ // this.handleFilterChange({});
+ // message.success('Record was successfully deleted.');
+ console.log(this.props.url.apiDelete)
+ } catch ({ response: error }) {
+ this.handleFilterChange({});
+ notification.error({
+ message: 'Error',
+ description: (
+
+
Something went wrong deleting records.
+ - {error && error.data && error.data.message}
+
+
+
+ {this.props.url.csv ? (
+
+ ) : (
+ }
+ type='text'
+ placeholder='Search'
+ />
+ )}
+
+
+ {/* */}
+
+ {this.props.url.csv && }
+
+
+
+
record[this.props.keyValue]}
+ onChange={this.handleTableChange}
+ loading={loading}
+ />
+
+
+
+ {apiDelete && (
+
+
}
+ >
+
+
+ {hasSelected ? `Selected ${selectedRowKeys.length} item(s)` : ''}
+
+
+
+
+ );
+ }
+}
+
+export default withRouter(Index);
diff --git a/src/containers/private/Notifications/Create/components/AddNotificationForm.js b/src/containers/private/Notifications/Create/components/AddNotificationForm.js
index 9f0d385..e202b20 100644
--- a/src/containers/private/Notifications/Create/components/AddNotificationForm.js
+++ b/src/containers/private/Notifications/Create/components/AddNotificationForm.js
@@ -22,7 +22,14 @@ const formItemLayout = {
};
function AddNotificationForm(props) {
- const { isSubmitting, handleSubmit, loading, history, schedule, handleScheduleStatus } = props;
+ const {
+ isSubmitting,
+ handleSubmit,
+ loading,
+ history,
+ schedule,
+ handleScheduleStatus
+ } = props;
return (