Update app.py

app.py

@@ -1,95 +1,82 @@
 import panel as pn
-
-pn.extension(sizing_mode="stretch_width", design="material")
-
-BUTTON_WIDTH = 125
-
-# We use intslider to avoid teaching users pn.rx. Is that a good thing?
-state_changed_count = pn.widgets.IntInput()
-tasks = pn.Column()
-
-def update_state_changed_count(*args):
-    state_changed_count.value += 1
-
-def remove_task(task, *args):
-    index = tasks.index(task)
-    tasks.pop(index)
-
-def remove_all_tasks(*args):
-    tasks.clear()
-
-def create_task(text):
-    state = pn.widgets.Checkbox(align="center", sizing_mode="fixed")
-    content = pn.pane.Markdown(text)
-    remove = pn.widgets.Button(width=BUTTON_WIDTH, icon="trash", sizing_mode="fixed")
-    task = pn.Row(state, content, remove, sizing_mode="stretch_width")
-
-    pn.bind(remove_task, task, remove, watch=True)
-    # We have to bind the below after the above!
-    pn.bind(update_state_changed_count, state, remove, watch=True)
-
-    return task
-
-def add_task(text, *args):
-    if not text:
-        return
-
-    new_task = create_task(text)
-    tasks.append(new_task)
-
-    return tasks
-
-def get_state(*args):
-    total_tasks = len(tasks)
-    completed_tasks = sum(check[0].value for check in tasks)
-    return f"{completed_tasks} of {total_tasks} tasks completed"
-
-def can_add(value_input):
-    return not bool(value_input)
-
-def has_tasks(*args):
-    return len(tasks) > 0
-
-
-add_task("Inspect the blades")
-add_task("Inspect the nacelle")
-add_task("Tighten the bolts")
-
-text_input = pn.widgets.TextInput(name="Task", placeholder="Enter a task")
-
-submit_task = pn.widgets.Button(
-    name="Add",
-    align="center",
-    button_type="primary",
-    width=BUTTON_WIDTH,
-    sizing_mode="fixed",
-    disabled=pn.bind(can_add, text_input.param.value_input)
-)
-clear = pn.widgets.Button(
-    name="Remove All",
-    button_type="primary",
-    button_style="outline",
-    width=BUTTON_WIDTH,
-    sizing_mode="fixed",
-    visible=pn.bind(has_tasks, state_changed_count)
-)
-
-def reset_text_input(*args):
-    text_input.value = text_input.value_input = ""
-
-pn.bind(add_task, text_input, submit_task, watch=True)
-pn.bind(reset_text_input, text_input, submit_task, watch=True)
-pn.bind(remove_all_tasks, clear, watch=True)
-# We have to bind the below after the above!
-pn.bind(update_state_changed_count, text_input, submit_task, clear, watch=True)
-
-status_report = pn.bind(get_state, state_changed_count, tasks.param.objects)
-
-pn.Column(
-    "## WTG Task List",
-    status_report,
-    pn.Row(text_input, submit_task),
-    tasks,
-    pn.Row(pn.Spacer(), clear),
-    max_width=500,
-).servable()
+import param
+import json
+
+FORM_TEXT = """\
+<h1>Join Newsletter</h1>
+
+Get the latest updates and news about Panel.
+"""
+
+FORM_ICON = """\
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path> <path d="M3 7l9 6l9 -6"></path> </svg> 
+"""
+
+class FormState(param.Parameterized):
+    name = param.String(default="", doc="The name of the user.")
+    email = param.String(default="", doc="The email of the user.")
+    message = param.String(default="", label="Message", doc="An optional message from the user")
+
+    is_not_valid = param.Boolean(default=False)
+    validation_errors = param.Dict()
+    validation_message = param.String()
+
+    def __init__(self, **params):
+      params["name"]=params.get("name", "")
+      super().__init__(**params)
+    
+    def _validate(self):
+        errors = {}
+        
+        if not self.name:
+            errors["name"] = "No *Name* entered."
+        if not self.email:
+            errors["email"] = "No *Email* entered."
+        elif not "@" in self.email or not "." in self.email:
+            errors["email"] = "Not a valid *Email*."
+        
+        self.validation_errors=errors
+        self.is_not_valid = bool(errors)
+        self.validation_message = "**Error**. " + " ".join(errors.values())
+    
+    def _to_dict(self):
+      return {
+        "name": self.name, "email": self.email, "message": self.message
+      }
+
+    def _reset_to_defaults(self):
+        self.param.update(name=self.param.name.default, email=self.param.email.default, message=self.param.message.default)
+    
+    def submit(self, event):
+        self._validate()
+        
+        if not self.validation_errors:
+            pn.state.notifications.success(f"Form submitted: {self._to_dict()}", duration=2000)
+            self._reset_to_defaults()
+
+    
+
+def create_form():
+    form_state = FormState()
+
+    header = pn.Row(
+      pn.pane.SVG(FORM_ICON, margin=0, height=80, sizing_mode="fixed"),
+      FORM_TEXT,
+    )
+
+    error_pane = pn.pane.Alert(object=form_state.param.validation_message, visible=form_state.param.is_not_valid, alert_type="danger", stylesheets=["p {margin-bottom: 0}"])
+    
+    name_input = pn.widgets.TextInput.from_param(form_state.param.name, name="Name*", placeholder="User Name")
+    email_input = pn.widgets.TextInput.from_param(form_state.param.email, name="Email*", placeholder="Email Address")
+    message_input = pn.widgets.TextAreaInput.from_param(form_state.param["message"], placeholder="An optional message")
+    
+    submit_button = pn.widgets.Button(name="Send", on_click=form_state.submit, button_type="primary")
+    
+    return pn.Column(header, error_pane, name_input, email_input, message_input, submit_button, sizing_mode="fixed", width=500, styles={"margin": "auto"})
+
+
+
+pn.extension(notifications=True, design="bootstrap", sizing_mode="stretch_width")
+
+form = create_form()
+form.servable()