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

ONE-38: checkpoint commit of frontend MVP goal

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

56
src/qqq/pages/entity-list/components/CustomerCell/index.tsx
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;

43
src/qqq/pages/entity-list/components/DefaultCell/index.tsx
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;

53
src/qqq/pages/entity-list/components/IdCell/index.tsx
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;

56
src/qqq/pages/entity-list/components/StatusCell/index.tsx
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;

11
src/qqq/pages/entity-list/index.tsx
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"}

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

@ -13,15 +13,18 @@
* 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 */
/* eslint-disable react/no-array-index-key */
import { useParams } from "react-router-dom";
// @material-ui core components
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Link from "@mui/material/Link";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
@ -32,21 +35,11 @@ import MDTypography from "components/MDTypography";
// qqq imports
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import React, { useState } from "react";
import React, { useReducer, useState } from "react";
import Link from "@mui/material/Link";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
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("");
console.log(qController);
// Declaring props types for ViewForm
interface Props {
@ -55,32 +48,21 @@ interface Props {
function ViewContents({ id }: Props): JSX.Element {
const { tableName } = useParams();
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
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 [, forceUpdate] = useReducer((x) => x + 1, 0);
const handleConfirmDelete = (event: { preventDefault: () => void }) => {
event.preventDefault();
(async () => {
await qController.delete(tableName, id).then((results) => {
window.location.href = `/${tableName}/list/`;
});
})();
};
if (loadCounter === 0) {
setLoadCounter(1);
if (!asyncLoadInited) {
setAsyncLoadInited(true);
(async () => {
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)
// TODO: make a call to query (just get all for now, and iterate and filter like a caveman) - FIX!
const records = await qController.query(tableName, 250);
let foundRecord: QRecord;
records.forEach((innerRecord) => {
@ -89,7 +71,6 @@ function ViewContents({ id }: Props): JSX.Element {
const value = innerRecord.values.get(key);
if (key === tableMetaData.primaryKeyField && `${value}` === `${id}`) {
foundRecord = innerRecord;
setRecord(innerRecord);
}
});
});
@ -121,18 +102,32 @@ function ViewContents({ id }: Props): JSX.Element {
}
});
setLoadCounter(2);
setNameValues(nameValues);
forceUpdate();
})();
}
const handleConfirmDeleteOpen = () => {
// setOpen(true);
const handleClickConfirmOpen = () => {
setOpen(true);
};
const handleConfirmDeleteClose = () => {
// setOpen(false);
const handleClickConfirmClose = () => {
setOpen(false);
};
/*
const handleDelete = (event: { preventDefault: () => void }) => {
event.preventDefault();
/*
(async () => {
await qController.delete(tableName, id).then(() => {
window.location.href = `/${tableName}/list/`;
});
})();
};
*/
const editPath = `/${tableName}/edit/${id}`;
return (
@ -145,19 +140,19 @@ function ViewContents({ id }: Props): JSX.Element {
<MDBox p={3}>{nameValues}</MDBox>
<MDBox component="form" pb={3} px={3}>
<Grid key="tres" container spacing={3}>
<MDBox ml="auto" mr={5}>
<MDBox ml="auto" mr={3}>
<MDButton
type="submit"
variant="gradient"
color="primary"
size="small"
onClick={handleConfirmDelete}
onClick={handleClickConfirmOpen}
>
delete {tableMetaData?.label}
</MDButton>
<Dialog
open={open}
onClose={handleConfirmDeleteClose}
onClose={handleClickConfirmClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
@ -168,12 +163,14 @@ function ViewContents({ id }: Props): JSX.Element {
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleConfirmDeleteClose}>No</Button>
<Button onClick={handleConfirmDelete} autoFocus>
<Button onClick={handleClickConfirmClose}>No</Button>
<Button onClick={handleClickConfirmClose} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
</MDBox>
<MDBox>
<MDButton type="submit" variant="gradient" color="dark" size="small">
<Link href={editPath}>edit {tableMetaData?.label}</Link>
</MDButton>