admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BOD-21 Added sorting and saving to production config. Added drag and drop to column ordering

Browse Source
This commit is contained in:
Patrick Fic
2020-04-21 17:14:58 -07:00
parent f2fd1bf7eb
commit 9c84024a08
7 changed files with 103 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
client/src/components/production-list-columns/production-list-columns.data.js
View File

@@ -6,6 +6,7 @@ import { DateFormatter } from "../../utils/DateFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import { alphaSort } from "../../utils/sorters";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { Menu, Dropdown } from "antd";
export default [
{
@@ -138,11 +139,25 @@ export default [
dataIndex: "alert",
key: "alert",
render: (text, record) => (
<div>
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled style={{ color: "red" }} />
) : null}
</div>
<Dropdown
overlay={
<Menu>
<Menu.Item key="1">1st menu item {text}</Menu.Item>
<Menu.Item key="2">2nd menu item</Menu.Item>
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
}
trigger={["contextMenu"]}
>
<div
onClick={() => console.log("Hi")}
style={{ width: "100%", height: "19px" }}
>
{record.production_vars && record.production_vars.alert ? (
<ExclamationCircleFilled className="production-alert" />
) : null}
</div>
</Dropdown>
),
},
{
@@ -155,4 +170,16 @@ export default [
</span>
),
},
{
title: i18n.t("production.labels.cycletime"),
dataIndex: "ct",
key: "ct",
render: (text, record) => {
return (
<span>
{(record.production_vars && record.production_vars.note) || ""}
</span>
);
},
},
];

74
client/src/components/production-list-table/production-list-table.component.jsx
View File

@@ -1,11 +1,13 @@
import { Table, Button } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { SyncOutlined } from "@ant-design/icons";
import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ReactDragListView from "react-drag-listview"; //TODO Is there a better way? This library is too big.
import "./production-list-table.styles.scss";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
bodyshop: selectBodyshop,
@@ -15,12 +17,13 @@ const mapDispatchToProps = (dispatch) => ({
});
export function ProductionListTable({
columns,
columnState,
loading,
data,
bodyshop,
refetch,
}) {
const [columns, setColumns] = columnState;
const [state, setState] = useState(
bodyshop.production_config.tableState || {
sortedInfo: {},
@@ -28,40 +31,49 @@ export function ProductionListTable({
}
);
console.log("Filter State", state);
const { t } = useTranslation();
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const onDragEnd = (fromIndex, toIndex) => {
const columnsCopy = columns.slice();
const item = columnsCopy.splice(fromIndex, 1)[0];
columnsCopy.splice(toIndex, 0, item);
setColumns(columnsCopy);
};
if (!!!columns) return <div>No columns found.</div>;
return (
<Table
size="small"
title={() => (
<div>
<ProductionListSaveConfigButton
columns={columns}
tableState={state}
/>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
</div>
)}
pagination={{ position: "top" }}
columns={columns.map((c) => {
return {
...c,
sortOrder:
state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
};
})}
rowKey="id"
loading={loading}
dataSource={data}
onChange={handleTableChange}
/>
<ReactDragListView.DragColumn onDragEnd={onDragEnd} nodeSelector="th">
<Table
size="small"
title={() => (
<div>
<ProductionListSaveConfigButton
columns={columns}
tableState={state}
/>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
</div>
)}
pagination={{ position: "top" }}
columns={columns.map((c) => {
return {
...c,
sortOrder:
state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
};
})}
rowKey="id"
loading={loading}
dataSource={data}
onChange={handleTableChange}
rowClassName={(record, index) => (index % 2 === 0 ? "red" : "blue")} //TODO What could be good usage here?
/>
</ReactDragListView.DragColumn>
);
}
export default connect(

5
client/src/components/production-list-table/production-list-table.container.jsx
View File

@@ -1,9 +1,6 @@
import { useQuery } from "@apollo/react-hooks";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ProductionListTable from "./production-list-table.component";
export default function ProductionListTableContainer({ columnState }) {
@@ -17,7 +14,7 @@ export default function ProductionListTableContainer({ columnState }) {
loading={loading}
data={data ? data.jobs : []}
refetch={refetch}
columns={columnState[0]}
columnState={columnState}
/>
</div>
);

13
client/src/components/production-list-table/production-list-table.styles.scss Normal file
View File

@@ -0,0 +1,13 @@
.production-alert {
animation: alertBlinker 2s linear infinite;
}
@keyframes alertBlinker {
50% {
color: red;
//opacity: 0;
}
}
.blue {
color: blue;
}