Spaces:
Sleeping
Sleeping
File size: 5,490 Bytes
d467ea7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
"""FrankenUI Tasks Example built with MonsterUI (original design by ShadCN)"""
from fasthtml.common import *
from monsterui.all import *
from fasthtml.svg import *
import json
app, rt = fast_app(hdrs=Theme.blue.headers())
def LAlignedCheckTxt(txt): return DivLAligned(UkIcon(icon='check'), P(txt, cls=TextPresets.muted_sm))
with open('data_/status_list.json', 'r') as f: data = json.load(f)
with open('data_/statuses.json', 'r') as f: statuses = json.load(f)
def _create_tbl_data(d):
return {'Done': d['selected'], 'Task': d['id'], 'Title': d['title'],
'Status' : d['status'], 'Priority': d['priority'] }
data = [_create_tbl_data(d) for d in data]
page_size = 15
current_page = 0
paginated_data = data[current_page*page_size:(current_page+1)*page_size]
priority_dd = [{'priority': "low", 'count': 36 }, {'priority': "medium", 'count': 33 }, {'priority': "high", 'count': 31 }]
status_dd = [{'status': "backlog", 'count': 21 },{'status': "todo", 'count': 21 },{'status': "progress", 'count': 20 },{'status': "done",'count': 19 },{'status': "cancelled", 'count': 19 }]
def create_hotkey_li(hotkey): return NavCloseLi(A(DivFullySpaced(hotkey[0], Span(hotkey[1], cls=TextPresets.muted_sm))))
hotkeys_a = (('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team',''))
hotkeys_b = (('Logout',''), )
avatar_opts = DropDownNavContainer(
NavHeaderLi(P('sveltecult'),NavSubtitle('leader@sveltecult.com')),
NavDividerLi(),
*map(create_hotkey_li, hotkeys_a),
NavDividerLi(),
*map(create_hotkey_li, hotkeys_b),)
def CreateTaskModal():
return Modal(
Div(cls='p-6')(
ModalTitle('Create Task'),
P('Fill out the information below to create a new task', cls=TextPresets.muted_sm),
Br(),
Form(cls='space-y-6')(
Grid(Div(Select(*map(Option,('Documentation', 'Bug', 'Feature')), label='Task Type', id='task_type')),
Div(Select(*map(Option,('In Progress', 'Backlog', 'Todo', 'Cancelled', 'Done')), label='Status', id='task_status')),
Div(Select(*map(Option, ('Low', 'Medium', 'High')), label='Priority', id='task_priority'))),
TextArea(label='Title', placeholder='Please describe the task that needs to be completed'),
DivRAligned(
ModalCloseButton('Cancel', cls=ButtonT.ghost),
ModalCloseButton('Submit', cls=ButtonT.primary),
cls='space-x-5'))),
id='TaskForm')
page_heading = DivFullySpaced(cls='space-y-2')(
Div(cls='space-y-2')(
H2('Welcome back!'),P("Here's a list of your tasks for this month!", cls=TextPresets.muted_sm)),
Div(DiceBearAvatar("sveltcult",8,8),avatar_opts))
table_controls =(Input(cls='w-[250px]',placeholder='Filter task'),
Button("Status"),
DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(P(a['status']), P(a['count'])),cls='capitalize') for a in status_dd])),
Button("Priority"),
DropDownNavContainer(map(NavCloseLi,[A(DivFullySpaced(LAlignedCheckTxt(a['priority']), a['count']),cls='capitalize') for a in priority_dd])),
Button("View"),
DropDownNavContainer(map(NavCloseLi,[A(LAlignedCheckTxt(o)) for o in ['Title','Status','Priority']])),
Button('Create Task',cls=(ButtonT.primary, TextPresets.bold_sm), data_uk_toggle="target: #TaskForm"))
def task_dropdown():
return Div(Button(UkIcon('ellipsis')),
DropDownNavContainer(
map(NavCloseLi,[
*map(A,('Edit', 'Make a copy', 'Favorite')),
A(DivFullySpaced(*[P(o, cls=TextPresets.muted_sm) for o in ('Delete', '⌘⌫')]))])))
def header_render(col):
match col:
case "Done": return Th(CheckboxX(), shrink=True)
case 'Actions': return Th("", shrink=True)
case _: return Th(col, expand=True)
def cell_render(col, val):
def _Td(*args,cls='', **kwargs): return Td(*args, cls=f'p-2 {cls}',**kwargs)
match col:
case "Done": return _Td(shrink=True)(CheckboxX(selected=val))
case "Task": return _Td(val, cls='uk-visible@s') # Hide on small screens
case "Title": return _Td(val, cls='font-medium', expand=True)
case "Status" | "Priority": return _Td(cls='uk-visible@m uk-text-nowrap capitalize')(Span(val))
case "Actions": return _Td(task_dropdown(), shrink=True)
case _: raise ValueError(f"Unknown column: {col}")
task_columns = ["Done", 'Task', 'Title', 'Status', 'Priority', 'Actions']
tasks_table = Div(cls='mt-4')(
TableFromDicts(
header_data=task_columns,
body_data=paginated_data,
body_cell_render=cell_render,
header_cell_render=header_render,
sortable=True,
cls=(TableT.responsive, TableT.sm, TableT.divider)))
def footer():
total_pages = (len(data) + page_size - 1) // page_size
return DivFullySpaced(
Div('1 of 100 row(s) selected.', cls=TextPresets.muted_sm),
DivLAligned(
DivCentered(f'Page {current_page + 1} of {total_pages}', cls=TextT.sm),
DivLAligned(*[UkIconLink(icon=i, button=True) for i in ('chevrons-left', 'chevron-left', 'chevron-right', 'chevrons-right')])))
tasks_ui = Div(DivFullySpaced(DivLAligned(table_controls), cls='mt-8'), tasks_table, footer())
@rt
def index(): return Container(page_heading, tasks_ui, CreateTaskModal())
serve()
|