QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Checkpoint - using types out of QController as intended fully typescript types

Browse Source
This commit is contained in:
darin.kelkhoff
2022-07-05 12:35:24 -05:00
parent d9d6c887f6
commit 4960dde81e
11 changed files with 290 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/qqq/pages/components/BaseLayout/index.tsx
View File

@ -1,70 +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.
*/
import { useState, useEffect, ReactNode } from "react";
// Material Dashboard 2 PRO React TS Base Styles
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";
// Declaring props types for BaseLayout
interface Props {
stickyNavbar?: boolean;
children: ReactNode;
}
function BaseLayout({ stickyNavbar, children }: Props): JSX.Element {
const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
useEffect(() => {
// A function that sets the orientation state of the tabs.
function handleTabsOrientation() {
return window.innerWidth < breakpoints.values.sm
? setTabsOrientation("vertical")
: setTabsOrientation("horizontal");
}
/**
The event listener that's calling the handleTabsOrientation function when resizing the window.
*/
window.addEventListener("resize", handleTabsOrientation);
// Call the handleTabsOrientation function to set the state with the initial value.
handleTabsOrientation();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleTabsOrientation);
}, [tabsOrientation]);
return (
<DashboardLayout>
<DashboardNavbar absolute={!stickyNavbar} isMini />
<MDBox mt={stickyNavbar ? 3 : 10}>{children}</MDBox>
<Footer />
</DashboardLayout>
);
}
// Declaring default props for BaseLayout
BaseLayout.defaultProps = {
stickyNavbar: false,
};
export default BaseLayout;

193
src/qqq/pages/components/EntityForm/data/selectData.ts
View File

@ -1,193 +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.
*/
const selectData = {
gender: ["Male", "Female"],
birthDate: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
days: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
years: [
"1900",
"1901",
"1902",
"1903",
"1904",
"1905",
"1906",
"1907",
"1908",
"1909",
"1910",
"1911",
"1912",
"1913",
"1914",
"1915",
"1915",
"1915",
"1916",
"1917",
"1918",
"1919",
"1920",
"1921",
"1922",
"1923",
"1924",
"1925",
"1926",
"1927",
"1928",
"1929",
"1930",
"1931",
"1932",
"1933",
"1934",
"1935",
"1936",
"1937",
"1938",
"1939",
"1940",
"1941",
"1942",
"1943",
"1944",
"1945",
"1946",
"1947",
"1948",
"1949",
"1950",
"1951",
"1952",
"1953",
"1954",
"1955",
"1956",
"1957",
"1958",
"1959",
"1960",
"1961",
"1962",
"1963",
"1964",
"1965",
"1966",
"1967",
"1968",
"1969",
"1970",
"1971",
"1972",
"1973",
"1974",
"1975",
"1976",
"1977",
"1978",
"1979",
"1980",
"1981",
"1982",
"1983",
"1984",
"1985",
"1986",
"1987",
"1988",
"1989",
"1990",
"1991",
"1992",
"1993",
"1994",
"1995",
"1996",
"1997",
"1998",
"1999",
"2000",
"2001",
"2002",
"2003",
"2004",
"2005",
"2006",
"2007",
"2008",
"2009",
"2010",
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
],
skills: ["react", "vue", "angular", "svelte", "javascript"],
};
export default selectData;

184
src/qqq/pages/components/EntityForm/index.tsx
View File

@ -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(
<Grid item xs={12} sm={4} key={fieldMetaData.name}>
<FormField
key={fieldMetaData.name}
name={fieldMetaData.name}
id={fieldMetaData.name}
label={fieldMetaData.label}
value={formValues[fieldMetaData.name]}
onChange={handleInputChange}
/>
</Grid>
);
}
});
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(
<Grid item xs={12} sm={4} key={fieldMetaData.name}>
<FormField
key={fieldMetaData.name}
name={fieldMetaData.name}
id={fieldMetaData.name}
label={fieldMetaData.label}
value={formValues[fieldMetaData.name]}
onChange={handleInputChange}
/>
</Grid>
);
}
});
}
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 (
<Card id="basic-info" sx={{ overflow: "visible" }}>
<MDBox p={3}>
<MDTypography variant="h5">{pageTitle}</MDTypography>
</MDBox>
<MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
<Grid key="fieldsGrid" container spacing={3}>
{formFields}
</Grid>
<Grid key="buttonGrid" container spacing={3}>
<MDBox ml="auto">
<MDButton type="submit" variant="gradient" color="dark" size="small">
save {tableMetaData.label}
</MDButton>
</MDBox>
</Grid>
</MDBox>
</Card>
);
}
// Declaring default props for DefaultCell
EntityForm.defaultProps = {
id: null,
};
export default EntityForm;

116
src/qqq/pages/components/Footer/index.tsx
View File

@ -1,116 +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.
*/
// @mui material components
import Link from "@mui/material/Link";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
// Declaring props types for Footer
interface Props {
company?: {
href: string;
name: string;
};
links?: {
href: string;
name: string;
}[];
[key: string]: any;
}
function Footer({ company, links }: Props): JSX.Element {
const { href, name } = company;
const { size } = typography;
const renderLinks = () =>
links.map((link) => (
<MDBox key={link.name} component="li" px={2} lineHeight={1}>
<Link href={link.href} target="_blank">
<MDTypography variant="button" fontWeight="regular" color="text">
{link.name}
</MDTypography>
</Link>
</MDBox>
));
return (
<MDBox
width="100%"
display="flex"
flexDirection={{ xs: "column", lg: "row" }}
justifyContent="space-between"
alignItems="center"
px={1.5}
>
<MDBox
display="flex"
justifyContent="center"
alignItems="center"
flexWrap="wrap"
color="text"
fontSize={size.sm}
px={1.5}
>
&copy; {new Date().getFullYear()}, made with
<MDBox fontSize={size.md} color="text" mb={-0.5} mx={0.25}>
<Icon color="inherit" fontSize="inherit">
favorite
</Icon>
</MDBox>
by
<Link href={href} target="_blank">
<MDTypography variant="button" fontWeight="medium">
&nbsp;{name}&nbsp;
</MDTypography>
</Link>
for a better web.
</MDBox>
<MDBox
component="ul"
sx={({ breakpoints }) => ({
display: "flex",
flexWrap: "wrap",
alignItems: "center",
justifyContent: "center",
listStyle: "none",
mt: 3,
mb: 0,
p: 0,
[breakpoints.up("lg")]: {
mt: 0,
},
})}
>
{renderLinks()}
</MDBox>
</MDBox>
);
}
// Declaring default props for Footer
Footer.defaultProps = {
company: { href: "https://www.kingsrook.com/", name: "Kingsrook" },
links: [{ href: "https://www.kingsrook.com/", name: "Kingsrook" }],
};
export default Footer;

4
src/qqq/pages/entity-create/index.tsx
View File

@ -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 (

4
src/qqq/pages/entity-edit/index.tsx
View File

@ -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();

67
src/qqq/pages/entity-list/index.tsx
View File

@ -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) => <IdCell id={value} />,
});
} 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) => <IdCell id={value} />,
});
})();
} 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 = (

108
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -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(
<MDBox key={tableMetaData.primaryKeyField} display="flex" py={1} pr={2}>
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
{tableMetaData.primaryKeyField}: &nbsp;
</MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text">
&nbsp;{id}
</MDTypography>
</MDBox>
);
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(
<MDBox key={key} display="flex" py={1} pr={2}>
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
{key}: &nbsp;
</MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text">
&nbsp;{value}
</MDTypography>
</MDBox>
);
}
});
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(
<MDBox key={tableMetaData.primaryKeyField} display="flex" py={1} pr={2}>
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
{tableMetaData.primaryKeyField}: &nbsp;
</MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text">
&nbsp;{id}
</MDTypography>
</MDBox>
);
const sortedKeys = [...foundRecord.values.keys()].sort();
sortedKeys.forEach((key) => {
if (key !== tableMetaData.primaryKeyField) {
nameValues.push(
<MDBox key={key} display="flex" py={1} pr={2}>
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
{tableMetaData.fields.get(key).label}: &nbsp;
</MDTypography>
<MDTypography variant="button" fontWeight="regular" color="text">
&nbsp;{foundRecord.values.get(key)}
</MDTypography>
</MDBox>
);
}
});
setLoadCounter(2);
})();
}
@ -139,7 +139,7 @@ function ViewContents({ id }: Props): JSX.Element {
<Card id="basic-info" sx={{ overflow: "visible" }}>
<MDBox p={3}>
<MDTypography variant="h5">
Viewing {tableMetaData.label} ({id})
Viewing {tableMetaData?.label} ({id})
</MDTypography>
</MDBox>
<MDBox p={3}>{nameValues}</MDBox>
@ -153,7 +153,7 @@ function ViewContents({ id }: Props): JSX.Element {
size="small"
onClick={handleConfirmDelete}
>
delete {tableMetaData.label}
delete {tableMetaData?.label}
</MDButton>
<Dialog
open={open}
@ -175,7 +175,7 @@ function ViewContents({ id }: Props): JSX.Element {
</DialogActions>
</Dialog>
<MDButton type="submit" variant="gradient" color="dark" size="small">
<Link href={editPath}>edit {tableMetaData.label}</Link>
<Link href={editPath}>edit {tableMetaData?.label}</Link>
</MDButton>
</MDBox>
</Grid>

2
src/qqq/pages/entity-view/index.tsx
View File

@ -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 {