Files
qqq-frontend-material-dashb…/src/qqq/pages/entity-list/index.tsx

211 lines
6.9 KiB
TypeScript

/**
=========================================================
* 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 react/no-unstable-nested-components */
import React, { useState } from "react";
// @mui material components
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Divider from "@mui/material/Divider";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
// Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import DataTable from "examples/Tables/DataTable";
// Data
import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
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";
const qController = new QController("");
// Declaring props types for DefaultCell
interface Props {
table?: QTableMetaData;
}
let dataTableData = {
columns: [] as any[],
rows: [] as any[],
};
function EntityList({ table }: Props): JSX.Element {
const tableNameParam = useParams().tableName;
const tableName = table === null ? tableNameParam : table.name;
const [filtersMenu, setFiltersMenu] = useState(null);
const [actionsMenu, setActionsMenu] = useState(null);
const [tableState, setTableState] = useState("");
const [tableProcesses, setTableProcesses] = useState([] as QProcessMetaData[]);
console.log(tableState);
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
const closeActionsMenu = () => setActionsMenu(null);
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 results = await qController.query(tableName, 250);
dataTableData = {
columns: [],
rows: [],
};
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()));
});
const matchingProcesses: QProcessMetaData[] = [];
const processKeys = [...metaData.processes.keys()];
processKeys.forEach((key) => {
const process = metaData.processes.get(key);
if (process.tableName === tableName) {
matchingProcesses.push(process);
}
});
setTableProcesses(matchingProcesses);
setTableState(tableName);
})();
}
const renderActionsMenu = (
<Menu
anchorEl={actionsMenu}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
transformOrigin={{ vertical: "top", horizontal: "left" }}
open={Boolean(actionsMenu)}
onClose={closeActionsMenu}
keepMounted
>
{tableProcesses.map((process) => (
<MenuItem key={process.name}>
<Link href={`/processes/${process.name}`}>{process.label}</Link>
</MenuItem>
))}
</Menu>
);
const renderFiltersMenu = (
<Menu
anchorEl={filtersMenu}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
transformOrigin={{ vertical: "top", horizontal: "left" }}
open={Boolean(filtersMenu)}
onClose={closeFiltersMenu}
keepMounted
>
<MenuItem onClick={closeFiltersMenu}>Status: Paid</MenuItem>
<MenuItem onClick={closeFiltersMenu}>Status: Refunded</MenuItem>
<MenuItem onClick={closeFiltersMenu}>Status: Canceled</MenuItem>
<Divider sx={{ margin: "0.5rem 0" }} />
<MenuItem onClick={closeFiltersMenu}>
<MDTypography variant="button" color="error" fontWeight="regular">
Remove Filter
</MDTypography>
</MenuItem>
</Menu>
);
return (
<DashboardLayout>
<DashboardNavbar />
<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>
</MDButton>
<MDBox display="flex">
{tableProcesses.length > 0 && (
<MDButton
variant={actionsMenu ? "contained" : "outlined"}
color="dark"
onClick={openActionsMenu}
>
actions&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
)}
{renderActionsMenu}
<MDBox ml={1}>
<MDButton
variant={filtersMenu ? "contained" : "outlined"}
color="dark"
onClick={openFiltersMenu}
>
filters&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
{renderFiltersMenu}
</MDBox>
<MDBox ml={1}>
<MDButton variant="outlined" color="dark">
<Icon>description</Icon>
&nbsp;export csv
</MDButton>
</MDBox>
</MDBox>
</MDBox>
<Card>
<DataTable table={dataTableData} entriesPerPage={false} canSearch />
</Card>
</MDBox>
<Footer />
</DashboardLayout>
);
}
// Declaring default props for DefaultCell
EntityList.defaultProps = {
table: null,
};
export default EntityList;