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

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;