Hello Anvil Community!
I was heavily inspired by marks Drag and Drop. My real goal was to understand the component provided by @mark.breuss, but I ended up creating my own version. I just needed a few tweaks to get exactly what I needed for my application.
I used anvils custom html components and slots to replicate an example on the muuri website.
It took alot of debugging and head banging, but I think I created a template that is relatively simple to use.
It consist of a Board component that can be initialized with a list of columns to generate a Kanban board, like so:
from ._anvil_designer import FormTemplate
from anvil import *
from ..ItemForm import ItemForm
from ...Kanban.Board import Board
class Form(FormTemplate):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
# Any code you write here will run before the form opens.
data = [
{'header':"column 1",'background':'','items':[ItemForm('test 1'),ItemForm('test 2')]},
{'header':"column 2",'background':'blue','items':[ItemForm('test 3'),ItemForm('test 6')]},
{'header':"column 3",'background':'green','items':[ItemForm('test 4'),ItemForm('test 5')]},
{'header':Label(text="column 4",align="center",foreground='black'),'background':'yellow','items':[ItemForm('test 42'),ItemForm('test 10')]}
]
self.board = Board(data)
self.add_component(self.board,full_width_row=True)
self.board.add_event_handler('x-items_changed',self.handle_change)
def handle_change(self,**event_args):
column_name = event_args['column']
item = event_args['item']
muuri_item = event_args['muuri']
Notification(f"Item moved to {column_name}").show()
item.label_1.visible = column_name in ["column 1","column 3"]
#
# You must refresh the grid cache to get the new dimensions
# when you alter the size of an item by calling 'refreshItems'.
# Then you can update the table layout by calling 'layout'
#
muuri_item.getGrid().refreshItems([muuri_item])
muuri_item.getGrid().layout()
That will yield the following:
the data element should be a map of the following:
column : The column name
background : Should be the color of the column header (still working on this)
items: List of Components ( These can be any component you want to be dragged between columns).
the x-items-changed event is fired on release of a dragged item.
The feature I was originally looking to create was being able to change an item’s appearance based on that column it was dragged into.
Its a newborn baby and I will definitely be adding to it, but I feel like it is in a spot where I can share it with the community.
Disclaimers:
I still need to make it a component.
I will be adding footers.
I will be changing the event arguments when an item is dragged and dropped.
This is a “development” project.
Github Repo:
lewysigns/anvil_muuri: Muuri - Built with Anvil (github.com)
