Made cPanel mig form generic

src/components/root/Pages/IDSingle.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 
 import ReportSingleMigration from "../common/Forms/ReportSingleMigration";
 import { callAPI } from "../../actions/API";
+import { GenericForm } from "../common/Forms/GenericForm";
 
 // This class will populate a form from a UUID in the address bar,
 // e.g. /migrations/a7740b79-a7d9-4de7-b01e-00522fa4455a
@@ -14,6 +15,7 @@ export default class Reports extends Component {
     super(props);
     this.state = {
       migs: [],
+      timeslots: [],
     };
   }
   componentDidMount() {
@@ -31,17 +33,28 @@ export default class Reports extends Component {
       .catch(function (error) {
         console.log(error);
       });
+
+    callAPI.get("/gettimeslots/").then((response) => {
+      this.setState({
+        timeslots: response.data,
+      });
+    });
   }
 
   render() {
+    if (this.state.migs.id) {
+      console.log(this.state.migs);
       return (
         <div>
-        {/* {this.state.migs} */}
+          <h3>Update migration</h3>
-        <ReportSingleMigration
+          <GenericForm
-          key={this.state.migs.id}
+            timeslots={this.state.timeslots}
-          item={this.state.migs}
+            data={this.state.migs}
+            type="update"
           />
         </div>
       );
     }
+    return <div></div>;
+  }
 }

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

@@ -34,7 +34,7 @@ export const CPanelForm = (timeslots) => {
       validationSchema={Yup.object().shape({
         domain: Yup.string()
           .matches(
-            /^((https?):\/\/)?(www.)?[a-z0-9\-]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
+            /^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
             "Required field"
           )
           .required("Required field"),
@@ -182,7 +182,7 @@ export const CPanelForm = (timeslots) => {
                 >
                   <option>Select</option>
                   {timeslots.timeslots.map((slot) => (
-                    <option>{slot}</option>
+                    <option key={`${slot}`}>{slot}</option>
                   ))}
                 </select>
                 <ErrorMessage

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

@@ -12,6 +12,7 @@ import classnames from "classnames";
 
 import EmailBooking from "./EmailBooking";
 import { CPanelForm } from "./CPanelForm";
+import { GenericForm } from "./GenericForm";
 
 const FormPage = ({ timeslots, item }) => {
   const [activeTab, setActiveTab] = useState("1");
@@ -51,7 +52,8 @@ const FormPage = ({ timeslots, item }) => {
         <TabPane tabId="1">
           <Row>
             <Col>
-              <CPanelForm timeslots={timeslots} key={timeslots.id} />
+              {/* <CPanelForm timeslots={timeslots} key={timeslots.id} /> */}
+              <GenericForm  timeslots={timeslots} key={timeslots.id}/>
             </Col>
           </Row>
         </TabPane>

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

@@ -0,0 +1,471 @@
+import React, { useState } from "react";
+import { Formik, Form, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import moment from "moment";
+
+import { callAPI } from "../../../actions/API";
+import Msgbox from "../../../actions/Msgbox";
+import { builfArrayFromObject } from "../../../actions/Error";
+
+export const GenericForm = (props) => {
+  const [respID, setRespID] = useState(0);
+  const [error, setError] = useState(0);
+
+  const getInitial = () => {
+    let initial = {};
+    // console.log(migData);
+    if (props.data) {
+      initial = props.data;
+    } else {
+      initial = {
+        submit_time: moment().format("YYYY-MM-DD"),
+        dateTime: "2019-03-11T12:00:00.000Z",
+        migration_status: "Booked",
+        domain: "",
+        username: "",
+        original_server: "",
+        new_server: "",
+        agent_booked: "",
+        booked_time: "",
+        ticket_id: "",
+        brand: "",
+        migration_type: "",
+        booked_date: "",
+        term_date: "",
+        additional_domains: "",
+        notes: "",
+      };
+    }
+    return initial;
+  };
+
+  return (
+    <Formik
+      initialValues={getInitial()}
+      validationSchema={Yup.object().shape({
+        domain: Yup.string()
+          .matches(
+            /^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z-{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
+            "Required field"
+          )
+          .required("Required field"),
+        username: Yup.string().min(2, "Too Short!").required("Required field"),
+        original_server: Yup.string().required("Required field"),
+        new_server: Yup.string().required("Required field"),
+        agent_booked: Yup.string()
+          .min(2, "Too short!")
+          .required("Required field"),
+        booked_time: Yup.string().required("Required field"),
+        ticket_id: Yup.string().required("Required field"),
+        brand: Yup.string().required("Required field"),
+        migration_type: Yup.string().required("Required field"),
+        booked_date: Yup.string().required("Required field"),
+      })}
+      onSubmit={(values, { resetForm }) => {
+        console.log(values);
+        if (values.term_date === "") {
+          values.term_date = null; // Complains on dev but not on live #whocares
+        }
+        if (props.type === "update") {
+          callAPI
+            .put(`/${props.data.id}/`, values)
+            .then(function (response) {
+              setRespID(response.data.ticket_id);
+              setError(0);
+            })
+            .catch(function (error) {
+              setError(builfArrayFromObject(error.response.data));
+              setRespID(0);
+            });
+        } else {
+          callAPI
+            .post("/book/", values)
+            .then(function (response) {
+              setRespID(response.data.id);
+              resetForm({ values: "" });
+            })
+            .catch(function (error) {
+              setError(builfArrayFromObject(error.response.data));
+              setRespID(0);
+            });
+        }
+      }}
+      render={({
+        errors,
+        touched,
+        handleChange,
+        values,
+        handleBlur,
+        handleReset,
+      }) => (
+        <div className="container">
+          <Form>
+            <div className="row">
+              {/* Only show this on update */}
+              {props.type === "update" ? (
+                <div className="form-group col s3">
+                  <label htmlFor="migrationStatus">Status *</label>
+                  <select
+                    name="migration_status"
+                    type="select"
+                    id="migrationStatus"
+                    placeholder="status placeholder"
+                    value={values.migration_status}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    className={
+                      "form-control" +
+                      (errors.migration_status && touched.migration_status
+                        ? " is-invalid"
+                        : "")
+                    }
+                  >
+                    <option>Select</option>
+                    <option>Booked</option>
+                    <option>Waiting Termination</option>
+                    <option>Completed</option>
+                    <option>Cancelled</option>
+                  </select>
+                  <ErrorMessage
+                    name="migration_status"
+                    component="div"
+                    className="invalid-feedback"
+                  />
+                </div>
+              ) : null}
+              <div className="form-group col s3">
+                <label htmlFor="bookedDate">Date *</label>
+                <input
+                  name="booked_date"
+                  type="date"
+                  id="bookedDate"
+                  placeholder="date placeholder"
+                  value={values.booked_date}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.booked_date && touched.booked_date
+                      ? " is-invalid"
+                      : "")
+                  }
+                />
+                <ErrorMessage
+                  name="booked_date"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+              <div className="form-group col s3">
+                <label htmlFor="bookedDomain">Domain *</label>
+                <input
+                  name="domain"
+                  type="text"
+                  id="bookedDomain"
+                  placeholder="example.com.au"
+                  value={values.domain}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.domain && touched.domain ? " is-invalid" : "")
+                  }
+                />
+                <ErrorMessage
+                  name="domain"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+              <div className="form-group col s3">
+                <label htmlFor="bookedSource">Original server *</label>
+                <input
+                  name="original_server"
+                  type="text"
+                  id="bookedSource"
+                  placeholder="1.2.3.4 / example.com"
+                  value={values.original_server}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.original_server && touched.original_server
+                      ? " is-invalid"
+                      : "")
+                  }
+                />
+                <ErrorMessage
+                  name="original_server"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+              <div className="form-group col s3">
+                <label htmlFor="bookedTicket">Ticket ID *</label>
+                <input
+                  name="ticket_id"
+                  type="text"
+                  id="bookedTicket"
+                  placeholder="VIP-A1234567"
+                  value={values.ticket_id}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.ticket_id && touched.ticket_id ? " is-invalid" : "")
+                  }
+                />
+                <ErrorMessage
+                  name="ticket_id"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+            </div>
+            <div className="row">
+              <div className="form-group col s3">
+                <label htmlFor="bookedTime">Timeslot *</label>
+                <select
+                  name="booked_time"
+                  id="bookedTime"
+                  type="select"
+                  value={values.booked_time}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.booked_time && touched.booked_time
+                      ? " is-invalid"
+                      : "")
+                  }
+                >
+                  <option>Select</option>
+                  {props["timeslots"].map((slot) => (
+                    <option key={`${slot}`}>{slot}</option>
+                  ))}
+                </select>
+                <ErrorMessage
+                  name="booked_time"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+
+              <div className="form-group col s3 ">
+                <label htmlFor="bookedUsername">cPanel username *</label>
+                <input
+                  name="username"
+                  type="text"
+                  id="bookedUsername"
+                  placeholder="example"
+                  value={values.username}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.username && touched.username ? " is-invalid" : "")
+                  }
+                />
+                <ErrorMessage
+                  name="username"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+
+              <div className="form-group col s3">
+                <label htmlFor="bookedDestination">New server *</label>
+                <input
+                  name="new_server"
+                  type="text"
+                  id="bookedDestination"
+                  placeholder="1.2.3.4 / S111.SYD1"
+                  value={values.new_server}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.new_server && touched.new_server
+                      ? " is-invalid"
+                      : "")
+                  }
+                />
+                <ErrorMessage
+                  name="new_server"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+              <div className="form-group col s3">
+                <label htmlFor="bookedBrand">Brand *</label>
+                <select
+                  name="brand"
+                  type="select"
+                  id="bookedBrand"
+                  value={values.brand}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.brand && touched.brand ? " is-invalid" : "")
+                  }
+                >
+                  <option>Select</option>
+                  <option>VentraIP</option>
+                  <option>Zuver</option>
+                  <option>Synergy</option>
+                </select>
+                <ErrorMessage
+                  name="brand"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+            </div>
+            <div className="row">
+              <div className="form-group col s4">
+                <label htmlFor="bookedAdditionalDomains">Addon Domains</label>
+                <input
+                  name="additional_domains"
+                  type="text"
+                  id="bookedAdditionalDomains"
+                  placeholder="example.com.au,example.net.au"
+                  value={values.additional_domains}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.additional_domains && touched.additional_domains
+                      ? " is-invalid"
+                      : "")
+                  }
+                />
+                <ErrorMessage
+                  name="additional_domains"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+
+              <div className="form-group col s3">
+                <label htmlFor="bookedAgent">Agent Initials *</label>
+                <input
+                  name="agent_booked"
+                  type="text"
+                  id="bookedAgent"
+                  placeholder="SZ"
+                  value={values.agent_booked}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.agent_booked && touched.agent_booked
+                      ? " is-invalid"
+                      : "")
+                  }
+                />
+                <ErrorMessage
+                  name="agent_booked"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+              <div className="form-group col s3">
+                <label htmlFor="bookedType">Migration type *</label>
+                <select
+                  name="migration_type"
+                  type="select"
+                  id="bookedType"
+                  value={values.migration_type}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.migration_type && touched.migration_type
+                      ? " is-invalid"
+                      : "")
+                  }
+                >
+                  <option>Select</option>
+                  <option>cPanel</option>
+                  <option>Plesk</option>
+                  <option>Other</option>
+                </select>
+                <ErrorMessage
+                  name="migration_type"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+            </div>
+            <div className="row">
+              <div className="form-group col s4">
+                <label htmlFor="bookedTermDate">
+                  Estimated termination date (internal migrations only)
+                </label>
+                <input
+                  name="term_date"
+                  id="bookedTermDate"
+                  type="date"
+                  value={values.term_date}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.term_date && touched.term_date ? " is-invalid" : "")
+                  }
+                />
+                <ErrorMessage
+                  name="term_date"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+
+              <div className="form-group col s4">
+                <label htmlFor="bookedNotes">Notes</label>
+                <textarea
+                  name="notes"
+                  id="notes"
+                  rows={4}
+                  value={values.notes}
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                  className={
+                    "form-control" +
+                    (errors.notes && touched.notes ? " is-invalid" : "")
+                  }
+                />
+                <ErrorMessage
+                  name="notes"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </div>
+            </div>
+            <div className="form-group">
+              <button type="submit" className="btn btn-primary mr-2">
+                SEND IT
+              </button>
+              <button
+                type="reset"
+                className="btn btn-secondary"
+                onClick={handleReset}
+              >
+                Reset
+              </button>
+            </div>
+          </Form>
+          {respID ? (
+            props.type === "update" ? (
+              <Msgbox msg={respID}></Msgbox>
+            ) : (
+              <Msgbox linkid={respID}></Msgbox>
+            )
+          ) : null}
+          {error ? <Msgbox error={error}></Msgbox> : null}
+        </div>
+      )}
+    />
+  );
+};

src/components/root/common/Forms/__CPanelBooking

@@ -1,229 +0,0 @@
-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, Field } from "formik";
-import * as Yup from "yup";
-import { Input, Submit } from "formstrap";
-import { callAPI } from "../../../actions/API";
-import Msgbox from "../../../actions/Msgbox";
-import { builfArrayFromObject } from "../../../actions/Error";
-
-// Main form and POST Request to add migrations
-// found at /book under the web hosting migration tab
-// Things to add:
-// better date time picking.
-
-const InputValidation = Yup.object().shape({
-  domain: Yup.string()
-    .matches(
-      /^((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
-      "Enter correct url!"
-    )
-    .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"),
-  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!"),
-  booked_time: Yup.string().required("Time is needed!"),
-  ticket_id: Yup.string().required("Please add a ticket ID!"),
-  brand: Yup.string().required("Bush Did 911"),
-  migration_type: Yup.string().required("Type is required!"),
-  booked_date: Yup.date().required("Please enter a date!"),
-});
-
-export const CPanelBooking = (timeslots) => {
-  const [respID, setRespID] = useState(0);
-  const [error, setError] = useState(0);
-
-  const initialValues = {
-    submit_time: moment().format("YYYY-MM-DD"),
-    dateTime: "2019-03-11T12:00:00.000Z",
-  };
-
-  const onSubmit = async (values, { setSubmitting, resetForm }) => {
-    console.log(values);
-    callAPI
-      .post("/book/", values)
-      .then(function (response) {
-        // console.log(response);
-        // add function here
-        setRespID(response.data.id);
-        setError(0);
-        resetForm({ values: "" });
-      })
-      .catch(function (error) {
-        setError(builfArrayFromObject(error.response.data));
-        setRespID(0);
-      });
-    setSubmitting(false);
-  };
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={onSubmit}
-      validationSchema={InputValidation}
-    >
-      {({
-        handleSubmit,
-        handleChange,
-        handleBlur,
-        values,
-        touched,
-        isValid,
-        errors,
-      }) => (
-        <Form noValidate onSubmit={handleSubmit}>
-          <Container>
-            <Row>
-              <Col>
-                <FormGroup>
-                  <Label for="bookedDate">Date *</Label>
-                  <Input
-                    type="date"
-                    name="booked_date"
-                    id="bookedDate"
-                    placeholder="date placeholder"
-                    mindate={Date()}
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <Label for="bookedTime">Timeslot *</Label>
-                  <Input
-                    type="select"
-                    name="booked_time"
-                    id="bookedTime"
-                    className="has-success"
-                  >
-                    <option>Select</option>
-                    {timeslots.timeslots.map((slot) => (
-                      <option>{slot}</option>
-                    ))}
-                  </Input>
-                </FormGroup>
-              </Col>
-              <Col>
-                <FormGroup>
-                  <Label for="bookedDomain">Domain *</Label>
-                  <Input
-                    type="text"
-                    name="domain"
-                    id="bookedDomain"
-                    placeholder="example.com.au"
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <Label for="bookedUsername">cPanel username *</Label>
-                  <Input
-                    type="text"
-                    name="username"
-                    id="bookedUsername"
-                    placeholder="example"
-                  />
-                </FormGroup>
-              </Col>
-              <Col>
-                <FormGroup>
-                  <Label for="bookedSource">Original server *</Label>
-                  <Input
-                    type="text"
-                    name="original_server"
-                    id="bookedSource"
-                    placeholder="1.2.3.4 / example.com"
-                  />
-                </FormGroup>
-                <FormGroup>
-                  <Label for="bookedDestination">New server *</Label>
-                  <Input
-                    type="text"
-                    name="new_server"
-                    id="bookedDestination"
-                    placeholder="1.2.3.4 / S111.SYD1"
-                  />
-                </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="bookedAgent">Agent Initials *</Label>
-                  <Input
-                    type="text"
-                    name="agent_booked"
-                    id="bookedAgent"
-                    placeholder="SZ"
-                  />
-                </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>
-            </Row>
-            <Row>
-              <Col md={4}>
-                <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" />
-                </FormGroup>
-              </Col>
-              <Col md={8}>
-                <FormGroup>
-                  <Label for="bookedNotes">Notes</Label>
-                  <Input name="notes" id="notes" type="textarea" rows={6} />
-                </FormGroup>
-              </Col>
-            </Row>
-            <Submit withSpinner>Submit</Submit>
-          </Container>
-          {respID ? <Msgbox linkid={respID}></Msgbox> : null}
-          {error ? <Msgbox error={error}></Msgbox> : null}
-        </Form>
-      )}
-    </Formik>
-  );
-};