mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +00:00
Initial checkin
This commit is contained in:
56
src/qqq/pages/entity-list/components/CustomerCell/index.tsx
Normal file
56
src/qqq/pages/entity-list/components/CustomerCell/index.tsx
Normal 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;
|
43
src/qqq/pages/entity-list/components/DefaultCell/index.tsx
Normal file
43
src/qqq/pages/entity-list/components/DefaultCell/index.tsx
Normal 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">
|
||||
{suffix}
|
||||
</MDTypography>
|
||||
)}
|
||||
</MDTypography>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultCell
|
||||
DefaultCell.defaultProps = {
|
||||
suffix: "",
|
||||
};
|
||||
|
||||
export default DefaultCell;
|
47
src/qqq/pages/entity-list/components/IdCell/index.tsx
Normal file
47
src/qqq/pages/entity-list/components/IdCell/index.tsx
Normal 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;
|
56
src/qqq/pages/entity-list/components/StatusCell/index.tsx
Normal file
56
src/qqq/pages/entity-list/components/StatusCell/index.tsx
Normal 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;
|
184
src/qqq/pages/entity-list/data/dataTableData.tsx
Normal file
184
src/qqq/pages/entity-list/data/dataTableData.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 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;
|
153
src/qqq/pages/entity-list/index.tsx
Normal file
153
src/qqq/pages/entity-list/index.tsx
Normal 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
|
||||
<Icon>keyboard_arrow_down</Icon>
|
||||
</MDButton>
|
||||
{renderMenu}
|
||||
<MDBox ml={1}>
|
||||
<MDButton variant="outlined" color="dark">
|
||||
<Icon>description</Icon>
|
||||
export csv
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Card>
|
||||
<DataTable table={dataTableData} entriesPerPage={false} canSearch />
|
||||
</Card>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default EntityList;
|
Reference in New Issue
Block a user