Changed form, completely HTML5, fewer libraries, returns responses and better validation
This commit is contained in:
parent
68ee64e1a8
commit
e7eb8159b6
406
src/components/root/common/Forms/CPanelForm.js
Normal file
406
src/components/root/common/Forms/CPanelForm.js
Normal file
@ -0,0 +1,406 @@
|
||||
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 CPanelForm = (timeslots) => {
|
||||
const [respID, setRespID] = useState(0);
|
||||
const [error, setError] = useState(0);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={{
|
||||
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: "",
|
||||
}}
|
||||
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);
|
||||
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">
|
||||
<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>
|
||||
{timeslots.timeslots.map((slot) => (
|
||||
<option>{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>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</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 ? <Msgbox linkid={respID}></Msgbox> : null}
|
||||
{error ? <Msgbox error={error}></Msgbox> : null}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -10,8 +10,8 @@ import {
|
||||
} from "reactstrap";
|
||||
import classnames from "classnames";
|
||||
|
||||
import { CPanelBooking } from "./CPanelBooking";
|
||||
import EmailBooking from "./EmailBooking";
|
||||
import { CPanelForm } from "./CPanelForm";
|
||||
|
||||
const FormPage = ({ timeslots, item }) => {
|
||||
const [activeTab, setActiveTab] = useState("1");
|
||||
@ -50,15 +50,15 @@ const FormPage = ({ timeslots, item }) => {
|
||||
<TabContent activeTab={activeTab}>
|
||||
<TabPane tabId="1">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<CPanelBooking timeslots={timeslots} />
|
||||
<Col>
|
||||
<CPanelForm timeslots={timeslots} key={timeslots.id} />
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tabId="2">
|
||||
<Row>
|
||||
<Col sm="6">
|
||||
<EmailBooking />
|
||||
<Col sm="12">
|
||||
<EmailBooking />{" "}
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
|
||||
@ -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";
|
||||
Reference in New Issue
Block a user