rcdexta / react-trello Goto Github PK

The Card is just too simplistic now. Which is fine if you want to keep this as a POC kinda repo but to have good application, you need better data schema with maybe user information, onClick and onHover actions to load cardDetail

I have problem with cards in lanes.

error: TypeError: Cannot read property 'length' of undefined at t.r.sameCards (Lane.js:130) at t.value (Lane.js:230) at d.updateComponent (ReactCompositeComponent.js:611) at d.receiveComponent (ReactCompositeComponent.js:544) at Object.receiveComponent (ReactReconciler.js:122) at d._updateRenderedComponent (ReactCompositeComponent.js:751) at d._performComponentUpdate (ReactCompositeComponent.js:721) at d.updateComponent (ReactCompositeComponent.js:642) at d.receiveComponent (ReactCompositeComponent.js:544) at Object.receiveComponent (ReactReconciler.js:122)

Somebody know that problem and knows any solution ?

My data:
lanes:
0:cards:
0:{id: 187, id_project: 2, id_company: 1, id_owner: 18, id_odoo: null, …}
1:{id: 240, id_project: 2, id_company: 1, id_owner: 18, id_odoo: null, …}
length:2
currentPage:1
id:"2018-01-23"
label:"2018-01-23"
title:"Today"
1:{id: "2018-01-24", title: "Tommorow", label: "2018-01-24", cards: Array(0), currentPage: 1}

How can we use tags with custom cards?

Great component 👍

What is the proper way tot style the Lane Label? I recognize the Lane, and Title can be styled, but what of the Label?

onDataChange works when I move a task into another lane but doesn't work when I move a task within a lane. How can I get the data when a task is moved within a lane?

Is there anyway to change the background color/ the columns color and style?

Great package by the way!

It would seem better to make lane header fixed when scroll the cards.
I like this project, and i would like to contribute code to support this feature.

Do you have plan to implement the "Add a card" button on the bottom of the lane like Trello?

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start"
npm ERR! node v7.7.1
npm ERR! npm v4.1.2

npm ERR! missing script: start
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\zestard16\Desktop\trello\abc\react-trello-master\npm-debug.log

Hi, this is a really great project and I also like to see how it used styled-component!

While running
npm outdated I found tht some dependencies are outdated/old or could even be removed, because they are unused.

E.g. dependencies for testing, like
babel-jest chai chai-enzyme enzyme istanbul jest jest-cli jsdom mocha [email protected](deprecated in react@16!) [email protected] sinon
(for react-addons-test-utils, see note about migration/deprecation on https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#react-test-utils)

Even while some are difficult to upgrade, but I did not find any unit tests, yet ;-)

So how about reducing the list of dependencies?

As a follow-up, let's add some updated Jest based unit tests later in a separate task, when there was some time?

I'm using customCards and when I drag a card from a column A to a column B I can drop my item in any position, but when I leave the item the items is added at the end of the list.
Is this the expected behaviour? I'm the only one with this problem?
thank you!

If I add an id props to the board like this :

<Board
            id={"mainBoardProject"}
            editable={true}
            tagStyle={{fontSize: '70%'}}
            onCardClick={(cardId, metadata, laneId) => this.openEditCard(cardId)}
            onCardAdd={(card, laneId) => this.addCard(card, laneId)}
            onCardDelete={(cardId, laneId) => this.askDeleteCard(cardId, laneId)}
            customCardLayout
            data={data}
            addCardLink={<a href="#">Ajouter une tâche</a>}
          >
            <CustomCard/>
          </Board>

then the props onCardAdd always return "mainBoardProject" as laneId !

If i delete the props id={"mainBoardProject"} then all is fine :)

Hi,

You have leave some console.log in source code :

regards

./node_modules/react-trello/dist/index.js
Module not found: Can't resolve './components/Board' in '/Users/chrislewis/Projects/statrecruit-react/node_modules/react-trello/dist'

When i change the width style of the lane and card, such as
{[ id:..., style:{ width: 280 }, cards:[ cardStyle:{ width: 270 }, ], ]}
It is working properly when the lane number is less than 5, but when the lane number is too large, the lane style return to default width (smaller than 280px) while the card style's width is right.

I am programatically updating the Card Title, but this does not seem to impact the rendering of the Card Title? Any ideas?

Do this library have Add and delete button for card and lane like real Trello? If have, pls let me know how to using it? Tks

Here is my custom card with components taken from react-bootstrap https://react-bootstrap.github.io/components.html#panels

const CustomCard = props => {
    const CardSubject = (
        <h4>{props.subject}</h4>
    );

    return (
        <Panel header={CardSubject} bsStyle="success">
            <Grid>
                <Row className="show-grid">
                    <Col xs={12} md={8}>Status: {props.status}</Col>
                    <Col xs={6} md={4}>Assigned to: {props.assignee}</Col>
                </Row>
                <Row className="show-grid">
                    <Col xs={12} md={8}>Link1</Col>
                    <Col xs={6} md={4}>Link2</Col>
                </Row>
            </Grid>
        </Panel>
    )
}

When I pass a background style to the board the lane's background is affected too.

See in the storybook: Board Styling section.

After I adjust position and send to API to save. But when i reload it, it gone. How can i get property position to save string index. and save it.
Help me plz !!! Tks all guys

I get this error after I install react-trello then I run my environment. I'm using latest webpack, any ideas on how I can resolve this?

ERROR in ./~/react-trello/dist/styles/Dragula.scss
Module parse failed: /ui/node_modules/react-trello/dist/styles/Dragula.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Thanks.

The Lane keeps retrying pagination api when the backend does not return any more cards

cc: @prakashbalaji

Hi, I am currently having board data as a prop boardData: {lanes: []} in constructor() and then I try to fetch the lanes in componentDidMount(). My problem is that even after fetching successfully and this.state.boardData were updated, the board is still rendering with {lanes: []}

Is it not possible to render the board dynamically right now?

Hi,
Great Component.
I was wondering if it works for touch Events also, for iPads or phones?

It responds to click events on desktop but doesn't responding to touch events.

Hi~, i upgrade the version of react-trello from '1.26.0' to '1.26.4', i got the following error.

uncaught at _callee TypeError: Cannot read property 'style' of undefined
    at eval (webpack-internal:///870:151:100)
    at eval (webpack-internal:///2165:359:24)
    at DragHandle.render (webpack-internal:///2179:181:14)
    at eval (webpack-internal:///1257:793:21)
    at measureLifeCyclePerf (webpack-internal:///1257:73:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (webpack-internal:///1257:792:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (webpack-internal:///1257:819:32)
    at ReactCompositeComponentWrapper.performInitialMount (webpack-internal:///1257:359:30)
    at ReactCompositeComponentWrapper.mountComponent (webpack-internal:///1257:255:21)
    at Object.mountComponent (webpack-internal:///179:43:35)

This error disappear in v1.26.0

My Code is as bellow:

 <Board
            style={{  }}
            data={{ lanes: laneList }}
            draggable
            customCardLayout
            handleDragEnd={this.handleDragEnd.bind(this)}
            handleDragStart={this.handleDragStart.bind(this)}
            onCardClick={this.onWorkItemClick.bind(this)}
            customLaneHeader={<CustomLaneHeader />}
          >
            <CustomCard stateList={nextStateList} intl={intl} listMap={listMap} dispatch={dispatch} />
</Board>

ReferenceError: window is not defined
at Object. (D:\bobtrade\bobtrade-marketplace\node_modules\react-trello\dist\components\Board.js:33:61)
at Module._compile (module.js:570:32)
at Module._extensions..js (module.js:579:10)
at Object.require.extensions.(anonymous function) [as .js] (D:\bobtrade\bobtrade-marketplace\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:\bobtrade\bobtrade-marketplace\node_modules\react-trello\dist\index.js:8:14)
at Module._compile (module.js:570:32)
at Module._extensions..js (module.js:579:10)
at Object.require.extensions.(anonymous function) [as .js] (D:\bobtrade\bobtrade-marketplace\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:/bobtrade/bobtrade-marketplace/client/components/Merchant/Order/Orders.js:4:1)
at Module._compile (module.js:570:32)
at loader (D:\bobtrade\bobtrade-marketplace\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (D:\bobtrade\bobtrade-marketplace\node_modules\babel-register\lib\node.js:154:7)

Hi,
when implementing drag & drop behaviour it seems like the parameters sourceLaneId and targetLaneId which are given within the handleDragEnd-method are the same. In your Demo it is working correctly but when i use the code which is in your story.js it shows the beviour i just described above.

I am attempting to use the refresh board command to use new data returned from an api. The problem i am running into is that using values from my props (ie. this.props.data) does not refresh the state of the object, however using the publich with data = { login: [] } updates the status just fine. Here is some snippets for reference:

   setEventBus(handle) {
        this.setState({ eventBus: handle });
    }

    refreshBoard(data) {
        this.state.eventBus.publish({
            type: 'REFRESH_BOARD',
            data: data,
        });
    }

  updateCard(card) {
        this.props.updateCard(card, this.props.login).then(response => {
            this.props.getBoard(this.props.login).then(response2 => {
                let data = Object.assign({}, { ...response2.payload });
                this.refreshBoard(data);
            });
            this.closeModals();
        });
    }


<Board
     style={styles.trelloBoard}
     draggable
     customCardLayout
     customLaneHeader={<CustomLaneHeader />}
     data={this.props.data}
     handleDragEnd={this.updateCardLane}
     onCardClick={this.cardDetailModal}
     onDataChange={this.checkCurrentData}
     eventBusHandle={this.setEventBus}
/>

so here it gets updated 2 ways, when the data field in the board changes as it uses this.props.data, coming from an axios redux call, and using the publish. Is there something i am missing in my usage of this component?

Reference: #42

Hi - Thanks for your work! Just wondering if it is possible to add custom component to the delete button? It fits well with standard setup but my styling is using material-ui components and I would like to change the delete button (or actually remove it - so I could have a popup show info on click)

Any idea??

Cheers,

M

Hi,

Would be great if we can change the text "Add card".

I think the best solution would be to add a "text" entrie in the json lane definition.

Best regards

Is it possible to pass components to the lane?

For example: The Lane has a label, but it accepts only string. Is it possible to pass a custom component inside a lane? For example, I would like to pass an 'options' component there instead a string, or maybe pass a custom 'button' component at the end of the lane, to add cards to the lanes.

I am using custom card layout and I want to change card color when I move a card into another lane.
So, I set the draggable props to true.
And in handleDragEnd function, I set the status of class, so the component must be rendered again, but the color of the card was not changed.
I tried to debug and I noticed that update board view event occurs later than drawing cards.
Please check this issue and let me know how to solve this problem.
Thanks.

Hi,

First, thank you for your work ! Helps a lot 👍

I'm using your new feature "editable" board, wich works well.

Just one problem, I'm using "onCardClick" to display a popin with more informations about the card.
When I click on the delete button, the onCardClick is triggered too.

Since their is no "onCardDelete", we can not overwrite this. Could you change it, so onCardClick is not triggered anymore ?

Best regards.

NB : a "onCardAdd" would be great too :)

When I try to add your library to my project I get this error:

] [dev:server] /home/blablabla/demo/node_modules/react-trello/dist/components/Board.js:33 [2] var store = (0, _redux.createStore)(_BoardReducer2.default, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); [2] ^ [2] ReferenceError: window is not defined [2] at Object.<anonymous> (/home/blablabla/demo/node_modules/react-trello/dist/components/Board.js:33:61) [2] at Module._compile (module.js:570:32) [2] at Object.Module._extensions..js (module.js:579:10) [2] at Module.load (module.js:487:32) [2] at tryModuleLoad (module.js:446:12) [2] at Function.Module._load (module.js:438:3) [2] at Module.require (module.js:497:17) [2] at require (internal/module.js:20:19) [2] at Object.<anonymous> (/home/blablabla/demo/node_modules/react-trello/dist/index.js:8:14) [2] at Module._compile (module.js:570:32)
How can I solve this issue? I saw an other issue closed but the problem already exists.
I'm using the version "react-trello":"^1.18.1"-

I've seen that you define also a store (redux) for your library? How can I use my redux store instead of your?

Thank you!

Hi,

With last update (1.26.1), onCarcClick i snot triggered any more :

<Board
              draggable={true}
              handleDragEnd={(cardId, sourceLaneId, targetLaneId) => this.dragCardToCol(cardId, targetLaneId)}
              tagStyle={{fontSize: '70%'}}
              onCardClick={(cardId, metadata, laneId) => alert(cardId)}
              onCardAdd={(card, laneId) => this.addCard(card, laneId)}
              onCardDelete={(cardId, laneId) => this.askDeleteCard(cardId, laneId)}
              newCardTemplate={<NewCard />}
              customCardLayout
              data={data}
              addCardLink={
                <a href="#">
                  <i className="fa fa-plus" aria-hidden="true"></i>
                  &nbsp;Ajouter une tâche
                </a>
              }
              editable
            >
              <CustomCard/>

When I click on the card, the alert is never displayed (same with a custom function this.showDetails(cardId) )

When there is sides for container and we want to drag the item. It is pushed down by the height of container plus sides's height like this problem in another repository
https://drive.google.com/file/d/0B3mwXFEGAguUUkVKakZQOFpIVHc/view

On first time load, when i tried to drag the card to another lane it gets hide (invisible).
Then after doing "Add card" in the same lane where last hided, the card gets visible now..

If you pass a into the label field the following error appears in the console but otherwise everything else works correctly.

Expected behavior would be that you can pass a component (button) into the title line of a lane.

Thanks!

Is there a way I can customize the lanes similar to customizing Cards?
For instance the width, max height of the lanes, heading etc...
May be having 2 lanes on top of each other?

Hello @rcdexta,

I have two questions about the component:

1. How can I get card index inside lane. For example, if I want to persist the cards position inside a lane, how do I know its position?

2. Is it possible to drop card in a specific position when moving across lanes?

Regards,

Eduardo

Hello @rcdexta ,

First of all congratulations for the component.

I am playing with react-trello but I am having issues with drag and drop cards between lanes.

Here is my code:
render() { return ( <Board data={data} draggable={true} onDragStart={() => console.log('start')} onDragEnd={() => console.log('end')} /> ); }

What I am missing?

Regards,

Eduardo

I see that there seems to be some preparation for draggable lanes, but not yet implemented?

Greetings!

I see that you made fixes to bugs, but I cannot seem to get the drag to work.

Also your example is not working either.

PLease advise when you get the chance!

Hi,

Having a problem wich maybe (or not) a problem with webpack.

Using react-trello and the editable props, wich works well on my dev station (using hot reload).
When going to production, i'm using webpack in prod configuration. All works fine, except the "editable" or react-trello. Their is no errors, other props of react-trello works well... (it's like editable is false, but in code it's true...)

Any idea what could be the problem ?

Thank's for your help.

Hi rcdexta,

Is it possible to add a className to the Board component with this styling on it, or is only inline styling supported?

JSX:
<Board className={styles.board} data={processes} />

CSS:
.board { background-color: #191F26; padding-top: 10; padding-left: 10; }

Thanks

When running ESLint, the module throws an error:

Unable to resolve path to module 'react-trello' import/no-unresolved

When I add a card to the board using .publish({type: 'ADD_CARD', ...}); I do not receive the nextData inside the function called 'shouldReceiveNewData'.

When I add a card, the component does not render again to get the new state.
The state is not updating with the new card added.

My example:

addCard = () => {
        const { eventBus, } = this.state;

        eventBus.publish({
            type: 'ADD_CARD',
            laneId: 'lane1',
            card: {
                id: `card1`,
                title: 'new card',
                label: '30 mins',
                description: 'new task',
                metadata: { laneId: 'lane1' }
            }
        });
    }

shouldReceiveNewData = nextData => {
        console.log('it is not being called);
        console.log(nextData);
    }

<Board data={this.state.boardData} eventBusHandle={this.setEventBus} onDataChange{this.shouldReceiveNewData}/>

Hi again :)

Would be great to have a customAddCardLayout, working the same way as customCardLayout.

Currently, when we click on a card, the onCardClick() function is passing only the cardId. Is it possible to pass the laneId too (or maybe the entire card object)? It gonna be better to find the card inside the lane or receive all the data from the card.

For example: When I click on a card, I want to open a modal with details about the card. It will be more easy to get the card inside the lane that I want passing the laneId too.

Example: (cardId, metadata, laneId) => alert(laneId) or (cardObject) => alert(cardObject)

I created a PR for this.