mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +00:00
Checkpoint - using types out of QController as intended fully typescript types
This commit is contained in:
70
src/qqq/components/BaseLayout/index.tsx
Normal file
70
src/qqq/components/BaseLayout/index.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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/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/components/EntityForm/data/selectData.ts
Normal file
193
src/qqq/components/EntityForm/data/selectData.ts
Normal file
@ -0,0 +1,193 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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;
|
||||
177
src/qqq/components/EntityForm/index.tsx
Normal file
177
src/qqq/components/EntityForm/index.tsx
Normal file
@ -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(
|
||||
<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 sortedKeys = [...tableMetaData.fields.keys()].sort();
|
||||
sortedKeys.forEach((key) => {
|
||||
const fieldMetaData = tableMetaData.fields.get(key);
|
||||
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((record) => {
|
||||
window.location.href = `/${tableName}/view/${record.values.get("id")}`; // todo - primaryKeyField
|
||||
});
|
||||
})();
|
||||
};
|
||||
|
||||
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/components/Footer/index.tsx
Normal file
116
src/qqq/components/Footer/index.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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}
|
||||
>
|
||||
© {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">
|
||||
{name}
|
||||
</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;
|
||||
Reference in New Issue
Block a user