Initial checkin

This commit is contained in:
Tim Chamberlain
2022-06-27 13:29:42 -05:00
commit 048e080b77
661 changed files with 61687 additions and 0 deletions

View File

@ -0,0 +1,56 @@
/**
=========================================================
* 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.
*/
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDAvatar from "components/MDAvatar";
// Declaring props types for CustomerCell
interface Props {
image?: string;
name: string;
color?:
| "transparent"
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "light"
| "dark";
}
function CustomerCell({ image, name, color }: Props): JSX.Element {
return (
<MDBox display="flex" alignItems="center">
<MDBox mr={1}>
<MDAvatar bgColor={color} src={image} alt={name} size="xs" />
</MDBox>
<MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
{name}
</MDTypography>
</MDBox>
);
}
// Declaring default props for CustomerCell
CustomerCell.defaultProps = {
image: "",
color: "dark",
};
export default CustomerCell;

View File

@ -0,0 +1,43 @@
/**
=========================================================
* 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.
*/
// Material Dashboard 2 PRO React TS components
import MDTypography from "components/MDTypography";
// Declaring props types for DefaultCell
interface Props {
value: string;
suffix?: string | boolean;
}
function DefaultCell({ value, suffix }: Props): JSX.Element {
return (
<MDTypography variant="caption" fontWeight="medium" color="text">
{value}
{suffix && (
<MDTypography variant="caption" fontWeight="medium" color="secondary">
&nbsp;&nbsp;{suffix}
</MDTypography>
)}
</MDTypography>
);
}
// Declaring default props for DefaultCell
DefaultCell.defaultProps = {
suffix: "",
};
export default DefaultCell;

View File

@ -0,0 +1,47 @@
/**
=========================================================
* 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 Checkbox from "@mui/material/Checkbox";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// Declaring props types for IdCell
interface Props {
id: string;
checked?: boolean;
}
function IdCell({ id, checked }: Props): JSX.Element {
return (
<MDBox display="flex" alignItems="center">
<Checkbox defaultChecked={checked} />
<MDBox ml={1}>
<MDTypography variant="caption" fontWeight="medium" color="text">
{id}
</MDTypography>
</MDBox>
</MDBox>
);
}
// Declaring default props for IdCell
IdCell.defaultProps = {
checked: false,
};
export default IdCell;

View File

@ -0,0 +1,56 @@
/**
=========================================================
* 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 Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
// Declaring props types for StatusCell
interface Props {
icon: string;
color:
| "primary"
| "secondary"
| "info"
| "success"
| "warning"
| "error"
| "dark"
| "light"
| "white"
| "default";
status: string;
}
function StatusCell({ icon, color, status }: Props): JSX.Element {
return (
<MDBox display="flex" alignItems="center">
<MDBox mr={1}>
<MDButton variant="outlined" color={color} size="small" iconOnly circular>
<Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>
</MDButton>
</MDBox>
<MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
{status}
</MDTypography>
</MDBox>
);
}
export default StatusCell;

View 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 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;

View File

@ -0,0 +1,153 @@
/**
=========================================================
* 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 Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Divider from "@mui/material/Divider";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
// Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import 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";
const qController = new QController("http://localhost:8000");
console.log(qController);
// Declaring props types for DefaultCell
interface Props {
table: QTableMetaData;
}
let dataTableData = {
columns: [] as any[],
rows: [] as any[],
};
function EntityList({ table }: Props): JSX.Element {
const [menu, setMenu] = useState(null);
const [thing, thing1] = useState(1);
console.log(thing);
const newEntity = (event: any) => setMenu(event.currentTarget);
const openMenu = (event: any) => setMenu(event.currentTarget);
const closeMenu = () => setMenu(null);
const createPath = `/${table.name}/create`;
(async () => {
await qController.loadTableMetaData(table.name).then((tableMetaData) => {
(async () => {
await qController.query(table.name).then((results) => {
dataTableData = {
columns: [],
rows: [],
};
Object.keys(tableMetaData.fields).forEach((key) => {
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);
}
});
dataTableData.rows.push(Object.fromEntries(row));
});
thing1(table.name === "carrier" ? 2 : 3);
});
})();
});
})();
const renderMenu = (
<Menu
anchorEl={menu}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
transformOrigin={{ vertical: "top", horizontal: "left" }}
open={Boolean(menu)}
onClose={closeMenu}
keepMounted
>
<MenuItem onClick={closeMenu}>Status: Paid</MenuItem>
<MenuItem onClick={closeMenu}>Status: Refunded</MenuItem>
<MenuItem onClick={closeMenu}>Status: Canceled</MenuItem>
<Divider sx={{ margin: "0.5rem 0" }} />
<MenuItem onClick={closeMenu}>
<MDTypography variant="button" color="error" fontWeight="regular">
Remove Filter
</MDTypography>
</MenuItem>
</Menu>
);
return (
<DashboardLayout>
<DashboardNavbar />
<MDBox my={3}>
<MDBox display="flex" justifyContent="space-between" alignItems="flex-start" mb={2}>
<MDButton variant="gradient" color="info" onClick={newEntity}>
<Link href={createPath}>new {table.label}</Link>
</MDButton>
<MDBox display="flex">
<MDButton variant={menu ? "contained" : "outlined"} color="dark" onClick={openMenu}>
filters&nbsp;
<Icon>keyboard_arrow_down</Icon>
</MDButton>
{renderMenu}
<MDBox ml={1}>
<MDButton variant="outlined" color="dark">
<Icon>description</Icon>
&nbsp;export csv
</MDButton>
</MDBox>
</MDBox>
</MDBox>
<Card>
<DataTable table={dataTableData} entriesPerPage={false} canSearch />
</Card>
</MDBox>
<Footer />
</DashboardLayout>
);
}
export default EntityList;