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",
"version": "0.2.1",
"engines": {
"node": "18.18.2"
"node": ">=18.18.2"
},
"type": "module",
"private": true,
"proxy": "http://localhost:4000",
"dependencies": {
"@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",
"@asseinfo/react-kanban": "^2.2.0",
"@emotion/is-prop-valid": "^1.2.2",
"@fingerprintjs/fingerprintjs": "^4.2.2",
"@fingerprintjs/fingerprintjs": "^4.3.0",
"@jsreport/browser-client": "^3.1.0",
"@reduxjs/toolkit": "^2.2.1",
"@sentry/cli": "^2.28.6",
"@sentry/react": "^7.104.0",
"@splitsoftware/splitio-react": "^1.11.0",
"@reduxjs/toolkit": "^2.2.4",
"@sentry/cli": "^2.31.2",
"@sentry/react": "^7.114.0",
"@splitsoftware/splitio-react": "^1.11.1",
"@tanem/react-nprogress": "^5.0.51",
"@vitejs/plugin-react": "^4.2.1",
"antd": "^5.15.3",
"antd": "^5.17.0",
"apollo-link-logger": "^2.0.1",
"apollo-link-sentry": "^3.3.0",
"autosize": "^6.0.1",
"axios": "^1.6.7",
"axios": "^1.6.8",
"classnames": "^2.5.1",
"dayjs": "^1.11.10",
"dayjs": "^1.11.11",
"dayjs-business-days2": "^1.2.2",
"dinero.js": "^1.9.1",
"dotenv": "^16.4.5",
"env-cmd": "^10.1.0",
"exifr": "^7.1.3",
"firebase": "^10.8.1",
"firebase": "^10.11.1",
"graphql": "^16.6.0",
"i18next": "^23.10.0",
"i18next-browser-languagedetector": "^7.0.2",
"i18next": "^23.11.3",
"i18next-browser-languagedetector": "^7.2.1",
"immutability-helper": "^3.1.1",
"kuika-smooth-dnd": "^1.0.0",
"libphonenumber-js": "^1.10.57",
"logrocket": "^8.0.1",
"markerjs2": "^2.32.0",
"normalize-url": "^8.0.0",
"libphonenumber-js": "^1.11.1",
"logrocket": "^8.1.0",
"markerjs2": "^2.32.1",
"normalize-url": "^8.0.1",
"prop-types": "^15.8.1",
"query-string": "^9.0.0",
"react": "^18.2.0",
"react-big-calendar": "^1.11.0",
"react": "^18.3.1",
"react-big-calendar": "^1.12.1",
"react-color": "^2.19.3",
"react-cookie": "^7.1.0",
"react-dom": "^18.2.0",
"react-cookie": "^7.1.4",
"react-dom": "^18.3.1",
"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-i18next": "^14.0.5",
"react-icons": "^5.0.1",
"react-i18next": "^14.1.1",
"react-icons": "^5.2.1",
"react-image-lightbox": "^5.1.4",
"react-joyride": "^2.7.4",
"react-joyride": "^2.8.1",
"react-markdown": "^9.0.1",
"react-number-format": "^5.3.3",
"react-number-format": "^5.3.4",
"react-popopo": "^2.1.9",
"react-product-fruits": "^2.2.6",
"react-redux": "^9.1.0",
"react-redux": "^9.1.2",
"react-resizable": "^3.0.5",
"react-router-dom": "^6.22.2",
"react-router-dom": "^6.23.0",
"react-scripts": "^5.0.1",
"react-sticky": "^6.0.3",
"react-virtualized": "^9.22.5",
"recharts": "^2.12.2",
"recharts": "^2.12.7",
"redux": "^5.0.1",
"redux-actions": "^2.6.5",
"redux-actions": "^3.0.0",
"redux-persist": "^6.0.0",
"redux-saga": "^1.3.0",
"redux-state-sync": "^3.1.4",
"reselect": "^5.1.0",
"sass": "^1.71.1",
"socket.io-client": "^4.7.4",
"styled-components": "^6.1.8",
"sass": "^1.77.0",
"socket.io-client": "^4.7.5",
"styled-components": "^6.1.11",
"subscriptions-transport-ws": "^0.11.0",
"terser-webpack-plugin": "^5.3.10",
"userpilot": "^1.3.1",
"vite-plugin-ejs": "^1.7.0",
"web-vitals": "^3.5.2",
"workbox-core": "^7.0.0",
"workbox-expiration": "^7.0.0",
"workbox-navigation-preload": "^7.0.0",
"workbox-precaching": "^7.0.0",
"workbox-routing": "^7.0.0",
"workbox-strategies": "^7.0.0"
"workbox-core": "^7.1.0",
"workbox-expiration": "^7.1.0",
"workbox-navigation-preload": "^7.1.0",
"workbox-precaching": "^7.1.0",
"workbox-routing": "^7.1.0",
"workbox-strategies": "^7.1.0"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"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:rome": "dotenvx run --env-file=.env.development.rome -- vite",
"start:promanager": "dotenvx run --env-file=.env.development.promanager -- vite",
@@ -135,32 +134,30 @@
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-react": "^7.23.3",
"@dotenvx/dotenvx": "^0.15.4",
"@babel/preset-react": "^7.24.1",
"@dotenvx/dotenvx": "^0.38.0",
"@emotion/babel-plugin": "^11.11.0",
"@emotion/react": "^11.11.3",
"@sentry/webpack-plugin": "^2.14.2",
"@swc/core": "^1.3.107",
"@swc/plugin-styled-components": "^1.5.108",
"@emotion/react": "^11.11.4",
"@sentry/webpack-plugin": "^2.16.1",
"@testing-library/cypress": "^10.0.1",
"browserslist": "^4.22.3",
"browserslist-to-esbuild": "^2.1.1",
"cross-env": "^7.0.3",
"cypress": "^13.6.6",
"cypress": "^13.9.0",
"eslint": "^8.57.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-cypress": "^2.15.1",
"memfs": "^4.6.0",
"memfs": "^4.9.2",
"os-browserify": "^0.3.0",
"react-error-overlay": "6.0.11",
"redux-logger": "^3.0.6",
"source-map-explorer": "^2.5.3",
"vite": "^5.0.11",
"vite": "^5.2.11",
"vite-plugin-babel": "^1.2.0",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-legacy": "^2.1.0",
"vite-plugin-node-polyfills": "^0.19.0",
"vite-plugin-pwa": "^0.19.0",
"vite-plugin-node-polyfills": "^0.21.0",
"vite-plugin-pwa": "^0.20.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)),
sortOrder: state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
render: (text, record) => {
console.log("Render record out today");
console.dir(record);
return record.ownerid ? (
<Link to={"/manage/owners/" + record.ownerid} onClick={(e) => e.stopPropagation()}>
<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 JobCloseRoGuardProfit from "./job-close-ro-guard.profit";
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 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().add(1, "day").isSame(dayjs(card.metadata.scheduled_completion), "day") && "production-completion-soon"));
const totalHrs = card
? card.metadata.labhrs.aggregate.sum.mod_lb_hrs + card.metadata.larhrs.aggregate.sum.mod_lb_hrs
: 0;
const totalHrs =
card && card?.metadata?.labhrs && card?.metadata?.larhrs
? card.metadata.labhrs.aggregate.sum.mod_lb_hrs + card.metadata.larhrs.aggregate.sum.mod_lb_hrs
: 0;
const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
return (
<Card
draggable={true}
size="small"
style={{
backgroundColor:
cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
maxWidth: "250px",
marginBottom: "5px"
margin: "5px"
}}
title={
<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 ProductionListDetailComponent from "../production-list-detail/production-list-detail.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 "./production-board-kanban.styles.scss";
import { createBoardData } from "./production-board-kanban.utils.js";
@@ -31,7 +30,14 @@ const mapStateToProps = createStructuredSelector({
});
const mapDispatchToProps = (dispatch) => ({
insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
insertAuditTrail: ({ jobid, operation, type }) =>
dispatch(
insertAuditTrail({
jobid,
operation,
type
})
)
});
export function ProductionBoardKanbanComponent({
@@ -163,26 +169,24 @@ export function ProductionBoardKanbanComponent({
: standardSizes[selectedBreakpoint[0]]
: "250";
const stickyHeader = {
renderColumnHeader: ({ title }) => (
<Sticky>
{({
style,
const StickyHeader = ({ title }) => (
<Sticky>
{({ style }) => (
<div
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
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => (
<div className="react-kanban-column-header" style={{ ...style, zIndex: "99", backgroundColor: "#ddd" }}>
{title}
</div>
)}
</Sticky>
)
};
const NormalHeader = ({ title }) => (
<div className="react-trello-column-header" style={{ backgroundColor: "#e3e3e3", paddingLeft: "5px" }}>
{title}
</div>
);
const cardSettings =
associationSettings &&
@@ -203,6 +207,11 @@ export function ProductionBoardKanbanComponent({
cardcolor: false
};
const components = {
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings }),
LaneHeader: cardSettings.stickyheader ? StickyHeader : NormalHeader
};
return (
<Container width={width}>
<IndefiniteLoading loading={isMoving} />
@@ -227,20 +236,27 @@ export function ProductionBoardKanbanComponent({
/>
{cardSettings.cardcolor && <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />}
<ProductionListDetailComponent jobs={data} />
<StickyContainer>
<Board
data={boardLanes}
draggable
canAddLanes
handleDragEnd={handleDragEnd}
editable
style={{ height: "100%", backgroundColor: "transparent" }}
renameLane
components={{
Card: (cardProps) => ProductionBoardCard({ card: cardProps, technician, bodyshop, cardSettings })
}}
/>
</StickyContainer>
{cardSettings.stickyheader ? (
<StickyContainer>
<Board
data={boardLanes}
draggable
handleDragEnd={handleDragEnd}
style={{ height: "100%", backgroundColor: "transparent" }}
components={components}
/>
</StickyContainer>
) : (
<div>
<Board
data={boardLanes}
draggable
handleDragEnd={handleDragEnd}
style={{ height: "100%", backgroundColor: "transparent" }}
components={components}
/>
</div>
)}
</Container>
);
}
@@ -248,9 +264,9 @@ export function ProductionBoardKanbanComponent({
export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanbanComponent);
const Container = styled.div`
.react-kanban-card-skeleton,
.react-kanban-card,
.react-kanban-card-adder-form {
.react-trello-card-skeleton,
.react-trello-card,
.react-trello-card-adder-form {
box-sizing: border-box;
max-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;
}
.react-kanban-card {
.react-trello-card {
border-radius: 3px;
background-color: #fff;
padding: 4px;
margin-bottom: 7px;
}
// .react-kanban-card-skeleton,
// .react-kanban-card,
// .react-kanban-card-adder-form {
// .react-trello-card-skeleton,
// .react-trello-card,
// .react-trello-card-adder-form {
// box-sizing: border-box;
// max-width: 145px;
// min-width: 145px;
// }
.react-kanban-card--dragging {
.react-trello-card--dragging {
box-shadow: 2px 2px grey;
}
.react-kanban-card__description {
.react-trello-card__description {
padding-top: 10px;
}
.react-kanban-card__title {
.react-trello-card__title {
border-bottom: 1px solid #eee;
padding-bottom: 5px;
font-weight: bold;
@@ -33,31 +33,31 @@
justify-content: space-between;
}
.react-kanban-column {
.react-trello-column {
padding: 10px;
border-radius: 2px;
background-color: #eee;
margin: 5px;
}
.react-kanban-column input:focus {
.react-trello-column input:focus {
outline: none;
}
.react-kanban-card-adder-form {
.react-trello-card-adder-form {
border-radius: 3px;
background-color: #fff;
padding: 10px;
margin-bottom: 7px;
}
.react-kanban-card-adder-form input {
.react-trello-card-adder-form input {
border: 0px;
font-family: inherit;
font-size: inherit;
}
.react-kanban-card-adder-button {
.react-trello-card-adder-button {
width: 100%;
margin-top: 5px;
background-color: transparent;
@@ -70,11 +70,11 @@
font-weight: bold;
}
.react-kanban-card-adder-button:hover {
.react-trello-card-adder-button:hover {
background-color: #ccc;
}
.react-kanban-card-adder-form__title {
.react-trello-card-adder-form__title {
font-weight: bold;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
@@ -85,20 +85,20 @@
padding: 0px;
}
.react-kanban-card-adder-form__title:focus {
.react-trello-card-adder-form__title:focus {
outline: none;
}
.react-kanban-card-adder-form__description {
.react-trello-card-adder-form__description {
width: 100%;
margin-top: 10px;
}
.react-kanban-card-adder-form__description:focus {
.react-trello-card-adder-form__description:focus {
outline: none;
}
.react-kanban-card-adder-form__button {
.react-trello-card-adder-form__button {
background-color: #eee;
border: none;
padding: 5px;
@@ -107,39 +107,39 @@
border-radius: 3px;
}
.react-kanban-card-adder-form__button:hover {
.react-trello-card-adder-form__button:hover {
transition: 0.3s;
cursor: pointer;
background-color: #ccc;
}
.react-kanban-column-header {
.react-trello-column-header {
padding-bottom: 10px;
font-weight: bold;
}
.react-kanban-column-header input:focus {
.react-trello-column-header input:focus {
outline: none;
}
.react-kanban-column-header__button {
.react-trello-column-header__button {
color: #333333;
background-color: #ffffff;
border-color: #cccccc;
}
.react-kanban-column-header__button:hover,
.react-kanban-column-header__button:focus,
.react-kanban-column-header__button:active {
.react-trello-column-header__button:hover,
.react-trello-column-header__button:focus,
.react-trello-column-header__button:active {
background-color: #e6e6e6;
}
.react-kanban-column-adder-button {
.react-trello-column-adder-button {
border: 2px dashed #eee;
height: 132px;
margin: 5px;
}
.react-kanban-column-adder-button:hover {
.react-trello-column-adder-button:hover {
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 }) {
const { t } = useTranslation();
console.log("RECORD");
console.dir(record);
const [note, setNote] = useState((record.production_vars && record.production_vars.note) || "");
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 [updateJobLine] = useMutation(UPDATE_JOB_LINE_SUBLET);
const [loading, setLoading] = useState(false);
console.log("subletJobLines");
console.dir(subletJobLines);
const subletCount = useMemo(() => {
return {
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 onClickOutside = (a, b, c) => {
if (getValue().length > 0) {
handleSubmit();
} else {
onCancel();
}
};
// TODO: Commented out because it was never called and it was causing a error
// const onClickOutside = (a, b, c) => {
// if (getValue().length > 0) {
// handleSubmit();
// } else {
// onCancel();
// }
// };
return (
<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 { BoardWrapper, GlobalStyle, ScrollableLane, Section } from "../styles/Base";
export default {
const exports = {
GlobalStyle,
BoardWrapper,
Loader,
@@ -22,3 +22,5 @@ export default {
Card,
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) {
case "ADD_CARD":
return actions.addCard({ laneId: event.laneId, card: event.card });
case "UPDATE_CARD":
return actions.updateCard({ laneId: event.laneId, card: event.card });
// Note: Removed because there was a duplicate entry
// case "UPDATE_CARD":
// return actions.updateCard({ laneId: event.laneId, card: event.card });
case "REMOVE_CARD":
return actions.removeCard({ laneId: event.laneId, cardId: event.cardId });
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) {
if (!isEqual(this.props.cards, nextProps.cards)) {
this.setState({
static getDerivedStateFromProps(nextProps, prevState) {
if (!isEqual(prevState.cards, nextProps.cards)) {
return {
currentPage: nextProps.currentPage
});
};
}
// Return null if the state hasn't changed
return null;
}
removeCard = (cardId) => {
@@ -155,8 +157,7 @@ class Lane extends Component {
cardDropClass,
tagStyle,
cardStyle,
components,
t
components
} = this.props;
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 ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import container, {dropHandlers} from 'kuika-smooth-dnd'
import React, { Component } from "react";
import PropTypes from "prop-types";
import container, { dropHandlers } from "kuika-smooth-dnd";
container.dropHandler = dropHandlers.reactDropHandler().handler
container.wrapChild = p => p // dont wrap children they will already be wrapped
container.dropHandler = dropHandlers.reactDropHandler().handler;
container.wrapChild = (p) => p; // don't wrap children they will already be wrapped
class Container extends Component {
constructor(props) {
super(props)
this.getContainerOptions = this.getContainerOptions.bind(this)
this.setRef = this.setRef.bind(this)
this.prevContainer = null
super(props);
this.getContainerOptions = this.getContainerOptions.bind(this);
this.setRef = this.setRef.bind(this);
this.prevContainer = null;
}
componentDidMount() {
this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this)
this.prevContainer = this.containerDiv
this.container = container(this.containerDiv, this.getContainerOptions())
this.prevContainer = this.containerDiv;
this.container = container(this.containerDiv, this.getContainerOptions());
}
componentWillUnmount() {
this.container.dispose()
this.container = null
this.container.dispose();
this.container = null;
}
componentDidUpdate() {
this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this)
if (this.containerDiv) {
if (this.prevContainer && this.prevContainer !== this.containerDiv) {
this.container.dispose()
this.container = container(this.containerDiv, this.getContainerOptions())
this.prevContainer = this.containerDiv
this.container.dispose();
this.container = container(this.containerDiv, this.getContainerOptions());
this.prevContainer = this.containerDiv;
}
}
}
render() {
if (this.props.render) {
return this.props.render(this.setRef)
return this.props.render(this.setRef);
} else {
return (
<div style={this.props.style} ref={this.setRef}>
{this.props.children}
</div>
)
);
}
}
setRef(element) {
this.containerDiv = element
this.containerDiv = element;
}
getContainerOptions() {
const functionProps = {}
const functionProps = {};
if (this.props.onDragStart) {
functionProps.onDragStart = (...p) => this.props.onDragStart(...p)
functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
}
if (this.props.onDragEnd) {
functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p)
functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
}
if (this.props.onDrop) {
functionProps.onDrop = (...p) => this.props.onDrop(...p)
functionProps.onDrop = (...p) => this.props.onDrop(...p);
}
if (this.props.getChildPayload) {
functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p)
functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
}
if (this.props.shouldAnimateDrop) {
functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p)
functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
}
if (this.props.shouldAcceptDrop) {
functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p)
functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
}
if (this.props.onDragEnter) {
functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p)
functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
}
if (this.props.onDragLeave) {
functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p)
functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
}
if (this.props.render) {
functionProps.render = (...p) => this.props.render(...p)
functionProps.render = (...p) => this.props.render(...p);
}
if (this.props.onDropReady) {
functionProps.onDropReady = (...p) => this.props.onDropReady(...p)
functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
}
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 = {
behaviour: PropTypes.oneOf(['move', 'copy', 'drag-zone']),
behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
groupName: PropTypes.string,
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
orientation: PropTypes.oneOf(["horizontal", "vertical"]),
style: PropTypes.object,
dragHandleSelector: PropTypes.string,
className: PropTypes.string,
@@ -128,12 +125,12 @@ Container.propTypes = {
render: PropTypes.func,
getGhostParent: PropTypes.func,
removeOnDropOut: PropTypes.bool
}
};
Container.defaultProps = {
behaviour: 'move',
orientation: 'vertical',
className: 'reactTrelloBoard'
}
behaviour: "move",
orientation: "vertical",
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 = {
customLaneHeader: 'components.LaneHeader',
newLaneTemplate: 'components.NewLaneSection',
newCardTemplate: 'components.NewCardForm',
children: 'components.Card',
customCardLayout: 'components.Card',
customLaneHeader: "components.LaneHeader",
newLaneTemplate: "components.NewLaneSection",
newCardTemplate: "components.NewCardForm",
children: "components.Card",
customCardLayout: "components.Card",
addLaneTitle: '`t` function with key "Add another lane"',
addCardLink: '`t` function with key "Click to add card"'
}
};
const warn = prop => {
const use = REPLACE_TABLE[prop]
const warn = (prop) => {
const use = REPLACE_TABLE[prop];
console.warn(
`react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md`
)
}
);
};
export default props => {
Object.keys(REPLACE_TABLE).forEach(key => {
const deprecationWarning = (props) => {
Object.keys(REPLACE_TABLE).forEach((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 (
<StyleSheetManager shouldForwardProp={shouldForwardProp}>
<Board components={{ ...DefaultComponents, ...components }} {...otherProps} />;
<Board components={{ ...DefaultComponents, ...components }} {...otherProps} />
</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";
export const GlobalStyle = createGlobalStyle`
.comPlainTextContentEditable {
-webkit-user-modify: read-write-plaintext-only;
cursor: text;
}
.comPlainTextContentEditable {
-webkit-user-modify: read-write-plaintext-only;
cursor: text;
}
.comPlainTextContentEditable--has-placeholder::before {
content: attr(placeholder);
opacity: 0.5;
color: inherit;
cursor: text;
}
.comPlainTextContentEditable--has-placeholder::before {
content: attr(placeholder);
opacity: 0.5;
color: inherit;
cursor: text;
}
.react_trello_dragClass {
transform: rotate(3deg);
}
.react_trello_dragClass {
transform: rotate(3deg);
}
.react_trello_dragLaneClass {
transform: rotate(3deg);
}
.react_trello_dragLaneClass {
transform: rotate(3deg);
}
.icon-overflow-menu-horizontal:before {
content: "\\E91F";
}
.icon-overflow-menu-horizontal:before {
content: "\\E91F";
}
.icon-lg, .icon-sm {
color: #798d99;
}
.icon-lg, .icon-sm {
color: #798d99;
}
.icon-lg {
height: 32px;
font-size: 16px;
line-height: 32px;
width: 32px;
}
.icon-lg {
height: 32px;
font-size: 16px;
line-height: 32px;
width: 32px;
}
`;
export const CustomPopoverContainer = styled(PopoverContainer)`
@@ -115,16 +115,16 @@ export const Section = styled.section`
`;
export const LaneHeader = styled(Header)`
margin-bottom: 0px;
margin-bottom: 0;
${(props) =>
props.editLaneTitle &&
css`
padding: 0px;
padding: 0;
line-height: 30px;
`} ${(props) =>
!props.editLaneTitle &&
css`
padding: 0px 5px;
padding: 0 5px;
`};
`;
@@ -144,7 +144,6 @@ export const ScrollableLane = styled.div`
overflow-x: hidden;
align-self: center;
max-height: 90vh;
min-height: 100px;
margin-top: 10px;
flex-direction: column;
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 InlineInput from "./InlineInput";
export default {
const exports = {
DeleteButton,
EditableLabel,
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 }) {
const [pageIndex, setPageIndex] = useState(0);
const [errorMessage, setErrorMessage] = useState(null);
// const [errorMessage, setErrorMessage] = useState(null);
const [errorMessage] = useState(null);
const [state] = useContext(JobCreateContext);
const { t } = useTranslation();