From 4960dde81eb4cdc2a8e7c6fd1fa754986beda2c8 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Tue, 5 Jul 2022 12:35:24 -0500 Subject: [PATCH] Checkpoint - using types out of QController as intended fully typescript types --- .../components/BaseLayout/index.tsx | 4 +- .../components/EntityForm/data/selectData.ts | 0 src/qqq/components/EntityForm/index.tsx | 177 +++++++++++++++++ .../{pages => }/components/Footer/index.tsx | 0 src/qqq/pages/components/EntityForm/index.tsx | 184 ------------------ src/qqq/pages/entity-create/index.tsx | 4 +- src/qqq/pages/entity-edit/index.tsx | 4 +- src/qqq/pages/entity-list/index.tsx | 67 +++---- .../components/ViewContents/index.tsx | 108 +++++----- src/qqq/pages/entity-view/index.tsx | 2 +- src/qqq/qqqRoutes.tsx | 48 +++-- 11 files changed, 290 insertions(+), 308 deletions(-) rename src/qqq/{pages => }/components/BaseLayout/index.tsx (95%) rename src/qqq/{pages => }/components/EntityForm/data/selectData.ts (100%) create mode 100644 src/qqq/components/EntityForm/index.tsx rename src/qqq/{pages => }/components/Footer/index.tsx (100%) delete mode 100644 src/qqq/pages/components/EntityForm/index.tsx diff --git a/src/qqq/pages/components/BaseLayout/index.tsx b/src/qqq/components/BaseLayout/index.tsx similarity index 95% rename from src/qqq/pages/components/BaseLayout/index.tsx rename to src/qqq/components/BaseLayout/index.tsx index d048077..c00bc40 100644 --- a/src/qqq/pages/components/BaseLayout/index.tsx +++ b/src/qqq/components/BaseLayout/index.tsx @@ -21,8 +21,8 @@ import breakpoints from "assets/theme/base/breakpoints"; // Material Dashboard 2 PRO React TS examples components import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; import DashboardNavbar from "examples/Navbars/DashboardNavbar"; -import Footer from "qqq/pages/components/Footer"; -import MDBox from "../../../../components/MDBox"; +import Footer from "qqq/components/Footer"; +import MDBox from "../../../components/MDBox"; // Declaring props types for BaseLayout interface Props { diff --git a/src/qqq/pages/components/EntityForm/data/selectData.ts b/src/qqq/components/EntityForm/data/selectData.ts similarity index 100% rename from src/qqq/pages/components/EntityForm/data/selectData.ts rename to src/qqq/components/EntityForm/data/selectData.ts diff --git a/src/qqq/components/EntityForm/index.tsx b/src/qqq/components/EntityForm/index.tsx new file mode 100644 index 0000000..0b80eae --- /dev/null +++ b/src/qqq/components/EntityForm/index.tsx @@ -0,0 +1,177 @@ +/** + ========================================================= + * Material Dashboard 2 PRO React TS - v1.0.0 + ========================================================= + + * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts + * Copyright 2022 Creative Tim (https://www.creative-tim.com) + + Coded by www.creative-tim.com + + ========================================================= + + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + */ + +/* eslint-disable no-unused-vars */ +/* eslint-disable spaced-comment */ + +import { useParams } from "react-router-dom"; + +// @material-ui core components +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Settings page components +import FormField from "layouts/pages/account/components/FormField"; + +// qqq imports +import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; +import { QControllerV3 } from "@kingsrook/qqq-frontend-core/lib/controllers/QControllerV2"; +import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; +import React, { useState } from "react"; +import { QTableRecord } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableRecord"; +import MDButton from "../../../components/MDButton"; + +const qController = new QControllerV3(""); + +// Declaring props types for EntityForm +interface Props { + id?: string; +} + +function EntityForm({ id }: Props): JSX.Element { + const { tableName } = useParams(); + const [formFields, setFormFields] = useState([] as JSX.Element[]); + const defaultValues: { [key: string]: string } = {}; + const [formValues, setFormValues] = useState(defaultValues); + const [loadCounter, setLoadCounter] = useState(0); + const [tableMetaData, setTableMetaData] = useState(null); + + const handleInputChange = (e: { target: { name: any; value: any } }) => { + console.log("A"); + const { name, value } = e.target; + console.log(name); + console.log(value); + formValues[name] = value; + setFormValues(formValues); + }; + + if (loadCounter === 0) { + setLoadCounter(1); + + (async () => { + // await qController.loadTableMetaData(tableName).then((tableMetaData) => { + const tableMetaData = await qController.loadTableMetaData(tableName); + setTableMetaData(tableMetaData); + const formFields = [] as JSX.Element[]; + + // make a call to query (just get all for now, and iterate and filter like a caveman) + if (id !== null) { + const records = await qController.query(tableName, 250); + let foundRecord: QRecord; + records.forEach((innerRecord) => { + const fieldKeys = [...innerRecord.values.keys()]; + fieldKeys.forEach((key) => { + const value = innerRecord.values.get(key); + if (key === tableMetaData.primaryKeyField && `${value}` === `${id}`) { + foundRecord = innerRecord; + } + }); + }); + + const sortedKeys = [...tableMetaData.fields.keys()].sort(); + sortedKeys.forEach((key) => { + formValues[key] = foundRecord.values.get(key); + + const fieldMetaData = tableMetaData.fields.get(key); + if (fieldMetaData.name !== tableMetaData.primaryKeyField) { + if (formValues[fieldMetaData.name] == null) { + formValues[fieldMetaData.name] = ""; + } + + formFields.push( + + + + ); + } + }); + + setLoadCounter(2); + setFormValues(formValues); + } else { + const sortedKeys = [...tableMetaData.fields.keys()].sort(); + sortedKeys.forEach((key) => { + const fieldMetaData = tableMetaData.fields.get(key); + if (fieldMetaData.name !== tableMetaData.primaryKeyField) { + formFields.push( + + + + ); + } + }); + } + + setFormFields(formFields); + })(); + } + + const handleSubmit = (event: { preventDefault: () => void }) => { + event.preventDefault(); + + (async () => { + await qController.create(tableName, formValues).then((record) => { + window.location.href = `/${tableName}/view/${record.values.get("id")}`; // todo - primaryKeyField + }); + })(); + }; + + const pageTitle = id != null ? `Edit ${tableMetaData?.label}` : `Create ${tableMetaData?.label}`; + + return ( + + + {pageTitle} + + + + {formFields} + + + + + save {tableMetaData?.label} + + + + + + ); +} + +// Declaring default props for DefaultCell +EntityForm.defaultProps = { + id: null, +}; + +export default EntityForm; diff --git a/src/qqq/pages/components/Footer/index.tsx b/src/qqq/components/Footer/index.tsx similarity index 100% rename from src/qqq/pages/components/Footer/index.tsx rename to src/qqq/components/Footer/index.tsx diff --git a/src/qqq/pages/components/EntityForm/index.tsx b/src/qqq/pages/components/EntityForm/index.tsx deleted file mode 100644 index 64ed98f..0000000 --- a/src/qqq/pages/components/EntityForm/index.tsx +++ /dev/null @@ -1,184 +0,0 @@ -/** - ========================================================= - * Material Dashboard 2 PRO React TS - v1.0.0 - ========================================================= - - * Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts - * Copyright 2022 Creative Tim (https://www.creative-tim.com) - - Coded by www.creative-tim.com - - ========================================================= - - * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - */ - -/* eslint-disable no-unused-vars */ -/* eslint-disable spaced-comment */ - -import { useParams } from "react-router-dom"; - -// @material-ui core components -import Card from "@mui/material/Card"; -import Grid from "@mui/material/Grid"; - -// Material Dashboard 2 PRO React TS components -import MDBox from "components/MDBox"; -import MDTypography from "components/MDTypography"; - -// Settings page components -import FormField from "layouts/pages/account/components/FormField"; - -// qqq imports -import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; -import React, { useState } from "react"; -import { QTableRecord } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableRecord"; -import MDButton from "../../../../components/MDButton"; - -const qController = new QController(""); - -// Declaring props types for EntityForm -interface Props { - id?: string; -} - -function EntityForm({ id }: Props): JSX.Element { - const { tableName } = useParams(); - const [formFields, setFormFields] = useState([] as JSX.Element[]); - const defaultValues: { [key: string]: string } = {}; - const [formValues, setFormValues] = useState(defaultValues); - const [loadCounter, setLoadCounter] = useState(0); - - const handleInputChange = (e: { target: { name: any; value: any } }) => { - console.log("A"); - const { name, value } = e.target; - console.log(name); - console.log(value); - formValues[name] = value; - setFormValues(formValues); - }; - - const tableMetaData = new QTableMetaData(tableName); - if (loadCounter === 0) { - setLoadCounter(1); - - (async () => { - await qController.loadTableMetaData(tableName).then((tableMetaData) => { - const formFields = [] as JSX.Element[]; - - // make a call to query (just get all for now, and iterate and filter like a caveman) - if (id !== null) { - (async () => { - await qController.query(tableName, 250).then((results) => { - let foundRecord: QTableRecord; - results.forEach((record) => { - const values = new Map(Object.entries(record.values)); - values.forEach((value, key) => { - if (key === tableMetaData.primaryKeyField && value.toString() === id) { - foundRecord = record; - } - }); - }); - - if (id != null) { - const values = new Map(Object.entries(foundRecord.values)); - values.forEach((value, key) => { - formValues[key] = value; - console.log(`key:${key},value:${value}`); - }); - } - - const fields = new Map(Object.entries(tableMetaData.fields)); - const sortedEntries = new Map([...fields.entries()].sort()); - sortedEntries.forEach((fieldMetaData) => { - if (fieldMetaData.name !== tableMetaData.primaryKeyField) { - if (formValues[fieldMetaData.name] == null) { - formValues[fieldMetaData.name] = ""; - } - - formFields.push( - - - - ); - } - }); - - setLoadCounter(2); - setFormValues(formValues); - }); - })(); - } else { - const fields = new Map(Object.entries(tableMetaData.fields)); - const sortedEntries = new Map([...fields.entries()].sort()); - sortedEntries.forEach((fieldMetaData) => { - if (fieldMetaData.name !== tableMetaData.primaryKeyField) { - formFields.push( - - - - ); - } - }); - } - - setFormFields(formFields); - }); - })(); - } - - const handleSubmit = (event: { preventDefault: () => void }) => { - event.preventDefault(); - - (async () => { - await qController.create(tableName, formValues).then((recordList) => { - const values = new Map(Object.entries(recordList[0].values)); - window.location.href = `/${tableName}/view/${values.get("id")}`; - }); - })(); - }; - - const pageTitle = id != null ? `Edit ${tableMetaData.label}` : `Create ${tableMetaData.label}`; - - return ( - - - {pageTitle} - - - - {formFields} - - - - - save {tableMetaData.label} - - - - - - ); -} - -// Declaring default props for DefaultCell -EntityForm.defaultProps = { - id: null, -}; - -export default EntityForm; diff --git a/src/qqq/pages/entity-create/index.tsx b/src/qqq/pages/entity-create/index.tsx index e1954cf..c8796b4 100644 --- a/src/qqq/pages/entity-create/index.tsx +++ b/src/qqq/pages/entity-create/index.tsx @@ -20,8 +20,8 @@ import Grid from "@mui/material/Grid"; import MDBox from "components/MDBox"; // Settings page components -import CreateForm from "qqq/pages/components/EntityForm"; -import BaseLayout from "qqq/pages/components/BaseLayout"; +import CreateForm from "qqq/components/EntityForm"; +import BaseLayout from "qqq/components/BaseLayout"; function EntityCreate(): JSX.Element { return ( diff --git a/src/qqq/pages/entity-edit/index.tsx b/src/qqq/pages/entity-edit/index.tsx index 4db3893..4e5de62 100644 --- a/src/qqq/pages/entity-edit/index.tsx +++ b/src/qqq/pages/entity-edit/index.tsx @@ -20,9 +20,9 @@ import Grid from "@mui/material/Grid"; import MDBox from "components/MDBox"; // Settings page components -import BaseLayout from "qqq/pages/components/BaseLayout"; +import BaseLayout from "qqq/components/BaseLayout"; import { useParams } from "react-router-dom"; -import EntityForm from "qqq/pages/components/EntityForm"; +import EntityForm from "qqq/components/EntityForm"; function EntityEdit(): JSX.Element { const { id } = useParams(); diff --git a/src/qqq/pages/entity-list/index.tsx b/src/qqq/pages/entity-list/index.tsx index 9cbe11c..7a41527 100644 --- a/src/qqq/pages/entity-list/index.tsx +++ b/src/qqq/pages/entity-list/index.tsx @@ -34,13 +34,13 @@ import DashboardNavbar from "examples/Navbars/DashboardNavbar"; import DataTable from "examples/Tables/DataTable"; // Data -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; +import { QControllerV3 } from "@kingsrook/qqq-frontend-core/lib/controllers/QControllerV2"; import Link from "@mui/material/Link"; import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; import IdCell from "./components/IdCell"; -import Footer from "../components/Footer"; +import Footer from "../../components/Footer"; -const qController = new QController(""); +const qController = new QControllerV3(""); console.log(qController); // Declaring props types for DefaultCell @@ -65,44 +65,35 @@ function EntityList({ table }: Props): JSX.Element { const createPath = `/${table.name}/create`; (async () => { - await qController.loadTableMetaData(table.name).then((tableMetaData) => { - (async () => { - await qController.query(table.name, 250).then((results) => { - dataTableData = { - columns: [], - rows: [], - }; + const tableMetaData = await qController.loadTableMetaData(table.name); + const results = await qController.query(table.name, 250); + dataTableData = { + columns: [], + rows: [], + }; - const fields = new Map(Object.entries(tableMetaData.fields)); - const sortedEntries = new Map([...fields.entries()].sort()); - sortedEntries.forEach((value, key) => { - if (key === tableMetaData.primaryKeyField) { - dataTableData.columns.splice(0, 0, { - Header: key, - accessor: key, - Cell: ({ value }: any) => , - }); - } else { - dataTableData.columns.push({ - Header: key, - accessor: key, - }); - } - }); - - results.forEach((record) => { - const row = new Map(); - const values = new Map(Object.entries(record.values)); - values.forEach((value, key) => { - row.set(key, value); - }); - dataTableData.rows.push(Object.fromEntries(row)); - }); - - setTableState(table.name); + const sortedKeys = [...tableMetaData.fields.keys()].sort(); + sortedKeys.forEach((key) => { + const field = tableMetaData.fields.get(key); + if (key === tableMetaData.primaryKeyField) { + dataTableData.columns.splice(0, 0, { + Header: field.label, + accessor: key, + Cell: ({ value }: any) => , }); - })(); + } else { + dataTableData.columns.push({ + Header: field.label, + accessor: key, + }); + } }); + + results.forEach((record) => { + dataTableData.rows.push(Object.fromEntries(record.values.entries())); + }); + + setTableState(table.name); })(); const renderMenu = ( diff --git a/src/qqq/pages/entity-view/components/ViewContents/index.tsx b/src/qqq/pages/entity-view/components/ViewContents/index.tsx index 14fa493..0e87b38 100644 --- a/src/qqq/pages/entity-view/components/ViewContents/index.tsx +++ b/src/qqq/pages/entity-view/components/ViewContents/index.tsx @@ -30,8 +30,8 @@ import MDTypography from "components/MDTypography"; // Settings page components // qqq imports -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; -import { QTableRecord } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableRecord"; +import { QControllerV3 } from "@kingsrook/qqq-frontend-core/lib/controllers/QControllerV2"; +import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; import React, { useState } from "react"; import Link from "@mui/material/Link"; @@ -45,7 +45,7 @@ import Button from "@mui/material/Button"; import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; import MDButton from "../../../../../components/MDButton"; -const qController = new QController(""); +const qController = new QControllerV3(""); console.log(qController); // Declaring props types for ViewForm @@ -58,6 +58,8 @@ function ViewContents({ id }: Props): JSX.Element { const [nameValues, setNameValues] = useState([] as JSX.Element[]); const [loadCounter, setLoadCounter] = useState(0); const [open, setOpen] = useState(false); + const [tableMetaData, setTableMetaData] = useState(null); + const [record, setRecord] = useState(null); const handleConfirmDelete = (event: { preventDefault: () => void }) => { event.preventDefault(); @@ -69,59 +71,57 @@ function ViewContents({ id }: Props): JSX.Element { })(); }; - const tableMetaData = new QTableMetaData(tableName); if (loadCounter === 0) { setLoadCounter(1); + (async () => { - await qController.loadTableMetaData(tableName).then((tableMetaData) => { - const formFields = [] as JSX.Element[]; - const fields = new Map(Object.entries(tableMetaData.fields)); + const tableMetaData = await qController.loadTableMetaData(tableName); + console.log("@dk: table meta data"); + console.log(tableMetaData); + setTableMetaData(tableMetaData); - // make a call to query (just get all for now, and iterate and filter like a caveman) - (async () => { - await qController.query(tableName, 250).then((results) => { - let foundRecord: QTableRecord; - results.forEach((record) => { - const values = new Map(Object.entries(record.values)); - values.forEach((value, key) => { - if (key === tableMetaData.primaryKeyField && value.toString() === id) { - foundRecord = record; - } - }); - }); - - nameValues.push( - - - {tableMetaData.primaryKeyField}:   - - -  {id} - - - ); - - const values = new Map(Object.entries(foundRecord.values)); - const sortedEntries = new Map([...values.entries()].sort()); - sortedEntries.forEach((value, key) => { - if (key !== tableMetaData.primaryKeyField) { - nameValues.push( - - - {key}:   - - -  {value} - - - ); - } - }); - - setLoadCounter(2); - }); - })(); + // make a call to query (just get all for now, and iterate and filter like a caveman) + const records = await qController.query(tableName, 250); + let foundRecord: QRecord; + records.forEach((innerRecord) => { + const fieldKeys = [...innerRecord.values.keys()]; + fieldKeys.forEach((key) => { + const value = innerRecord.values.get(key); + if (key === tableMetaData.primaryKeyField && `${value}` === `${id}`) { + foundRecord = innerRecord; + setRecord(innerRecord); + } + }); }); + + nameValues.push( + + + {tableMetaData.primaryKeyField}:   + + +  {id} + + + ); + + const sortedKeys = [...foundRecord.values.keys()].sort(); + sortedKeys.forEach((key) => { + if (key !== tableMetaData.primaryKeyField) { + nameValues.push( + + + {tableMetaData.fields.get(key).label}:   + + +  {foundRecord.values.get(key)} + + + ); + } + }); + + setLoadCounter(2); })(); } @@ -139,7 +139,7 @@ function ViewContents({ id }: Props): JSX.Element { - Viewing {tableMetaData.label} ({id}) + Viewing {tableMetaData?.label} ({id}) {nameValues} @@ -153,7 +153,7 @@ function ViewContents({ id }: Props): JSX.Element { size="small" onClick={handleConfirmDelete} > - delete {tableMetaData.label} + delete {tableMetaData?.label} - edit {tableMetaData.label} + edit {tableMetaData?.label} diff --git a/src/qqq/pages/entity-view/index.tsx b/src/qqq/pages/entity-view/index.tsx index e48ec87..60212ea 100644 --- a/src/qqq/pages/entity-view/index.tsx +++ b/src/qqq/pages/entity-view/index.tsx @@ -23,7 +23,7 @@ import MDBox from "components/MDBox"; // Settings page components // import CreateForm from "qqq/pages/entity-create/components/CreateForm"; -import BaseLayout from "qqq/pages/components/BaseLayout"; +import BaseLayout from "qqq/components/BaseLayout"; import ViewContents from "./components/ViewContents"; function EntityView(): JSX.Element { diff --git a/src/qqq/qqqRoutes.tsx b/src/qqq/qqqRoutes.tsx index c3acd86..8cbbe68 100644 --- a/src/qqq/qqqRoutes.tsx +++ b/src/qqq/qqqRoutes.tsx @@ -75,7 +75,7 @@ import Icon from "@mui/material/Icon"; import profilePicture from "assets/images/team-3.jpg"; // QQQ -import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController"; +import { QControllerV3 } from "@kingsrook/qqq-frontend-core/lib/controllers/QControllerV2"; import EntityList from "./pages/entity-list"; @@ -386,36 +386,34 @@ const qqqRoutes = [ { type: "title", title: "Tables", key: "title-docs" }, ]; -const qController = new QController(""); +const qController = new QControllerV3(""); console.log(qController); (async () => { - await qController.loadMetaData().then((metaData) => { - console.log(`metaData: ${metaData}`); + const metaData = await qController.loadMetaData(); + console.log(`metaData: ${metaData}`); - // get the keys sorted - const keys = new Map([...metaData.entries()].sort()); - - const tableList = [] as any[]; - keys.forEach((value, key) => { - const table = metaData.get(key); - tableList.push({ - name: table.label, - key: table.name, - route: `/${table.name}/list`, - component: , - }); + // get the keys sorted + const keys = [...metaData.keys()].sort(); + const tableList = [] as any[]; + keys.forEach((key) => { + const table = metaData.get(key); + tableList.push({ + name: table.label, + key: table.name, + route: `/${table.name}/list`, + component: , }); - - const tables = { - type: "collapse", - name: "Tables", - key: "tables", - icon: dashboard, - collapse: tableList, - }; - qqqRoutes.push(tables); }); + + const tables = { + type: "collapse", + name: "Tables", + key: "tables", + icon: dashboard, + collapse: tableList, + }; + qqqRoutes.push(tables); })(); export default qqqRoutes;