introducing data model "todo"

examples/trello_cards/draganddrop.py

@@ -1,15 +1,22 @@
 from __future__ import annotations
 
-from typing import Callable, Optional
+from typing import Callable, Optional, Protocol
 
 from nicegui import ui
 
+
+class Item(Protocol):
+    @property
+    def title(self) -> int:
+        pass
+
+
 dragged: Optional[card] = None
 
 
 class column(ui.column):
 
-    def __init__(self, name: str, on_drop: Callable[[card, str]] = None) -> None:
+    def __init__(self, name: str, on_drop: Callable[[Item, str]] = None) -> None:
         super().__init__()
         with self.classes('bg-grey-5 w-60 p-4 rounded shadow-2'):
             ui.label(name).classes('text-bold ml-1')
@@ -30,18 +37,18 @@ class column(ui.column):
         self.unhighlight()
         dragged.parent_slot.parent.remove(dragged)
         with self:
-            card(dragged.text)
-        self.on_drop(dragged, self.name)
+            card(dragged.item)
+        self.on_drop(dragged.item, self.name)
         dragged = None
 
 
 class card(ui.card):
 
-    def __init__(self, text: str) -> None:
+    def __init__(self, item: Item) -> None:
         super().__init__()
-        self.text = text
+        self.item = item
         with self.props('draggable').classes('w-full cursor-pointer bg-grey-1'):
-            ui.label(self.text)
+            ui.label(item.title)
         self.on('dragstart', self.handle_dragstart)
 
     def handle_dragstart(self) -> None:

examples/trello_cards/main.py

@@ -1,23 +1,30 @@
 #!/usr/bin/env python3
+from dataclasses import dataclass
+
 import draganddrop as dnd
 
 from nicegui import ui
 
 
-def handle_drop(card: dnd.card, location: str):
-    ui.notify(f'"{card.text}" is now in {location}')
+@dataclass
+class ToDo:
+    title: str
+
+
+def handle_drop(todo: ToDo, location: str):
+    ui.notify(f'"{todo.title}" is now in {location}')
 
 
 with ui.row():
     with dnd.column('Next', on_drop=handle_drop):
-        dnd.card('Improve Documentation')
-        dnd.card('Simplify Layouting')
-        dnd.card('Provide Deployment')
+        dnd.card(ToDo('Simplify Layouting'))
+        dnd.card(ToDo('Provide Deployment'))
     with dnd.column('Doing', on_drop=handle_drop):
-        dnd.card('Release Standalone-Mode')
+        dnd.card(ToDo('Improve Documentation'))
     with dnd.column('Done', on_drop=handle_drop):
-        dnd.card('Invent NiceGUI')
-        dnd.card('Test in own Projects')
-        dnd.card('Publish as Open Source')
+        dnd.card(ToDo('Invent NiceGUI'))
+        dnd.card(ToDo('Test in own Projects'))
+        dnd.card(ToDo('Publish as Open Source'))
+        dnd.card(ToDo('Release Native-Mode'))
 
 ui.run()