PTB-fe/components/Riwayat/TableRiwayat.js

import DataTable from 'react-data-table-component';
import Datatable from "@/components/Tables/Datatable";
import Link from "next/link";
import moment from "moment";
import React, { Component } from "react";
import { getLog2 } from "@/actions/log";
import { connect } from "react-redux";
import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap";


import Datetime from "react-datetime";


class TableRiwayat extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataRiwayat: [],
            dataRiwayatsort: [],
            fromDate: "",
            toDate: "",
            updateTable: false,
            search: "",
            dataFilterSearch: []

        };
    }
    componentDidMount = async () => {
        const { token } = this.props;

        const data = await getLog2(this.props.token)
        const dataRiwayat = data.data
        this.setState({ dataRiwayat });
    }
    fetchData = async () => {
        const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
        const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
        const data = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
        const dataFilterSearch = data.data
        this.setState({ dataFilterSearch: dataFilterSearch, dataRiwayat: dataFilterSearch });
        // this.setState({ dataRiwayat });
    }

    onFilter = () => {
        this.setState({ loading: true });
        this.fetchData(); 21
        this.setState({ loading: false });
        if (this.state.dataRiwayat && this.state.dataRiwayat.length) {
            // this.renderTableData();
            this.setState({ noData: true });
        }
    }
    handleSearchChange = (e) => {
        const { dataRiwayat } = this.state;
        const searchValue = e.target.value;
        const dataNoFilter = dataRiwayat
        const result = dataRiwayat.filter((item) =>
            item.aktivitas.toLowerCase().includes(searchValue.toLowerCase())
            || item?.timestamp?.toLowerCase().includes(searchValue.toLowerCase())
            || item?.username?.toLowerCase().includes(searchValue.toLowerCase())
            || item?.ipv4?.toLowerCase().includes(searchValue.toLowerCase())
            || item?.menu?.toLowerCase().includes(searchValue.toLowerCase())
        );
        this.setState({
            search: searchValue,
        })
        if (result.length) {
            this.setState({

                dataFilterSearch: result
            });

        }
        else {
            this.setState({

                dataFilterSearch: dataNoFilter
            })
        }

    }

    render() {
        const { dataRiwayat, search, dataFilterSearch } = this.state
        const columns = [
            {
                name: 'Timestamp',
                // selector: row => row.timestamp,
                cell: row => (
                    <div>
                        <div>
                            <div
                                data-tag="allowRowEvents"
                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
                            >
                                { }
                                {row.timestamp}
                            </div>
                        </div>
                    </div>
                )
            },
            {
                name: 'UserName',
                // selector: row => row.username,
                cell: row => (
                    <div>
                        <div>
                            <div
                                data-tag="allowRowEvents"
                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
                            >
                                { }
                                {row.username}
                            </div>
                        </div>
                    </div>
                )
            },
            {
                name: 'IPv4',
                // selector: row => row.ipv4,
                cell: row => (
                    <div>
                        <div>
                            <div
                                data-tag="allowRowEvents"
                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
                            >
                                { }
                                {row.ipv4}
                            </div>
                        </div>
                    </div>
                )
            },

            {
                name: 'Menu',
                // selector: row => row.menu,
                cell: row => (
                    <div>
                        <div>
                            <div
                                data-tag="allowRowEvents"
                                style={{ color: 'grey', whiteSpace: 'wrap', width: '100px' }}
                            >
                     
                                {row.menu||"-"}
                            </div>
                        </div>
                    </div>
                )
            },
            {
                name: 'Deskripsi',
                // selector: row => row.aktivitas,
                cell: row => (
                    <div>
                        <div>
                            <div
                                data-tag="allowRowEvents"
                                style={{ color: 'grey', overflow: 'hidden', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '300px' }}
                            >
                                { }
                                {row.aktivitas}
                            </div>
                        </div>
                    </div>
                ),
            },
        ];
        const data = dataRiwayat?.map((value, index) => (

            {

                timestamp: value.createdAt,
                username: value.user?.nama,
                ipv4: value?.ipv4,
                menu: value?.menu,
                aktivitas: value?.aktivitas,
            }



        ))
        const datasearch = dataFilterSearch?.map((value, index) => (

            {

                timestamp: value.createdAt,
                username: value.user?.nama,
                ipv4: value?.ipv4,
                menu: value?.menu,
                aktivitas: value?.aktivitas,
            }



        ))
        return (
            <div className="card b ">

                <div className="row card-body card-over">
                    <div className=" pl-4 col-2 float-left">
                        <label className="col-form-label">Range Filter : </label>

                        <span>
                            <Datetime
                                timeFormat={false}
                                inputProps={{ className: "form-control" }}
                                closeOnSelect={true}
                                value={this.state.fromDate ? moment(this.state.fromDate).format("DD-MM-YYYY") : "DD/MM/YYYY"}
                                onChange={(fromDate) => {
                                    this.setState({ fromDate })
                                }}
                                className=' mb-3'
                            />
                        </span>
                        <span>
                            <Datetime
                                timeFormat={false}
                                inputProps={{ className: "form-control" }}
                                closeOnSelect={true}
                                value={this.state.toDate ? moment(this.state.toDate).format("DD-MM-YYYY") : "DD/MM/YYYY"}
                                onChange={(toDate) => {
                                    this.setState({ toDate })
                                }}
                                // className=' w-75'
                            />
                        </span>
                        <Button color="info" className=" mt-4" onClick={(e) => this.onFilter()}>Filter</Button>

                    </div>
                    <div className="col-10">
                        <DataTable data={datasearch.length ? datasearch : data} columns={columns}
                            defaultSortField="title"
                            pagination
                            // selectableRows
                            subHeader
                            subHeaderComponent={
                                <input
                                    type="text"
                                    className="w-25 form-control"
                                    placeholder="Search..."
                                    value={search}
                                    onChange={this.handleSearchChange}
                                />
                            }
                            subHeaderAlign="right"
                        />
                    </div>


                </div>
            </div >
        );
    }
}
const mapStateToProps = (state) => ({ token: state.token });
export default connect(mapStateToProps)(TableRiwayat);