diff --git a/package-lock.json b/package-lock.json index 93be7f7..2c77c65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7768,6 +7768,32 @@ "mime-types": "^2.1.12" } }, + "formik": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.5.tgz", + "integrity": "sha512-KkOsyYmh5xsow+wlbdL9QSkqvbiHSb1RIToBKiooCFW4lyypn+ZlHGjTuuOqUWBqZaI5nCEupeI275Mo6tFBzg==", + "requires": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.14", + "lodash-es": "^4.17.14", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "dependencies": { + "deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + } + } + }, + "formstrap": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/formstrap/-/formstrap-1.1.3.tgz", + "integrity": "sha512-7eI/Qt7NTlIl1I0tyXFZPZ98ngC+97MMYd4yejpTt/sJkTRDQMsKqxWev4kEUR6sTEA2Lyoy+2TWQ8FqAwCIgg==" + }, "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", @@ -11308,6 +11334,11 @@ "sass-loader": "^8.0.2" }, "dependencies": { + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "react": { "version": "16.14.0", "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", @@ -11667,9 +11698,9 @@ } }, "moment": { - "version": "2.24.0", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", - "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" }, "move-concurrently": { "version": "1.0.1", @@ -14091,6 +14122,11 @@ "underscore": "1.9.1" } }, + "react-bootstrap-table2-filter": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-bootstrap-table2-filter/-/react-bootstrap-table2-filter-1.3.3.tgz", + "integrity": "sha512-lE+CHHGewzN9PCPaRqbu9wia8NMfwOBMPOAoAyfxbbMrZzjCf1WYRrHbWGzUj1MQlF5kJxLMwRgy/C604OmgMw==" + }, "react-bootstrap-table2-paginator": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/react-bootstrap-table2-paginator/-/react-bootstrap-table2-paginator-2.1.2.tgz", @@ -14293,6 +14329,11 @@ "warning": "^4.0.1" } }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "react-fit": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/react-fit/-/react-fit-1.3.1.tgz", diff --git a/package.json b/package.json index 71fa62c..3236da7 100644 --- a/package.json +++ b/package.json @@ -12,14 +12,18 @@ "axios-react": "^2.0.2", "bootstrap": "^4.5.3", "cldr-data": "^36.0.0", + "formik": "^2.2.5", + "formstrap": "^1.1.3", "globalize": "^1.6.0", "iana-tz-data": "^2019.1.0", "mdbreact": "^4.27.0", + "moment": "^2.29.1", "react": "^17.0.1", "react-bootstrap": "^1.4.0", "react-bootstrap-form": "^0.1.4-beta6", "react-bootstrap-table": "^4.3.1", "react-bootstrap-table-next": "^4.0.3", + "react-bootstrap-table2-filter": "^1.3.3", "react-bootstrap-table2-paginator": "^2.1.2", "react-bootstrap-table2-toolkit": "^2.1.3", "react-data-grid": "^7.0.0-canary.28", diff --git a/public/index.html b/public/index.html index edb33ee..a10b1fc 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,8 @@ - + @@ -12,9 +13,10 @@ - + + - React App + Migrations Tracker diff --git a/src/components/actions/API.js b/src/components/actions/API.js index ba98a96..46238b8 100644 --- a/src/components/actions/API.js +++ b/src/components/actions/API.js @@ -1,5 +1,5 @@ -import axios from 'axios' +import axios from "axios"; export const callAPI = axios.create({ - baseURL: 'https://devapi.benjamyn.love/migrations/' -}) \ No newline at end of file + baseURL: "https://devapi.benjamyn.love/migrations/", +}); diff --git a/src/components/root/Pages/Forms/CPanelBooking.js b/src/components/root/Pages/Forms/CPanelBooking.js new file mode 100644 index 0000000..7d26877 --- /dev/null +++ b/src/components/root/Pages/Forms/CPanelBooking.js @@ -0,0 +1,170 @@ +import React, { Component } 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 { Input, Submit } from "formstrap"; +import { callAPI } from "../../../actions/API"; + +export const CPanelBooking = () => { + const initialValues = { + submit_time: moment().format("YYYY-MM-DD"), + }; + + const onSubmit = async (values, { setSubmitting }) => { + console.log(values); + callAPI + .post("/") + .then(function (response) { + console.log(JSON.stringify(response.values)); + }) + .catch(function (error) { + console.log(error); + }); + setSubmitting(false); + }; + return ( + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Save + +
+ + ); +}; diff --git a/src/components/root/Pages/Forms/DateTimePicker.js b/src/components/root/Pages/Forms/DateTimePicker.js new file mode 100644 index 0000000..092d162 --- /dev/null +++ b/src/components/root/Pages/Forms/DateTimePicker.js @@ -0,0 +1,39 @@ +import React from "react"; +var DatePicker = require("reactstrap-date-picker"); + +class DateTimePicker extends React.Component { + constructor(props) { + super(props); + this.state = { + value: new Date().toISOString(), + }; + } + + handleChange(value, formattedValue) { + this.setState({ + value: value, // ISO String, ex: "2016-11-19T12:00:00.000Z" + formattedValue: formattedValue, // Formatted String, ex: "11/19/2016" + }); + } + + componentDidUpdate() { + // Access ISO String and formatted values from the DOM. + var hiddenInputElement = document.getElementById("example-datepicker"); + console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z" + console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016" + } + + render() { + return ( + this.handleChange(v, f)} + minDate={Date()} + width="100%" + size="lg" + /> + ); + } +} +export default DateTimePicker; diff --git a/src/components/root/Pages/Forms/EmailBooking.js b/src/components/root/Pages/Forms/EmailBooking.js new file mode 100644 index 0000000..643b5b1 --- /dev/null +++ b/src/components/root/Pages/Forms/EmailBooking.js @@ -0,0 +1,11 @@ +import React, { Component } from "react"; + +export default class EmailBooking extends Component { + render() { + return ( +
+

Email Migration

+
+ ); + } +} diff --git a/src/components/root/Pages/Forms/FormPage.js b/src/components/root/Pages/Forms/FormPage.js index 0f097da..6193080 100644 --- a/src/components/root/Pages/Forms/FormPage.js +++ b/src/components/root/Pages/Forms/FormPage.js @@ -1,158 +1,66 @@ -import React, { Component } from "react"; +import React, { useState } from "react"; import { - Container, - Col, - Form, - FormGroup, - Label, - Input, - FormText, - Button, + TabContent, + TabPane, + Nav, + NavItem, + NavLink, Row, + Col, } from "reactstrap"; -import PropTypes from "prop-types"; -import "bootstrap/dist/css/bootstrap.min.css"; +import classnames from "classnames"; + +import { CPanelBooking } from "./CPanelBooking"; +import EmailBooking from "./EmailBooking"; + +const FormPage = (props) => { + const [activeTab, setActiveTab] = useState("1"); + + const toggle = (tab) => { + if (activeTab !== tab) setActiveTab(tab); + }; -const FormPage = () => { return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ + + + + + + + + + + + + + + + + +
); }; export default FormPage; - -{ - /* */ -} diff --git a/src/components/root/Pages/Functionality/SubmitMigration.js b/src/components/root/Pages/Functionality/SubmitMigration.js new file mode 100644 index 0000000..b973baf --- /dev/null +++ b/src/components/root/Pages/Functionality/SubmitMigration.js @@ -0,0 +1,9 @@ +import React from 'react' + +export default function SubmitMigration() { + return ( +
+ +
+ ) +} diff --git a/src/components/root/Pages/Migrations/UpcomingSingle copy.old b/src/components/root/Pages/Migrations/UpcomingSingle copy.old new file mode 100644 index 0000000..1f81bf9 --- /dev/null +++ b/src/components/root/Pages/Migrations/UpcomingSingle copy.old @@ -0,0 +1,135 @@ +import React from "react"; +import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table"; +import { Link } from "react-router-dom"; + +import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"; // I love this + +export const UpcomingSingle = ({ data }) => { + const options = { + sizePerPageList: [ + { + text: "100", + value: 100, + }, + { + text: "200", + value: 200, + }, + { + text: "All", + value: data.length, + }, + ], + sizePerPage: 30, + // pageStartIndex: 0, + // prePage: "Prev", + // nextPage: "Next", + formatter: (cell, row) => {cell} , + }; + console.log(data.id); + + return ( +
+ + + Submit time + + + Domain + + + Booked time + + + Original server + + + New server + + + Username + + + Brand + + + Ticket ID + + + Status + + + Agent + + + Additional Domains + + + Migration type + + + est. Terminaton Date + + + Migration CMD + + Notes + +
+ ); + // +}; +{ +} diff --git a/src/components/root/Pages/Migrations/UpcomingSingle.js b/src/components/root/Pages/Migrations/UpcomingSingle.js index e9e5230..cb28ee9 100644 --- a/src/components/root/Pages/Migrations/UpcomingSingle.js +++ b/src/components/root/Pages/Migrations/UpcomingSingle.js @@ -1,131 +1,145 @@ -import React from "react"; -import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table"; -import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css"; +import React, { useState, useEffect } from "react"; +import { callAPI } from "../../../actions/API"; +import BootstrapTable from "react-bootstrap-table-next"; +import paginationFactory from "react-bootstrap-table2-paginator"; +import * as ReactBootstrap from "react-bootstrap"; +import filterFactory from "react-bootstrap-table2-filter"; +import ToolkitProvider, { + Search, + CSVExport, +} from "react-bootstrap-table2-toolkit"; -export const UpcomingSingle = ({ data }) => { +const UpcomingSingle = () => { + const [list, setList] = useState([]); + const [loading, setLoading] = useState(false); + const { SearchBar } = Search; + const { ExportCSVButton } = CSVExport; + const sizePerPageRenderer = ({ + options, + currSizePerPage, + onSizePerPageChange, + }) => ( +
+ {options.map((option) => { + const isSelect = currSizePerPage === `${option.page}`; + return ( + + ); + })} +
+ ); + + const getListData = async () => { + try { + const data = await callAPI.get("/all/"); + console.log(data); + setList(data.data); + setLoading(true); + } catch (e) { + console.log(e); + } + }; const options = { + paginationSize: 4, + pageStartIndex: 0, + // alwaysShowAllBtns: true, // Always show next and previous button + // withFirstAndLast: false, // Hide the going to First and Last page button + // hideSizePerPage: true, // Hide the sizePerPage dropdown always + // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page + firstPageText: "First", + prePageText: "Back", + nextPageText: "Next", + lastPageText: "Last", + nextPageTitle: "First page", + prePageTitle: "Pre page", + firstPageTitle: "Next page", + lastPageTitle: "Last page", + showTotal: true, + disablePageTitle: true, sizePerPageList: [ + { + text: "50", + value: 50, + }, { text: "100", value: 100, }, - { - text: "200", - value: 200, - }, - { - text: "All", - value: data.length, - }, ], - sizePerPage: 20, - // pageStartIndex: 0, - // prePage: "Prev", - // nextPage: "Next", + sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text }; + const columns = [ + { dataField: "id", text: "ID", hidden: true }, + { dataField: "submit_time", text: "Submit Time", sort: true }, + { dataField: "domain", text: "Domain", sort: true }, + { dataField: "booked_time", text: "Booked Time", 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: "report", + text: "Show Detailed Report", + formatter: (cell, row) => {cell} , + }, + ]; + + useEffect(() => { + getListData(); + }, []); return ( -
- - + {loading ? ( + - Submit time - - - Domain - - - Booked time - - - Original server - - - New server - - - Username - - Notes - - Brand - - - Ticket ID - - - Status - - - Agent - - - Additional Domains - - - Migration type - - - est. Terminaton Date - - - Migration CMD - - + {(props) => ( +
+
+

+ +
+ +
+ +
+ + Export CSV!! + +
+ )} + + ) : ( + + )}
); - // }; -{ -} + +export default UpcomingSingle; diff --git a/src/components/root/Pages/Upcoming.js b/src/components/root/Pages/Upcoming.js index e2de4d9..d9ecc3b 100644 --- a/src/components/root/Pages/Upcoming.js +++ b/src/components/root/Pages/Upcoming.js @@ -1,8 +1,6 @@ import React, { Component } from "react"; -import { callAPI } from "../../actions/API"; -import { UpcomingSingle } from "./Migrations/UpcomingSingle"; -import Error from "../../actions/Error"; +import UpcomingSingle from "./Migrations/UpcomingSingle"; class Upcoming extends Component { constructor(props) { @@ -12,30 +10,6 @@ class Upcoming extends Component { e: false, }; } - componentDidMount() { - callAPI - .get("all/") - .then((request) => { - this.setState({ - sidemigs: request.data, - }); - }) - .catch((e) => { - this.setState({ - error: true, - }); - }); - } - - renderItems() { - if (!this.state.e) { - return this.state.sidemigs.map((data) => ( - - )); - } else { - return ; - } - } render() { return (