mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
211 lines
6.9 KiB
TypeScript
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
|
|
<Icon>keyboard_arrow_down</Icon>
|
|
</MDButton>
|
|
)}
|
|
{renderActionsMenu}
|
|
<MDBox ml={1}>
|
|
<MDButton
|
|
variant={filtersMenu ? "contained" : "outlined"}
|
|
color="dark"
|
|
onClick={openFiltersMenu}
|
|
>
|
|
filters
|
|
<Icon>keyboard_arrow_down</Icon>
|
|
</MDButton>
|
|
{renderFiltersMenu}
|
|
</MDBox>
|
|
<MDBox ml={1}>
|
|
<MDButton variant="outlined" color="dark">
|
|
<Icon>description</Icon>
|
|
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;
|