README.md

@@ -26,7 +26,6 @@ npm run build
 The development server will start on `http://localhost:3000`
 
 Get css docs here https://materializecss.com/
-react-tables docs here https://react-bootstrap-table.github.io/react-bootstrap-table2/
 
 Default .htaccess file
 

public/main.css

@@ -14,7 +14,3 @@ a.white-link:active {
     color: azure;
     font-size: large;
 }
-
-.react-bootstrap-table {
-  overflow-x: auto !important;
-}

src/components/root/Home.js

@@ -5,6 +5,9 @@ import Cards from "./Pages/Cards";
 import GenericList from "../root/Pages/GenericList";
 import TimeSlotHelper from "./Pages/TimeSlotHelper";
 
+import { UList } from "../root/common/Functionality/UnorderedList";
+import { builfArrayFromObject } from "../actions/Error";
+
 // Homepage/Cards, first API call here to pass down to cards
 // and the pending migration list, if there's no data, nothing will show
 // This would benefit from an error/notification if there is no data
@@ -63,7 +66,7 @@ export class Home extends Component {
           <div className="col s8 12">
             {/* <p>Current availability for {Date()}</p>
             <UList listItems={builfArrayFromObject(this.state.timeslots)} /> */}
-            <TimeSlotHelper />
+            {/* <TimeSlotHelper /> */}
           </div>
           <div className="row">
             <div className="col s12">

src/components/root/Pages/IDSingle.js

@@ -21,7 +21,7 @@ export default class Reports extends Component {
       match: { params },
     } = this.props;
 
-    callAPI
+    const urlID = callAPI
       .get(`/${params.migrationId}/`)
       .then((response) =>
         this.setState({
@@ -31,9 +31,14 @@ export default class Reports extends Component {
       .catch(function (error) {
         console.log(error);
       });
+    console.log(urlID);
   }
 
   render() {
+    // const urlID = ({ migrationId }) => {
+    //   console.log(migrationId.migrationId);
+
+    // };
     return (
       <div>
         {/* {this.state.migs} */}

src/components/root/Pages/Migrations.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 
 import ReportSingleMigration from "../common/Forms/ReportSingleMigration";
+import { callAPI } from "../../actions/API";
 
 // /migrations in the address bar,
 // Allows the modification of migrations, and also populating a form
@@ -8,10 +9,35 @@ import ReportSingleMigration from "../common/Forms/ReportSingleMigration";
 // ReportSingleMigration is the actual form, witha PUT API request on that page.
 
 export default class Migrations extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      migs: [],
+      redirect: false,
+    };
+  }
+
   render() {
+    const onSubmit = async (migrationId, { setSubmitting }) => {
+      callAPI
+        .get(`/${migrationId.migrationId}/`)
+        .then((response) =>
+          this.setState({
+            redirect: true,
+            migs: response.data,
+          })
+        )
+        .catch(function (error) {
+          console.log(error);
+        });
+      setSubmitting(false);
+    };
     return (
       <div>
-        <ReportSingleMigration />
+        <ReportSingleMigration
+          key={this.state.migs.id}
+          item={this.state.migs}
+        />
       </div>
     );
   }

src/components/root/Pages/TimeSlotHelper.js

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

src/components/root/common/Forms/CPanelBooking.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import moment from "moment";
 import { Col, FormGroup, Row, Container, Label } from "reactstrap";
-import { Formik, Form } from "formik";
+import { Formik, Form, Field } from "formik";
 import * as Yup from "yup";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
@@ -22,8 +22,10 @@ const InputValidation = Yup.object().shape({
     )
     .required("Please enter a domain"),
   username: Yup.string().min(2, "Too Short!").required("Required"),
-  original_server: Yup.string().required("Please enter a valid IPv4 or domain"),
+  original_server: Yup.string()
-  new_server: Yup.string().required("Please enter a valid IPv4 or domain"),
+    .required("Please enter a valid IPv4 or domain"),
+  new_server: Yup.string()
+    .required("Please enter a valid IPv4 or domain"),
   agent_booked: Yup.string()
     .min(2, "Too short!")
     .required("Please enter your name!"),
@@ -99,9 +101,7 @@ export const CPanelBooking = (timeslots) => {
                     className="has-success"
                   >
                     <option>Select</option>
-                    {timeslots.timeslots.map((slot) => (
+                    {timeslots.timeslots.map((slot) => <option>{slot}</option>)}
-                      <option>{slot}</option>
-                    ))}
                   </Input>
                 </FormGroup>
               </Col>

src/components/root/common/Tables/CompTable.js

@@ -99,7 +99,6 @@ const CompTable = (props) => {
               : null
           }
           target="_blank"
-          rel="noreferrer"
         >
           {" "}
           {cell}{" "}
@@ -119,7 +118,7 @@ const CompTable = (props) => {
     { dataField: "migration_type", text: "Type", sort: true },
     { dataField: "original_server", text: "Original Server", sort: true },
     { dataField: "new_server", text: "New Server", sort: true },
-    // { dataField: "notes", text: "Notes", sort: true },
+    { dataField: "notes", text: "Notes", sort: true },
   ];
 
   useEffect(() => {
@@ -136,7 +135,6 @@ const CompTable = (props) => {
           search
           exportCSV
           key={columns.id}
-          width="100%"
         >
           {(props) => (
             <div>
@@ -155,8 +153,6 @@ const CompTable = (props) => {
                   condensed
                   key={columns.id}
                   keyField="id"
-                  wrapperClasses="table-responsive"
-                  rowClasses="text-nowrap"
                 />
               </div>
               <ExportCSVButton {...props.csvProps} key={columns}>

src/components/root/common/Tables/TimeSlots.js

@@ -1,74 +1,132 @@
-import React from "react";
+import React, { useState, useEffect } 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";
 
-import ToolkitProvider from "react-bootstrap-table2-toolkit";
+// notes
-
+//
-// Main table for the Historical migrations tab,
-// receives all API information and displays as a table with a searchbox
 
 const TimeSlots = (props) => {
-  let date = new Date(); // today
+  const [list, setList, setTimeSlots, setBookedSlots] = useState([]);
-  let yesterday =
+  const [loading, setLoading] = useState(false);
-    date.getDate() - 1 + date.toLocaleDateString("en-AU").slice(2);
+  const { SearchBar } = Search;
-  let today = date.getDate() + date.toLocaleDateString("en-AU").slice(2);
+  const { ExportCSVButton } = CSVExport;
-  let tomorrow = date.getDate() + 1 + date.toLocaleDateString("en-AU").slice(2);
+  const sizePerPageRenderer = ({
-  let dayafter = date.getDate() + 2 + date.toLocaleDateString("en-AU").slice(2);
+    options,
-  let dayafter2 =
+    currSizePerPage,
-    date.getDate() + 3 + date.toLocaleDateString("en-AU").slice(2);
+    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
+  };
 
   const columns = [
-    {
+    { dataField: "bookedSlots", text: "bookedslots", sort: true },
-      dataField: "timeslot",
+    { dataField: "timeSlots", text: "timeslots", sort: true },
-      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
-      data={props.booked}
+          keyField="name"
-      keyField="timeslot"
+          data={list}
-      key={columns.text}
           columns={columns}
+          search
+          exportCSV
+          key={columns.id}
+          keyField="id"
         >
           {(props) => (
-        <div className="py-4">
+            <div>
-          <div
+              <div className="serSec">
-            id="datatable-basic_filter"
+                <h3 className="hdrOne"></h3>
-            className="dataTables_filter px-4 pb-1"
+                <SearchBar {...props.searchProps} key={columns} />
-          ></div>
+              </div>
+
+              <div className="table-responsive">
                 <BootstrapTable
                   {...props.baseProps}
-            bootstrap4={true}
+                  filter={filterFactory()}
-            bordered={false}
+                  pagination={paginationFactory(options)}
-            loading={true}
                   striped
-            bordered
                   hover
+                  condensed
+                  key={columns.id}
                 />
               </div>
+              <ExportCSVButton {...props.csvProps} key={columns}>
+                Export CSV!!
+              </ExportCSVButton>
+            </div>
           )}
         </ToolkitProvider>
+      ) : (
+        <ReactBootstrap.Spinner animation="border" />
+      )}
+    </div>
   );
 };