pls work && cleaned up shop

Added reports, API calls on UUIDs
and started beginnings of UUID generating URLs

src/components/root/Home.js

@@ -9,7 +9,6 @@ export class Home extends Component {
     super(props);
     this.state = {
       migs: [],
-      error: false,
     };
   }
 
@@ -27,6 +26,7 @@ export class Home extends Component {
         });
       });
   }
+
   render() {
     return (
       <div className="container">
@@ -51,7 +51,7 @@ export class Home extends Component {
             <div className="divider"></div>
             <div className="section">
               <div className="col s12">
-                <SideMigrations migs={this.state.migs} />
+                <SideMigrations />
               </div>
             </div>
             <div className="divider"></div>

src/components/root/Navigation.js

@@ -13,9 +13,6 @@ export class Navigation extends Component {
                   Dashboard
                 </Link>
               </li>
-              <li>
-                <Link to="/book">Book</Link>
-              </li>
               <li>
                 <Link to="/upcoming-migrations">Upcoming Migrations</Link>
               </li>
@@ -25,6 +22,9 @@ export class Navigation extends Component {
               <li>
                 <Link to="/historical-migrations">Historical Migrations</Link>
               </li>
+              <li className="orange accent-4 active">
+                <Link to="/book">Book</Link>
+              </li>
             </ul>
           </div>
         </div>

src/components/root/Pages/AllReports/GetSingleMigration.js

@@ -4,7 +4,6 @@ import { Col, FormGroup, Row, Container, Label } from "reactstrap";
 import { Formik, Form } from "formik";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
-import ShowMigrations from "./ShowMigrations";
 
 const initialValues = {
   submit_time: moment().format("YYYY-MM-DD"),
@@ -55,7 +54,7 @@ export default class GetSingleMigration extends Component {
             </Container>
           </Form>
         </Formik>
-        <ShowMigrations />
+        {/* <ShowMigrations /> */}
       </div>
     );
   }

src/components/root/Pages/AllReports/IdSearchForm.js

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Col, FormGroup, Row, Container, Label } from "reactstrap";
+import { Formik, Form } from "formik";
+import { Input, Submit } from "formstrap";
+
+export default function IdSearchForm({ api }) {
+  const initialValues = {};
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={api}>
+      <Container>
+        <Form>
+          <Row>
+            <Col>
+              <FormGroup>
+                <Label for="migrationId"></Label>
+                <Input
+                  type="text"
+                  name="migrationId"
+                  id="migrationId"
+                  placeholder="uuid"
+                />
+              </FormGroup>
+              <Submit withSpinner>Submit</Submit>
+            </Col>
+          </Row>
+        </Form>
+      </Container>
+    </Formik>
+  );
+}

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

@@ -11,8 +11,7 @@ export const CPanelBooking = () => {
     submit_time: moment().format("YYYY-MM-DD"),
   };
 
-  const onSubmit = async (values, { setSubmitting }) => {
-    console.log(values);
+  const onSubmit = async (values, { setSubmitting, resetForm }) => {
     callAPI
       .post("/", values)
       .then(function (response) {
@@ -23,6 +22,7 @@ export const CPanelBooking = () => {
         console.log(error);
       });
     setSubmitting(false);
+    resetForm({ values: "" });
   };
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
@@ -168,7 +168,7 @@ export const CPanelBooking = () => {
             <Label for="bookedNotes">Notes</Label>
             <Input type="textarea" name="notes" id="notes" />
           </FormGroup>
-          <Submit withSpinner>Save</Submit>
+          <Submit withSpinner>Submit</Submit>
         </Container>
       </Form>
     </Formik>

src/components/root/Pages/IDSingle.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+
+import ReportSingleMigration from "./Migrations/ReportSingleMigration";
+import { callAPI } from "../../actions/API";
+
+export default class Reports extends Component {
+  render() {
+    const migrationId = ({ migrationId }) => {
+      console.log(migrationId.migrationId);
+      callAPI
+        .get(`/${migrationId.migrationId}/`)
+        .then((response) =>
+          this.setState({
+            redirect: true,
+            migs: response.data,
+          })
+        )
+        .catch(function (error) {
+          console.log(error);
+        });
+    };
+
+    return (
+      <div>
+        <ReportSingleMigration key={migrationId.id} item={migrationId} />
+      </div>
+    );
+  }
+}

src/components/root/Pages/Migrations.js

@@ -1,19 +1,6 @@
 import React, { Component } from "react";
 
-import MigrationSingle from "./Migrations/MigrationSingle";
-import Error from "../../actions/Error";
-
 class Migrations extends Component {
-  renderItems() {
-    if (!this.props.error) {
-      return this.props.migs.map((item) => (
-        <MigrationSingle key={item.id} item={item} />
-      ));
-    } else {
-      return <Error />;
-    }
-  }
-
   bookedMig() {
     return this.props.migs.filter(
       (booked) => booked.migration_status === "Booked"

src/components/root/Pages/Migrations/ReportSingleMigration.js

@@ -0,0 +1,198 @@
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Col, FormGroup, Row, Container, Label } from "reactstrap";
+import { Formik, Form } from "formik";
+import { Input, Submit } from "formstrap";
+import { callAPI } from "../../../actions/API";
+
+const ReportSingleMigration = ({ item }) => {
+  const initialValues = {
+    submit_time: item.submit_time,
+    domain: item.domain,
+    booked_date: item.booked_date,
+    booked_time: item.booked_time,
+    username: item.username,
+    original_server: item.original_server,
+    new_server: item.new_server,
+    brand: item.brand,
+    ticket_id: item.ticket_id,
+    migration_type: item.migration_type,
+    agent_booked: item.agent_booked,
+    additional_domains: item.additional_domains,
+    term_date: item.term_date,
+    notes: item.notes,
+  };
+
+  const onSubmit = async (values, { setSubmitting }) => {
+    callAPI
+      .put(`/${item.id}/`, values)
+      .then(function (response) {
+        console.log(JSON.stringify(response.values));
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+    setSubmitting(false);
+  };
+  return (
+    <Formik initialValues={initialValues} onSubmit={onSubmit}>
+      <Form>
+        <Container>
+          <Row>
+            <Col>
+              <FormGroup>
+                <Label for={item.booked_date}>Date</Label>
+                <Input
+                  type="date"
+                  name="booked_date"
+                  id="booked_date"
+                  placeholder="date placeholder"
+                  mindate={Date()}
+                />
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedTime">Timeslot</Label>
+                <Input type="select" name="booked_time" id="bookedTime">
+                  <option>Select</option>
+                  <option>00:00-03:00</option>
+                  <option>03:00-06:00</option>
+                  <option>06:00-09:00</option>
+                  <option>08:00-12:00</option>
+                  <option>12:00-18:00</option>
+                  <option>18:00-00:00</option>
+                </Input>
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedDomain">Domain</Label>
+                <Input
+                  type="text"
+                  name="domain"
+                  id="bookedDomain"
+                  placeholder="example.com.au"
+                />
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedUsername">cPanel username</Label>
+                <Input
+                  type="text"
+                  name="username"
+                  id="bookedUsername"
+                  placeholder="example"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <FormGroup>
+                <Label for="bookedSource">Original server</Label>
+                <Input
+                  type="text"
+                  name="original_server"
+                  id="bookedSource"
+                  placeholder="1.2.3.4"
+                />
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedDestination">New server</Label>
+                <Input
+                  type="text"
+                  name="new_server"
+                  id="bookedDestination"
+                  placeholder="1.2.3.4"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <FormGroup>
+                <Label for="bookedBrand">Brand</Label>
+                <Input type="select" name="brand" id="bookedBrand">
+                  <option>Select</option>
+                  <option>VentraIP</option>
+                  <option>Zuver</option>
+                  <option>Synergy</option>
+                </Input>
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedTicket">Ticket ID</Label>
+                <Input
+                  type="text"
+                  name="ticket_id"
+                  id="bookedTicket"
+                  placeholder="VIP-A1234567"
+                />
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedType">Migration type</Label>
+                <Input type="select" name="migration_type" id="bookedType">
+                  <option>Select</option>
+                  <option>cPanel</option>
+                  <option>Plesk</option>
+                  <option>Other</option>
+                </Input>
+              </FormGroup>
+            </Col>
+            <Col>
+              <FormGroup>
+                <Label for="bookedAgent">Agent Initials</Label>
+                <Input
+                  type="text"
+                  name="agent_booked"
+                  id="bookedAgent"
+                  placeholder="SZ"
+                />
+              </FormGroup>
+            </Col>
+          </Row>
+          <FormGroup>
+            <Label for="bookedAdditionalDomains">Addon Domains</Label>
+            <Input
+              type="text"
+              name="additional_domains"
+              id="bookedAdditionalDomains"
+              placeholder="example.com.au,example.net.au"
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <Label for="bookedTermDate">
+              Estimated termination date (internal migrations only)
+            </Label>
+            <Input
+              type="date"
+              name="term_date"
+              id="bookedTermDate"
+              placeholder="optional"
+            />
+          </FormGroup>
+          <FormGroup>
+            <Label for="bookedNotes">Notes</Label>
+            <Input
+              type="textarea"
+              name="notes"
+              id="notes"
+              placeholder="optional"
+            />
+          </FormGroup>
+          <Submit withSpinner>Update</Submit>
+        </Container>
+      </Form>
+    </Formik>
+  );
+};
+
+export default ReportSingleMigration;

src/components/root/Pages/Migrations/SideMigrations.js

@@ -1,22 +1,29 @@
 import React, { Component } from "react";
-
 import { SingleSide } from "./SingleSide";
+import { callAPI } from "../../../actions/API";
 
-class SideMigrations extends Component {
+export default class SideMigrations extends Component {
   constructor(props) {
     super(props);
     this.state = {
       migs: [],
-      e: false,
     };
   }
-
+  componentDidMount() {
+    callAPI
+      .get("/pending/")
+      .then((request) => {
+        this.setState({
+          migs: request.data,
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
   render() {
-    return <SingleSide key={this.state.migs.domain} data={this.state.migs} />;
+    return <SingleSide key={this.state.migs.id} data={this.state.migs} />;
   }
 }
-
-export default SideMigrations;
-
-//return
-//

src/components/root/Pages/Reports.js

@@ -1,9 +1,41 @@
-import React from "react";
+import React, { Component } from "react";
 
-import GetSingleMigration from "./AllReports/GetSingleMigration";
+import IdSearchForm from "./AllReports/IdSearchForm";
+import ReportSingleMigration from "./Migrations/ReportSingleMigration";
+import { callAPI } from "../../actions/API";
 
-const Reports = () => {
-  return <GetSingleMigration />;
-};
+export default class Reports extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      migs: [],
+      redirect: false,
+    };
+  }
 
-export default Reports;
+  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>
+        <IdSearchForm api={onSubmit} />
+        <ReportSingleMigration
+          key={this.state.migs.id}
+          item={this.state.migs}
+        />
+      </div>
+    );
+  }
+}