Kanban board in the backend

[Jozsef]

Hi everyone. My clients wants me to build a CRM app connected to their existing client site so they have all data in one place.
One of their requirements is to have a drag and drop kanban board interface to update their sales status.
Does anyone have any recommendation for an existing JS or jQuery library that could be integrated into the PW backend and could update data in real time?
Have you done anything like this before? Or does PW have built-in tools for this? I know you can update page parents by drag and drop but can that be reused somewhere else?
I'm sorry for the lame question, I'm not very fluent in JS.

[kongondo]

Just a quick one ...

1 hour ago, Jozsef said:

Does anyone any recommendation for an existing JS or jQuery library that could be integrated into the PW backend and could update data in real time?

This is two questions in one.

1. Integration: Probably not the answer you are looking for but literally any JavaScript library can be integrated into the PW backend. There are various options here including a dedicated ProcessModule or an Inputfield (e.g. a runtime one). 
2. Update data in real time. Any JavaScript and newer libs like HTMX can easily do this. The bottom line is this: (a) An action happens on the client (b) JS listens to that action/event (c) optionally but ideally, check if the action is valid (e.g. was this field completed) (d) send the info to the backend - usually via ajax for the type of app you are building (e) the backend processes the action you have sent including validation + sanitization. If these pass, it takes an action, e.g. 'create a page' or 'update a field' (f) the server sends the response back to the client which is listening for a response from the ajax request. Traditionally/usually, the response is JSON but with HTMX, the response is HTML. (g) The client handles the response, in many cases, updating the DOM. That's it.

1 hour ago, Jozsef said:

Have you done anything like this before?

Yes. Media Manager, for instance. You drop files and it will upload the files then create media pages off of that.

1 hour ago, Jozsef said:

Or does PW have built-in tools for this?

Yes. ProcessWire itself to be honest. Basically $input, $sanitizer, $config->ajax and $pages are the usual tools.

1 hour ago, Jozsef said:

I know you can update page parents by drag and drop but can that be reused somewhere else?

Not a reuse per se answer. Listening to drag and drop using JavaScript used to be a chore. With modern browsers, APIs exist to do it easily in vanilla JavaScript. If you wish to get a ready made solution searching for JavaScript drag and drop will yield some results. 

Personally, I'd go for htmx + vanilla JS drag and drop, or htmx + sortable combo (here's a Python example).

[bernhard]

You don't even need any external libraries to realize that, because ProcessWire's default admin theme uses UIkit and UIkit has the sortable component that does exactly what you need: https://getuikit.com/docs/sortable#group

I thought of building such a module the other day... I'll send you a PM...

[Jozsef]

Thanks everyone, a lot of learning to do, I'll look into the suggestions. I've never used UIKit but Sortable looks the bill.
Updating data would be the real challenge with my skills.
@bernhard, such a module would be awesome. ?

[kongondo]

Google threw up a few interesting results for JavaScript Kanban.

1. jKanban:  allows you to create and manage Kanban Board in your project. https://github.com/riktar/jkanban + demo http://www.riccardotartaglia.it/jkanban/
2. A codepen demo: https://codepen.io/karthikdevarticles/pen/PopxPwO