mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
updates to prepare for demo
This commit is contained in:
Tim Chamberlain
@ -37,6 +37,7 @@
|
||||
"react-github-btn": "1.2.1",
|
||||
"react-images-viewer": "1.7.1",
|
||||
"react-quill": "1.3.5",
|
||||
"react-router": "6.3.0",
|
||||
"react-router-dom": "6.2.1",
|
||||
"react-scripts": "5.0.0",
|
||||
"react-table": "7.7.0",
|
||||
@ -102,5 +103,11 @@
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*"
|
||||
],
|
||||
"react/no-unstable-nested-components": [
|
||||
"off",
|
||||
{
|
||||
"allowAsProps": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
20
src/App.tsx
20
src/App.tsx
@ -13,7 +13,14 @@ 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.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useMemo, JSXElementConstructor, Key, ReactElement } from "react";
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
useMemo,
|
||||
JSXElementConstructor,
|
||||
Key,
|
||||
ReactElement,
|
||||
} from "react";
|
||||
|
||||
// react-router components
|
||||
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
|
||||
@ -53,6 +60,8 @@ import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "co
|
||||
import brandWhite from "assets/images/logo-ct.png";
|
||||
import brandDark from "assets/images/logo-ct-dark.png";
|
||||
import EntityCreate from "./qqq/pages/entity-create";
|
||||
import EntityView from "./qqq/pages/entity-view";
|
||||
import EntityEdit from "./qqq/pages/entity-edit";
|
||||
|
||||
export default function App() {
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
@ -156,6 +165,8 @@ export default function App() {
|
||||
);
|
||||
|
||||
const entityCreateElement = <EntityCreate />;
|
||||
const entityViewElement = <EntityView />;
|
||||
const entityEditElement = <EntityEdit />;
|
||||
|
||||
return direction === "rtl" ? (
|
||||
<CacheProvider value={rtlCache}>
|
||||
@ -177,9 +188,10 @@ export default function App() {
|
||||
)}
|
||||
{layout === "vr" && <Configurator />}
|
||||
<Routes>
|
||||
{getRoutes(routes)}
|
||||
<Route path="*" element={<Navigate to="/dashboards/analytics" />} />
|
||||
<Route path="/:tableName/create" element={entityCreateElement} key="entity-create" />;
|
||||
<Route path="/:tableName/view/:id" element={entityViewElement} key="entity-view" />;
|
||||
{getRoutes(routes)}
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
</CacheProvider>
|
||||
@ -202,9 +214,11 @@ export default function App() {
|
||||
)}
|
||||
{layout === "vr" && <Configurator />}
|
||||
<Routes>
|
||||
{getRoutes(routes)}
|
||||
<Route path="*" element={<Navigate to="/dashboards/analytics" />} />
|
||||
<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" />;
|
||||
{getRoutes(routes)}
|
||||
</Routes>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
184
src/qqq/pages/components/EntityForm/index.tsx
Normal file
184
src/qqq/pages/components/EntityForm/index.tsx
Normal file
@ -0,0 +1,184 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 no-unused-vars */
|
||||
/* eslint-disable spaced-comment */
|
||||
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
// @material-ui core components
|
||||
import Card from "@mui/material/Card";
|
||||
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 "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import { QController } from "qqq-frontend-core/lib/controllers/QController";
|
||||
import React, { useState } from "react";
|
||||
import { QTableRecord } from "qqq-frontend-core/lib/model/metaData/QTableRecord";
|
||||
import MDButton from "../../../../components/MDButton";
|
||||
|
||||
const qController = new QController("http://localhost:8000");
|
||||
|
||||
// Declaring props types for EntityForm
|
||||
interface Props {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
function EntityForm({ id }: Props): JSX.Element {
|
||||
const { tableName } = useParams();
|
||||
const [formFields, setFormFields] = useState([] as JSX.Element[]);
|
||||
const defaultValues: { [key: string]: string } = {};
|
||||
const [formValues, setFormValues] = useState(defaultValues);
|
||||
const [loadCounter, setLoadCounter] = useState(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);
|
||||
};
|
||||
|
||||
const tableMetaData = new QTableMetaData(tableName);
|
||||
if (loadCounter === 0) {
|
||||
setLoadCounter(1);
|
||||
|
||||
(async () => {
|
||||
await qController.loadTableMetaData(tableName).then((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) {
|
||||
(async () => {
|
||||
await qController.query(tableName, 250).then((results) => {
|
||||
let foundRecord: QTableRecord;
|
||||
results.forEach((record) => {
|
||||
const values = new Map(Object.entries(record.values));
|
||||
values.forEach((value, key) => {
|
||||
if (key === tableMetaData.primaryKeyField && value.toString() === id) {
|
||||
foundRecord = record;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (id != null) {
|
||||
const values = new Map(Object.entries(foundRecord.values));
|
||||
values.forEach((value, key) => {
|
||||
formValues[key] = value;
|
||||
console.log(`key:${key},value:${value}`);
|
||||
});
|
||||
}
|
||||
|
||||
const fields = new Map(Object.entries(tableMetaData.fields));
|
||||
const sortedEntries = new Map([...fields.entries()].sort());
|
||||
sortedEntries.forEach((fieldMetaData) => {
|
||||
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 fields = new Map(Object.entries(tableMetaData.fields));
|
||||
const sortedEntries = new Map([...fields.entries()].sort());
|
||||
sortedEntries.forEach((fieldMetaData) => {
|
||||
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>
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setFormFields(formFields);
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
const handleSubmit = (event: { preventDefault: () => void }) => {
|
||||
event.preventDefault();
|
||||
|
||||
(async () => {
|
||||
await qController.create(tableName, formValues).then((recordList) => {
|
||||
const values = new Map(Object.entries(recordList[0].values));
|
||||
window.location.href = `/${tableName}/view/${values.get("id")}`;
|
||||
});
|
||||
})();
|
||||
};
|
||||
|
||||
const pageTitle = id != null ? `Edit ${tableMetaData.label}` : `Create ${tableMetaData.label}`;
|
||||
|
||||
return (
|
||||
<Card id="basic-info" sx={{ overflow: "visible" }}>
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">{pageTitle}</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
|
||||
<Grid key="fieldsGrid" container spacing={3}>
|
||||
{formFields}
|
||||
</Grid>
|
||||
<Grid key="buttonGrid" container spacing={3}>
|
||||
<MDBox ml="auto">
|
||||
<MDButton type="submit" variant="gradient" color="dark" size="small">
|
||||
save {tableMetaData.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultCell
|
||||
EntityForm.defaultProps = {
|
||||
id: null,
|
||||
};
|
||||
|
||||
export default EntityForm;
|
||||
@ -1,273 +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.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Divider from "@mui/material/Divider";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Images
|
||||
import logoSlack from "assets/images/small-logos/logo-slack.svg";
|
||||
import logoSpotify from "assets/images/small-logos/logo-spotify.svg";
|
||||
import logoAtlassian from "assets/images/small-logos/logo-atlassian.svg";
|
||||
import logoAsana from "assets/images/small-logos/logo-asana.svg";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
function Accounts(): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const [slack2FA, setSlack2FA] = useState<boolean>(true);
|
||||
const [spotify2FA, setSpotify2FA] = useState<boolean>(true);
|
||||
const [atlassian2FA, setAtlassian2FA] = useState<boolean>(true);
|
||||
const [asana2FA, setAsana2FA] = useState<boolean>(false);
|
||||
|
||||
const handleSetSlack2FA = () => setSlack2FA(!slack2FA);
|
||||
const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA);
|
||||
const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA);
|
||||
const handleSetAsana2FA = () => setAsana2FA(!asana2FA);
|
||||
|
||||
return (
|
||||
<Card id="accounts">
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Accounts</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text">
|
||||
Here you can setup and manage your integration settings.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={2} pb={3} px={3}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoSlack} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Slack
|
||||
</MDTypography>
|
||||
<MDBox display="flex" alignItems="flex-end">
|
||||
<MDTypography variant="button" color="text">
|
||||
Show less
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" sx={{ lineHeight: 0 }}>
|
||||
<Icon fontSize="small">expand_less</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{slack2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={slack2FA} onChange={handleSetSlack2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox ml={2} pl={6} pt={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="text">
|
||||
You haven't added your Slack yet or you aren't authorized. Please add our
|
||||
Slack Bot to your account by clicking on here. When you've added the bot, send your
|
||||
verification code that you have received.
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
bgColor={darkMode ? "grey-900" : "grey-100"}
|
||||
borderRadius="lg"
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
my={3}
|
||||
py={1}
|
||||
pl={{ xs: 1, sm: 2 }}
|
||||
pr={1}
|
||||
>
|
||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
||||
Verification Code
|
||||
</MDTypography>
|
||||
<MDBox width={{ xs: "100%", sm: "25%", md: "15%" }} mt={{ xs: 1, sm: 0 }}>
|
||||
<Tooltip title="Copy" placement="top">
|
||||
<MDInput size="small" value="1172913" />
|
||||
</Tooltip>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
bgColor={darkMode ? "grey-900" : "grey-100"}
|
||||
borderRadius="lg"
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
my={3}
|
||||
py={1}
|
||||
pl={{ xs: 1, sm: 2 }}
|
||||
pr={1}
|
||||
>
|
||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
||||
Connected account
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mr={2} mb={{ xs: 1, sm: 0 }} lineHeight={0}>
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
hello@creative-tim.com
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="gradient" color="dark" size="small">
|
||||
delete
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoSpotify} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2} lineHeight={0}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Spotify
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Music
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{spotify2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={spotify2FA} onChange={handleSetSpotify2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoAtlassian} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2} lineHeight={0}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Atlassian
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Payment vendor
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{atlassian2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={atlassian2FA} onChange={handleSetAtlassian2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoAsana} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2} lineHeight={0}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Asana
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Organize your team
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{asana2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={asana2FA} onChange={handleSetAsana2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Accounts;
|
||||
@ -1,113 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
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";
|
||||
import MDBadge from "components/MDBadge";
|
||||
|
||||
function Authentication(): JSX.Element {
|
||||
return (
|
||||
<Card id="2fa" sx={{ overflow: "visible" }}>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
|
||||
<MDTypography variant="h5">Two-factor authentication</MDTypography>
|
||||
<MDBadge variant="contained" color="success" badgeContent="enabled" container />
|
||||
</MDBox>
|
||||
<MDBox p={3}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Security keys
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
No Security keys
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="outlined" color="dark" size="small">
|
||||
add
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDTypography variant="body2" color="text">
|
||||
SMS number
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
+3012374423
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="outlined" color="dark" size="small">
|
||||
edit
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Authenticator app
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
Not Configured
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="outlined" color="dark" size="small">
|
||||
set up
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Authentication;
|
||||
@ -1,98 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDInput from "components/MDInput";
|
||||
|
||||
function ChangePassword(): JSX.Element {
|
||||
const passwordRequirements = [
|
||||
"One special characters",
|
||||
"Min 6 characters",
|
||||
"One number (2 are recommended)",
|
||||
"Change it often",
|
||||
];
|
||||
|
||||
const renderPasswordRequirements = passwordRequirements.map((item, key) => {
|
||||
const itemKey = `element-${key}`;
|
||||
|
||||
return (
|
||||
<MDBox key={itemKey} component="li" color="text" fontSize="1.25rem" lineHeight={1}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular" verticalAlign="middle">
|
||||
{item}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card id="change-password">
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">Change Password</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox component="form" pb={3} px={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<MDInput
|
||||
fullWidth
|
||||
label="Current Password"
|
||||
inputProps={{ type: "password", autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<MDInput
|
||||
fullWidth
|
||||
label="New Password"
|
||||
inputProps={{ type: "password", autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<MDInput
|
||||
fullWidth
|
||||
label="Confirm New Password"
|
||||
inputProps={{ type: "password", autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MDBox mt={6} mb={1}>
|
||||
<MDTypography variant="h5">Password requirements</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Please follow this guide for a strong password
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="flex-end" flexWrap="wrap">
|
||||
<MDBox component="ul" m={0} pl={3.25} mb={{ xs: 8, sm: 0 }}>
|
||||
{renderPasswordRequirements}
|
||||
</MDBox>
|
||||
<MDBox ml="auto">
|
||||
<MDButton variant="gradient" color="dark" size="small">
|
||||
update password
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChangePassword;
|
||||
@ -1,106 +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.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable spaced-comment */
|
||||
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
// @material-ui core components
|
||||
import Card from "@mui/material/Card";
|
||||
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 "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import { QController } from "qqq-frontend-core/lib/controllers/QController";
|
||||
import { useState } from "react";
|
||||
import MDButton from "../../../../../components/MDButton";
|
||||
// import React, { useState } from "react";
|
||||
|
||||
const qController = new QController("http://localhost:8000");
|
||||
console.log(qController);
|
||||
|
||||
function CreateForm(): JSX.Element {
|
||||
const { tableName } = useParams();
|
||||
const [formFields, setFormFields] = useState([] as JSX.Element[]);
|
||||
const defaultValues: { [key: string]: string } = {};
|
||||
const [formValues, setFormValues] = useState(defaultValues);
|
||||
|
||||
const handleInputChange = (e: { target: { name: any; value: any } }) => {
|
||||
const { name, value } = e.target;
|
||||
formValues[name] = value;
|
||||
};
|
||||
|
||||
const handleSubmit = (event: { preventDefault: () => void }) => {
|
||||
event.preventDefault();
|
||||
qController.create(tableName, formValues);
|
||||
};
|
||||
|
||||
const tableMetaData = new QTableMetaData(tableName);
|
||||
if (formFields.length === 0) {
|
||||
(async () => {
|
||||
await qController.loadTableMetaData(tableName).then((tableMetaData) => {
|
||||
const formFields = [] as JSX.Element[];
|
||||
const fields = new Map(Object.entries(tableMetaData.fields));
|
||||
fields.forEach((fieldMetaData) => {
|
||||
//formValues[fieldMetaData.name] = "";
|
||||
formFields.push(
|
||||
<Grid item xs={12} sm={4}>
|
||||
<FormField
|
||||
key={fieldMetaData.name}
|
||||
name={fieldMetaData.name}
|
||||
id={fieldMetaData.name}
|
||||
label={fieldMetaData.label}
|
||||
value={formValues[fieldMetaData.name]}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
});
|
||||
|
||||
setFormFields(formFields);
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
return (
|
||||
<Card id="basic-info" sx={{ overflow: "visible" }}>
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">Create {tableMetaData.label}</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
|
||||
<Grid container spacing={3}>
|
||||
{formFields}
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<MDBox ml="auto">
|
||||
<MDButton type="submit" variant="gradient" color="dark" size="small">
|
||||
create {tableMetaData.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateForm;
|
||||
@ -1,57 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
function DeleteAccount(): JSX.Element {
|
||||
return (
|
||||
<Card id="delete-account">
|
||||
<MDBox
|
||||
pr={3}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Delete Account</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text">
|
||||
Once you delete your account, there is no going back. Please be certain.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex" flexDirection={{ xs: "column", sm: "row" }}>
|
||||
<MDButton variant="outlined" color="secondary">
|
||||
deactivate
|
||||
</MDButton>
|
||||
<MDBox ml={{ xs: 0, sm: 1 }} mt={{ xs: 1, sm: 0 }}>
|
||||
<MDButton variant="gradient" color="error" sx={{ height: "100%" }}>
|
||||
delete account
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeleteAccount;
|
||||
@ -1,74 +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.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
|
||||
// Images
|
||||
import burceMars from "assets/images/bruce-mars.jpg";
|
||||
|
||||
function Header(): JSX.Element {
|
||||
const [visible, setVisible] = useState<boolean>(true);
|
||||
|
||||
const handleSetVisible = () => setVisible(!visible);
|
||||
|
||||
return (
|
||||
<Card id="profile">
|
||||
<MDBox p={2}>
|
||||
<Grid container spacing={3} alignItems="center">
|
||||
<Grid item>
|
||||
<MDAvatar src={burceMars} alt="profile-image" size="xl" shadow="sm" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<MDBox height="100%" mt={0.5} lineHeight={1}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Alex Thompson
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" fontWeight="medium">
|
||||
CEO / Co-Founder
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={3} sx={{ ml: "auto" }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent={{ md: "flex-end" }}
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
>
|
||||
<MDTypography variant="caption" fontWeight="regular">
|
||||
Switch to {visible ? "invisible" : "visible"}
|
||||
</MDTypography>
|
||||
<MDBox ml={1}>
|
||||
<Switch checked={visible} onChange={handleSetVisible} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,149 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Setting pages components
|
||||
import TableCell from "layouts/pages/account/settings/components/TableCell";
|
||||
|
||||
function Notifications(): JSX.Element {
|
||||
return (
|
||||
<Card id="notifications">
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Notifications</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text">
|
||||
Choose how you receive notifications. These notification settings apply to the things
|
||||
you’re watching.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pb={3} px={3}>
|
||||
<MDBox minWidth="auto" sx={{ overflow: "scroll" }}>
|
||||
<Table sx={{ minWidth: "36rem" }}>
|
||||
<MDBox component="thead">
|
||||
<TableRow>
|
||||
<TableCell width="100%" padding={[1.5, 3, 1.5, 0.5]}>
|
||||
Activity
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
||||
Email
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
||||
Push
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
||||
SMS
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</MDBox>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
||||
<MDBox lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
||||
Mentions
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
Notify when another user mentions you in a comment
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
||||
<MDBox lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
||||
Comments
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
Notify when another user comments your item.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
||||
<MDBox lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
||||
Follows
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
Notify when another user follows you.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<MDTypography display="block" variant="button" color="text">
|
||||
Log in from a new device
|
||||
</MDTypography>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Notifications;
|
||||
@ -1,172 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Divider from "@mui/material/Divider";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDBadge from "components/MDBadge";
|
||||
|
||||
function Sessions(): JSX.Element {
|
||||
const actionButtonStyles = {
|
||||
"& .material-icons-round": {
|
||||
transform: `translateX(0)`,
|
||||
transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)",
|
||||
},
|
||||
|
||||
"&:hover .material-icons-round, &:focus .material-icons-round": {
|
||||
transform: `translateX(4px)`,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Card id="sessions">
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Sessions</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
This is a list of devices that have logged into your account. Remove those that you do not
|
||||
recognize.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pb={3} px={3} sx={{ overflow: "auto" }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
width={{ xs: "max-content", sm: "100%" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
||||
<Icon>desktop_windows</Icon>
|
||||
</MDBox>
|
||||
<MDBox height="100%" ml={2} lineHeight={1} mr={2}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular" color="text">
|
||||
Bucharest 68.133.163.201
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text">
|
||||
Your current session
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBadge
|
||||
variant="contained"
|
||||
size="xs"
|
||||
badgeContent="active"
|
||||
color="success"
|
||||
container
|
||||
/>
|
||||
<MDBox mx={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
EU
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="regular"
|
||||
sx={actionButtonStyles}
|
||||
>
|
||||
See more
|
||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
width={{ xs: "max-content", sm: "100%" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center" mr={2}>
|
||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
||||
<Icon>desktop_windows</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={2}>
|
||||
<MDTypography display="block" variant="body2" fontWeight="regular" color="text">
|
||||
Chrome on macOS
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mx={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
US
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="regular"
|
||||
sx={actionButtonStyles}
|
||||
>
|
||||
See more
|
||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
width={{ xs: "max-content", sm: "100%" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center" mr={2}>
|
||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
||||
<Icon>phone_iphone</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={2}>
|
||||
<MDTypography display="block" variant="body2" fontWeight="regular" color="text">
|
||||
Safari on iPhone
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mx={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
US
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="regular"
|
||||
sx={actionButtonStyles}
|
||||
>
|
||||
See more
|
||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sessions;
|
||||
@ -1,105 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
function Sidenav(): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const sidenavItems = [
|
||||
{ icon: "person", label: "profile", href: "profile" },
|
||||
{ icon: "receipt_long", label: "basic info", href: "basic-info" },
|
||||
{ icon: "lock", label: "change password", href: "change-password" },
|
||||
{ icon: "security", label: "2FA", href: "2fa" },
|
||||
{ icon: "badge", label: "accounts", href: "accounts" },
|
||||
{ icon: "campaign", label: "notifications", href: "notifications" },
|
||||
{ icon: "settings_applications", label: "sessions", href: "sessions" },
|
||||
{ icon: "delete", label: "delete account", href: "delete-account" },
|
||||
];
|
||||
|
||||
const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => {
|
||||
const itemKey = `item-${key}`;
|
||||
|
||||
return (
|
||||
<MDBox key={itemKey} component="li" pt={key === 0 ? 0 : 1}>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href={`#${href}`}
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
sx={({
|
||||
borders: { borderRadius },
|
||||
functions: { pxToRem },
|
||||
palette: { light },
|
||||
transitions,
|
||||
}: Theme) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderRadius: borderRadius.md,
|
||||
padding: `${pxToRem(10)} ${pxToRem(16)}`,
|
||||
transition: transitions.create("background-color", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: light.main,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<MDBox mr={1.5} lineHeight={1} color={darkMode ? "white" : "dark"}>
|
||||
<Icon fontSize="small">{icon}</Icon>
|
||||
</MDBox>
|
||||
{label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg,
|
||||
position: "sticky",
|
||||
top: "1%",
|
||||
}}
|
||||
>
|
||||
<MDBox
|
||||
component="ul"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
p={2}
|
||||
m={0}
|
||||
sx={{ listStyle: "none" }}
|
||||
>
|
||||
{renderSidenavItems}
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidenav;
|
||||
@ -1,61 +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.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for TableCell
|
||||
interface Props {
|
||||
width?: string;
|
||||
children: ReactNode;
|
||||
align?: string | any;
|
||||
padding?: number[];
|
||||
noBorder?: boolean;
|
||||
}
|
||||
|
||||
function TableCell({ width, align, padding, noBorder, children }: Props): JSX.Element {
|
||||
return (
|
||||
<MDBox
|
||||
component="th"
|
||||
width={width}
|
||||
pt={padding[0]}
|
||||
pr={padding[1]}
|
||||
pb={padding[2]}
|
||||
pl={padding[3]}
|
||||
textAlign={align}
|
||||
sx={{
|
||||
border: ({ borders: { borderWidth }, palette: { light } }) =>
|
||||
noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`,
|
||||
}}
|
||||
>
|
||||
<MDTypography component="div" variant="body2" color="text">
|
||||
{children}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for TableCell
|
||||
TableCell.defaultProps = {
|
||||
width: "auto",
|
||||
align: "left",
|
||||
padding: [],
|
||||
noBorder: false,
|
||||
};
|
||||
|
||||
export default TableCell;
|
||||
@ -20,7 +20,7 @@ import Grid from "@mui/material/Grid";
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
import CreateForm from "qqq/pages/entity-create/components/CreateForm";
|
||||
import CreateForm from "qqq/pages/components/EntityForm";
|
||||
import BaseLayout from "qqq/pages/components/BaseLayout";
|
||||
|
||||
function EntityCreate(): JSX.Element {
|
||||
|
||||
49
src/qqq/pages/entity-edit/index.tsx
Normal file
49
src/qqq/pages/entity-edit/index.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
import BaseLayout from "qqq/pages/components/BaseLayout";
|
||||
import { useParams } from "react-router-dom";
|
||||
import EntityForm from "qqq/pages/components/EntityForm";
|
||||
|
||||
function EntityEdit(): JSX.Element {
|
||||
const { id } = useParams();
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
<MDBox mt={4}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={12}>
|
||||
<MDBox mb={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<EntityForm id={id} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default EntityEdit;
|
||||
@ -1,17 +1,17 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.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)
|
||||
* 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
|
||||
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.
|
||||
*/
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
@ -19,6 +19,7 @@ import Checkbox from "@mui/material/Checkbox";
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import Link from "@mui/material/Link";
|
||||
|
||||
// Declaring props types for IdCell
|
||||
interface Props {
|
||||
@ -27,12 +28,17 @@ 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 link = <Link href={href}>{id}</Link>;
|
||||
|
||||
return (
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<Checkbox defaultChecked={checked} />
|
||||
<MDBox ml={1}>
|
||||
<MDTypography variant="caption" fontWeight="medium" color="text">
|
||||
{id}
|
||||
{link}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
|
||||
@ -1,184 +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.
|
||||
*/
|
||||
|
||||
/* eslint-disable react/prop-types */
|
||||
// ProductsList page components
|
||||
import IdCell from "layouts/ecommerce/orders/order-list/components/IdCell";
|
||||
import DefaultCell from "layouts/ecommerce/orders/order-list/components/DefaultCell";
|
||||
import StatusCell from "layouts/ecommerce/orders/order-list/components/StatusCell";
|
||||
import CustomerCell from "layouts/ecommerce/orders/order-list/components/CustomerCell";
|
||||
|
||||
// Images
|
||||
import team1 from "assets/images/team-1.jpg";
|
||||
import team2 from "assets/images/team-2.jpg";
|
||||
import team3 from "assets/images/team-3.jpg";
|
||||
import team4 from "assets/images/team-4.jpg";
|
||||
import team5 from "assets/images/team-5.jpg";
|
||||
import ivana from "assets/images/ivana-squares.jpg";
|
||||
|
||||
const dataTableData = {
|
||||
columns: [
|
||||
{ Header: "id", accessor: "id", Cell: ({ value }: any) => <IdCell id={value} /> },
|
||||
{
|
||||
Header: "date",
|
||||
accessor: "date",
|
||||
Cell: ({ value }: any) => <DefaultCell value={value} />,
|
||||
},
|
||||
{
|
||||
Header: "status",
|
||||
accessor: "status",
|
||||
Cell: ({ value }: any) => {
|
||||
let status;
|
||||
|
||||
if (value === "paid") {
|
||||
status = <StatusCell icon="done" color="success" status="Paid" />;
|
||||
} else if (value === "refunded") {
|
||||
status = <StatusCell icon="replay" color="dark" status="Refunded" />;
|
||||
} else {
|
||||
status = <StatusCell icon="close" color="error" status="Canceled" />;
|
||||
}
|
||||
|
||||
return status;
|
||||
},
|
||||
},
|
||||
{
|
||||
Header: "customer",
|
||||
accessor: "customer",
|
||||
Cell: ({ value: [name, data] }: any) => (
|
||||
<CustomerCell image={data.image} color={data.color || "dark"} name={name} />
|
||||
),
|
||||
},
|
||||
{
|
||||
Header: "product",
|
||||
accessor: "product",
|
||||
Cell: ({ value }: any) => {
|
||||
const [name, data] = value;
|
||||
|
||||
return (
|
||||
<DefaultCell
|
||||
value={typeof value === "string" ? value : name}
|
||||
suffix={data.suffix || false}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
Header: "revenue",
|
||||
accessor: "revenue",
|
||||
Cell: ({ value }: any) => <DefaultCell value={value} />,
|
||||
},
|
||||
],
|
||||
|
||||
rows: [
|
||||
{
|
||||
id: "#10421",
|
||||
date: "1 Nov, 10:20 AM",
|
||||
status: "paid",
|
||||
customer: ["Orlando Imieto", { image: team2 }],
|
||||
product: "Nike Sport V2",
|
||||
revenue: "$140,20",
|
||||
},
|
||||
{
|
||||
id: "#10422",
|
||||
date: "1 Nov, 10:53 AM",
|
||||
status: "paid",
|
||||
customer: ["Alice Murinho", { image: team1 }],
|
||||
product: "Valvet T-shirt",
|
||||
revenue: "$42,00",
|
||||
},
|
||||
{
|
||||
id: "#10423",
|
||||
date: "1 Nov, 11:13 AM",
|
||||
status: "refunded",
|
||||
customer: ["Michael Mirra", { image: "M" }],
|
||||
product: ["Leather Wallet", { suffix: "+1 more" }],
|
||||
revenue: "$25,50",
|
||||
},
|
||||
{
|
||||
id: "#10424",
|
||||
date: "1 Nov, 12:20 PM",
|
||||
status: "paid",
|
||||
customer: ["Andrew Nichel", { image: team3 }],
|
||||
product: "Bracelet Onu-Lino",
|
||||
revenue: "$19,40",
|
||||
},
|
||||
{
|
||||
id: "#10425",
|
||||
date: "1 Nov, 1:40 PM",
|
||||
status: "canceled",
|
||||
customer: ["Sebastian Koga", { image: team4 }],
|
||||
product: ["Phone Case Pink", { suffix: "x 2" }],
|
||||
revenue: "$44,90",
|
||||
},
|
||||
{
|
||||
id: "#10426",
|
||||
date: "1 Nov, 2:19 PM",
|
||||
status: "paid",
|
||||
customer: ["Laur Gilbert", { image: "L" }],
|
||||
product: "Backpack Niver",
|
||||
revenue: "$112,50",
|
||||
},
|
||||
{
|
||||
id: "#10427",
|
||||
date: "1 Nov, 3:42 AM",
|
||||
status: "paid",
|
||||
customer: ["Iryna Innda", { image: "I" }],
|
||||
product: "Adidas Vio",
|
||||
revenue: "$200,00",
|
||||
},
|
||||
{
|
||||
id: "#10428",
|
||||
date: "2 Nov, 9:32 AM",
|
||||
status: "paid",
|
||||
customer: ["Arrias Liunda", { image: "A" }],
|
||||
product: "Airpods 2 Gen",
|
||||
revenue: "$350,00",
|
||||
},
|
||||
{
|
||||
id: "#10429",
|
||||
date: "2 Nov, 10:14 AM",
|
||||
status: "paid",
|
||||
customer: ["Rugna Ilpio", { image: team5 }],
|
||||
product: "Bracelet Warret",
|
||||
revenue: "$15,00",
|
||||
},
|
||||
{
|
||||
id: "#10430",
|
||||
date: "2 Nov, 10:14 AM",
|
||||
status: "refunded",
|
||||
customer: ["Anna Landa", { image: ivana }],
|
||||
product: ["Watter Bottle India", { suffix: "x 3" }],
|
||||
revenue: "$25,00",
|
||||
},
|
||||
{
|
||||
id: "#10431",
|
||||
date: "2 Nov, 3:12 PM",
|
||||
status: "paid",
|
||||
customer: ["Karl Innas", { image: "K" }],
|
||||
product: "Kitchen Gadgets",
|
||||
revenue: "$164,90",
|
||||
},
|
||||
{
|
||||
id: "#10432",
|
||||
date: "2 Nov, 5:12 PM",
|
||||
status: "paid",
|
||||
customer: ["Oana Kilas", { image: "O", color: "info" }],
|
||||
product: "Office Papers",
|
||||
revenue: "$23,90",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default dataTableData;
|
||||
@ -12,8 +12,9 @@
|
||||
|
||||
* 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 { useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
@ -30,14 +31,14 @@ 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 Footer from "examples/Footer";
|
||||
import DataTable from "examples/Tables/DataTable";
|
||||
|
||||
// import dataTableData from "layouts/ecommerce/orders/order-list/data/dataTableData";
|
||||
// Data
|
||||
import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import { QController } from "qqq-frontend-core/lib/controllers/QController";
|
||||
import Link from "@mui/material/Link";
|
||||
import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import IdCell from "./components/IdCell";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
const qController = new QController("http://localhost:8000");
|
||||
console.log(qController);
|
||||
@ -54,8 +55,8 @@ let dataTableData = {
|
||||
|
||||
function EntityList({ table }: Props): JSX.Element {
|
||||
const [menu, setMenu] = useState(null);
|
||||
const [thing, thing1] = useState(1);
|
||||
console.log(thing);
|
||||
const [tableState, setTableState] = useState("");
|
||||
console.log(tableState);
|
||||
|
||||
const newEntity = (event: any) => setMenu(event.currentTarget);
|
||||
const openMenu = (event: any) => setMenu(event.currentTarget);
|
||||
@ -66,33 +67,39 @@ function EntityList({ table }: Props): JSX.Element {
|
||||
(async () => {
|
||||
await qController.loadTableMetaData(table.name).then((tableMetaData) => {
|
||||
(async () => {
|
||||
await qController.query(table.name).then((results) => {
|
||||
await qController.query(table.name, 250).then((results) => {
|
||||
dataTableData = {
|
||||
columns: [],
|
||||
rows: [],
|
||||
};
|
||||
|
||||
Object.keys(tableMetaData.fields).forEach((key) => {
|
||||
dataTableData.columns.push({
|
||||
Header: key,
|
||||
accessor: key,
|
||||
});
|
||||
const fields = new Map(Object.entries(tableMetaData.fields));
|
||||
const sortedEntries = new Map([...fields.entries()].sort());
|
||||
sortedEntries.forEach((value, key) => {
|
||||
if (key === tableMetaData.primaryKeyField) {
|
||||
dataTableData.columns.splice(0, 0, {
|
||||
Header: key,
|
||||
accessor: key,
|
||||
Cell: ({ value }: any) => <IdCell id={value} />,
|
||||
});
|
||||
} else {
|
||||
dataTableData.columns.push({
|
||||
Header: key,
|
||||
accessor: key,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
results.forEach((record) => {
|
||||
const row = new Map();
|
||||
const values = new Map(Object.entries(record.values));
|
||||
values.forEach((value, key) => {
|
||||
if (key === tableMetaData.primaryKeyField) {
|
||||
row.set(key, `<a href='/${tableMetaData.name}/${value}'>${value}</a>`);
|
||||
} else {
|
||||
row.set(key, value);
|
||||
}
|
||||
row.set(key, value);
|
||||
});
|
||||
dataTableData.rows.push(Object.fromEntries(row));
|
||||
});
|
||||
|
||||
thing1(table.name === "carrier" ? 2 : 3);
|
||||
setTableState(table.name);
|
||||
});
|
||||
})();
|
||||
});
|
||||
|
||||
188
src/qqq/pages/entity-view/components/ViewContents/index.tsx
Normal file
188
src/qqq/pages/entity-view/components/ViewContents/index.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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 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";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Settings page components
|
||||
|
||||
// qqq imports
|
||||
import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import { QController } from "qqq-frontend-core/lib/controllers/QController";
|
||||
import { QTableRecord } from "qqq-frontend-core/lib/model/metaData/QTableRecord";
|
||||
import React, { 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 MDButton from "../../../../../components/MDButton";
|
||||
import { setLayout } from "../../../../../context";
|
||||
|
||||
const qController = new QController("http://localhost:8000");
|
||||
console.log(qController);
|
||||
|
||||
// Declaring props types for ViewForm
|
||||
interface Props {
|
||||
id: string;
|
||||
}
|
||||
|
||||
function ViewContents({ id }: Props): JSX.Element {
|
||||
const { tableName } = useParams();
|
||||
const [nameValues, setNameValues] = useState([] as JSX.Element[]);
|
||||
const [loadCounter, setLoadCounter] = useState(0);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const handleConfirmDelete = (event: { preventDefault: () => void }) => {
|
||||
event.preventDefault();
|
||||
|
||||
(async () => {
|
||||
await qController.delete(tableName, id).then((results) => {
|
||||
window.location.href = `/${tableName}/list/`;
|
||||
});
|
||||
})();
|
||||
};
|
||||
|
||||
const tableMetaData = new QTableMetaData(tableName);
|
||||
if (loadCounter === 0) {
|
||||
setLoadCounter(1);
|
||||
(async () => {
|
||||
await qController.loadTableMetaData(tableName).then((tableMetaData) => {
|
||||
const formFields = [] as JSX.Element[];
|
||||
const fields = new Map(Object.entries(tableMetaData.fields));
|
||||
|
||||
// make a call to query (just get all for now, and iterate and filter like a caveman)
|
||||
(async () => {
|
||||
await qController.query(tableName, 250).then((results) => {
|
||||
let foundRecord: QTableRecord;
|
||||
results.forEach((record) => {
|
||||
const values = new Map(Object.entries(record.values));
|
||||
values.forEach((value, key) => {
|
||||
if (key === tableMetaData.primaryKeyField && value.toString() === id) {
|
||||
foundRecord = record;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
nameValues.push(
|
||||
<MDBox key={tableMetaData.primaryKeyField} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
|
||||
{tableMetaData.primaryKeyField}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{id}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
const values = new Map(Object.entries(foundRecord.values));
|
||||
const sortedEntries = new Map([...values.entries()].sort());
|
||||
sortedEntries.forEach((value, key) => {
|
||||
if (key !== tableMetaData.primaryKeyField) {
|
||||
nameValues.push(
|
||||
<MDBox key={key} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" textTransform="capitalize">
|
||||
{key}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{value}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setLoadCounter(2);
|
||||
});
|
||||
})();
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
const handleConfirmDeleteOpen = () => {
|
||||
// setOpen(true);
|
||||
};
|
||||
|
||||
const handleConfirmDeleteClose = () => {
|
||||
// setOpen(false);
|
||||
};
|
||||
|
||||
const editPath = `/${tableName}/edit/${id}`;
|
||||
|
||||
return (
|
||||
<Card id="basic-info" sx={{ overflow: "visible" }}>
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">
|
||||
Viewing {tableMetaData.label} ({id})
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={3}>{nameValues}</MDBox>
|
||||
<MDBox component="form" pb={3} px={3}>
|
||||
<Grid key="tres" container spacing={3}>
|
||||
<MDBox ml="auto" mr={5}>
|
||||
<MDButton
|
||||
type="submit"
|
||||
variant="gradient"
|
||||
color="primary"
|
||||
size="small"
|
||||
onClick={handleConfirmDelete}
|
||||
>
|
||||
delete {tableMetaData.label}
|
||||
</MDButton>
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleConfirmDeleteClose}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
Are you sure you want to delete this record?
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleConfirmDeleteClose}>No</Button>
|
||||
<Button onClick={handleConfirmDelete} autoFocus>
|
||||
Yes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<MDButton type="submit" variant="gradient" color="dark" size="small">
|
||||
<Link href={editPath}>edit {tableMetaData.label}</Link>
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ViewContents;
|
||||
51
src/qqq/pages/entity-view/index.tsx
Normal file
51
src/qqq/pages/entity-view/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
/**
|
||||
=========================================================
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
// import CreateForm from "qqq/pages/entity-create/components/CreateForm";
|
||||
import BaseLayout from "qqq/pages/components/BaseLayout";
|
||||
import ViewContents from "./components/ViewContents";
|
||||
|
||||
function EntityView(): JSX.Element {
|
||||
const { id } = useParams();
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
<MDBox mt={4}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={12}>
|
||||
<MDBox mb={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<ViewContents id={id} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default EntityView;
|
||||
@ -393,8 +393,11 @@ console.log(qController);
|
||||
await qController.loadMetaData().then((metaData) => {
|
||||
console.log(`metaData: ${metaData}`);
|
||||
|
||||
// get the keys sorted
|
||||
const keys = new Map([...metaData.entries()].sort());
|
||||
|
||||
const tableList = [] as any[];
|
||||
metaData.forEach((value, key) => {
|
||||
keys.forEach((value, key) => {
|
||||
const table = metaData.get(key);
|
||||
tableList.push({
|
||||
name: table.label,
|
||||
|
||||
@ -20,7 +20,8 @@
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": false,
|
||||
"downlevelIteration": true,
|
||||
"baseUrl": "src"
|
||||
"baseUrl": "src",
|
||||
"allowAsProps": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user