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

Progress Commit

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-05-13 13:37:19 -04:00
parent f647e1ff11
commit a33a92207b
20 changed files with 2266 additions and 3030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/craco.config.js
View File

@@ -1,53 +0,0 @@
// craco.config.js
const TerserPlugin = require("terser-webpack-plugin");
const CracoLessPlugin = require("craco-less");
const { convertLegacyToken } = require("@ant-design/compatible/lib");
const { theme } = require("antd/lib");
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);
// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { ...v4Token },
javascriptEnabled: true
}
}
}
}
],
webpack: {
configure: (webpackConfig) => {
return {
...webpackConfig,
// Required for Dev Server
devServer: {
...webpackConfig.devServer,
allowedHosts: "all"
},
optimization: {
...webpackConfig.optimization,
// Workaround for CircleCI bug caused by the number of CPUs shown
// https://github.com/facebook/create-react-app/issues/8320
minimizer: webpackConfig.optimization.minimizer.map((item) => {
if (item instanceof TerserPlugin) {
item.options.parallel = 2;
}
return item;
})
}
};
}
},
devtool: "source-map"
};

4750
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

101
client/package.json
View File

@@ -2,97 +2,96 @@
"name": "bodyshop", "name": "bodyshop",
"version": "0.2.1", "version": "0.2.1",
"engines": { "engines": {
"node": "18.18.2" "node": ">=18.18.2"
}, },
"type": "module", "type": "module",
"private": true, "private": true,
"proxy": "http://localhost:4000", "proxy": "http://localhost:4000",
"dependencies": { "dependencies": {
"@ant-design/compatible": "^5.1.2", "@ant-design/compatible": "^5.1.2",
"@ant-design/pro-layout": "^7.17.16", "@ant-design/pro-layout": "^7.19.0",
"@apollo/client": "^3.8.10", "@apollo/client": "^3.8.10",
"@asseinfo/react-kanban": "^2.2.0",
"@emotion/is-prop-valid": "^1.2.2", "@emotion/is-prop-valid": "^1.2.2",
"@fingerprintjs/fingerprintjs": "^4.2.2", "@fingerprintjs/fingerprintjs": "^4.3.0",
"@jsreport/browser-client": "^3.1.0", "@jsreport/browser-client": "^3.1.0",
"@reduxjs/toolkit": "^2.2.1", "@reduxjs/toolkit": "^2.2.4",
"@sentry/cli": "^2.28.6", "@sentry/cli": "^2.31.2",
"@sentry/react": "^7.104.0", "@sentry/react": "^7.114.0",
"@splitsoftware/splitio-react": "^1.11.0", "@splitsoftware/splitio-react": "^1.11.1",
"@tanem/react-nprogress": "^5.0.51", "@tanem/react-nprogress": "^5.0.51",
"@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react": "^4.2.1",
"antd": "^5.15.3", "antd": "^5.17.0",
"apollo-link-logger": "^2.0.1", "apollo-link-logger": "^2.0.1",
"apollo-link-sentry": "^3.3.0", "apollo-link-sentry": "^3.3.0",
"autosize": "^6.0.1", "autosize": "^6.0.1",
"axios": "^1.6.7", "axios": "^1.6.8",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"dayjs": "^1.11.10", "dayjs": "^1.11.11",
"dayjs-business-days2": "^1.2.2", "dayjs-business-days2": "^1.2.2",
"dinero.js": "^1.9.1", "dinero.js": "^1.9.1",
"dotenv": "^16.4.5", "dotenv": "^16.4.5",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"exifr": "^7.1.3", "exifr": "^7.1.3",
"firebase": "^10.8.1", "firebase": "^10.11.1",
"graphql": "^16.6.0", "graphql": "^16.6.0",
"i18next": "^23.10.0", "i18next": "^23.11.3",
"i18next-browser-languagedetector": "^7.0.2", "i18next-browser-languagedetector": "^7.2.1",
"immutability-helper": "^3.1.1", "immutability-helper": "^3.1.1",
"kuika-smooth-dnd": "^1.0.0", "kuika-smooth-dnd": "^1.0.0",
"libphonenumber-js": "^1.10.57", "libphonenumber-js": "^1.11.1",
"logrocket": "^8.0.1", "logrocket": "^8.1.0",
"markerjs2": "^2.32.0", "markerjs2": "^2.32.1",
"normalize-url": "^8.0.0", "normalize-url": "^8.0.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"query-string": "^9.0.0", "query-string": "^9.0.0",
"react": "^18.2.0", "react": "^18.3.1",
"react-big-calendar": "^1.11.0", "react-big-calendar": "^1.12.1",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-cookie": "^7.1.0", "react-cookie": "^7.1.4",
"react-dom": "^18.2.0", "react-dom": "^18.3.1",
"react-drag-listview": "^2.0.0", "react-drag-listview": "^2.0.0",
"react-grid-gallery": "^1.0.0", "react-grid-gallery": "^1.0.1",
"react-grid-layout": "1.3.4", "react-grid-layout": "1.3.4",
"react-i18next": "^14.0.5", "react-i18next": "^14.1.1",
"react-icons": "^5.0.1", "react-icons": "^5.2.1",
"react-image-lightbox": "^5.1.4", "react-image-lightbox": "^5.1.4",
"react-joyride": "^2.7.4", "react-joyride": "^2.8.1",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1",
"react-number-format": "^5.3.3", "react-number-format": "^5.3.4",
"react-popopo": "^2.1.9", "react-popopo": "^2.1.9",
"react-product-fruits": "^2.2.6", "react-product-fruits": "^2.2.6",
"react-redux": "^9.1.0", "react-redux": "^9.1.2",
"react-resizable": "^3.0.5", "react-resizable": "^3.0.5",
"react-router-dom": "^6.22.2", "react-router-dom": "^6.23.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"react-sticky": "^6.0.3", "react-sticky": "^6.0.3",
"react-virtualized": "^9.22.5", "react-virtualized": "^9.22.5",
"recharts": "^2.12.2", "recharts": "^2.12.7",
"redux": "^5.0.1", "redux": "^5.0.1",
"redux-actions": "^2.6.5", "redux-actions": "^3.0.0",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
"redux-saga": "^1.3.0", "redux-saga": "^1.3.0",
"redux-state-sync": "^3.1.4", "redux-state-sync": "^3.1.4",
"reselect": "^5.1.0", "reselect": "^5.1.0",
"sass": "^1.71.1", "sass": "^1.77.0",
"socket.io-client": "^4.7.4", "socket.io-client": "^4.7.5",
"styled-components": "^6.1.8", "styled-components": "^6.1.11",
"subscriptions-transport-ws": "^0.11.0", "subscriptions-transport-ws": "^0.11.0",
"terser-webpack-plugin": "^5.3.10", "terser-webpack-plugin": "^5.3.10",
"userpilot": "^1.3.1", "userpilot": "^1.3.1",
"vite-plugin-ejs": "^1.7.0", "vite-plugin-ejs": "^1.7.0",
"web-vitals": "^3.5.2", "web-vitals": "^3.5.2",
"workbox-core": "^7.0.0", "workbox-core": "^7.1.0",
"workbox-expiration": "^7.0.0", "workbox-expiration": "^7.1.0",
"workbox-navigation-preload": "^7.0.0", "workbox-navigation-preload": "^7.1.0",
"workbox-precaching": "^7.0.0", "workbox-precaching": "^7.1.0",
"workbox-routing": "^7.0.0", "workbox-routing": "^7.1.0",
"workbox-strategies": "^7.0.0" "workbox-strategies": "^7.1.0"
}, },
"scripts": { "scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'", "analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "vite", "start": "vite",
"build": "vite build", "build": "dotenvx run --env-file=.env.development.imex -- vite build",
"start:imex": "dotenvx run --env-file=.env.development.imex -- vite", "start:imex": "dotenvx run --env-file=.env.development.imex -- vite",
"start:rome": "dotenvx run --env-file=.env.development.rome -- vite", "start:rome": "dotenvx run --env-file=.env.development.rome -- vite",
"start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite", "start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
@@ -135,32 +134,30 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-react": "^7.23.3", "@babel/preset-react": "^7.24.1",
"@dotenvx/dotenvx": "^0.15.4", "@dotenvx/dotenvx": "^0.38.0",
"@emotion/babel-plugin": "^11.11.0", "@emotion/babel-plugin": "^11.11.0",
"@emotion/react": "^11.11.3", "@emotion/react": "^11.11.4",
"@sentry/webpack-plugin": "^2.14.2", "@sentry/webpack-plugin": "^2.16.1",
"@swc/core": "^1.3.107",
"@swc/plugin-styled-components": "^1.5.108",
"@testing-library/cypress": "^10.0.1", "@testing-library/cypress": "^10.0.1",
"browserslist": "^4.22.3", "browserslist": "^4.22.3",
"browserslist-to-esbuild": "^2.1.1", "browserslist-to-esbuild": "^2.1.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cypress": "^13.6.6", "cypress": "^13.9.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-config-react-app": "^7.0.1", "eslint-config-react-app": "^7.0.1",
"eslint-plugin-cypress": "^2.15.1", "eslint-plugin-cypress": "^2.15.1",
"memfs": "^4.6.0", "memfs": "^4.9.2",
"os-browserify": "^0.3.0", "os-browserify": "^0.3.0",
"react-error-overlay": "6.0.11", "react-error-overlay": "6.0.11",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"source-map-explorer": "^2.5.3", "source-map-explorer": "^2.5.3",
"vite": "^5.0.11", "vite": "^5.2.11",
"vite-plugin-babel": "^1.2.0", "vite-plugin-babel": "^1.2.0",
"vite-plugin-eslint": "^1.8.1", "vite-plugin-eslint": "^1.8.1",
"vite-plugin-legacy": "^2.1.0", "vite-plugin-legacy": "^2.1.0",
"vite-plugin-node-polyfills": "^0.19.0", "vite-plugin-node-polyfills": "^0.21.0",
"vite-plugin-pwa": "^0.19.0", "vite-plugin-pwa": "^0.20.0",
"vite-plugin-style-import": "^2.0.0" "vite-plugin-style-import": "^2.0.0"
} }
} }

2
client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
View File

@@ -89,8 +89,6 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)), sorter: (a, b) => alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order, sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
render: (text, record) => { render: (text, record) => {
console.log("Render record out today");
console.dir(record);
return record.ownerid ? ( return record.ownerid ? (
<Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}> <Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}> <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>

1
client/src/components/job-close-ro-guard/job-close-ro-guard.container.jsx
View File

@@ -12,7 +12,6 @@ import JobCloseRoGuardBills from "./job-close-ro-guard.bills";
import JobCloseRoGuardPpd from "./job-close-ro-guard.ppd"; import JobCloseRoGuardPpd from "./job-close-ro-guard.ppd";
import JobCloseRoGuardProfit from "./job-close-ro-guard.profit"; import JobCloseRoGuardProfit from "./job-close-ro-guard.profit";
import "./job-close-ro-guard.styles.scss"; import "./job-close-ro-guard.styles.scss";
import JobCloseRoGuardSublet from "./job-close-ro-guard.sublet";
import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle"; import JobCloseRoGuardTtLifecycle from "./job-close-ro-guard.tt-lifecycle";
import InstanceRenderManager from "../../utils/instanceRenderMgr"; import InstanceRenderManager from "../../utils/instanceRenderMgr";

10
client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
View File

@@ -66,21 +66,23 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
((dayjs().isSameOrAfter(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-past") || ((dayjs().isSameOrAfter(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-past") ||
(dayjs().add(1, "day").isSame(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-soon")); (dayjs().add(1, "day").isSame(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-soon"));
const totalHrs = card const totalHrs =
? card.metadata.labhrs.aggregate.sum.mod_lb_hrs + card.metadata.larhrs.aggregate.sum.mod_lb_hrs card && card?.metadata?.labhrs && card?.metadata?.larhrs
: 0; ? card.metadata.labhrs.aggregate.sum.mod_lb_hrs + card.metadata.larhrs.aggregate.sum.mod_lb_hrs
: 0;
const bgColor = cardColor(bodyshop.ssbuckets, totalHrs); const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
return ( return (
<Card <Card
draggable={true}
size="small" size="small"
style={{ style={{
backgroundColor: backgroundColor:
cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`, cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor), color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
maxWidth: "250px", maxWidth: "250px",
marginBottom: "5px" margin: "5px"
}} }}
title={ title={
<Space> <Space>

92
client/src/components/production-board-kanban/production-board-kanban.component.jsx
View File

@@ -20,7 +20,6 @@ import ProductionBoardFilters from "../production-board-filters/production-board
import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component"; import ProductionBoardCard from "../production-board-kanban-card/production-board-kanban-card.component";
import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component"; import ProductionListDetailComponent from "../production-list-detail/production-list-detail.component";
import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component"; import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
//import "@asseinfo/react-kanban/dist/styles.css";
import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component"; import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
import "./production-board-kanban.styles.scss"; import "./production-board-kanban.styles.scss";
import { createBoardData } from "./production-board-kanban.utils.js"; import { createBoardData } from "./production-board-kanban.utils.js";
@@ -31,7 +30,14 @@ const mapStateToProps = createStructuredSelector({
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type })) insertAuditTrail: ({ jobid, operation, type }) =>
dispatch(
insertAuditTrail({
jobid,
operation,
type
})
)
}); });
export function ProductionBoardKanbanComponent({ export function ProductionBoardKanbanComponent({
@@ -163,26 +169,24 @@ export function ProductionBoardKanbanComponent({
: standardSizes[selectedBreakpoint[0]] : standardSizes[selectedBreakpoint[0]]
: "250"; : "250";
const stickyHeader = { const StickyHeader = ({ title }) => (
renderColumnHeader: ({ title }) => ( <Sticky>
<Sticky> {({ style }) => (
{({ <div
style, className="react-trello-column-header"
style={{ ...style, zIndex: "99", backgroundColor: "#e3e3e3", paddingLeft: "5px" }}
>
{title}
</div>
)}
</Sticky>
);
// the following are also available but unused in this example const NormalHeader = ({ title }) => (
isSticky, <div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3", paddingLeft: "5px" }}>
wasSticky, {title}
distanceFromTop, </div>
distanceFromBottom, );
calculatedHeight
}) => (
<div className="react-kanban-column-header" style={{ ...style, zIndex: "99", backgroundColor: "#ddd" }}>
{title}
</div>
)}
</Sticky>
)
};
const cardSettings = const cardSettings =
associationSettings && associationSettings &&
@@ -203,6 +207,11 @@ export function ProductionBoardKanbanComponent({
cardcolor: false cardcolor: false
}; };
const components = {
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
LaneHeader: cardSettings.stickyheader ? StickyHeader : NormalHeader
};
return ( return (
<Container width={width}> <Container width={width}>
<IndefiniteLoading loading={isMoving} /> <IndefiniteLoading loading={isMoving} />
@@ -227,20 +236,27 @@ export function ProductionBoardKanbanComponent({
/> />
{cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />} {cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
<ProductionListDetailComponent jobs={data} /> <ProductionListDetailComponent jobs={data} />
<StickyContainer> {cardSettings.stickyheader ? (
<Board <StickyContainer>
data={boardLanes} <Board
draggable data={boardLanes}
canAddLanes draggable
handleDragEnd={handleDragEnd} handleDragEnd={handleDragEnd}
editable style={{ height: "100%", backgroundColor: "transparent" }}
style={{ height: "100%", backgroundColor: "transparent" }} components={components}
renameLane />
components={{ </StickyContainer>
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }) ) : (
}} <div>
/> <Board
</StickyContainer> data={boardLanes}
draggable
handleDragEnd={handleDragEnd}
style={{ height: "100%", backgroundColor: "transparent" }}
components={components}
/>
</div>
)}
</Container> </Container>
); );
} }
@@ -248,9 +264,9 @@ export function ProductionBoardKanbanComponent({
export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent); export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent);
const Container = styled.div` const Container = styled.div`
.react-kanban-card-skeleton, .react-trello-card-skeleton,
.react-kanban-card, .react-trello-card,
.react-kanban-card-adder-form { .react-trello-card-adder-form {
box-sizing: border-box; box-sizing: border-box;
max-width: ${(props) => props.width}px; max-width: ${(props) => props.width}px;
min-width: ${(props) => props.width}px; min-width: ${(props) => props.width}px;

56
client/src/components/production-board-kanban/production-board-kanban.styles.scss
View File

@@ -1,31 +1,31 @@
.react-kanban-board { .react-trello-board {
padding: 5px; padding: 5px;
} }
.react-kanban-card { .react-trello-card {
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: #fff;
padding: 4px; padding: 4px;
margin-bottom: 7px; margin-bottom: 7px;
} }
// .react-kanban-card-skeleton, // .react-trello-card-skeleton,
// .react-kanban-card, // .react-trello-card,
// .react-kanban-card-adder-form { // .react-trello-card-adder-form {
// box-sizing: border-box; // box-sizing: border-box;
// max-width: 145px; // max-width: 145px;
// min-width: 145px; // min-width: 145px;
// } // }
.react-kanban-card--dragging { .react-trello-card--dragging {
box-shadow: 2px 2px grey; box-shadow: 2px 2px grey;
} }
.react-kanban-card__description { .react-trello-card__description {
padding-top: 10px; padding-top: 10px;
} }
.react-kanban-card__title { .react-trello-card__title {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding-bottom: 5px; padding-bottom: 5px;
font-weight: bold; font-weight: bold;
@@ -33,31 +33,31 @@
justify-content: space-between; justify-content: space-between;
} }
.react-kanban-column { .react-trello-column {
padding: 10px; padding: 10px;
border-radius: 2px; border-radius: 2px;
background-color: #eee; background-color: #eee;
margin: 5px; margin: 5px;
} }
.react-kanban-column input:focus { .react-trello-column input:focus {
outline: none; outline: none;
} }
.react-kanban-card-adder-form { .react-trello-card-adder-form {
border-radius: 3px; border-radius: 3px;
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
margin-bottom: 7px; margin-bottom: 7px;
} }
.react-kanban-card-adder-form input { .react-trello-card-adder-form input {
border: 0px; border: 0px;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
.react-kanban-card-adder-button { .react-trello-card-adder-button {
width: 100%; width: 100%;
margin-top: 5px; margin-top: 5px;
background-color: transparent; background-color: transparent;
@@ -70,11 +70,11 @@
font-weight: bold; font-weight: bold;
} }
.react-kanban-card-adder-button:hover { .react-trello-card-adder-button:hover {
background-color: #ccc; background-color: #ccc;
} }
.react-kanban-card-adder-form__title { .react-trello-card-adder-form__title {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding-bottom: 5px; padding-bottom: 5px;
@@ -85,20 +85,20 @@
padding: 0px; padding: 0px;
} }
.react-kanban-card-adder-form__title:focus { .react-trello-card-adder-form__title:focus {
outline: none; outline: none;
} }
.react-kanban-card-adder-form__description { .react-trello-card-adder-form__description {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
} }
.react-kanban-card-adder-form__description:focus { .react-trello-card-adder-form__description:focus {
outline: none; outline: none;
} }
.react-kanban-card-adder-form__button { .react-trello-card-adder-form__button {
background-color: #eee; background-color: #eee;
border: none; border: none;
padding: 5px; padding: 5px;
@@ -107,39 +107,39 @@
border-radius: 3px; border-radius: 3px;
} }
.react-kanban-card-adder-form__button:hover { .react-trello-card-adder-form__button:hover {
transition: 0.3s; transition: 0.3s;
cursor: pointer; cursor: pointer;
background-color: #ccc; background-color: #ccc;
} }
.react-kanban-column-header { .react-trello-column-header {
padding-bottom: 10px; padding-bottom: 10px;
font-weight: bold; font-weight: bold;
} }
.react-kanban-column-header input:focus { .react-trello-column-header input:focus {
outline: none; outline: none;
} }
.react-kanban-column-header__button { .react-trello-column-header__button {
color: #333333; color: #333333;
background-color: #ffffff; background-color: #ffffff;
border-color: #cccccc; border-color: #cccccc;
} }
.react-kanban-column-header__button:hover, .react-trello-column-header__button:hover,
.react-kanban-column-header__button:focus, .react-trello-column-header__button:focus,
.react-kanban-column-header__button:active { .react-trello-column-header__button:active {
background-color: #e6e6e6; background-color: #e6e6e6;
} }
.react-kanban-column-adder-button { .react-trello-column-adder-button {
border: 2px dashed #eee; border: 2px dashed #eee;
height: 132px; height: 132px;
margin: 5px; margin: 5px;
} }
.react-kanban-column-adder-button:hover { .react-trello-column-adder-button:hover {
cursor: pointer; cursor: pointer;
} }

2
client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx
View File

@@ -18,8 +18,6 @@ const mapDispatchToProps = (dispatch) => ({
function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) { function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
const { t } = useTranslation(); const { t } = useTranslation();
console.log("RECORD");
console.dir(record);
const [note, setNote] = useState((record.production_vars && record.production_vars.note) || ""); const [note, setNote] = useState((record.production_vars && record.production_vars.note) || "");
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);

3
client/src/components/production-sublets-manage/production-sublets-manage.component.jsx
View File

@@ -9,8 +9,7 @@ export default function ProductionSubletsManageComponent({ subletJobLines }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET); const [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
console.log("subletJobLines");
console.dir(subletJobLines);
const subletCount = useMemo(() => { const subletCount = useMemo(() => {
return { return {
total: subletJobLines.filter((s) => !s.sublet_ignored).length, total: subletJobLines.filter((s) => !s.sublet_ignored).length,

15
client/src/components/trello-board/components/NewLaneForm.jsx
View File

@@ -19,13 +19,14 @@ const NewLane = ({ onCancel, onAdd }) => {
const getValue = () => refInput.current.getValue(); const getValue = () => refInput.current.getValue();
const onClickOutside = (a, b, c) => { // TODO: Commented out because it was never called and it was causing a error
if (getValue().length > 0) { // const onClickOutside = (a, b, c) => {
handleSubmit(); // if (getValue().length > 0) {
} else { // handleSubmit();
onCancel(); // } else {
} // onCancel();
}; // }
// };
return ( return (
<Section> <Section>

4
client/src/components/trello-board/components/index.js
View File

@@ -8,7 +8,7 @@ import AddCardLink from "./AddCardLink";
import NewLaneSection from "./NewLaneSection.jsx"; import NewLaneSection from "./NewLaneSection.jsx";
import { BoardWrapper, GlobalStyle, ScrollableLane, Section } from "../styles/Base"; import { BoardWrapper, GlobalStyle, ScrollableLane, Section } from "../styles/Base";
export default { const exports = {
GlobalStyle, GlobalStyle,
BoardWrapper, BoardWrapper,
Loader, Loader,
@@ -22,3 +22,5 @@ export default {
Card, Card,
AddCardLink AddCardLink
}; };
export default exports;

5
client/src/components/trello-board/controllers/BoardContainer.jsx
View File

@@ -70,8 +70,9 @@ class BoardContainer extends Component {
switch (event.type) { switch (event.type) {
case "ADD_CARD": case "ADD_CARD":
return actions.addCard({ laneId: event.laneId, card: event.card }); return actions.addCard({ laneId: event.laneId, card: event.card });
case "UPDATE_CARD": // Note: Removed because there was a duplicate entry
return actions.updateCard({ laneId: event.laneId, card: event.card }); // case "UPDATE_CARD":
// return actions.updateCard({ laneId: event.laneId, card: event.card });
case "REMOVE_CARD": case "REMOVE_CARD":
return actions.removeCard({ laneId: event.laneId, cardId: event.cardId }); return actions.removeCard({ laneId: event.laneId, cardId: event.cardId });
case "REFRESH_BOARD": case "REFRESH_BOARD":

13
client/src/components/trello-board/controllers/Lane.jsx
View File

@@ -62,12 +62,14 @@ class Lane extends Component {
} }
}; };
UNSAFE_componentWillReceiveProps(nextProps) { static getDerivedStateFromProps(nextProps, prevState) {
if (!isEqual(this.props.cards, nextProps.cards)) { if (!isEqual(prevState.cards, nextProps.cards)) {
this.setState({ return {
currentPage: nextProps.currentPage currentPage: nextProps.currentPage
}); };
} }
// Return null if the state hasn't changed
return null;
} }
removeCard = (cardId) => { removeCard = (cardId) => {
@@ -155,8 +157,7 @@ class Lane extends Component {
cardDropClass, cardDropClass,
tagStyle, tagStyle,
cardStyle, cardStyle,
components, components
t
} = this.props; } = this.props;
const { addCardMode, collapsed } = this.state; const { addCardMode, collapsed } = this.state;

83
client/src/components/trello-board/dnd/Container.jsx
View File

@@ -1,112 +1,109 @@
import React, {Component} from 'react' import React, { Component } from "react";
import ReactDOM from 'react-dom' import PropTypes from "prop-types";
import PropTypes from 'prop-types' import container, { dropHandlers } from "kuika-smooth-dnd";
import container, {dropHandlers} from 'kuika-smooth-dnd'
container.dropHandler = dropHandlers.reactDropHandler().handler container.dropHandler = dropHandlers.reactDropHandler().handler;
container.wrapChild = p => p // dont wrap children they will already be wrapped container.wrapChild = (p) => p; // don't wrap children they will already be wrapped
class Container extends Component { class Container extends Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.getContainerOptions = this.getContainerOptions.bind(this) this.getContainerOptions = this.getContainerOptions.bind(this);
this.setRef = this.setRef.bind(this) this.setRef = this.setRef.bind(this);
this.prevContainer = null this.prevContainer = null;
} }
componentDidMount() { componentDidMount() {
this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this) this.prevContainer = this.containerDiv;
this.prevContainer = this.containerDiv this.container = container(this.containerDiv, this.getContainerOptions());
this.container = container(this.containerDiv, this.getContainerOptions())
} }
componentWillUnmount() { componentWillUnmount() {
this.container.dispose() this.container.dispose();
this.container = null this.container = null;
} }
componentDidUpdate() { componentDidUpdate() {
this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this)
if (this.containerDiv) { if (this.containerDiv) {
if (this.prevContainer && this.prevContainer !== this.containerDiv) { if (this.prevContainer && this.prevContainer !== this.containerDiv) {
this.container.dispose() this.container.dispose();
this.container = container(this.containerDiv, this.getContainerOptions()) this.container = container(this.containerDiv, this.getContainerOptions());
this.prevContainer = this.containerDiv this.prevContainer = this.containerDiv;
} }
} }
} }
render() { render() {
if (this.props.render) { if (this.props.render) {
return this.props.render(this.setRef) return this.props.render(this.setRef);
} else { } else {
return ( return (
<div style={this.props.style} ref={this.setRef}> <div style={this.props.style} ref={this.setRef}>
{this.props.children} {this.props.children}
</div> </div>
) );
} }
} }
setRef(element) { setRef(element) {
this.containerDiv = element this.containerDiv = element;
} }
getContainerOptions() { getContainerOptions() {
const functionProps = {} const functionProps = {};
if (this.props.onDragStart) { if (this.props.onDragStart) {
functionProps.onDragStart = (...p) => this.props.onDragStart(...p) functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
} }
if (this.props.onDragEnd) { if (this.props.onDragEnd) {
functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p) functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
} }
if (this.props.onDrop) { if (this.props.onDrop) {
functionProps.onDrop = (...p) => this.props.onDrop(...p) functionProps.onDrop = (...p) => this.props.onDrop(...p);
} }
if (this.props.getChildPayload) { if (this.props.getChildPayload) {
functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p) functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
} }
if (this.props.shouldAnimateDrop) { if (this.props.shouldAnimateDrop) {
functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p) functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
} }
if (this.props.shouldAcceptDrop) { if (this.props.shouldAcceptDrop) {
functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p) functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
} }
if (this.props.onDragEnter) { if (this.props.onDragEnter) {
functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p) functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
} }
if (this.props.onDragLeave) { if (this.props.onDragLeave) {
functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p) functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
} }
if (this.props.render) { if (this.props.render) {
functionProps.render = (...p) => this.props.render(...p) functionProps.render = (...p) => this.props.render(...p);
} }
if (this.props.onDropReady) { if (this.props.onDropReady) {
functionProps.onDropReady = (...p) => this.props.onDropReady(...p) functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
} }
if (this.props.getGhostParent) { if (this.props.getGhostParent) {
functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p) functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
} }
return Object.assign({}, this.props, functionProps) return Object.assign({}, this.props, functionProps);
} }
} }
Container.propTypes = { Container.propTypes = {
behaviour: PropTypes.oneOf(['move', 'copy', 'drag-zone']), behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
groupName: PropTypes.string, groupName: PropTypes.string,
orientation: PropTypes.oneOf(['horizontal', 'vertical']), orientation: PropTypes.oneOf(["horizontal", "vertical"]),
style: PropTypes.object, style: PropTypes.object,
dragHandleSelector: PropTypes.string, dragHandleSelector: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
@@ -128,12 +125,12 @@ Container.propTypes = {
render: PropTypes.func, render: PropTypes.func,
getGhostParent: PropTypes.func, getGhostParent: PropTypes.func,
removeOnDropOut: PropTypes.bool removeOnDropOut: PropTypes.bool
} };
Container.defaultProps = { Container.defaultProps = {
behaviour: 'move', behaviour: "move",
orientation: 'vertical', orientation: "vertical",
className: 'reactTrelloBoard' className: "reactTrelloBoard"
} };
export default Container export default Container;

32
client/src/components/trello-board/helpers/deprecationWarnings.js
View File

@@ -1,24 +1,26 @@
const REPLACE_TABLE = { const REPLACE_TABLE = {
customLaneHeader: 'components.LaneHeader', customLaneHeader: "components.LaneHeader",
newLaneTemplate: 'components.NewLaneSection', newLaneTemplate: "components.NewLaneSection",
newCardTemplate: 'components.NewCardForm', newCardTemplate: "components.NewCardForm",
children: 'components.Card', children: "components.Card",
customCardLayout: 'components.Card', customCardLayout: "components.Card",
addLaneTitle: '`t` function with key "Add another lane"', addLaneTitle: '`t` function with key "Add another lane"',
addCardLink: '`t` function with key "Click to add card"' addCardLink: '`t` function with key "Click to add card"'
} };
const warn = prop => { const warn = (prop) => {
const use = REPLACE_TABLE[prop] const use = REPLACE_TABLE[prop];
console.warn( console.warn(
`react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md` `react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md`
) );
} };
export default props => { const deprecationWarning = (props) => {
Object.keys(REPLACE_TABLE).forEach(key => { Object.keys(REPLACE_TABLE).forEach((key) => {
if (props.hasOwnProperty(key)) { if (props.hasOwnProperty(key)) {
warn(key) warn(key);
} }
}) });
} };
export default deprecationWarning;

2
client/src/components/trello-board/index.jsx
View File

@@ -23,7 +23,7 @@ const TrelloBoard = ({ components, ...otherProps }) => {
return ( return (
<StyleSheetManager shouldForwardProp={shouldForwardProp}> <StyleSheetManager shouldForwardProp={shouldForwardProp}>
<Board components={{ ...DefaultComponents, ...components }} {...otherProps} />; <Board components={{ ...DefaultComponents, ...components }} {...otherProps} />
</StyleSheetManager> </StyleSheetManager>
); );
}; };

63
client/src/components/trello-board/styles/Base.js
View File

@@ -2,40 +2,40 @@ import { PopoverContainer, PopoverContent } from "react-popopo";
import styled, { createGlobalStyle, css } from "styled-components"; import styled, { createGlobalStyle, css } from "styled-components";
export const GlobalStyle = createGlobalStyle` export const GlobalStyle = createGlobalStyle`
.comPlainTextContentEditable { .comPlainTextContentEditable {
-webkit-user-modify: read-write-plaintext-only; -webkit-user-modify: read-write-plaintext-only;
cursor: text; cursor: text;
} }
.comPlainTextContentEditable--has-placeholder::before { .comPlainTextContentEditable--has-placeholder::before {
content: attr(placeholder); content: attr(placeholder);
opacity: 0.5; opacity: 0.5;
color: inherit; color: inherit;
cursor: text; cursor: text;
} }
.react_trello_dragClass { .react_trello_dragClass {
transform: rotate(3deg); transform: rotate(3deg);
} }
.react_trello_dragLaneClass { .react_trello_dragLaneClass {
transform: rotate(3deg); transform: rotate(3deg);
} }
.icon-overflow-menu-horizontal:before { .icon-overflow-menu-horizontal:before {
content: "\\E91F"; content: "\\E91F";
} }
.icon-lg, .icon-sm { .icon-lg, .icon-sm {
color: #798d99; color: #798d99;
} }
.icon-lg { .icon-lg {
height: 32px; height: 32px;
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
width: 32px; width: 32px;
} }
`; `;
export const CustomPopoverContainer = styled(PopoverContainer)` export const CustomPopoverContainer = styled(PopoverContainer)`
@@ -115,16 +115,16 @@ export const Section = styled.section`
`; `;
export const LaneHeader = styled(Header)` export const LaneHeader = styled(Header)`
margin-bottom: 0px; margin-bottom: 0;
${(props) => ${(props) =>
props.editLaneTitle && props.editLaneTitle &&
css` css`
padding: 0px; padding: 0;
line-height: 30px; line-height: 30px;
`} ${(props) => `} ${(props) =>
!props.editLaneTitle && !props.editLaneTitle &&
css` css`
padding: 0px 5px; padding: 0 5px;
`}; `};
`; `;
@@ -144,7 +144,6 @@ export const ScrollableLane = styled.div`
overflow-x: hidden; overflow-x: hidden;
align-self: center; align-self: center;
max-height: 90vh; max-height: 90vh;
min-height: 100px;
margin-top: 10px; margin-top: 10px;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

4
client/src/components/trello-board/widgets/index.jsx
View File

@@ -2,8 +2,10 @@ import DeleteButton from "./DeleteButton";
import EditableLabel from "./EditableLabel"; import EditableLabel from "./EditableLabel";
import InlineInput from "./InlineInput"; import InlineInput from "./InlineInput";
export default { const exports = {
DeleteButton, DeleteButton,
EditableLabel, EditableLabel,
InlineInput InlineInput
}; };
export default exports;

5
client/src/pages/jobs-create/jobs-create.component.jsx
View File

@@ -13,7 +13,10 @@ import FormsFieldChanged from "../../components/form-fields-changed-alert/form-f
export default function JobsCreateComponent({ form }) { export default function JobsCreateComponent({ form }) {
const [pageIndex, setPageIndex] = useState(0); const [pageIndex, setPageIndex] = useState(0);
const [errorMessage, setErrorMessage] = useState(null);
// const [errorMessage, setErrorMessage] = useState(null);
const [errorMessage] = useState(null);
const [state] = useContext(JobCreateContext); const [state] = useContext(JobCreateContext);
const { t } = useTranslation(); const { t } = useTranslation();