From 96605a692382008e01a75a8c1adeb676c3a36d56 Mon Sep 17 00:00:00 2001 From: pepper Date: Sun, 10 Jan 2021 18:04:10 -0500 Subject: [PATCH] adding validation + responses, also trying out a date/time picket on cPanel booking page --- package-lock.json | 10 ++ package.json | 2 + src/components/root/Home.js | 3 +- src/components/root/Navigation.js | 4 +- src/components/root/Pages/Cards.js | 10 +- .../root/common/Forms/CPanelBooking.js | 46 ++++++- .../common/Forms/FormikFieldDateTimePicker.js | 113 ++++++++++++++++++ .../common/Forms/ReportSingleMigration.js | 12 ++ .../root/common/Tables/HistoricalSingle.js | 33 +++-- .../root/common/Tables/UpcomingSingle.js | 34 ++++-- 10 files changed, 238 insertions(+), 29 deletions(-) create mode 100644 src/components/root/common/Forms/FormikFieldDateTimePicker.js diff --git a/package-lock.json b/package-lock.json index 844bada..1c36ed1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5719,6 +5719,16 @@ "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-3.1.0.tgz", "integrity": "sha1-H80D29UEudvuK5B4yFpfHH08wtM=" }, + "date-fns": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", + "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" + }, + "date-fns-tz": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.0.12.tgz", + "integrity": "sha512-Ca+9pjGkU90XDHnclfSjz9o7g/ZqyYyYI0aCYmbf65P75oy8gktuaRslO3UPXl3ADgAnF9/KCykQkpU3/xvtWQ==" + }, "debounce": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", diff --git a/package.json b/package.json index c7ce9ee..9bd850e 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "axios-react": "^2.0.2", "bootstrap": "^4.5.3", "cldr-data": "^36.0.0", + "date-fns": "^2.16.1", + "date-fns-tz": "^1.0.12", "formik": "^2.2.5", "formstrap": "^1.1.3", "globalize": "^1.6.0", diff --git a/src/components/root/Home.js b/src/components/root/Home.js index c1ff26a..78b1b59 100644 --- a/src/components/root/Home.js +++ b/src/components/root/Home.js @@ -22,7 +22,7 @@ export class Home extends Component { componentDidMount() { callAPI - .get() + .get('/') .then((request) => { this.setState({ migs: request.data, @@ -47,6 +47,7 @@ export class Home extends Component {

Migrations tracker

+ {/* */}
diff --git a/src/components/root/Navigation.js b/src/components/root/Navigation.js index 3a5121a..0694766 100644 --- a/src/components/root/Navigation.js +++ b/src/components/root/Navigation.js @@ -19,9 +19,9 @@ export class Navigation extends Component {
  • Upcoming Migrations
    • -
  • + {/*
  • Migrations -
    • + */}
  • Reports
    • diff --git a/src/components/root/Pages/Cards.js b/src/components/root/Pages/Cards.js index a6998ad..c131cb4 100644 --- a/src/components/root/Pages/Cards.js +++ b/src/components/root/Pages/Cards.js @@ -6,20 +6,20 @@ import React, { Component } from "react"; class Cards extends Component { bookedMig() { - return this.props.migs[0]["booked_count"]; + return this.props.migs["booked_count"]; } waitingMig() { - return this.props.migs[0]["awaitterm_count"]; + return this.props.migs["awaitterm_count"]; } completedMig() { - return this.props.migs[0]["complete_count"]; + return this.props.migs["complete_count"]; } missedMig() { - return this.props.migs[0]["missed_count"]; + return this.props.migs["missed_count"]; } render() { - if (!this.props.migs[0]) { + if (!this.props.migs) { return
    ; } diff --git a/src/components/root/common/Forms/CPanelBooking.js b/src/components/root/common/Forms/CPanelBooking.js index df7a623..2d345e6 100644 --- a/src/components/root/common/Forms/CPanelBooking.js +++ b/src/components/root/common/Forms/CPanelBooking.js @@ -2,23 +2,53 @@ import React 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"; +// import FormikFieldDateTimePicker from "./FormikFieldDateTimePicker"; // 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 timezoneList = { + losAngeles: "America/Los_Angeles", // -8:00 (-7) + berlin: "Europe/Berlin", // +2:00 (-1) + newYork: "America/New_York", // -5:00 (-4) + melbourne: "Australia/Melbourne", // +8:00 + tongatapu: "Pacific/Tongatapu", // +13:00 (+14) + djibouti: "Africa/Djibouti", // +3:00 +}; +const timezone = timezoneList.melbourne; + const InputValidation = Yup.object().shape({ - domain: Yup.string().min(2, "Too Short!").required("Required"), + 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-%]+&?)?$/, + "Enter correct url!" + ) + .required("Please enter a domain"), username: Yup.string().min(2, "Too Short!").required("Required"), + original_server: Yup.string() + .matches( + /^(([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)$/, + "Please enter a valid IPv4 Address" + ) + .required("Please enter a valid IP"), + new_server: Yup.string() + .matches( + /^(([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)$/, + "Please enter a valid IPv4 Address" + ) + .required("Please enter a valid IP"), }); export const CPanelBooking = () => { const initialValues = { submit_time: moment().format("YYYY-MM-DD"), + dateTime: "2019-03-11T12:00:00.000Z", }; const onSubmit = async (values, { setSubmitting, resetForm }) => { @@ -56,6 +86,18 @@ export const CPanelBooking = () => { /> + {/* + + */} diff --git a/src/components/root/common/Forms/FormikFieldDateTimePicker.js b/src/components/root/common/Forms/FormikFieldDateTimePicker.js new file mode 100644 index 0000000..af2919b --- /dev/null +++ b/src/components/root/common/Forms/FormikFieldDateTimePicker.js @@ -0,0 +1,113 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { zonedTimeToUtc, utcToZonedTime, toDate } from "date-fns-tz"; +import { DateTimePicker, DatePicker, TimePicker } from "@material-ui/pickers"; + +const componentTypes = { + datetime: DateTimePicker, + date: DatePicker, + time: TimePicker, +}; + +const isoDateRegExp = /^(\d{1,})-?(\d{2})?-?(\d{2})T?(\d{2})?:?(\d{2})?:?(\d{2})?\.?(\d{3})?(Z|[+-]\d{2}:\d{2})?/; +const timeRegExp = /^(\d{2}):(\d{2}):?(\d{2})?\.?(\d{3})?/; + +const getDateForPicker = (str, timezone) => { + if (isoDateRegExp.test(str)) { + return timezone ? utcToZonedTime(new Date(str), timezone) : toDate(str); + } else if (timeRegExp.test(str)) { + const date = new Date(); + const utcDateISOString = new Date( + Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) + ).toISOString(); + return toDate( + utcDateISOString.substring(0, utcDateISOString.indexOf("T") + 1) + str + ); + } + return null; +}; + +const FormikFieldDateTimePicker = ({ + field, + form, + type, + timezone, + returnDateOnly, + ...restProps +}) => { + const CustomTag = componentTypes[type]; + const currentError = form.errors[field.name]; + + const pickerValue = getDateForPicker(field.value, timezone); + + const handleChange = (date) => { + if (date === null) { + form.setFieldValue(field.name, null, true); + return; + } + + let storedValue; + if (timezone) { + storedValue = zonedTimeToUtc(date, timezone).toISOString(); + storedValue = returnDateOnly + ? storedValue.substring(0, storedValue.indexOf("T")) + : storedValue; + } else { + const utcDateIsoString = new Date( + Date.UTC( + date.getFullYear(), + date.getMonth(), + date.getDate(), + date.getHours(), + date.getMinutes(), + date.getSeconds(), + date.getMilliseconds() + ) + ).toISOString(); + + if (isoDateRegExp.test(field.value)) { + storedValue = !returnDateOnly + ? utcDateIsoString.substring(0, utcDateIsoString.indexOf("Z")) + : utcDateIsoString.substring(0, utcDateIsoString.indexOf("T")); + } else { + storedValue = utcDateIsoString.substring( + utcDateIsoString.indexOf("T") + 1, + utcDateIsoString.indexOf("Z") + ); + } + } + form.setFieldValue(field.name, storedValue, true); + }; + + const handleBlur = (e) => { + field.onBlur(e); + }; + + return ( + form.setFieldError(field.name, error)} + onChange={handleChange} + onBlur={handleBlur} + {...restProps} + /> + ); +}; + +FormikFieldDateTimePicker.propTypes = { + field: PropTypes.shape().isRequired, + form: PropTypes.shape().isRequired, + type: PropTypes.oneOf(["datetime", "date", "time"]), + timezone: PropTypes.string, + returnDateOnly: PropTypes.bool, +}; + +FormikFieldDateTimePicker.defaultProps = { + type: "datetime", + returnDateOnly: false, +}; + +export default FormikFieldDateTimePicker; diff --git a/src/components/root/common/Forms/ReportSingleMigration.js b/src/components/root/common/Forms/ReportSingleMigration.js index 62509d6..f7c64fd 100644 --- a/src/components/root/common/Forms/ReportSingleMigration.js +++ b/src/components/root/common/Forms/ReportSingleMigration.js @@ -92,6 +92,18 @@ const ReportSingleMigration = ({ item }) => { + + + + + + diff --git a/src/components/root/common/Tables/HistoricalSingle.js b/src/components/root/common/Tables/HistoricalSingle.js index 68eb813..dc346e4 100644 --- a/src/components/root/common/Tables/HistoricalSingle.js +++ b/src/components/root/common/Tables/HistoricalSingle.js @@ -80,26 +80,41 @@ const HistoricalSingle = () => { }; const columns = [ { dataField: "id", text: "ID", hidden: true }, - { dataField: "submit_time", text: "Submit Time", sort: true }, + { dataField: "brand", text: "Brand", sort: true }, + { dataField: "migration_status", text: "Status", sort: true }, + { + dataField: "ticket_id", + text: "TicketID", + sort: true, + formatter: (cell, row) => ( + + {" "} + {cell}{" "} + + ), + }, + { dataField: "booked_date", text: "Booked Date", sort: true }, + { dataField: "booked_time", text: "Booked Time", sort: true }, + { dataField: "agent_booked", text: "Agent initials", sort: true }, { dataField: "domain", text: "Domain", sort: true, formatter: (cell, row) => {cell} , }, - { dataField: "booked_date", text: "Booked Date", sort: true }, - { dataField: "booked_time", text: "Booked Time", sort: true }, + { dataField: "additional_domains", text: "Additional Domains", sort: true }, + { dataField: "username", text: "Username", sort: true }, + { dataField: "migration_type", text: "Type", sort: true }, { dataField: "original_server", text: "Original Server", sort: true }, { dataField: "new_server", text: "New Server", sort: true }, - { dataField: "username", text: "Username", sort: true }, - { dataField: "brand", text: "Brand", sort: true }, - { dataField: "ticket_id", text: "TicketID", sort: true }, { dataField: "migration_status", text: "Status", sort: true }, - { dataField: "agent_booked", text: "Agent initials", sort: true }, - { dataField: "additional_domains", text: "Additional Domains", sort: true }, - { dataField: "migration_type", text: "Type", sort: true }, { dataField: "term_date", text: "Termination Date", sort: true }, { dataField: "notes", text: "Notes", sort: true }, + { dataField: "submit_time", text: "Submit Time", sort: true }, { dataField: "report", text: "Show Detailed Report", diff --git a/src/components/root/common/Tables/UpcomingSingle.js b/src/components/root/common/Tables/UpcomingSingle.js index c3b2236..c029462 100644 --- a/src/components/root/common/Tables/UpcomingSingle.js +++ b/src/components/root/common/Tables/UpcomingSingle.js @@ -81,33 +81,47 @@ const UpcomingSingle = () => { }; const columns = [ { dataField: "id", text: "ID", hidden: true }, - { dataField: "submit_time", text: "Submit Time", sort: true }, + { dataField: "brand", text: "Brand", sort: true }, + { dataField: "migration_status", text: "Status", sort: true }, + { + dataField: "ticket_id", + text: "TicketID", + sort: true, + formatter: (cell, row) => ( + + {" "} + {cell}{" "} + + ), + }, + { dataField: "booked_date", text: "Booked Date", sort: true }, + { dataField: "booked_time", text: "Booked Time", sort: true }, + { dataField: "agent_booked", text: "Agent initials", sort: true }, { dataField: "domain", text: "Domain", sort: true, formatter: (cell, row) => {cell} , }, - { dataField: "booked_date", text: "Booked Date", sort: true }, - { dataField: "booked_time", text: "Booked Time", sort: true }, + { dataField: "additional_domains", text: "Additional Domains", sort: true }, + { dataField: "username", text: "Username", sort: true }, + { dataField: "migration_type", text: "Type", sort: true }, { dataField: "original_server", text: "Original Server", sort: true }, { dataField: "new_server", text: "New Server", sort: true }, - { dataField: "username", text: "Username", sort: true }, - { dataField: "brand", text: "Brand", sort: true }, - { dataField: "ticket_id", text: "TicketID", sort: true }, { dataField: "migration_status", text: "Status", sort: true }, - { dataField: "agent_booked", text: "Agent initials", sort: true }, - { dataField: "additional_domains", text: "Additional Domains", sort: true }, - { dataField: "migration_type", text: "Type", sort: true }, { dataField: "term_date", text: "Termination Date", sort: true }, { dataField: "notes", text: "Notes", sort: true }, + { dataField: "submit_time", text: "Submit Time", sort: true }, { dataField: "report", text: "Show Detailed Report", formatter: (cell, row) => {cell} , }, ]; - useEffect(() => { getListData(); }, []);