From fb2fe2feb0ba8425737ffc89abc341549417bc3b Mon Sep 17 00:00:00 2001 From: Sn3llius Date: Sun, 14 Apr 2024 10:43:15 +0200 Subject: [PATCH] improved CRUD example with changing banner color --- README.md | 16 ++++++++-------- .../components/__init__.py | 4 ++-- .../components/item_editor.py | 4 ++-- .../pages/__init__.py | 2 +- .../pages/crud_page.py | 12 ++++++++++-- 5 files changed, 23 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 4e3ebad6..824977ec 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ apps. 🐍 Rio is based **entirely on Python**. You **won't need a single line of HTML, CSS, or JavaScript** to create beautiful, modern apps. -[Tutorial](https://rio.dev/get-started) - [Examples](https://rio.dev/examples) - [Discord](https://discord.gg/7ejXaPwhyH) - [Docs](https://rio.dev/docs) - [Source Code](https://gitlab.com/team-rio/rio) +[Tutorial](https://rio.dev/get-started) - [Examples](https://rio.dev/examples) - [Discord](https://discord.gg/7ejXaPwhyH) - [Docs](https://rio.dev/docs) - [Source Code](https://gitlab.com/team-rio/rio) Rio brings React-style components to Python. Pull from a wealth of built-in components and combine them to create your own custom components. Then combine @@ -25,12 +25,12 @@ machine and on the web. ## Features 🧩 -- Modern, **declarative UI** framework -- **100% Python** - Zero HTML, CSS, or JavaScript required -- Over **50 Built-in components** for common UI elements, such as `rio.Switch`, `rio.Button`, and `rio.Text`, and many more -- Integrates with **modern Python tooling**: Thanks to being **entirely Type Safe** editors can give you instant suggestions and highlight problems right away -- Apps can run **both locally and on the web** -- **Open Source & Free forever** +- Modern, **declarative UI** framework +- **100% Python** - Zero HTML, CSS, or JavaScript required +- Over **50 Built-in components** for common UI elements, such as `rio.Switch`, `rio.Button`, and `rio.Text`, and many more +- Integrates with **modern Python tooling**: Thanks to being **entirely Type Safe** editors can give you instant suggestions and highlight problems right away +- Apps can run **both locally and on the web** +- **Open Source & Free forever** ## Installation 🛠️ @@ -51,7 +51,7 @@ rio new You can choose from a variety of built-in templates to get you started. Here's a complete example to create a project based on the tic-tac-toe template: ```bash -rio new my-app --type website --template 'Tic-Tac-Toe' +rio new my-app --type website --template "Tic-Tac-Toe" cd my-project rio run ``` diff --git a/rio/snippets/snippet-files/project-template-Simple CRUD/components/__init__.py b/rio/snippets/snippet-files/project-template-Simple CRUD/components/__init__.py index 8843b585..97039f45 100644 --- a/rio/snippets/snippet-files/project-template-Simple CRUD/components/__init__.py +++ b/rio/snippets/snippet-files/project-template-Simple CRUD/components/__init__.py @@ -1,2 +1,2 @@ -from .item_editor import ItemEditor -from .item_list import ItemList +from .item_editor import ItemEditor as ItemEditor +from .item_list import ItemList as ItemList diff --git a/rio/snippets/snippet-files/project-template-Simple CRUD/components/item_editor.py b/rio/snippets/snippet-files/project-template-Simple CRUD/components/item_editor.py index e9482a8e..f0edbc9b 100644 --- a/rio/snippets/snippet-files/project-template-Simple CRUD/components/item_editor.py +++ b/rio/snippets/snippet-files/project-template-Simple CRUD/components/item_editor.py @@ -44,7 +44,7 @@ class ItemEditor(rio.Component): Changes the name of the currently selected menu item. Args: - ev: The event object that contains the new text. + ev: The event object that contains the new name. """ self.currently_selected_menu_item.name = ev.text @@ -53,7 +53,7 @@ class ItemEditor(rio.Component): Changes the description of the currently selected menu item. Args: - ev: The event object that contains the new text. + ev: The event object that contains the new description. """ self.currently_selected_menu_item.description = ev.text diff --git a/rio/snippets/snippet-files/project-template-Simple CRUD/pages/__init__.py b/rio/snippets/snippet-files/project-template-Simple CRUD/pages/__init__.py index c1d4daa2..6ab5537c 100644 --- a/rio/snippets/snippet-files/project-template-Simple CRUD/pages/__init__.py +++ b/rio/snippets/snippet-files/project-template-Simple CRUD/pages/__init__.py @@ -1 +1 @@ -from .crud_page import CrudPage +from .crud_page import CrudPage as CrudPage diff --git a/rio/snippets/snippet-files/project-template-Simple CRUD/pages/crud_page.py b/rio/snippets/snippet-files/project-template-Simple CRUD/pages/crud_page.py index 0ec7b95f..09b0678c 100644 --- a/rio/snippets/snippet-files/project-template-Simple CRUD/pages/crud_page.py +++ b/rio/snippets/snippet-files/project-template-Simple CRUD/pages/crud_page.py @@ -1,3 +1,5 @@ +from typing import * # type:ignore + import rio # @@ -24,12 +26,14 @@ class CrudPage(rio.Component): menu_item_set: A list of menu items. currently_selected_menu_item: The currently selected menu item. banner_text: The text to be displayed in the banner. + banner_style: The style of the banner (success, danger, info). is_new_entry: A flag to indicate if the currently selected menu item is a new entry. """ menu_item_set: list[data_models.MenuItems] = [] currently_selected_menu_item: data_models.MenuItems | None = None banner_text: str = "" + banner_style: Literal["success", "danger", "info"] = "success" is_new_entry: bool = False @rio.event.on_populate @@ -49,8 +53,10 @@ class CrudPage(rio.Component): Args: idx: The index of the item to be deleted. """ + # delete the item from the list self.menu_item_set.pop(idx) self.banner_text = "Item was deleted" + self.banner_style = "danger" self.currently_selected_menu_item = None async def on_press_cancel_event(self) -> None: @@ -72,10 +78,12 @@ class CrudPage(rio.Component): if self.is_new_entry: self.menu_item_set.append(self.currently_selected_menu_item) self.banner_text = "Item was added" + self.banner_style = "success" self.is_new_entry = False self.currently_selected_menu_item = None else: self.banner_text = "Item was updated" + self.banner_style = "info" async def on_press_add_new_item(self) -> None: """ @@ -137,7 +145,7 @@ class CrudPage(rio.Component): if self.currently_selected_menu_item is None: return rio.Column( - rio.Banner(self.banner_text, style="danger"), + rio.Banner(self.banner_text, style=self.banner_style), comps.ItemList( menu_item_set=self.menu_item_set, on_add_new_item_event=self.on_press_add_new_item, @@ -150,7 +158,7 @@ class CrudPage(rio.Component): ) else: return rio.Column( - rio.Banner(self.banner_text, style="danger"), + rio.Banner(self.banner_text, style=self.banner_style), rio.Row( comps.ItemList( menu_item_set=self.menu_item_set,