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,10 +10,10 @@ import {
|
|||||||
} from "reactstrap";
|
} from "reactstrap";
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
|
|
||||||
import { CPanelBooking } from "./CPanelBooking";
|
|
||||||
import EmailBooking from "./EmailBooking";
|
import EmailBooking from "./EmailBooking";
|
||||||
|
import { CPanelForm } from "./CPanelForm";
|
||||||
|
|
||||||
const FormPage = ({ timeslots, item }) => {
|
const FormPage = ({ timeslots, item }) => {
|
||||||
const [activeTab, setActiveTab] = useState("1");
|
const [activeTab, setActiveTab] = useState("1");
|
||||||
|
|
||||||
const toggle = (tab) => {
|
const toggle = (tab) => {
|
||||||
@ -50,15 +50,15 @@ const FormPage = ({ timeslots, item }) => {
|
|||||||
<TabContent activeTab={activeTab}>
|
<TabContent activeTab={activeTab}>
|
||||||
<TabPane tabId="1">
|
<TabPane tabId="1">
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm="12">
|
<Col>
|
||||||
<CPanelBooking timeslots={timeslots} />
|
<CPanelForm timeslots={timeslots} key={timeslots.id} />
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tabId="2">
|
<TabPane tabId="2">
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm="6">
|
<Col sm="12">
|
||||||
<EmailBooking />
|
<EmailBooking />{" "}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { useState } from "react";
|
|||||||
import "bootstrap/dist/css/bootstrap.min.css";
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { Col, FormGroup, Row, Container, Label } from "reactstrap";
|
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 * as Yup from "yup";
|
||||||
import { Input, Submit } from "formstrap";
|
import { Input, Submit } from "formstrap";
|
||||||
import { callAPI } from "../../../actions/API";
|
import { callAPI } from "../../../actions/API";
|
||||||
Reference in New Issue
Block a user