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

180
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 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 [list, setList, setTimeSlots, setBookedSlots] = useState([]);
const [loading, setLoading] = useState(false);
const { SearchBar } = Search;
const { ExportCSVButton } = CSVExport;
const sizePerPageRenderer = ({
options,
currSizePerPage,
onSizePerPageChange,
}) => (
<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
};
let date = new Date(); // today
let yesterday =
date.getDate() - 1 + date.toLocaleDateString("en-AU").slice(2);
let today = date.getDate() + date.toLocaleDateString("en-AU").slice(2);
let tomorrow = date.getDate() + 1 + date.toLocaleDateString("en-AU").slice(2);
let dayafter = date.getDate() + 2 + date.toLocaleDateString("en-AU").slice(2);
let dayafter2 =
date.getDate() + 3 + date.toLocaleDateString("en-AU").slice(2);
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 (
<div>
{loading ? (
<ToolkitProvider
keyField="name"
data={list}
columns={columns}
search
exportCSV
key={columns.id}
keyField="id"
>
{(props) => (
<div>
<div className="serSec">
<h3 className="hdrOne"></h3>
<SearchBar {...props.searchProps} key={columns} />
</div>
<div className="table-responsive">
<BootstrapTable
{...props.baseProps}
filter={filterFactory()}
pagination={paginationFactory(options)}
striped
hover
condensed
key={columns.id}
/>
</div>
<ExportCSVButton {...props.csvProps} key={columns}>
Export CSV!!
</ExportCSVButton>
</div>
)}
</ToolkitProvider>
) : (
<ReactBootstrap.Spinner animation="border" />
<ToolkitProvider
data={props.booked}
keyField="timeslot"
key={columns.text}
columns={columns}
>
{(props) => (
<div className="py-4">
<div
id="datatable-basic_filter"
className="dataTables_filter px-4 pb-1"
></div>
<BootstrapTable
{...props.baseProps}
bootstrap4={true}
bordered={false}
loading={true}
striped
bordered
hover
/>
</div>
)}
</div>
</ToolkitProvider>
);
};