mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 12:50:43 +00:00
ONE-38: checkpoint commit of frontend MVP goal
This commit is contained in:
Tim Chamberlain
@ -20,6 +20,7 @@
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
],
|
||||
"no-console": "off",
|
||||
"react/prop-types": "off",
|
||||
"no-shadow": "off",
|
||||
"react/jsx-props-no-spreading": "off",
|
||||
|
||||
91
package-lock.json
generated
91
package-lock.json
generated
@ -16,7 +16,7 @@
|
||||
"@fullcalendar/interaction": "5.10.0",
|
||||
"@fullcalendar/react": "5.10.0",
|
||||
"@fullcalendar/timegrid": "5.10.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.1",
|
||||
"@kingsrook/qqq-frontend-core": "file:.yalc/@kingsrook/qqq-frontend-core",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.4.1",
|
||||
"@mui/styled-engine": "5.4.1",
|
||||
@ -73,6 +73,43 @@
|
||||
"typescript": "^4.7.3"
|
||||
}
|
||||
},
|
||||
".yalc/@kingsrook/qqq-frontend-core": {
|
||||
"version": "1.0.1",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "0.27.2"
|
||||
}
|
||||
},
|
||||
".yalc/@kingsrook/qqq-frontend-core/node_modules/axios": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
|
||||
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.9",
|
||||
"form-data": "^4.0.0"
|
||||
}
|
||||
},
|
||||
".yalc/@kingsrook/qqq-frontend-core/node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
".yalc/qqq-frontend-core": {
|
||||
"version": "1.0.0",
|
||||
"extraneous": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "0.24.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
|
||||
@ -2986,13 +3023,8 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@kingsrook/qqq-frontend-core": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://npm.pkg.github.com/download/@kingsrook/qqq-frontend-core/1.0.1/09d9a82c7638a340c65eb8cf8fabb723596653713ecc31f0e45216de61c1c456",
|
||||
"integrity": "sha512-6UoXVX6XZNTAi6FPT3VkTCVJv3F++IvwvravBH/hAMbycdsH1gnHIFq+qelW8sjaRoJOvJcBCYKudWzUOcDo+Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "0.24.0"
|
||||
}
|
||||
"resolved": ".yalc/@kingsrook/qqq-frontend-core",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@leichtgewicht/ip-codec": {
|
||||
"version": "2.0.4",
|
||||
@ -5218,14 +5250,6 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
|
||||
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.4"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
@ -19053,11 +19077,30 @@
|
||||
}
|
||||
},
|
||||
"@kingsrook/qqq-frontend-core": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://npm.pkg.github.com/download/@kingsrook/qqq-frontend-core/1.0.1/09d9a82c7638a340c65eb8cf8fabb723596653713ecc31f0e45216de61c1c456",
|
||||
"integrity": "sha512-6UoXVX6XZNTAi6FPT3VkTCVJv3F++IvwvravBH/hAMbycdsH1gnHIFq+qelW8sjaRoJOvJcBCYKudWzUOcDo+Q==",
|
||||
"version": "file:.yalc/@kingsrook/qqq-frontend-core",
|
||||
"requires": {
|
||||
"axios": "0.24.0"
|
||||
"axios": "0.27.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
|
||||
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.9",
|
||||
"form-data": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@leichtgewicht/ip-codec": {
|
||||
@ -20607,14 +20650,6 @@
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
|
||||
"integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.24.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
|
||||
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.4"
|
||||
}
|
||||
},
|
||||
"axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "qqq-frontend-material-dashboard",
|
||||
"version": "1.0.0",
|
||||
"description": "React + TypeScript version of Material Dashboard 2 PRO by Creative Tim",
|
||||
"proxy": "http://localhost:8000",
|
||||
"dependencies": {
|
||||
"@asseinfo/react-kanban": "2.2.0",
|
||||
"@emotion/cache": "11.7.1",
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import pkg from './package.json';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
import copy from 'rollup-plugin-copy-assets'
|
||||
|
||||
export default {
|
||||
input: 'src/index.tsx',
|
||||
output: [
|
||||
{
|
||||
file: pkg.main,
|
||||
format: 'cjs',
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: 'es',
|
||||
},
|
||||
],
|
||||
external: [
|
||||
...Object.keys(pkg.dependencies || {}),
|
||||
...Object.keys(pkg.peerDependencies || {}),
|
||||
],
|
||||
plugins: [
|
||||
typescript({
|
||||
typescript: require('typescript'),
|
||||
}),
|
||||
postcss({
|
||||
modules: true,
|
||||
namedExports: true
|
||||
}),
|
||||
copy({
|
||||
assets: [
|
||||
"src/assets/images"
|
||||
]
|
||||
})
|
||||
],
|
||||
}
|
||||
10
src/App.tsx
10
src/App.tsx
@ -36,10 +36,6 @@ import theme from "assets/theme";
|
||||
// Material Dashboard 2 PRO React TS Dark Mode themes
|
||||
import themeDark from "assets/theme-dark";
|
||||
|
||||
// RTL plugins
|
||||
import rtlPlugin from "stylis-plugin-rtl";
|
||||
import createCache from "@emotion/cache";
|
||||
|
||||
// Material Dashboard 2 PRO React TS routes
|
||||
import routes from "qqq/qqqRoutes";
|
||||
|
||||
@ -170,11 +166,11 @@ export default function App() {
|
||||
{layout === "vr" && <Configurator />}
|
||||
<Routes>
|
||||
<Route path="*" element={<Navigate to="/dashboards/analytics" />} />
|
||||
<Route path="/:tableName/list" element={entityListElement} key="entity-list" />;
|
||||
<Route path="/:tableName" element={entityListElement} key="entity-list" />;
|
||||
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
|
||||
<Route path="/:tableName/view/:id" element={entityViewElement} key="entity-view" />;
|
||||
<Route path="/:tableName/edit/:id" element={entityEditElement} key="entity-edit" />;
|
||||
<Route path="/processes/:processName" element={processRunElement} key="process-run" />;
|
||||
<Route path="/:tableName/:id" element={entityViewElement} key="entity-view" />;
|
||||
<Route path="/:tableName/:id/edit" element={entityEditElement} key="entity-edit" />;
|
||||
{getRoutes(routes)}
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -30,7 +30,7 @@ interface Props {
|
||||
function IdCell({ id, checked }: Props): JSX.Element {
|
||||
const pathParts = window.location.pathname.split("/");
|
||||
const tableName = pathParts[1];
|
||||
const href = `/${tableName}/view/${id}/`;
|
||||
const href = `/${tableName}/${id}`;
|
||||
const link = <Link href={href}>{id}</Link>;
|
||||
|
||||
return (
|
||||
@ -13,10 +13,14 @@
|
||||
* 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 */
|
||||
|
||||
// react imports
|
||||
import { useParams } from "react-router-dom";
|
||||
import React, { useReducer, useState } from "react";
|
||||
|
||||
// qqq imports
|
||||
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
|
||||
import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import { QFieldType } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
|
||||
// @material-ui core components
|
||||
import Card from "@mui/material/Card";
|
||||
@ -25,52 +29,36 @@ 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 { 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 { QTableRecord } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableRecord";
|
||||
import MDButton from "../../../components/MDButton";
|
||||
|
||||
const qController = new QController("");
|
||||
|
||||
// Declaring props types for EntityForm
|
||||
interface Props {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
function EntityForm({ id }: Props): JSX.Element {
|
||||
const qController = new QController("");
|
||||
const { tableName } = useParams();
|
||||
|
||||
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
|
||||
const [formValues, setFormValues] = useState({} as { [key: string]: string });
|
||||
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 [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
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);
|
||||
|
||||
if (!asyncLoadInited) {
|
||||
setAsyncLoadInited(true);
|
||||
(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;
|
||||
@ -84,55 +72,56 @@ function EntityForm({ id }: Props): JSX.Element {
|
||||
});
|
||||
});
|
||||
|
||||
const sortedKeys = [...tableMetaData.fields.keys()].sort();
|
||||
sortedKeys.forEach((key) => {
|
||||
tableMetaData.fields.forEach((fieldMetaData, 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>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sortedKeys = [...tableMetaData.fields.keys()].sort();
|
||||
sortedKeys.forEach((key) => {
|
||||
const fieldMetaData = tableMetaData.fields.get(key);
|
||||
if (fieldMetaData.name !== tableMetaData.primaryKeyField) {
|
||||
let fieldType: string;
|
||||
switch (fieldMetaData.type.toString()) {
|
||||
case QFieldType.DECIMAL:
|
||||
case QFieldType.INTEGER:
|
||||
fieldType = "number";
|
||||
break;
|
||||
case QFieldType.DATE_TIME:
|
||||
fieldType = "datetime-local";
|
||||
break;
|
||||
case QFieldType.PASSWORD:
|
||||
case QFieldType.TIME:
|
||||
case QFieldType.DATE:
|
||||
fieldType = fieldMetaData.type.toString();
|
||||
break;
|
||||
case QFieldType.TEXT:
|
||||
case QFieldType.HTML:
|
||||
case QFieldType.STRING:
|
||||
default:
|
||||
fieldType = "text";
|
||||
}
|
||||
|
||||
formFields.push(
|
||||
<Grid item xs={12} sm={4} key={fieldMetaData.name}>
|
||||
<FormField
|
||||
id={fieldMetaData.name}
|
||||
key={fieldMetaData.name}
|
||||
name={fieldMetaData.name}
|
||||
label={fieldMetaData.label}
|
||||
type={fieldType}
|
||||
defaultValue={formValues[fieldMetaData.name]}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setFormFields(formFields);
|
||||
forceUpdate();
|
||||
})();
|
||||
}
|
||||
|
||||
@ -140,13 +129,20 @@ function EntityForm({ id }: Props): JSX.Element {
|
||||
event.preventDefault();
|
||||
|
||||
(async () => {
|
||||
await qController.create(tableName, formValues).then((record) => {
|
||||
window.location.href = `/${tableName}/view/${record.values.get("id")}`; // todo - primaryKeyField
|
||||
});
|
||||
if (id !== null) {
|
||||
await qController.update(tableName, id, formValues).then((record) => {
|
||||
window.location.href = `/${tableName}/view/${record.values.get("id")}`; // todo - primaryKeyField
|
||||
});
|
||||
} else {
|
||||
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}`;
|
||||
const pageTitle =
|
||||
id != null ? `Edit ${tableMetaData?.label} (${id})` : `Create New ${tableMetaData?.label}`;
|
||||
|
||||
return (
|
||||
<Card id="basic-info" sx={{ overflow: "visible" }}>
|
||||
@ -157,6 +153,8 @@ function EntityForm({ id }: Props): JSX.Element {
|
||||
<Grid key="fieldsGrid" container spacing={3}>
|
||||
{formFields}
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox p={3}>
|
||||
<Grid key="buttonGrid" container spacing={3}>
|
||||
<MDBox ml="auto">
|
||||
<MDButton type="submit" variant="gradient" color="dark" size="small">
|
||||
|
||||
@ -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"}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -39,31 +39,8 @@
|
||||
import Analytics from "layouts/dashboards/analytics";
|
||||
import Sales from "layouts/dashboards/sales";
|
||||
import ProfileOverview from "layouts/pages/profile/profile-overview";
|
||||
// import AllProjects from "layouts/pages/profile/all-projects";
|
||||
// import NewUser from "layouts/pages/users/new-user";
|
||||
import Settings from "layouts/pages/account/settings";
|
||||
// import Billing from "layouts/pages/account/billing";
|
||||
// import Invoice from "layouts/pages/account/invoice";
|
||||
// import Timeline from "layouts/pages/projects/timeline";
|
||||
// import PricingPage from "layouts/pages/pricing-page";
|
||||
// import Widgets from "layouts/pages/widgets";
|
||||
// import RTL from "layouts/pages/rtl";
|
||||
// import Charts from "layouts/pages/charts";
|
||||
// import Notifications from "layouts/pages/notifications";
|
||||
// import Kanban from "layouts/applications/kanban";
|
||||
// import Wizard from "layouts/applications/wizard";
|
||||
// import DataTables from "layouts/applications/data-tables";
|
||||
// import Calendar from "layouts/applications/calendar";
|
||||
// import NewProduct from "layouts/ecommerce/products/new-product";
|
||||
// import EditProduct from "layouts/ecommerce/products/edit-product";
|
||||
// import ProductPage from "layouts/ecommerce/products/product-page";
|
||||
// import OrderList from "layouts/ecommerce/orders/order-list";
|
||||
// import OrderDetails from "layouts/ecommerce/orders/order-details";
|
||||
import SignInBasic from "layouts/authentication/sign-in/basic";
|
||||
// import SignInCover from "layouts/authentication/sign-in/cover";
|
||||
// import SignInIllustration from "layouts/authentication/sign-in/illustration";
|
||||
// import SignUpCover from "layouts/authentication/sign-up/cover";
|
||||
// import ResetCover from "layouts/authentication/reset-password/cover";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
@ -76,16 +53,8 @@ import profilePicture from "assets/images/team-3.jpg";
|
||||
|
||||
// QQQ
|
||||
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
|
||||
|
||||
import EntityList from "./pages/entity-list";
|
||||
|
||||
// import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
// import thing from "qqq-frontend-core/lib/qqq-frontend-core.js";
|
||||
// import QController from "qqq-frontend-core/lib/qqq-frontend-core.js";
|
||||
// import {QTableMetaData} from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
// import {QFieldMetaData} from "qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
// import {QFieldType} from "qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
|
||||
const qqqRoutes = [
|
||||
{
|
||||
type: "collapse",
|
||||
@ -134,260 +103,11 @@ const qqqRoutes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
/*
|
||||
{ type: "title", title: "Pages", key: "title-pages" },
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Pages",
|
||||
key: "pages",
|
||||
icon: <Icon fontSize="medium">image</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Profile",
|
||||
key: "profile",
|
||||
collapse: [
|
||||
{
|
||||
name: "Profile Overview",
|
||||
key: "profile-overview",
|
||||
route: "/pages/profile/profile-overview",
|
||||
component: <ProfileOverview />,
|
||||
},
|
||||
{
|
||||
name: "All Projects",
|
||||
key: "all-projects",
|
||||
route: "/pages/profile/all-projects",
|
||||
component: <AllProjects />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Users",
|
||||
key: "users",
|
||||
collapse: [
|
||||
{
|
||||
name: "New User",
|
||||
key: "new-user",
|
||||
route: "/pages/users/new-user",
|
||||
component: <NewUser />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Account",
|
||||
key: "account",
|
||||
collapse: [
|
||||
{
|
||||
name: "Settings",
|
||||
key: "settings",
|
||||
route: "/pages/account/settings",
|
||||
component: <Settings />,
|
||||
},
|
||||
{
|
||||
name: "Billing",
|
||||
key: "billing",
|
||||
route: "/pages/account/billing",
|
||||
component: <Billing />,
|
||||
},
|
||||
{
|
||||
name: "Invoice",
|
||||
key: "invoice",
|
||||
route: "/pages/account/invoice",
|
||||
component: <Invoice />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
key: "projects",
|
||||
collapse: [
|
||||
{
|
||||
name: "Timeline",
|
||||
key: "timeline",
|
||||
route: "/pages/projects/timeline",
|
||||
component: <Timeline />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Pricing Page",
|
||||
key: "pricing-page",
|
||||
route: "/pages/pricing-page",
|
||||
component: <PricingPage />,
|
||||
},
|
||||
{ name: "RTL", key: "rtl", route: "/pages/rtl", component: <RTL /> },
|
||||
{ name: "Widgets", key: "widgets", route: "/pages/widgets", component: <Widgets /> },
|
||||
{ name: "Charts", key: "charts", route: "/pages/charts", component: <Charts /> },
|
||||
{
|
||||
name: "Notfications",
|
||||
key: "notifications",
|
||||
route: "/pages/notifications",
|
||||
component: <Notifications />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Applications",
|
||||
key: "applications",
|
||||
icon: <Icon fontSize="medium">apps</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Kanban",
|
||||
key: "kanban",
|
||||
route: "/applications/kanban",
|
||||
component: <Kanban />,
|
||||
},
|
||||
{
|
||||
name: "Wizard",
|
||||
key: "wizard",
|
||||
route: "/applications/wizard",
|
||||
component: <Wizard />,
|
||||
},
|
||||
{
|
||||
name: "Data Tables",
|
||||
key: "data-tables",
|
||||
route: "/applications/data-tables",
|
||||
component: <DataTables />,
|
||||
},
|
||||
{
|
||||
name: "Calendar",
|
||||
key: "calendar",
|
||||
route: "/applications/calendar",
|
||||
component: <Calendar />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Ecommerce",
|
||||
key: "ecommerce",
|
||||
icon: <Icon fontSize="medium">shopping_basket</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Products",
|
||||
key: "products",
|
||||
collapse: [
|
||||
{
|
||||
name: "New Product",
|
||||
key: "new-product",
|
||||
route: "/ecommerce/products/new-product",
|
||||
component: <NewProduct />,
|
||||
},
|
||||
{
|
||||
name: "Edit Product",
|
||||
key: "edit-product",
|
||||
route: "/ecommerce/products/edit-product",
|
||||
component: <EditProduct />,
|
||||
},
|
||||
{
|
||||
name: "Product Page",
|
||||
key: "product-page",
|
||||
route: "/ecommerce/products/product-page",
|
||||
component: <ProductPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Orders",
|
||||
key: "orders",
|
||||
collapse: [
|
||||
{
|
||||
name: "Order List",
|
||||
key: "order-list",
|
||||
route: "/ecommerce/orders/order-list",
|
||||
component: <OrderList />,
|
||||
},
|
||||
{
|
||||
name: "Order Details",
|
||||
key: "order-details",
|
||||
route: "/ecommerce/orders/order-details",
|
||||
component: <OrderDetails />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Orders",
|
||||
key: "orders",
|
||||
collapse: [
|
||||
{
|
||||
name: "Order List",
|
||||
key: "order-list",
|
||||
route: "/ecommerce/orders/order-list",
|
||||
component: <OrderList />,
|
||||
},
|
||||
{
|
||||
name: "Order Details",
|
||||
key: "order-details",
|
||||
route: "/ecommerce/orders/order-details",
|
||||
component: <OrderDetails />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Authentication",
|
||||
key: "authentication",
|
||||
icon: <Icon fontSize="medium">content_paste</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Sign In",
|
||||
key: "sign-in",
|
||||
collapse: [
|
||||
{
|
||||
name: "Basic",
|
||||
key: "basic",
|
||||
route: "/authentication/sign-in/basic",
|
||||
component: <SignInBasic />,
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
key: "cover",
|
||||
route: "/authentication/sign-in/cover",
|
||||
component: <SignInCover />,
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
key: "illustration",
|
||||
route: "/authentication/sign-in/illustration",
|
||||
component: <SignInIllustration />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Sign Up",
|
||||
key: "sign-up",
|
||||
collapse: [
|
||||
{
|
||||
name: "Cover",
|
||||
key: "cover",
|
||||
route: "/authentication/sign-up/cover",
|
||||
component: <SignUpCover />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Reset Password",
|
||||
key: "reset-password",
|
||||
collapse: [
|
||||
{
|
||||
name: "Cover",
|
||||
key: "cover",
|
||||
route: "/authentication/reset-password/cover",
|
||||
component: <ResetCover />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
*/
|
||||
{ type: "divider", key: "divider-1" },
|
||||
{ type: "title", title: "Tables", key: "title-docs" },
|
||||
];
|
||||
|
||||
const qController = new QController("");
|
||||
console.log(qController);
|
||||
|
||||
(async () => {
|
||||
const metaData = await qController.loadMetaData();
|
||||
@ -398,9 +118,9 @@ console.log(qController);
|
||||
keys.forEach((key) => {
|
||||
const table = metaData.tables.get(key);
|
||||
tableList.push({
|
||||
name: table.label,
|
||||
name: `${table.label}`,
|
||||
key: table.name,
|
||||
route: `/${table.name}/list`,
|
||||
route: `/${table.name}`,
|
||||
component: <EntityList table={table} />,
|
||||
});
|
||||
});
|
||||
|
||||
580
src/routes.tsx
580
src/routes.tsx
@ -1,580 +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.
|
||||
*/
|
||||
|
||||
/**
|
||||
All of the routes for the Material Dashboard 2 PRO React are added here,
|
||||
You can add a new route, customize the routes and delete the routes here.
|
||||
|
||||
Once you add a new route on this file it will be visible automatically on
|
||||
the Sidenav.
|
||||
|
||||
For adding a new route you can follow the existing routes in the routes array.
|
||||
1. The `type` key with the `collapse` value is used for a route.
|
||||
2. The `type` key with the `title` value is used for a title inside the Sidenav.
|
||||
3. The `type` key with the `divider` value is used for a divider between Sidenav items.
|
||||
4. The `name` key is used for the name of the route on the Sidenav.
|
||||
5. The `key` key is used for the key of the route (It will help you with the key prop inside a loop).
|
||||
6. The `icon` key is used for the icon of the route on the Sidenav, you have to add a node.
|
||||
7. The `collapse` key is used for making a collapsible item on the Sidenav that contains other routes
|
||||
inside (nested routes), you need to pass the nested routes inside an array as a value for the `collapse` key.
|
||||
8. The `route` key is used to store the route location which is used for the react router.
|
||||
9. The `href` key is used to store the external links location.
|
||||
10. The `title` key is only for the item with the type of `title` and its used for the title text on the Sidenav.
|
||||
10. The `component` key is used to store the component of its route.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React layouts
|
||||
import Analytics from "layouts/dashboards/analytics";
|
||||
import Sales from "layouts/dashboards/sales";
|
||||
import ProfileOverview from "layouts/pages/profile/profile-overview";
|
||||
import AllProjects from "layouts/pages/profile/all-projects";
|
||||
import NewUser from "layouts/pages/users/new-user";
|
||||
import Settings from "layouts/pages/account/settings";
|
||||
import Billing from "layouts/pages/account/billing";
|
||||
import Invoice from "layouts/pages/account/invoice";
|
||||
import Timeline from "layouts/pages/projects/timeline";
|
||||
import PricingPage from "layouts/pages/pricing-page";
|
||||
import Widgets from "layouts/pages/widgets";
|
||||
import RTL from "layouts/pages/rtl";
|
||||
import Charts from "layouts/pages/charts";
|
||||
import Notifications from "layouts/pages/notifications";
|
||||
import Kanban from "layouts/applications/kanban";
|
||||
import Wizard from "layouts/applications/wizard";
|
||||
import DataTables from "layouts/applications/data-tables";
|
||||
import Calendar from "layouts/applications/calendar";
|
||||
import NewProduct from "layouts/ecommerce/products/new-product";
|
||||
import EditProduct from "layouts/ecommerce/products/edit-product";
|
||||
import ProductPage from "layouts/ecommerce/products/product-page";
|
||||
import OrderList from "layouts/ecommerce/orders/order-list";
|
||||
import OrderDetails from "layouts/ecommerce/orders/order-details";
|
||||
import SignInBasic from "layouts/authentication/sign-in/basic";
|
||||
import SignInCover from "layouts/authentication/sign-in/cover";
|
||||
import SignInIllustration from "layouts/authentication/sign-in/illustration";
|
||||
import SignUpCover from "layouts/authentication/sign-up/cover";
|
||||
import ResetCover from "layouts/authentication/reset-password/cover";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
|
||||
// @mui icons
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Images
|
||||
import profilePicture from "assets/images/team-3.jpg";
|
||||
|
||||
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
|
||||
// import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
// import thing from "qqq-frontend-core/lib/qqq-frontend-core.js";
|
||||
// import QController from "qqq-frontend-core/lib/qqq-frontend-core.js";
|
||||
// import {QTableMetaData} from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
// import {QFieldMetaData} from "qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
// import {QFieldType} from "qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Brooklyn Alice",
|
||||
key: "brooklyn-alice",
|
||||
icon: <MDAvatar src={profilePicture} alt="Brooklyn Alice" size="sm" />,
|
||||
collapse: [
|
||||
{
|
||||
name: "My Profile",
|
||||
key: "my-profile",
|
||||
route: "/pages/profile/profile-overview",
|
||||
component: <ProfileOverview />,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
key: "profile-settings",
|
||||
route: "/pages/account/settings",
|
||||
component: <Settings />,
|
||||
},
|
||||
{
|
||||
name: "Logout",
|
||||
key: "logout",
|
||||
route: "/authentication/sign-in/basic",
|
||||
component: <SignInBasic />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: "divider", key: "divider-0" },
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Dashboards",
|
||||
key: "dashboards",
|
||||
icon: <Icon fontSize="medium">dashboard</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Analytics",
|
||||
key: "analytics",
|
||||
route: "/dashboards/analytics",
|
||||
component: <Analytics />,
|
||||
},
|
||||
{
|
||||
name: "Sales",
|
||||
key: "sales",
|
||||
route: "/dashboards/sales",
|
||||
component: <Sales />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: "title", title: "Pages", key: "title-pages" },
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Pages",
|
||||
key: "pages",
|
||||
icon: <Icon fontSize="medium">image</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Profile",
|
||||
key: "profile",
|
||||
collapse: [
|
||||
{
|
||||
name: "Profile Overview",
|
||||
key: "profile-overview",
|
||||
route: "/pages/profile/profile-overview",
|
||||
component: <ProfileOverview />,
|
||||
},
|
||||
{
|
||||
name: "All Projects",
|
||||
key: "all-projects",
|
||||
route: "/pages/profile/all-projects",
|
||||
component: <AllProjects />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Users",
|
||||
key: "users",
|
||||
collapse: [
|
||||
{
|
||||
name: "New User",
|
||||
key: "new-user",
|
||||
route: "/pages/users/new-user",
|
||||
component: <NewUser />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Account",
|
||||
key: "account",
|
||||
collapse: [
|
||||
{
|
||||
name: "Settings",
|
||||
key: "settings",
|
||||
route: "/pages/account/settings",
|
||||
component: <Settings />,
|
||||
},
|
||||
{
|
||||
name: "Billing",
|
||||
key: "billing",
|
||||
route: "/pages/account/billing",
|
||||
component: <Billing />,
|
||||
},
|
||||
{
|
||||
name: "Invoice",
|
||||
key: "invoice",
|
||||
route: "/pages/account/invoice",
|
||||
component: <Invoice />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
key: "projects",
|
||||
collapse: [
|
||||
{
|
||||
name: "Timeline",
|
||||
key: "timeline",
|
||||
route: "/pages/projects/timeline",
|
||||
component: <Timeline />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Pricing Page",
|
||||
key: "pricing-page",
|
||||
route: "/pages/pricing-page",
|
||||
component: <PricingPage />,
|
||||
},
|
||||
{ name: "RTL", key: "rtl", route: "/pages/rtl", component: <RTL /> },
|
||||
{ name: "Widgets", key: "widgets", route: "/pages/widgets", component: <Widgets /> },
|
||||
{ name: "Charts", key: "charts", route: "/pages/charts", component: <Charts /> },
|
||||
{
|
||||
name: "Notfications",
|
||||
key: "notifications",
|
||||
route: "/pages/notifications",
|
||||
component: <Notifications />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Applications",
|
||||
key: "applications",
|
||||
icon: <Icon fontSize="medium">apps</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Kanban",
|
||||
key: "kanban",
|
||||
route: "/applications/kanban",
|
||||
component: <Kanban />,
|
||||
},
|
||||
{
|
||||
name: "Wizard",
|
||||
key: "wizard",
|
||||
route: "/applications/wizard",
|
||||
component: <Wizard />,
|
||||
},
|
||||
{
|
||||
name: "Data Tables",
|
||||
key: "data-tables",
|
||||
route: "/applications/data-tables",
|
||||
component: <DataTables />,
|
||||
},
|
||||
{
|
||||
name: "Calendar",
|
||||
key: "calendar",
|
||||
route: "/applications/calendar",
|
||||
component: <Calendar />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Ecommerce",
|
||||
key: "ecommerce",
|
||||
icon: <Icon fontSize="medium">shopping_basket</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Products",
|
||||
key: "products",
|
||||
collapse: [
|
||||
{
|
||||
name: "New Product",
|
||||
key: "new-product",
|
||||
route: "/ecommerce/products/new-product",
|
||||
component: <NewProduct />,
|
||||
},
|
||||
{
|
||||
name: "Edit Product",
|
||||
key: "edit-product",
|
||||
route: "/ecommerce/products/edit-product",
|
||||
component: <EditProduct />,
|
||||
},
|
||||
{
|
||||
name: "Product Page",
|
||||
key: "product-page",
|
||||
route: "/ecommerce/products/product-page",
|
||||
component: <ProductPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Orders",
|
||||
key: "orders",
|
||||
collapse: [
|
||||
{
|
||||
name: "Order List",
|
||||
key: "order-list",
|
||||
route: "/ecommerce/orders/order-list",
|
||||
component: <OrderList />,
|
||||
},
|
||||
{
|
||||
name: "Order Details",
|
||||
key: "order-details",
|
||||
route: "/ecommerce/orders/order-details",
|
||||
component: <OrderDetails />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Orders",
|
||||
key: "orders",
|
||||
collapse: [
|
||||
{
|
||||
name: "Order List",
|
||||
key: "order-list",
|
||||
route: "/ecommerce/orders/order-list",
|
||||
component: <OrderList />,
|
||||
},
|
||||
{
|
||||
name: "Order Details",
|
||||
key: "order-details",
|
||||
route: "/ecommerce/orders/order-details",
|
||||
component: <OrderDetails />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Authentication",
|
||||
key: "authentication",
|
||||
icon: <Icon fontSize="medium">content_paste</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Sign In",
|
||||
key: "sign-in",
|
||||
collapse: [
|
||||
{
|
||||
name: "Basic",
|
||||
key: "basic",
|
||||
route: "/authentication/sign-in/basic",
|
||||
component: <SignInBasic />,
|
||||
},
|
||||
{
|
||||
name: "Cover",
|
||||
key: "cover",
|
||||
route: "/authentication/sign-in/cover",
|
||||
component: <SignInCover />,
|
||||
},
|
||||
{
|
||||
name: "Illustration",
|
||||
key: "illustration",
|
||||
route: "/authentication/sign-in/illustration",
|
||||
component: <SignInIllustration />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Sign Up",
|
||||
key: "sign-up",
|
||||
collapse: [
|
||||
{
|
||||
name: "Cover",
|
||||
key: "cover",
|
||||
route: "/authentication/sign-up/cover",
|
||||
component: <SignUpCover />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Reset Password",
|
||||
key: "reset-password",
|
||||
collapse: [
|
||||
{
|
||||
name: "Cover",
|
||||
key: "cover",
|
||||
route: "/authentication/reset-password/cover",
|
||||
component: <ResetCover />,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: "divider", key: "divider-1" },
|
||||
{ type: "title", title: "Docs", key: "title-docs" },
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Basic",
|
||||
key: "basic",
|
||||
icon: <Icon fontSize="medium">upcoming</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Getting Started",
|
||||
key: "getting-started",
|
||||
collapse: [
|
||||
{
|
||||
name: "Overview",
|
||||
key: "overview",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "License",
|
||||
key: "license",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/license/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Quick Start",
|
||||
key: "quick-start",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Build Tools",
|
||||
key: "build-tools",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/build-tools/material-dashboard/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Foundation",
|
||||
key: "foundation",
|
||||
collapse: [
|
||||
{
|
||||
name: "Colors",
|
||||
key: "colors",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/colors/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Grid",
|
||||
key: "grid",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/grid/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Typography",
|
||||
key: "base-typography",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/base-typography/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Borders",
|
||||
key: "borders",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/borders/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Box Shadows",
|
||||
key: "box-shadows",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/box-shadows/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Functions",
|
||||
key: "functions",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/functions/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Routing System",
|
||||
key: "routing-system",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/routing-system/material-dashboard/",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Components",
|
||||
key: "components",
|
||||
icon: <Icon fontSize="medium">view_in_ar</Icon>,
|
||||
collapse: [
|
||||
{
|
||||
name: "Alerts",
|
||||
key: "alerts",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Avatar",
|
||||
key: "avatar",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/avatar/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Badge",
|
||||
key: "badge",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/badge/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Badge Dot",
|
||||
key: "badge-dot",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/badge-dot/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Box",
|
||||
key: "box",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/box/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Buttons",
|
||||
key: "buttons",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/buttons/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Date Picker",
|
||||
key: "date-picker",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/datepicker/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Dropzone",
|
||||
key: "dropzone",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/dropzone/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Editor",
|
||||
key: "editor",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/quill/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Input",
|
||||
key: "input",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/input/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Pagination",
|
||||
key: "pagination",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/pagination/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Progress",
|
||||
key: "progress",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/progress/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Snackbar",
|
||||
key: "snackbar",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/snackbar/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Social Button",
|
||||
key: "social-button",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/social-buttons/material-dashboard/",
|
||||
},
|
||||
{
|
||||
name: "Typography",
|
||||
key: "typography",
|
||||
href: "https://www.creative-tim.com/learning-lab/react/typography/material-dashboard/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "collapse",
|
||||
name: "Change Log",
|
||||
key: "changelog",
|
||||
href: "https://github.com/creativetimofficial/ct-material-dashboard-pro-react/blob/main/CHANGELOG.md",
|
||||
icon: <Icon fontSize="medium">receipt_long</Icon>,
|
||||
noCollapse: true,
|
||||
},
|
||||
];
|
||||
|
||||
const qController = new QController("");
|
||||
console.log(qController);
|
||||
|
||||
(async () => {
|
||||
await qController.loadMetaData().then((metaData) => {
|
||||
console.log(`metaData: ${metaData}`);
|
||||
|
||||
const tableList = [] as any[];
|
||||
metaData.tables.forEach((value, key) => {
|
||||
const table = metaData.tables.get(key);
|
||||
console.log(`TABLE: ${table}`);
|
||||
tableList.push({
|
||||
name: table.label,
|
||||
key: table.name,
|
||||
route: "/pages/account/settings",
|
||||
});
|
||||
});
|
||||
|
||||
const tables = {
|
||||
type: "collapse",
|
||||
name: "Tables",
|
||||
key: "tables",
|
||||
icon: <Icon fontSize="medium">dashboard</Icon>,
|
||||
collapse: tableList,
|
||||
};
|
||||
routes.push(tables);
|
||||
});
|
||||
})();
|
||||
|
||||
console.log("5");
|
||||
console.log(`routs:${routes}`);
|
||||
export default routes;
|
||||
Reference in New Issue
Block a user