QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates to prepare for demo

Browse Source
This commit is contained in:
Tim Chamberlain
2022-06-28 22:00:28 -05:00
parent 048e080b77
commit 160d8ab2b6
23 changed files with 543 additions and 1425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/qqq/pages/entity-list/components/IdCell/index.tsx
View File

@ -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>

184
src/qqq/pages/entity-list/data/dataTableData.tsx
View File

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

43
src/qqq/pages/entity-list/index.tsx
View File

@ -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);
});
})();
});