ONE-38: checkpoint commit of frontend MVP goal

This commit is contained in:
Tim Chamberlain
2022-07-06 10:35:42 -05:00
parent 97a9754bcf
commit ab1009115e
15 changed files with 186 additions and 1056 deletions

View File

@ -1,56 +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.
*/
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDAvatar from "components/MDAvatar";
// Declaring props types for CustomerCell
interface Props {
image?: string;
name: string;
color?:
| "transparent"
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "light"
| "dark";
}
function CustomerCell({ image, name, color }: Props): JSX.Element {
return (
<MDBox display="flex" alignItems="center">
<MDBox mr={1}>
<MDAvatar bgColor={color} src={image} alt={name} size="xs" />
</MDBox>
<MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
{name}
</MDTypography>
</MDBox>
);
}
// Declaring default props for CustomerCell
CustomerCell.defaultProps = {
image: "",
color: "dark",
};
export default CustomerCell;

View File

@ -1,43 +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.
*/
// Material Dashboard 2 PRO React TS components
import MDTypography from "components/MDTypography";
// Declaring props types for DefaultCell
interface Props {
value: string;
suffix?: string | boolean;
}
function DefaultCell({ value, suffix }: Props): JSX.Element {
return (
<MDTypography variant="caption" fontWeight="medium" color="text">
{value}
{suffix && (
<MDTypography variant="caption" fontWeight="medium" color="secondary">
&nbsp;&nbsp;{suffix}
</MDTypography>
)}
</MDTypography>
);
}
// Declaring default props for DefaultCell
DefaultCell.defaultProps = {
suffix: "",
};
export default DefaultCell;

View File

@ -1,53 +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 Checkbox from "@mui/material/Checkbox";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import Link from "@mui/material/Link";
// Declaring props types for IdCell
interface Props {
id: string;
checked?: boolean;
}
function IdCell({ id, checked }: Props): JSX.Element {
const pathParts = window.location.pathname.split("/");
const tableName = pathParts[1];
const href = `/${tableName}/view/${id}/`;
const link = <Link href={href}>{id}</Link>;
return (
<MDBox display="flex" alignItems="center">
<Checkbox defaultChecked={checked} />
<MDBox ml={1}>
<MDTypography variant="caption" fontWeight="medium" color="text">
{link}
</MDTypography>
</MDBox>
</MDBox>
);
}
// Declaring default props for IdCell
IdCell.defaultProps = {
checked: false,
};
export default IdCell;

View File

@ -1,56 +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 Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
// Declaring props types for StatusCell
interface Props {
icon: string;
color:
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "dark"
| "light"
| "white"
| "default";
status: string;
}
function StatusCell({ icon, color, status }: Props): JSX.Element {
return (
<MDBox display="flex" alignItems="center">
<MDBox mr={1}>
<MDButton variant="outlined" color={color} size="small" iconOnly circular>
<Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>
</MDButton>
</MDBox>
<MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
{status}
</MDTypography>
</MDBox>
);
}
export default StatusCell;

View File

@ -39,9 +39,8 @@ import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QContr
import Link from "@mui/material/Link";
import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import { useParams } from "react-router-dom";
import IdCell from "./components/IdCell";
import Footer from "../../components/Footer";
import EntityForm from "../../components/EntityForm";
import IdCell from "../../components/EntityForm/components/IdCell";
const qController = new QController("");
@ -69,12 +68,10 @@ function EntityList({ table }: Props): JSX.Element {
const openFiltersMenu = (event: any) => setFiltersMenu(event.currentTarget);
const closeFiltersMenu = () => setFiltersMenu(null);
const createPath = `/${tableName}/create`;
if (tableState === "") {
(async () => {
const tableMetaData = await qController.loadTableMetaData(tableName);
const metaData = await qController.loadMetaData();
// const metaData = await qController.loadMetaData();
const results = await qController.query(tableName, 250);
dataTableData = {
columns: [],
@ -160,7 +157,7 @@ function EntityList({ table }: Props): JSX.Element {
<MDBox my={3}>
<MDBox display="flex" justifyContent="space-between" alignItems="flex-start" mb={2}>
<MDButton variant="gradient" color="info">
<Link href={createPath}>new {tableName}</Link>
<Link href={`/${tableName}/create`}>new {tableName}</Link>
</MDButton>
<MDBox display="flex">
{tableProcesses.length > 0 && (
@ -173,7 +170,7 @@ function EntityList({ table }: Props): JSX.Element {
<Icon>keyboard_arrow_down</Icon>
</MDButton>
)}
{renderActionsMenu}
{/* renderActionsMenu */}
<MDBox ml={1}>
<MDButton
variant={filtersMenu ? "contained" : "outlined"}