The_Bois/MigratorProject-frontend
Archived
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Working version of upcoming migrations on dash, including variable date in table, see TimeSlot

Browse Source
This commit is contained in:
pepper 2021-01-21 01:26:39 -05:00
parent 299b0874c8
commit 73edae78fd
2 changed files with 65 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/root/Pages/TimeSlotHelper.js
View File

@ -14,15 +14,15 @@ class GenericList extends Component {
super(props); super(props);
this.state = { this.state = {
error: false, error: false,
timeslots: [],
bookedslots: [], bookedslots: [],
}; };
} }
componentDidMount() { componentDidMount() {
callAPI.get("/gettimeslots/").then((response) => { callAPI.get("/bookedslots/").then((response) => {
this.setState({ this.setState({
timeslots: response.data, bookedslots: response.data,
}); });
}); });
} }
@ -30,11 +30,7 @@ class GenericList extends Component {
renderItems() { renderItems() {
if (!this.state.error) { if (!this.state.error) {
return ( return (
<TimeSlots <TimeSlots booked={this.state.bookedslots} key={this.state.error} />
timeSlots={this.state.timeslots}
bookedSlots={this.state.bookedslots}
key={this.state.timeslots}
/>
); );
} else { } else {
return <Error />; return <Error />;
@ -46,9 +42,3 @@ class GenericList extends Component {
} }
} }
export default GenericList; export default GenericList;
// if (this.state.timeslots > 0) {
// else {
// return <Error />;
// }
// }

158
src/components/root/common/Tables/TimeSlots.js
View File

@ -1,132 +1,74 @@
import React, { useState, useEffect } from "react"; import React from "react";
import BootstrapTable from "react-bootstrap-table-next"; import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";
import filterFactory from "react-bootstrap-table2-filter";
import ToolkitProvider, {
Search,
CSVExport,
} from "react-bootstrap-table2-toolkit";
// notes import ToolkitProvider from "react-bootstrap-table2-toolkit";
//
// Main table for the Historical migrations tab,
// receives all API information and displays as a table with a searchbox
const TimeSlots = (props) => { const TimeSlots = (props) => {
const [list, setList, setTimeSlots, setBookedSlots] = useState([]); let date = new Date(); // today
const [loading, setLoading] = useState(false); let yesterday =
const { SearchBar } = Search; date.getDate() - 1 + date.toLocaleDateString("en-AU").slice(2);
const { ExportCSVButton } = CSVExport; let today = date.getDate() + date.toLocaleDateString("en-AU").slice(2);
const sizePerPageRenderer = ({ let tomorrow = date.getDate() + 1 + date.toLocaleDateString("en-AU").slice(2);
options, let dayafter = date.getDate() + 2 + date.toLocaleDateString("en-AU").slice(2);
currSizePerPage, let dayafter2 =
onSizePerPageChange, date.getDate() + 3 + date.toLocaleDateString("en-AU").slice(2);
}) => (
<div className="btn-group" role="group">
{options.map((option) => {
const isSelect = currSizePerPage === `${option.page}`;
return (
<button
key={option.text}
type="button"
onClick={() => onSizePerPageChange(option.page)}
className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
>
{option.text}
</button>
);
})}
</div>
);
const getListData = async () => {
try {
const setList = await props.setList;
setList();
setLoading(true);
} catch (e) {
console.log(e);
}
};
const options = {
// paginationSize: 4,
// pageStartIndex: 0,
// alwaysShowAllBtns: true, // Always show next and previous button
// withFirstAndLast: false, // Hide the going to First and Last page button
// hideSizePerPage: true, // Hide the sizePerPage dropdown always
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
// firstPageText: "First",
// prePageText: "Back",
nextPageText: "Next",
lastPageText: "Last",
// nextPageTitle: "First page",
// prePageTitle: "Pre page",
// firstPageTitle: "Next page",
// lastPageTitle: "Last page",
// showTotal: true,
// disablePageTitle: true,
// sizePerPageList: [
// {
// text: "50",
// value: 50,
// },
// {
// text: "100",
// value: 100,
// },
// ],
sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
};
const columns = [ const columns = [
{ dataField: "bookedSlots", text: "bookedslots", sort: true }, {
{ dataField: "timeSlots", text: "timeslots", sort: true }, dataField: "timeslot",
text: "timeslot/date",
},
{
dataField: "yesterday",
text: yesterday,
},
{
dataField: "today",
text: "TODAY",
style: { backgroundColor: "#9e9e9e" },
},
{
dataField: "tomorrow",
text: tomorrow,
},
{
dataField: "2days",
text: dayafter,
},
{
dataField: "3days",
text: dayafter2,
},
]; ];
useEffect(() => {
getListData();
}, []);
return ( return (
<div>
{loading ? (
<ToolkitProvider <ToolkitProvider
keyField="name" data={props.booked}
data={list} keyField="timeslot"
key={columns.text}
columns={columns} columns={columns}
search
exportCSV
key={columns.id}
keyField="id"
> >
{(props) => ( {(props) => (
<div> <div className="py-4">
<div className="serSec"> <div
<h3 className="hdrOne"></h3> id="datatable-basic_filter"
<SearchBar {...props.searchProps} key={columns} /> className="dataTables_filter px-4 pb-1"
</div> ></div>
<div className="table-responsive">
<BootstrapTable <BootstrapTable
{...props.baseProps} {...props.baseProps}
filter={filterFactory()} bootstrap4={true}
pagination={paginationFactory(options)} bordered={false}
loading={true}
striped striped
bordered
hover hover
condensed
key={columns.id}
/> />
</div> </div>
<ExportCSVButton {...props.csvProps} key={columns}>
Export CSV!!
</ExportCSVButton>
</div>
)} )}
</ToolkitProvider> </ToolkitProvider>
) : (
<ReactBootstrap.Spinner animation="border" />
)}
</div>
); );
}; };