186 lines
6.5 KiB
JavaScript
186 lines
6.5 KiB
JavaScript
// import Icon from "@ant-design/icons";
|
|
// import { Button, Dropdown, Menu, notification } from "antd";
|
|
// import React, { useState } from "react";
|
|
// import { useMutation, useQuery } from "react-apollo";
|
|
// 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";
|
|
|
|
// const ResponsiveReactGridLayout = WidthProvider(Responsive);
|
|
|
|
// 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);
|
|
|
|
// const handleLayoutChange = async (newLayout) => {
|
|
// logImEXEvent("dashboard_change_layout");
|
|
// setState({ ...state, layout: newLayout });
|
|
// const result = await updateLayout({
|
|
// variables: { email: currentUser.email, layout: newLayout },
|
|
// });
|
|
|
|
// 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.layout.findIndex((i) => i.i === key);
|
|
// const newLayout = state.layout;
|
|
// newLayout.splice(idxToRemove, 1);
|
|
// handleLayoutChange(newLayout);
|
|
// };
|
|
|
|
// const handleAddComponent = (e) => {
|
|
// logImEXEvent("dashboard_add_component", { name: e });
|
|
|
|
// 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 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>
|
|
// );
|
|
|
|
// 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>
|
|
// );
|
|
// }
|
|
|
|
// export default connect(
|
|
// mapStateToProps,
|
|
// mapDispatchToProps
|
|
// )(DashboardGridComponent);
|
|
|
|
// 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,
|
|
// },
|
|
// };
|