improve form rendering, add description

f0rthsp4ce · Jul 26, 2024 · cc41527 · cc41527
1 parent 6a6b25a
commit cc41527
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 36 deletions.
diff --git a/api/app/schemas/transaction.py b/api/app/schemas/transaction.py
@@ -48,6 +48,8 @@ def check_ids_are_different(self):
 
 
 class TransactionUpdateSchema(BaseUpdateSchema):
+    amount: Decimal | None = None
+    currency: str | None = None
     confirmed: bool | None = None
 
 

diff --git a/ui/app/controllers/entity.py b/ui/app/controllers/entity.py
@@ -10,10 +10,18 @@
 
 
 class EntityForm(FlaskForm):
-    name = StringField("Name", validators=[DataRequired()])
+    name = StringField(
+        "Name",
+        validators=[DataRequired()],
+        description="Unique, short identifier",
+        render_kw={"placeholder": "h4ck3r"},
+    )
+    telegram_id = StringField(
+        "Telegram ID",
+        description="Required for residents. Leave 0 for system entities. View ID: <a href='https://t.me/myidbot'>t.me/myidbot</a>",
+        render_kw={"placeholder": "91827364"},
+    )
     comment = StringField("Comment")
-    telegram_id = StringField("Telegram ID")
-    active = BooleanField("Active", default=True)
     submit = SubmitField("Submit")
 
 

diff --git a/ui/app/controllers/transaction.py b/ui/app/controllers/transaction.py
@@ -8,6 +8,7 @@
     FloatField,
     HiddenField,
     IntegerField,
+    SelectField,
     StringField,
     SubmitField,
 )
@@ -21,10 +22,24 @@ class TransactionForm(FlaskForm):
     to_entity_name = StringField("To")
     from_entity_id = IntegerField("", validators=[DataRequired(), NumberRange(min=1)])
     to_entity_id = IntegerField("", validators=[DataRequired(), NumberRange(min=1)])
-    amount = FloatField("Amount", validators=[DataRequired()])
-    currency = StringField("Currency", validators=[DataRequired()])
     comment = StringField("Comment")
-    confirmed = BooleanField("Confirmed", default=False)
+    amount = FloatField(
+        "Amount",
+        validators=[DataRequired()],
+        render_kw={"placeholder": "10.00"},
+    )
+    currency = StringField(
+        "Currency",
+        validators=[DataRequired()],
+        description="Any string, but prefer <a href='https://en.wikipedia.org/wiki/ISO_4217#Active_codes_(list_one)'>ISO 4217</a>. Case insensitive.",
+        render_kw={"placeholder": "GEL, USD, DOGE"},
+    )
+    confirmed = SelectField(
+        "Confirmed",
+        choices=(True, False),
+        default=False,
+        description="Funds have been received by recipient.",
+    )
     submit = SubmitField("Submit")
 
 

diff --git a/ui/app/static/style.css b/ui/app/static/style.css
@@ -49,6 +49,13 @@ nav .user {
   float: right;
 }
 
+/* FORMS */
+input.small {
+  width: 3rem;
+}
+.description {
+  padding-bottom: 0.5rem;
+}
 /* COLORS  */
 a {
   color: #007bff;
@@ -72,3 +79,7 @@ table tr:nth-child(even) {
 .amount-negative {
   color: red;
 }
+
+.secondary {
+  color: gray;
+}
diff --git a/ui/app/templates/base.jinja2 b/ui/app/templates/base.jinja2
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="theme-color" content="#000">
     <title>refinance</title>
     <link rel="stylesheet" href="/static/style.css">

diff --git a/ui/app/templates/form.jinja2 b/ui/app/templates/form.jinja2
@@ -1,15 +1,25 @@
-{% macro render_form(form) %}
+{% macro render_form(form, except=(), new_table=True) %}
+
+{% if new_table %}<table>{% endif %}
 
-<table>
     {% for field in form %}
+    {% if field.name not in except%}
     <tr>
         {% if field.type not in ('CSRFTokenField', 'SubmitField') %}
         <td>{{ field.label() }}</td>
         {% endif %}
-        <td>{{ field() }}</td>
+        <td>{{ field(autocomplete="off") }}</td>
+    </tr>
+    {% if field.description %}
+    <tr>
+        <td></td>
+        <td class="description"><small class="secondary">{{ field.description }}</small></td>
     </tr>
+    {% endif %}
+    {% endif %}
     {% endfor %}
-</table>
+
+{% if new_table %}</table>{% endif %}
 
 {% if form.errors %}
 <ul class="errors">

diff --git a/ui/app/templates/transaction/add.jinja2 b/ui/app/templates/transaction/add.jinja2
@@ -9,45 +9,33 @@
         <tr>
             <td>{{ form.from_entity_name.label }}</td>
             <td>
-                <input id="from_entity_name" type="search" name="name" placeholder="search..."
-                    autocomplete="off"
-                    hx-trigger="input changed delay:500ms, name" hx-get="hx/search"
-                    hx-target=" #from_entity_name_search_results" hx-indicator=".htmx-indicator">
+                <input id="from_entity_name" type="search" name="name" placeholder="search..." autocomplete="off"
+                    hx-trigger="input changed delay:250ms, name" hx-get="hx/search"
+                    hx-target=" #from_entity_name_search_results">
+                id: {{ form.from_entity_id(id="from_entity_id", placeholder="id", class="small") }}
             </td>
-            <td id="from_entity_name_search_results"></td>
         </tr>
         <tr>
             <td></td>
-            <td>{{ form.from_entity_id(id="from_entity_id", placeholder="id") }}</td>
+            <td id="from_entity_name_search_results"></td>
         </tr>
 
         <tr>
             <td>{{ form.to_entity_name.label }}</td>
             <td>
-                <input id="to_entity_name" type="search" name="name" placeholder="search..."
-                    autocomplete="off"
-                    hx-trigger="input changed delay:500ms, name" hx-get="hx/search"
-                    hx-target=" #to_entity_name_search_results" hx-indicator=".htmx-indicator">
+                <input id="to_entity_name" type="search" name="name" placeholder="search..." autocomplete="off"
+                    hx-trigger="input changed delay:250ms, name" hx-get="hx/search"
+                    hx-target=" #to_entity_name_search_results">
+                id: {{ form.to_entity_id(id="to_entity_id", placeholder="id", class="small") }}
             </td>
-            <td id="to_entity_name_search_results"></td>
         </tr>
         <tr>
             <td></td>
-            <td>{{ form.to_entity_id(id="to_entity_id", placeholder="id") }}</td>
-        </tr>
-
-
-        {% for field in form %}
-        {% if field.name not in ('from_entity_name', 'to_entity_name', 'from_entity_id', 'to_entity_id') %}
-        <tr>
-            {% if field.type not in ('CSRFTokenField', 'SubmitField') %}
-            <td>{{ field.label() }}</td>
-            {% endif %}
-            <td>{{ field() }}</td>
+            <td id="to_entity_name_search_results"></td>
         </tr>
-        {% endif %}
-        {% endfor %}
 
+        {{ render_form(form, except=('from_entity_name', 'to_entity_name', 'from_entity_id', 'to_entity_id'),
+        new_table=False) }}
     </table>
 </form>
 

diff --git a/ui/app/templates/transaction/edit.jinja2 b/ui/app/templates/transaction/edit.jinja2
@@ -5,6 +5,6 @@
 
 {% block content %}
 <form method="post">
-    {{ render_form(form) }}
+    {{ render_form(form, except=('from_entity_name', 'to_entity_name', 'from_entity_id', 'to_entity_id')) }}
 </form>
 {% endblock %}