adding validation + responses, also trying out a date/time picket on cPanel booking page

2021-01-10 18:04:10 -05:00 · 2021-01-10 18:04:10 -05:00 · 96605a6923
commit 96605a6923
parent 2508af3cde
10 changed files with 238 additions and 29 deletions
--- 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",
--- 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",
--- 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 {
            </div>
            <div className="col s5">
              <p>Migrations tracker</p>
+              {/* <Cards migs={this.state.migs} /> */}
            </div>
            <div className="divider"></div>
            <div className="section">
--- a/src/components/root/Navigation.js
+++ b/src/components/root/Navigation.js
@ -19,9 +19,9 @@ export class Navigation extends Component {
              <li>
                <Link to="/upcoming-migrations">Upcoming Migrations</Link>
              </li>
-              <li>
+              {/* <li>
                <Link to="/migrations">Migrations</Link>
-              </li>
+              </li> */}
              <li>
                <Link to="/reports">Reports</Link>
              </li>
--- 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 <div />;
    }

--- 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 = () => {
                  />
                </FormGroup>
              </Col>
+              {/* <Col>
+                <Field
+                  name="dateTime"
+                  component={FormikFieldDateTimePicker}
+                  inputVariant="outlined"
+                  label="Zoned Date and Time"
+                  timezone={timezone}
+                  helperText="Timezone specified"
+                  clearable
+                  margin="dense"
+                />
+              </Col> */}
              <Col>
                <FormGroup>
                  <Label for="bookedTime">Timeslot</Label>
--- a/src/components/root/common/Forms/FormikFieldDateTimePicker.js
+++ 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 (
+    <CustomTag
+      name={field.name}
+      value={pickerValue}
+      helperText={currentError}
+      error={Boolean(currentError)}
+      onError={(_, error) => 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;
--- a/src/components/root/common/Forms/ReportSingleMigration.js
+++ b/src/components/root/common/Forms/ReportSingleMigration.js
@ -92,6 +92,18 @@ const ReportSingleMigration = ({ item }) => {
            </Col>
          </Row>
          <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="bookedSource">Original server</Label>
--- 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) => (
+        <a
+          href={
+            "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id
+          }
+        >
+          {" "}
+          {cell}{" "}
+        </a>
+      ),
+    },
+    { 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) => <a href={"migrations/" + row.id}> {cell} </a>,
    },
-    { 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",
--- 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) => (
+        <a
+          href={
+            "https://helpdesk.ventraip.com.au/profiles/ticket/" + row.ticket_id
+          }
+        >
+          {" "}
+          {cell}{" "}
+        </a>
+      ),
+    },
+    { 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) => <a href={"migrations/" + row.id}> {cell} </a>,
    },
-    { 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) => <a href={cell + row.id}> {cell} </a>,
    },
  ];
-
  useEffect(() => {
    getListData();
  }, []);