From 9174d3580e8d83ca6cba3e25c9b30b84086bc9d2 Mon Sep 17 00:00:00 2001
From: Mike_Went <git@meew.me>
Date: Fri, 12 Jul 2024 05:47:27 +0400
Subject: [PATCH] add interactive from/to search when adding a tx

---
 api/app/app.py                                |  8 ++
 ui/app/controllers/transaction.py             | 39 ++++++--
 ui/app/external/refinance.py                  |  2 +-
 ui/app/templates/base.jinja2                  |  1 +
 ui/app/templates/transaction/add.jinja2       | 93 ++++++++++++++++++-
 .../transaction/hx_search_results.jinja2      |  3 +
 6 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 ui/app/templates/transaction/hx_search_results.jinja2

diff --git a/api/app/app.py b/api/app/app.py
index 3917788..e07655e 100644
--- a/api/app/app.py
+++ b/api/app/app.py
@@ -10,6 +10,7 @@
 from app.routes.token import token_router
 from app.routes.transaction import transaction_router
 from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
 from sqlalchemy.exc import SQLAlchemyError
 
@@ -17,6 +18,13 @@
 
 config: Config = get_config()
 app = FastAPI(title=config.app_name, version=config.app_version)
+app.add_middleware(
+    CORSMiddleware,
+    allow_credentials=True,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 
 @app.exception_handler(ApplicationError)
diff --git a/ui/app/controllers/transaction.py b/ui/app/controllers/transaction.py
index a651b24..73d2d6e 100644
--- a/ui/app/controllers/transaction.py
+++ b/ui/app/controllers/transaction.py
@@ -1,23 +1,26 @@
 from app.external.refinance import get_refinance_api_client
 from app.middlewares.auth import token_required
 from app.schemas import Transaction
-from flask import Blueprint, redirect, render_template, url_for
+from flask import Blueprint, jsonify, redirect, render_template, request, url_for
 from flask_wtf import FlaskForm
 from wtforms import (
     BooleanField,
     FloatField,
+    HiddenField,
     IntegerField,
     StringField,
     SubmitField,
 )
-from wtforms.validators import DataRequired
+from wtforms.validators import DataRequired, NumberRange
 
 transaction_bp = Blueprint("transaction", __name__)
 
 
 class TransactionForm(FlaskForm):
-    from_entity_id = IntegerField("From Entity ID", validators=[DataRequired()])
-    to_entity_id = IntegerField("To Entity ID", validators=[DataRequired()])
+    from_entity_name = StringField("From")
+    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")
@@ -51,16 +54,36 @@ def detail(id):
     )
 
 
+@transaction_bp.route("/hx/search", methods=["GET", "POST"])
+@token_required
+def hx_search():
+    api = get_refinance_api_client()
+    entities = api.http(
+        "GET", "entities", params=dict(name=request.args.get("name"))
+    ).json()["items"]
+    return render_template("transaction/hx_search_results.jinja2", entities=entities)
+
+
+@transaction_bp.route("/hx/entity-name/<int:id>")
+@token_required
+def hx_entity_name(id):
+    api = get_refinance_api_client()
+    r = api.http("GET", f"entities/{id}")
+    if r.status_code == 200:
+        return jsonify(r.json()), 200
+    else:
+        return jsonify({}), 404
+
+
 @transaction_bp.route("/add", methods=["GET", "POST"])
 @token_required
 def add():
     form = TransactionForm()
     if form.validate_on_submit():
         api = get_refinance_api_client()
-        data = form.data
-        data.pop("csrf_token")
-        api.http("POST", "transactions", data=data)
-        return redirect(url_for("transaction.list"))
+        tx = api.http("POST", "transactions", data=form.data)
+        if tx.status_code == 200:
+            return redirect(url_for("transaction.detail", id=tx.json()["id"]))
     return render_template("transaction/add.jinja2", form=form)
 
 
diff --git a/ui/app/external/refinance.py b/ui/app/external/refinance.py
index 61eb5e7..be86faa 100644
--- a/ui/app/external/refinance.py
+++ b/ui/app/external/refinance.py
@@ -32,5 +32,5 @@ def __init__(self, token: str) -> None:
 def get_refinance_api_client() -> RefinanceAPI:
     token = session.get("token")
     if token is None:
-        raise ValueError("Token is required to create RefinanceAPI client")
+        raise ValueError("Token is required")
     return RefinanceAPI(token)
diff --git a/ui/app/templates/base.jinja2 b/ui/app/templates/base.jinja2
index a9bf18b..324562e 100644
--- a/ui/app/templates/base.jinja2
+++ b/ui/app/templates/base.jinja2
@@ -7,6 +7,7 @@
     <meta name="theme-color" content="#000">
     <title>refinance</title>
     <link rel="stylesheet" href="/static/style.css">
+    <script src="https://unpkg.com/htmx.org@1.6.1"></script>
 </head>
 
 <body>
diff --git a/ui/app/templates/transaction/add.jinja2 b/ui/app/templates/transaction/add.jinja2
index 96c7761..b0e88de 100644
--- a/ui/app/templates/transaction/add.jinja2
+++ b/ui/app/templates/transaction/add.jinja2
@@ -5,6 +5,97 @@
 
 {% block content %}
 <form method="post">
-    {{ render_form(form) }}
+    <table>
+        <tr>
+            <td>{{ form.from_entity_name.label }}</td>
+            <td>
+                <input id="from_entity_name" type="search" name="name" placeholder="search..."
+                    hx-trigger="input changed delay:500ms, name" hx-get="hx/search"
+                    hx-target=" #from_entity_name_search_results" hx-indicator=".htmx-indicator">
+            </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>
+        </tr>
+
+        <tr>
+            <td>{{ form.to_entity_name.label }}</td>
+            <td>
+                <input id="to_entity_name" type="search" name="name" placeholder="search..."
+                    hx-trigger="input changed delay:500ms, name" hx-get="hx/search"
+                    hx-target=" #to_entity_name_search_results" hx-indicator=".htmx-indicator">
+            </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>
+        </tr>
+        {% endif %}
+        {% endfor %}
+
+    </table>
 </form>
+
+<script>
+    document.addEventListener('click', function (event) {
+        if (event.target.matches('.search-result-item')) {
+            const name = event.target.getAttribute('x-name');
+            const id = event.target.getAttribute('x-id');
+            const searchResultsId = event.target.closest('td').id;
+
+            if (searchResultsId === 'from_entity_name_search_results') {
+                document.getElementById('from_entity_name').value = name;
+                document.getElementById('from_entity_id').value = id;
+                document.getElementById('from_entity_id').focus();
+
+            } else if (searchResultsId === 'to_entity_name_search_results') {
+                document.getElementById('to_entity_name').value = name;
+                document.getElementById('to_entity_id').value = id;
+                document.getElementById('to_entity_id').focus();
+            }
+
+            document.getElementById(searchResultsId).innerHTML = '';
+        }
+    });
+
+    document.getElementById('from_entity_id').addEventListener('change', function () {
+        fetchEntityName('from_entity_id', 'from_entity_name');
+    });
+
+    document.getElementById('to_entity_id').addEventListener('change', function () {
+        fetchEntityName('to_entity_id', 'to_entity_name');
+    });
+
+    function fetchEntityName(entityIdField, entityNameField) {
+        const entityId = document.getElementById(entityIdField).value;
+        if (entityId) {
+            fetch(`/transactions/hx/entity-name/${entityId}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.id) {
+                        document.getElementById(entityNameField).value = data.name;
+                    } else {
+                        alert('Entity not found');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error fetching entity name:', error);
+                    alert('Error fetching entity name');
+                });
+        }
+    }
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/ui/app/templates/transaction/hx_search_results.jinja2 b/ui/app/templates/transaction/hx_search_results.jinja2
new file mode 100644
index 0000000..f21659a
--- /dev/null
+++ b/ui/app/templates/transaction/hx_search_results.jinja2
@@ -0,0 +1,3 @@
+{% for entity in entities %}
+<a href="#" class="search-result-item" x-id="{{ entity.id }}" x-name="{{ entity.name }}">{{ entity.name }}</a>
+{% endfor %}
\ No newline at end of file