kanban | Simple Kanban Folders : create a kanban board per folder

While installing the dependencies for my project using npm install, I receive the following error that I don't know how to interpret:

I am working on a project with React and Redux hooks. It has recursively nested kanban boards. When you add a new card to a kanban column that is scrolled all of the way to the right, the component re-renders and jerks the kanban board back to x=0, y-0 scroll. It is not the window that is scrolling. It is the kanban's parent element.

Does anyone know how you need to re-structure the List component (or any other part of the code), so that you can add a card to the columns (that are in a scrolled container), and not ruin the scroll position?

Thank you for any pointers!

I have tried using a ref to get the scroll position of the scrolled div right before the dispatch to add new card, and then set that position again as soon as the dispatch has added the card; but this did not work.

The data on the redux state is:

listSlice.js

list.nodes:

I need everyone's help. I currently need to implement a marquee effect. The yellow box needs to be scrolled up to show the name. Every time I scroll, I have to stay in the middle of the box for 1 second before continuing to scroll. I can find such an example on the Internet. , but the logic of this program is a bit difficult for me to understand for urban beginners. I wonder if anyone would like to provide a simpler and easier-to-understand writing method if I want to achieve this marquee effect?

​​Sorry, I am a beginner in the program, the current logic More complex programs are more difficult to understand.

I have a Kanban board inside my dashboard which displays issues of a project. I added a menu to allow the user to filter the kanban board by project such that only one project's issue are visible at once. The default view is the issues of all the projects.
In my Dashboard component, I get the list of all projects from a server using axios (which works correctly).
When a user chooses a project, I send to the Kanban board component a prop which is the project id so that I can fetch that project's issues from the server.
However, the prop I'm sending from Dashboard is undefined somehow, and I cannot figure out why

Dashboard.vue

[SOLVED] /*** The parent-children relationship works fine. But there was a code i wrote several weeks ago that prevent me to update the progress value. ***/

I have a project that has similar functionality to trello (kanban) There are 3 models which are projects, TaskList (columns), Tasks (cards).

• a project has many columns

• a column has many tasks

• a task has many

  subtasks (the subtask refer to the model itself)

each model has a column named progress. This column must be updated when the children are updated. The progress is calculated by averaging the progress of all cards.

Models : Project.php

I'm making a status listing using jkanban. But I have a question. I searched on StackoverFlow but couldn't find a solution. That's why I'm opening the issue. When I move the item in the board to a different board, how can I get the id of that board?

Default values ​​like this:

Context: The main issue I am trying to solve is that stopping the propagation on an onDragStart event handler (via e.stopPropagation()) is disabling the drag-drop functionality all together. However, when I try to set a flag in the state, to stop drag-drop events to fire on parent elements; the flag does not work/ the state does not set in time or something.

Setup: A kanban style component, with draggable columns that contain draggable cards.

The columns are able to render correctly when you drag a column and reorder it. This is done by having an array of columns in a stateHook, and when a column's "onDragStart" event is fired, setting the draggingIndex in the state. Then, when another column fires an "onDragOver" event, the array of columns is spliced, to remove the dragging column from it's original position and insert it into the new order. This is working fine.

The issue arises when I try to drag cards, instead of the columns. When the "onDragStart" event fires on a card, I am setting a flag in a state hook. setDragCategory("card"). The event listeners on the column elements are supposed to check to see if the "dragCategory === 'card'". And if it does, they are supposed to exit the function and not run any of the code.

The goal is that when you start dragging on a column, all of its event listeners fire, per normal. But if you start dragging on a card, the columns' event listeners are essentially deactivated via exiting them before they do anything.

Even though the "onDragStart" handler on the card is running first (where the state is set to dragCategory === "card", it is not preventing the columns' event handlers from running. The column's event handlers are then setting dragCategory === "column." So, I a trying to drag a card, but instead, the columns are reordering.

I do not understand why the column's event listeners are not exiting their handlers before this can happen.

Thank you for any pointers!

This code should work, if you paste it directly into the App.js file of a create-react-app project.

App.js:

This is how I use it, and I don't think there should be much of a problem: