IO-306 Creation of dashboard.
This commit is contained in:
Patrick Fic
@@ -1,185 +1,249 @@
|
||||
// import Icon from "@ant-design/icons";
|
||||
// import { Button, Dropdown, Menu, notification } from "antd";
|
||||
// import React, { useState } from "react";
|
||||
// import { useMutation, useQuery } from "@apollo/client";
|
||||
// import { Responsive, WidthProvider } from "react-grid-layout";
|
||||
// import { useTranslation } from "react-i18next";
|
||||
// import { MdClose } from "react-icons/md";
|
||||
// import { connect } from "react-redux";
|
||||
// import { createStructuredSelector } from "reselect";
|
||||
// import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
// import { QUERY_DASHBOARD_DETAILS } from "../../graphql/bodyshop.queries";
|
||||
// import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
|
||||
// import {
|
||||
// selectBodyshop,
|
||||
// selectCurrentUser,
|
||||
// } from "../../redux/user/user.selectors";
|
||||
// import AlertComponent from "../alert/alert.component";
|
||||
// import DashboardMonthlyRevenueGraph from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
|
||||
// import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
|
||||
// import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
|
||||
// import DashboardTotalProductionHours from "../dashboard-components/total-production-hours/total-production-hours.component";
|
||||
// import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
||||
// //Combination of the following:
|
||||
// // /node_modules/react-grid-layout/css/styles.css
|
||||
// // /node_modules/react-resizable/css/styles.css
|
||||
// import "./dashboard-grid.styles.css";
|
||||
// import "./dashboard-grid.styles.scss";
|
||||
import Icon, { SyncOutlined } from "@ant-design/icons";
|
||||
import { gql, useMutation, useQuery } from "@apollo/client";
|
||||
import { Button, Dropdown, Menu, notification, PageHeader, Space } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { Responsive, WidthProvider } from "react-grid-layout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { MdClose } from "react-icons/md";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import { UPDATE_DASHBOARD_LAYOUT } from "../../graphql/user.queries";
|
||||
import {
|
||||
selectBodyshop,
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import DashboardMonthlyRevenueGraph, {
|
||||
DashboardMonthlyRevenueGraphGql,
|
||||
} from "../dashboard-components/monthly-revenue-graph/monthly-revenue-graph.component";
|
||||
import DashboardProjectedMonthlySales from "../dashboard-components/pojected-monthly-sales/projected-monthly-sales.component";
|
||||
import DashboardTotalProductionDollars from "../dashboard-components/total-production-dollars/total-production-dollars.component";
|
||||
import DashboardTotalProductionHours, {
|
||||
DashboardTotalProductionHoursGql,
|
||||
} from "../dashboard-components/total-production-hours/total-production-hours.component";
|
||||
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
|
||||
//Combination of the following:
|
||||
// /node_modules/react-grid-layout/css/styles.css
|
||||
// /node_modules/react-resizable/css/styles.css
|
||||
import "./dashboard-grid.styles.scss";
|
||||
import { GenerateDashboardData } from "./dashboard-grid.utils";
|
||||
|
||||
// const ResponsiveReactGridLayout = WidthProvider(Responsive);
|
||||
const ResponsiveReactGridLayout = WidthProvider(Responsive);
|
||||
|
||||
// const mapStateToProps = createStructuredSelector({
|
||||
// currentUser: selectCurrentUser,
|
||||
// bodyshop: selectBodyshop,
|
||||
// });
|
||||
// const mapDispatchToProps = (dispatch) => ({
|
||||
// //setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
// });
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
// export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
// const { loading, error, data } = useQuery(QUERY_DASHBOARD_DETAILS);
|
||||
// const { t } = useTranslation();
|
||||
// const [state, setState] = useState({
|
||||
// layout: bodyshop.associations[0].user.dashboardlayout || [
|
||||
// { i: "ProductionDollars", x: 0, y: 0, w: 2, h: 2 },
|
||||
// // { i: "ProductionHours", x: 2, y: 0, w: 2, h: 2 },
|
||||
// ],
|
||||
// });
|
||||
// const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
|
||||
export function DashboardGridComponent({ currentUser, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const [state, setState] = useState({
|
||||
...(bodyshop.associations[0].user.dashboardlayout
|
||||
? bodyshop.associations[0].user.dashboardlayout
|
||||
: { items: [], layout: [], layouts: [] }),
|
||||
});
|
||||
const { loading, error, data, refetch } = useQuery(
|
||||
createDashboardQuery(state)
|
||||
);
|
||||
|
||||
// const handleLayoutChange = async (newLayout) => {
|
||||
// logImEXEvent("dashboard_change_layout");
|
||||
// setState({ ...state, layout: newLayout });
|
||||
// const result = await updateLayout({
|
||||
// variables: { email: currentUser.email, layout: newLayout },
|
||||
// });
|
||||
const [updateLayout] = useMutation(UPDATE_DASHBOARD_LAYOUT);
|
||||
|
||||
// if (!!result.errors) {
|
||||
// notification["error"]({
|
||||
// message: t("dashboard.errors.updatinglayout", {
|
||||
// message: JSON.stringify(result.errors),
|
||||
// }),
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
const handleLayoutChange = async (layout, layouts) => {
|
||||
logImEXEvent("dashboard_change_layout");
|
||||
|
||||
// const handleRemoveComponent = (key) => {
|
||||
// logImEXEvent("dashboard_remove_component", { name: key });
|
||||
setState({ ...state, layout, layouts });
|
||||
|
||||
// const idxToRemove = state.layout.findIndex((i) => i.i === key);
|
||||
// const newLayout = state.layout;
|
||||
// newLayout.splice(idxToRemove, 1);
|
||||
// handleLayoutChange(newLayout);
|
||||
// };
|
||||
const result = await updateLayout({
|
||||
variables: {
|
||||
email: currentUser.email,
|
||||
layout: { ...state, layout, layouts },
|
||||
},
|
||||
});
|
||||
if (!!result.errors) {
|
||||
notification["error"]({
|
||||
message: t("dashboard.errors.updatinglayout", {
|
||||
message: JSON.stringify(result.errors),
|
||||
}),
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleRemoveComponent = (key) => {
|
||||
logImEXEvent("dashboard_remove_component", { name: key });
|
||||
const idxToRemove = state.items.findIndex((i) => i.i === key);
|
||||
const items = state.items;
|
||||
items.splice(idxToRemove, 1);
|
||||
setState({ ...state, items });
|
||||
};
|
||||
|
||||
// const handleAddComponent = (e) => {
|
||||
// logImEXEvent("dashboard_add_component", { name: e });
|
||||
const handleAddComponent = (e) => {
|
||||
logImEXEvent("dashboard_add_component", { name: e });
|
||||
setState({
|
||||
...state,
|
||||
items: [
|
||||
...state.items,
|
||||
{
|
||||
i: e.key,
|
||||
x: (state.items.length * 2) % (state.cols || 12),
|
||||
y: Infinity, // puts it at the bottom
|
||||
w: componentList[e.key].w || 2,
|
||||
h: componentList[e.key].h || 2,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
// handleLayoutChange([
|
||||
// ...state.layout,
|
||||
// {
|
||||
// i: e.key,
|
||||
// x: (state.layout.length * 2) % (state.cols || 12),
|
||||
// y: Infinity, // puts it at the bottom
|
||||
// w: componentList[e.key].w || 2,
|
||||
// h: componentList[e.key].h || 2,
|
||||
// },
|
||||
// ]);
|
||||
// };
|
||||
const dashboarddata = React.useMemo(
|
||||
() => GenerateDashboardData(data),
|
||||
[data]
|
||||
);
|
||||
|
||||
// const onBreakpointChange = (breakpoint, cols) => {
|
||||
// setState({ ...state, breakpoint: breakpoint, cols: cols });
|
||||
// };
|
||||
// const onBreakpointChange = (breakpoint, cols) => {
|
||||
// setState({ ...state, breakpoint: breakpoint, cols: cols });
|
||||
// };
|
||||
|
||||
// const existingLayoutKeys = state.layout.map((i) => i.i);
|
||||
// const addComponentOverlay = (
|
||||
// <Menu onClick={handleAddComponent}>
|
||||
// {Object.keys(componentList).map((key) => (
|
||||
// <Menu.Item
|
||||
// key={key}
|
||||
// value={key}
|
||||
// disabled={existingLayoutKeys.includes(key)}
|
||||
// >
|
||||
// {componentList[key].label}
|
||||
// </Menu.Item>
|
||||
// ))}
|
||||
// </Menu>
|
||||
// );
|
||||
const existingLayoutKeys = state.items.map((i) => i.i);
|
||||
const addComponentOverlay = (
|
||||
<Menu onClick={handleAddComponent}>
|
||||
{Object.keys(componentList).map((key) => (
|
||||
<Menu.Item
|
||||
key={key}
|
||||
value={key}
|
||||
disabled={existingLayoutKeys.includes(key)}
|
||||
>
|
||||
{componentList[key].label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
|
||||
// if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <Dropdown overlay={addComponentOverlay} trigger={["click"]}>
|
||||
// <Button>{t("dashboard.actions.addcomponent")}</Button>
|
||||
// </Dropdown>
|
||||
// <ResponsiveReactGridLayout
|
||||
// className="layout"
|
||||
// breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
// cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||
// width="100%"
|
||||
// onLayoutChange={handleLayoutChange}
|
||||
// onBreakpointChange={onBreakpointChange}
|
||||
// >
|
||||
// {state.layout.map((item, index) => {
|
||||
// const TheComponent = componentList[item.i].component;
|
||||
// return (
|
||||
// <div key={item.i} data-grid={item}>
|
||||
// <LoadingSkeleton loading={loading}>
|
||||
// <Icon
|
||||
// component={MdClose}
|
||||
// key={item.i}
|
||||
// style={{
|
||||
// position: "absolute",
|
||||
// zIndex: "2",
|
||||
// right: ".25rem",
|
||||
// top: ".25rem",
|
||||
// cursor: "pointer",
|
||||
// }}
|
||||
// onClick={() => handleRemoveComponent(item.i)}
|
||||
// />
|
||||
// <TheComponent
|
||||
// className="dashboard-card"
|
||||
// size="small"
|
||||
// style={{ height: "100%", width: "100%" }}
|
||||
// />
|
||||
// </LoadingSkeleton>
|
||||
// </div>
|
||||
// );
|
||||
// })}
|
||||
// </ResponsiveReactGridLayout>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
extra={
|
||||
<Space>
|
||||
<Button onClick={() => refetch()}>
|
||||
<SyncOutlined />
|
||||
</Button>
|
||||
<Dropdown overlay={addComponentOverlay} trigger={["click"]}>
|
||||
<Button>{t("dashboard.actions.addcomponent")}</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
|
||||
// export default connect(
|
||||
// mapStateToProps,
|
||||
// mapDispatchToProps
|
||||
// )(DashboardGridComponent);
|
||||
<ResponsiveReactGridLayout
|
||||
className="layout"
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||
width="100%"
|
||||
layouts={state.layouts}
|
||||
onLayoutChange={handleLayoutChange}
|
||||
// onBreakpointChange={onBreakpointChange}
|
||||
>
|
||||
{state.items.map((item, index) => {
|
||||
const TheComponent = componentList[item.i].component;
|
||||
return (
|
||||
<div key={item.i} data-grid={item}>
|
||||
<LoadingSkeleton loading={loading}>
|
||||
<Icon
|
||||
component={MdClose}
|
||||
key={item.i}
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: "2",
|
||||
right: ".25rem",
|
||||
top: ".25rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => handleRemoveComponent(item.i)}
|
||||
/>
|
||||
<TheComponent className="dashboard-card" data={dashboarddata} />
|
||||
</LoadingSkeleton>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</ResponsiveReactGridLayout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// const componentList = {
|
||||
// ProductionDollars: {
|
||||
// label: "Production Dollars",
|
||||
// component: DashboardTotalProductionDollars,
|
||||
// w: 2,
|
||||
// h: 1,
|
||||
// },
|
||||
// ProductionHours: {
|
||||
// label: "Production Hours",
|
||||
// component: DashboardTotalProductionHours,
|
||||
// w: 2,
|
||||
// h: 1,
|
||||
// },
|
||||
// ProjectedMonthlySales: {
|
||||
// label: "Projected Monthly Sales",
|
||||
// component: DashboardProjectedMonthlySales,
|
||||
// w: 2,
|
||||
// h: 1,
|
||||
// },
|
||||
// MonthlyRevenueGraph: {
|
||||
// label: "Monthly Sales Graph",
|
||||
// component: DashboardMonthlyRevenueGraph,
|
||||
// w: 2,
|
||||
// h: 2,
|
||||
// },
|
||||
// };
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(DashboardGridComponent);
|
||||
|
||||
const componentList = {
|
||||
ProductionDollars: {
|
||||
label: "Production Dollars",
|
||||
component: DashboardTotalProductionDollars,
|
||||
gqlFragment: null,
|
||||
w: 2,
|
||||
h: 1,
|
||||
},
|
||||
ProductionHours: {
|
||||
label: "Production Hours",
|
||||
component: DashboardTotalProductionHours,
|
||||
gqlFragment: DashboardTotalProductionHoursGql,
|
||||
w: 2,
|
||||
h: 1,
|
||||
},
|
||||
ProjectedMonthlySales: {
|
||||
label: "Projected Monthly Sales",
|
||||
component: DashboardProjectedMonthlySales,
|
||||
gqlFragment: null,
|
||||
w: 2,
|
||||
h: 1,
|
||||
},
|
||||
MonthlyRevenueGraph: {
|
||||
label: "Monthly Sales Graph",
|
||||
component: DashboardMonthlyRevenueGraph,
|
||||
gqlFragment: DashboardMonthlyRevenueGraphGql,
|
||||
w: 2,
|
||||
h: 2,
|
||||
},
|
||||
};
|
||||
|
||||
const createDashboardQuery = (state) => {
|
||||
const componentBasedAdditions = state.layout
|
||||
.map((item, index) => componentList[item.i].gqlFragment || "")
|
||||
.join("");
|
||||
return gql`
|
||||
query QUERY_DASHBOARD_DETAILS {
|
||||
${componentBasedAdditions}
|
||||
production_jobs: jobs(where: { inproduction: { _eq: true } }) {
|
||||
id
|
||||
ro_number
|
||||
ins_co_nm
|
||||
job_totals
|
||||
joblines(where: { removed: { _eq: false } }) {
|
||||
id
|
||||
mod_lbr_ty
|
||||
mod_lb_hrs
|
||||
act_price
|
||||
part_qty
|
||||
part_type
|
||||
}
|
||||
labhrs: joblines_aggregate(where: { mod_lbr_ty: { _neq: "LAR" } }) {
|
||||
aggregate {
|
||||
sum {
|
||||
mod_lb_hrs
|
||||
}
|
||||
}
|
||||
}
|
||||
larhrs: joblines_aggregate(where: { mod_lbr_ty: { _eq: "LAR" } }) {
|
||||
aggregate {
|
||||
sum {
|
||||
mod_lb_hrs
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user