PTB-fe/components/Pelaporan/TableLaporan.js

import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";

function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
    return (
        <div className="card b ">
            <div className="card-body card-over">
                <div className="margin-left-auto">
                    <Link href="/app/pelaporan/search">
                        <Button className="btn-login" color>
                            <span className="font-color-white">
                                Laporan baru
                            </span>
                            <img className="icon-laporan-baru" src="/static/img/icon-laporan-baru.png"></img>
                        </Button>
                    </Link>
                </div>
                {listData && (
                    <Datatable options={
                        {
                            'paging': true, responsive: false, ordering: true, keys: false,
                            oLanguage: {
                                sSearch: '<em class="fa fa-search"></em>',
                                sLengthMenu: '_MENU_ records per page',
                                info: 'Showing page _PAGE_ of _PAGES_',
                                zeroRecords: 'Nothing found - sorry',
                                infoEmpty: 'No records available',
                                infoFiltered: '(filtered from _MAX_ total records)',
                                oPaginate: {
                                    sNext: '<em class="fa fa-caret-right"></em>',
                                    sPrevious: '<em class="fa fa-caret-left"></em>',
                                    color: '#ffff'
                                }
                            },
                        }
                    }>
                        <table className="table w-100" data-order='[[3, "desc"]]'>
                            <thead>
                                <tr>
                                    <th>No.Laporan</th>
                                    <th>Deskripsi Laporan</th>
                                    {status && <th>Status</th>}
                                    {!noBy && <th>Dibuat Oleh</th>}
                                    {/* <th>Created</th> */}
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {listData.map((data) => {
                                    return (
                                        <tr key={data._id}>
                                            <td>
                                                {/* <td>{data.no_laporan}</td> */}
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <h4>{data.no_laporan}</h4>
                                                            <p>{moment(data.createdAt).format("MM-DD-YYYY")}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <div className="table-desc">
                                                    <div className="media align-items-center">
                                                        <div className="media-body d-flex">
                                                            <div>
                                                                <h4 className="m-0">{data.pt.nama.length > 64 ? data.pt.nama.substring(0, 64) + "..." : data.pt.nama}</h4>
                                                                {/* <h4 className="m-0">{data.pt.nama}</h4> */}
                                                                {/* <p className="w-105">{data.keterangan.length > 150 ? data.keterangan.substring(0, 150) + "..." : data.keterangan}</p> */}
                                                                <p className="w-105">{data.keterangan}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>

                                            {status ? (
                                                <td>
                                                    <div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
                                                </td>
                                            ) : (
                                                ""
                                            )}
                                            {!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
                                            <td>
                                                <div className="ml-auto">
                                                    <Link
                                                        href={{
                                                            pathname: to,
                                                            query: { id: data._id },
                                                        }}
                                                    >
                                                        <Button className="btn-login" color>
                                                            <span className="font-color-white">
                                                                {linkName}
                                                            </span>
                                                        </Button>
                                                    </Link>
                                                </div>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </Datatable>
                )}
            </div>
        </div>
    );
}

export default TableLaporan;