diff --git a/.env b/.env new file mode 100644 index 0000000..4f79a0f --- /dev/null +++ b/.env @@ -0,0 +1 @@ +GENERATE_SOURCEMAP=false \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index d89e3b5..d35ae2b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -20,6 +20,7 @@ "endOfLine": "auto" } ], + "no-console": "off", "react/prop-types": "off", "no-shadow": "off", "react/jsx-props-no-spreading": "off", diff --git a/package-lock.json b/package-lock.json index aab5912..95485ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 775a4c5..3073d7d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/rollup.config.ts b/rollup.config.ts deleted file mode 100644 index 3536569..0000000 --- a/rollup.config.ts +++ /dev/null @@ -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" - ] - }) - ], -} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index f275007..d8c5d34 100644 --- a/src/App.tsx +++ b/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" && } } /> - ; + ; ; - ; - ; ; + ; + ; {getRoutes(routes)} diff --git a/src/qqq/pages/entity-list/components/CustomerCell/index.tsx b/src/qqq/components/EntityForm/components/CustomerCell/index.tsx similarity index 100% rename from src/qqq/pages/entity-list/components/CustomerCell/index.tsx rename to src/qqq/components/EntityForm/components/CustomerCell/index.tsx diff --git a/src/qqq/pages/entity-list/components/DefaultCell/index.tsx b/src/qqq/components/EntityForm/components/DefaultCell/index.tsx similarity index 100% rename from src/qqq/pages/entity-list/components/DefaultCell/index.tsx rename to src/qqq/components/EntityForm/components/DefaultCell/index.tsx diff --git a/src/qqq/pages/entity-list/components/IdCell/index.tsx b/src/qqq/components/EntityForm/components/IdCell/index.tsx similarity index 97% rename from src/qqq/pages/entity-list/components/IdCell/index.tsx rename to src/qqq/components/EntityForm/components/IdCell/index.tsx index c696047..48c151a 100644 --- a/src/qqq/pages/entity-list/components/IdCell/index.tsx +++ b/src/qqq/components/EntityForm/components/IdCell/index.tsx @@ -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 = {id}; return ( diff --git a/src/qqq/pages/entity-list/components/StatusCell/index.tsx b/src/qqq/components/EntityForm/components/StatusCell/index.tsx similarity index 100% rename from src/qqq/pages/entity-list/components/StatusCell/index.tsx rename to src/qqq/components/EntityForm/components/StatusCell/index.tsx diff --git a/src/qqq/components/EntityForm/index.tsx b/src/qqq/components/EntityForm/index.tsx index d5653cd..298ebe2 100644 --- a/src/qqq/components/EntityForm/index.tsx +++ b/src/qqq/components/EntityForm/index.tsx @@ -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( - - - - ); - } }); - 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( - - - - ); - } - }); } + 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( + + + + ); + } + }); + 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 ( @@ -157,6 +153,8 @@ function EntityForm({ id }: Props): JSX.Element { {formFields} + + diff --git a/src/qqq/pages/entity-list/index.tsx b/src/qqq/pages/entity-list/index.tsx index f7fa054..0a35bb6 100644 --- a/src/qqq/pages/entity-list/index.tsx +++ b/src/qqq/pages/entity-list/index.tsx @@ -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 { - new {tableName} + new {tableName} {tableProcesses.length > 0 && ( @@ -173,7 +170,7 @@ function EntityList({ table }: Props): JSX.Element { keyboard_arrow_down )} - {renderActionsMenu} + {/* renderActionsMenu */} 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 { {nameValues} - + delete {tableMetaData?.label} @@ -168,12 +163,14 @@ function ViewContents({ id }: Props): JSX.Element { - - + + + edit {tableMetaData?.label} diff --git a/src/qqq/qqqRoutes.tsx b/src/qqq/qqqRoutes.tsx index b8d6f77..5ca104b 100644 --- a/src/qqq/qqqRoutes.tsx +++ b/src/qqq/qqqRoutes.tsx @@ -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: image, - collapse: [ - { - name: "Profile", - key: "profile", - collapse: [ - { - name: "Profile Overview", - key: "profile-overview", - route: "/pages/profile/profile-overview", - component: , - }, - { - name: "All Projects", - key: "all-projects", - route: "/pages/profile/all-projects", - component: , - }, - ], - }, - { - name: "Users", - key: "users", - collapse: [ - { - name: "New User", - key: "new-user", - route: "/pages/users/new-user", - component: , - }, - ], - }, - { - name: "Account", - key: "account", - collapse: [ - { - name: "Settings", - key: "settings", - route: "/pages/account/settings", - component: , - }, - { - name: "Billing", - key: "billing", - route: "/pages/account/billing", - component: , - }, - { - name: "Invoice", - key: "invoice", - route: "/pages/account/invoice", - component: , - }, - ], - }, - { - name: "Projects", - key: "projects", - collapse: [ - { - name: "Timeline", - key: "timeline", - route: "/pages/projects/timeline", - component: , - }, - ], - }, - { - name: "Pricing Page", - key: "pricing-page", - route: "/pages/pricing-page", - component: , - }, - { name: "RTL", key: "rtl", route: "/pages/rtl", component: }, - { name: "Widgets", key: "widgets", route: "/pages/widgets", component: }, - { name: "Charts", key: "charts", route: "/pages/charts", component: }, - { - name: "Notfications", - key: "notifications", - route: "/pages/notifications", - component: , - }, - ], - }, - { - type: "collapse", - name: "Applications", - key: "applications", - icon: apps, - collapse: [ - { - name: "Kanban", - key: "kanban", - route: "/applications/kanban", - component: , - }, - { - name: "Wizard", - key: "wizard", - route: "/applications/wizard", - component: , - }, - { - name: "Data Tables", - key: "data-tables", - route: "/applications/data-tables", - component: , - }, - { - name: "Calendar", - key: "calendar", - route: "/applications/calendar", - component: , - }, - ], - }, - { - type: "collapse", - name: "Ecommerce", - key: "ecommerce", - icon: shopping_basket, - collapse: [ - { - name: "Products", - key: "products", - collapse: [ - { - name: "New Product", - key: "new-product", - route: "/ecommerce/products/new-product", - component: , - }, - { - name: "Edit Product", - key: "edit-product", - route: "/ecommerce/products/edit-product", - component: , - }, - { - name: "Product Page", - key: "product-page", - route: "/ecommerce/products/product-page", - component: , - }, - ], - }, - { - name: "Orders", - key: "orders", - collapse: [ - { - name: "Order List", - key: "order-list", - route: "/ecommerce/orders/order-list", - component: , - }, - { - name: "Order Details", - key: "order-details", - route: "/ecommerce/orders/order-details", - component: , - }, - ], - }, - { - name: "Orders", - key: "orders", - collapse: [ - { - name: "Order List", - key: "order-list", - route: "/ecommerce/orders/order-list", - component: , - }, - { - name: "Order Details", - key: "order-details", - route: "/ecommerce/orders/order-details", - component: , - }, - ], - }, - ], - }, - { - type: "collapse", - name: "Authentication", - key: "authentication", - icon: content_paste, - collapse: [ - { - name: "Sign In", - key: "sign-in", - collapse: [ - { - name: "Basic", - key: "basic", - route: "/authentication/sign-in/basic", - component: , - }, - { - name: "Cover", - key: "cover", - route: "/authentication/sign-in/cover", - component: , - }, - { - name: "Illustration", - key: "illustration", - route: "/authentication/sign-in/illustration", - component: , - }, - ], - }, - { - name: "Sign Up", - key: "sign-up", - collapse: [ - { - name: "Cover", - key: "cover", - route: "/authentication/sign-up/cover", - component: , - }, - ], - }, - { - name: "Reset Password", - key: "reset-password", - collapse: [ - { - name: "Cover", - key: "cover", - route: "/authentication/reset-password/cover", - component: , - }, - ], - }, - ], - }, - */ { 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: , }); }); diff --git a/src/routes.tsx b/src/routes.tsx deleted file mode 100644 index c6d4480..0000000 --- a/src/routes.tsx +++ /dev/null @@ -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: , - collapse: [ - { - name: "My Profile", - key: "my-profile", - route: "/pages/profile/profile-overview", - component: , - }, - { - name: "Settings", - key: "profile-settings", - route: "/pages/account/settings", - component: , - }, - { - name: "Logout", - key: "logout", - route: "/authentication/sign-in/basic", - component: , - }, - ], - }, - { type: "divider", key: "divider-0" }, - { - type: "collapse", - name: "Dashboards", - key: "dashboards", - icon: dashboard, - collapse: [ - { - name: "Analytics", - key: "analytics", - route: "/dashboards/analytics", - component: , - }, - { - name: "Sales", - key: "sales", - route: "/dashboards/sales", - component: , - }, - ], - }, - { type: "title", title: "Pages", key: "title-pages" }, - { - type: "collapse", - name: "Pages", - key: "pages", - icon: image, - collapse: [ - { - name: "Profile", - key: "profile", - collapse: [ - { - name: "Profile Overview", - key: "profile-overview", - route: "/pages/profile/profile-overview", - component: , - }, - { - name: "All Projects", - key: "all-projects", - route: "/pages/profile/all-projects", - component: , - }, - ], - }, - { - name: "Users", - key: "users", - collapse: [ - { - name: "New User", - key: "new-user", - route: "/pages/users/new-user", - component: , - }, - ], - }, - { - name: "Account", - key: "account", - collapse: [ - { - name: "Settings", - key: "settings", - route: "/pages/account/settings", - component: , - }, - { - name: "Billing", - key: "billing", - route: "/pages/account/billing", - component: , - }, - { - name: "Invoice", - key: "invoice", - route: "/pages/account/invoice", - component: , - }, - ], - }, - { - name: "Projects", - key: "projects", - collapse: [ - { - name: "Timeline", - key: "timeline", - route: "/pages/projects/timeline", - component: , - }, - ], - }, - { - name: "Pricing Page", - key: "pricing-page", - route: "/pages/pricing-page", - component: , - }, - { name: "RTL", key: "rtl", route: "/pages/rtl", component: }, - { name: "Widgets", key: "widgets", route: "/pages/widgets", component: }, - { name: "Charts", key: "charts", route: "/pages/charts", component: }, - { - name: "Notfications", - key: "notifications", - route: "/pages/notifications", - component: , - }, - ], - }, - { - type: "collapse", - name: "Applications", - key: "applications", - icon: apps, - collapse: [ - { - name: "Kanban", - key: "kanban", - route: "/applications/kanban", - component: , - }, - { - name: "Wizard", - key: "wizard", - route: "/applications/wizard", - component: , - }, - { - name: "Data Tables", - key: "data-tables", - route: "/applications/data-tables", - component: , - }, - { - name: "Calendar", - key: "calendar", - route: "/applications/calendar", - component: , - }, - ], - }, - { - type: "collapse", - name: "Ecommerce", - key: "ecommerce", - icon: shopping_basket, - collapse: [ - { - name: "Products", - key: "products", - collapse: [ - { - name: "New Product", - key: "new-product", - route: "/ecommerce/products/new-product", - component: , - }, - { - name: "Edit Product", - key: "edit-product", - route: "/ecommerce/products/edit-product", - component: , - }, - { - name: "Product Page", - key: "product-page", - route: "/ecommerce/products/product-page", - component: , - }, - ], - }, - { - name: "Orders", - key: "orders", - collapse: [ - { - name: "Order List", - key: "order-list", - route: "/ecommerce/orders/order-list", - component: , - }, - { - name: "Order Details", - key: "order-details", - route: "/ecommerce/orders/order-details", - component: , - }, - ], - }, - { - name: "Orders", - key: "orders", - collapse: [ - { - name: "Order List", - key: "order-list", - route: "/ecommerce/orders/order-list", - component: , - }, - { - name: "Order Details", - key: "order-details", - route: "/ecommerce/orders/order-details", - component: , - }, - ], - }, - ], - }, - { - type: "collapse", - name: "Authentication", - key: "authentication", - icon: content_paste, - collapse: [ - { - name: "Sign In", - key: "sign-in", - collapse: [ - { - name: "Basic", - key: "basic", - route: "/authentication/sign-in/basic", - component: , - }, - { - name: "Cover", - key: "cover", - route: "/authentication/sign-in/cover", - component: , - }, - { - name: "Illustration", - key: "illustration", - route: "/authentication/sign-in/illustration", - component: , - }, - ], - }, - { - name: "Sign Up", - key: "sign-up", - collapse: [ - { - name: "Cover", - key: "cover", - route: "/authentication/sign-up/cover", - component: , - }, - ], - }, - { - name: "Reset Password", - key: "reset-password", - collapse: [ - { - name: "Cover", - key: "cover", - route: "/authentication/reset-password/cover", - component: , - }, - ], - }, - ], - }, - { type: "divider", key: "divider-1" }, - { type: "title", title: "Docs", key: "title-docs" }, - { - type: "collapse", - name: "Basic", - key: "basic", - icon: upcoming, - 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: view_in_ar, - 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: receipt_long, - 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: dashboard, - collapse: tableList, - }; - routes.push(tables); - }); -})(); - -console.log("5"); -console.log(`routs:${routes}`); -export default routes;