Add maxItems to board definition to limit number of items in column

[rouilj]

One of the hallmarks of Kanban is limiting WIP (work in process). There should be a standard location for defining this. I suggest a maxItems setting.

   {
        "id"    : "board-id-1",               // id of the board
        "title" : "Board Title",              // title of the board
        "maxItems": 4,                        // max number of items allowed in this board
        ...
   }

The default

   dropEl           : function (el, target, source, sibling) {}

function could implement this (I assume it is used for implementing dragTo).

Also if it makes sense, create a helper function: exceed_maxItems(target) (I assume target is a board). The helper will return true if the dropped item would exceed the maximum number of items in the target board. The helper could be used by the user when they define dropEl to provide feedback on why the drop is denied.

[xscode-auto-reply[bot]]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible. For urgent issues and priority support, visit https://xscode.com/riktar/jkanban

[marcosrocha85]

Hey @rouilj. What about to help me with that? maxItems is a good feature, but I'm thinking that could be nice to have source in the helper as well. I'm concerning about some validation from source board when moving to target. In the inner routine, it might be good if jKanban uses dropEl to know if the target board has max items limit and it will cancel drop event. The helper should return true or false allowing user to complete the drag and drop operation. What you think?

[rouilj]

@marcosrocha85 said:

maxItems is a good feature, but I'm thinking that could be nice to have source in the helper as well.

Sorry I don't understand what you mean by 'have source in the helper'.

I'm concerning about some validation from source board when moving to target. In the inner routine,

I don't know what an inner routine is.

it might be good if jKanban uses dropEl to know if the target board has max items limit and it will cancel drop event.

That is what I suggested for the default dropEl callback.

The helper should return true or false allowing user to complete the drag and drop operation. What you think?

Again that is what I suggested. Since a user can override the dropEl function, I suggested writing a helper:

isBoardOverLimit(target)

that could be called by somebody re-implementing the dropEl callback. The re-implemented dropEl callback just calls the helper function.

The helper function knows how to:

• count the number of items in the target board,
• get the maxItems for the target board.

The helper function returns True if maxItems < (the number of items in the board) and False otherwise.

[Mohmdthabet]

because jkanban is build on vanilla js this example can help you using dropEl callback function

 dropEl: function (el, target, source, sibling) {
      let target_header = target.parentElement.querySelector('header');
      let source_header = source.parentElement.querySelector('header');
          if (target.childElementCount === 4) {
              target_header.classList.add("bg-success");
              target_header.classList.remove("bg-primary");
          } else if (target.childElementCount > 4) {
              return false;
          }
          if (source.childElementCount < 4) {
              source_header.classList.remove("bg-success")
              source_header.classList.add("bg-primary")
          }
  },

this code changes the header to green in case the items count in each board is 4 items and prevents adding more.