@diagramers/admin
Version:
Diagramers Admin Template - React starter for admin dashboards.
163 lines (152 loc) • 7.03 kB
JavaScript
import React, { useState } from 'react';
import { Badge, Card, Col, Form, Row } from 'react-bootstrap';
import { useTable, useGlobalFilter, useSortBy, usePagination, useRowSelect, useRowState } from 'react-table';
import HtmlHead from 'components/html-head/HtmlHead';
import BreadcrumbList from 'components/breadcrumb-list/BreadcrumbList';
import ButtonsCheckAll from './components/ButtonsCheckAll';
import ButtonsAddNew from './components/ButtonsAddNew';
import ControlsPageSize from './components/ControlsPageSize';
import ControlsAdd from './components/ControlsAdd';
import ControlsEdit from './components/ControlsEdit';
import ControlsDelete from './components/ControlsDelete';
import ControlsSearch from './components/ControlsSearch';
import ModalAddEdit from './components/ModalAddEdit';
import Table from './components/Table';
import TablePagination from './components/TablePagination';
const dummyData = [
{ id: 1, name: 'Basler Brot', sales: 213, stock: 15, category: 'Sourdough', tag: 'New' },
{ id: 2, name: 'Bauernbrot', sales: 633, stock: 97, category: 'Multigrain', tag: 'Done' },
{ id: 3, name: 'Kommissbrot', sales: 2321, stock: 154, category: 'Whole Wheat', tag: '' },
{ id: 4, name: 'Lye Roll', sales: 973, stock: 39, category: 'Sourdough', tag: '' },
{ id: 5, name: 'Panettone', sales: 563, stock: 72, category: 'Sourdough', tag: 'Done' },
{ id: 6, name: 'Saffron Bun', sales: 98, stock: 7, category: 'Whole Wheat', tag: '' },
{ id: 7, name: 'Ruisreikäleipä', sales: 459, stock: 90, category: 'Whole Wheat', tag: '' },
{ id: 8, name: 'Rúgbrauð', sales: 802, stock: 234, category: 'Whole Wheat', tag: '' },
{ id: 9, name: 'Yeast Karavai', sales: 345, stock: 22, category: 'Multigrain', tag: '' },
{ id: 10, name: 'Brioche', sales: 334, stock: 45, category: 'Sourdough', tag: '' },
{ id: 11, name: 'Pullman Loaf', sales: 456, stock: 23, category: 'Multigrain', tag: '' },
{ id: 12, name: 'Soda Bread', sales: 1152, stock: 84, category: 'Whole Wheat', tag: '' },
{ id: 13, name: 'Barmbrack', sales: 854, stock: 13, category: 'Sourdough', tag: '' },
{ id: 14, name: 'Buccellato di Lucca', sales: 1298, stock: 212, category: 'Multigrain', tag: '' },
{ id: 15, name: 'Toast Bread', sales: 2156, stock: 732, category: 'Multigrain', tag: '' },
{ id: 16, name: 'Cheesymite Scroll', sales: 452, stock: 24, category: 'Sourdough', tag: '' },
{ id: 17, name: 'Baguette', sales: 456, stock: 33, category: 'Sourdough', tag: '' },
{ id: 18, name: 'Guernsey Gâche', sales: 1958, stock: 221, category: 'Multigrain', tag: '' },
{ id: 19, name: 'Bazlama', sales: 858, stock: 34, category: 'Whole Wheat', tag: '' },
{ id: 20, name: 'Bolillo', sales: 333, stock: 24, category: 'Whole Wheat', tag: '' },
];
const EditableBoxed = () => {
const title = 'Editable Boxed';
const description = 'Boxed version with edit, delete and add.';
const breadcrumbs = [
{ to: '', text: 'Home' },
{ to: 'interface', text: 'Interface' },
{ to: 'interface/plugins', title: 'Plugins' },
{ to: 'interface/plugins/datatables', title: 'Datatables' },
];
const columns = React.useMemo(() => {
return [
{
Header: 'Name',
accessor: 'name',
sortable: true,
headerClassName: 'text-muted text-small text-uppercase w-30',
Cell: ({ cell }) => {
return (
<a
className="list-item-heading body"
href="#!"
onClick={(e) => {
e.preventDefault();
}}
>
{cell.value}
</a>
);
},
},
{ Header: 'Sales', accessor: 'sales', sortable: true, headerClassName: 'text-muted text-small text-uppercase w-10' },
{ Header: 'Stock', accessor: 'stock', sortable: true, headerClassName: 'text-muted text-small text-uppercase w-10' },
{ Header: 'Category', accessor: 'category', sortable: true, headerClassName: 'text-muted text-small text-uppercase w-20' },
{
Header: 'Tag',
accessor: 'tag',
sortable: true,
headerClassName: 'text-muted text-small text-uppercase w-10',
Cell: ({ cell }) => {
return <Badge bg="outline-primary">{cell.value}</Badge>;
},
},
{
Header: '',
id: 'action',
headerClassName: 'empty w-10',
Cell: ({ row }) => {
const { checked, onChange } = row.getToggleRowSelectedProps();
return <Form.Check className="form-check float-end mt-1" type="checkbox" checked={checked} onChange={onChange} />;
},
},
];
}, []);
const [data, setData] = React.useState(dummyData);
const [isOpenAddEditModal, setIsOpenAddEditModal] = useState(false);
const tableInstance = useTable(
{ columns, data, setData, isOpenAddEditModal, setIsOpenAddEditModal, initialState: { pageIndex: 0 } },
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
useRowState
);
return (
<>
<HtmlHead title={title} description={description} />
<Row>
<Col>
<div className="page-title-container">
<Row>
<Col xs="12" md="7">
<h1 className="mb-0 pb-0 display-4">{title}</h1>
<BreadcrumbList items={breadcrumbs} />
</Col>
<Col xs="12" md="5" className="d-flex align-items-start justify-content-end">
<ButtonsAddNew tableInstance={tableInstance} /> <ButtonsCheckAll tableInstance={tableInstance} />
</Col>
</Row>
</div>
<div>
<Row className="mb-3">
<Col sm="12" md="5" lg="3" xxl="2">
<div className="d-inline-block float-md-start me-1 mb-1 mb-md-0 search-input-container w-100 shadow bg-foreground">
<ControlsSearch tableInstance={tableInstance} />
</div>
</Col>
<Col sm="12" md="7" lg="9" xxl="10" className="text-end">
<div className="d-inline-block me-0 me-sm-3 float-start float-md-none">
<ControlsAdd tableInstance={tableInstance} /> <ControlsEdit tableInstance={tableInstance} /> <ControlsDelete tableInstance={tableInstance} />
</div>
<div className="d-inline-block">
<ControlsPageSize tableInstance={tableInstance} />
</div>
</Col>
</Row>
<Row>
<Col xs="12">
<Card>
<Card.Body className="half-padding">
<Table className="react-table boxed" tableInstance={tableInstance} />
</Card.Body>
</Card>
</Col>
<Col xs="12">
<TablePagination tableInstance={tableInstance} />
</Col>
</Row>
</div>
<ModalAddEdit tableInstance={tableInstance} />
</Col>
</Row>
</>
);
};
export default EditableBoxed;