Add ability to edit exercise name from new dropdown, still WIP as I need to handle exercise selection and make it a component

app.py

@@ -442,7 +442,17 @@ def show_workout(person_id, workout_id):
 def get_exercises():
     query = request.args.get('query')
     exercises = db.exercises.get(query)
-    return render_template('partials/exercise_dropdown.html', exercises=exercises)
+    return render_template('partials/exercise/exercise_dropdown.html', exercises=exercises)
+
+@app.route("/exercise/<int:exercise_id>/edit_name", methods=['GET', 'POST'])
+def edit_exercise_name(exercise_id):
+    exercise = db.exercises.get_exercise(exercise_id)
+    if request.method == 'GET':
+        return render_template('partials/exercise/edit_exercise_name.html', exercise=exercise)
+    else:
+        updated_name = request.form['name']
+        updated_exercise = db.exercises.update_exercise_name(exercise_id, updated_name)
+        return render_template('partials/exercise/exercise_list_item.html', exercise=updated_exercise)
 
 
 

features/exercises.py

@@ -7,3 +7,14 @@ class Exercises:
         search_query = f"%{query}%"
         exercises = self.execute("SELECT exercise_id, name FROM exercise WHERE LOWER(name) LIKE LOWER(%s) ORDER BY name ASC;", [search_query])
         return exercises
+    
+    def get_exercise(self, exercise_id):
+        exercise = self.execute("SELECT exercise_id, name FROM exercise WHERE exercise_id=%s;", [exercise_id], one=True)
+        return exercise
+    
+    def update_exercise_name(self, exercise_id, updated_name):
+        sql = "UPDATE exercise SET name = %s WHERE exercise_id = %s;"
+        params = [updated_name, exercise_id]
+        self.execute(sql, params)
+        updated_exercise = self.get_exercise(exercise_id)
+        return updated_exercise

templates/partials/exercise/edit_exercise_name.html

@@ -0,0 +1,16 @@
+<li class="py-2 px-4 flex items-center justify-between">
+    <!-- Input Field -->
+    <input type="text" name="name" value="{{ exercise.name }}"
+        class="w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+        _="on click from me call event.stopPropagation()">
+    <!-- Save Icon -->
+    <button hx-post="{{ url_for('edit_exercise_name', exercise_id=exercise.exercise_id) }}" hx-target="closest li"
+        hx-swap="outerHTML" hx-include="closest li" class="text-gray-500 hover:text-gray-700 ml-2"
+        _="on click from me call event.stopPropagation()">
+        <!-- Tick icon SVG -->
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+            stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+    </button>
+</li>

templates/partials/exercise/exercise_dropdown.html

@@ -0,0 +1,9 @@
+{% if exercises %}
+<ul class="list-none m-0 p-0 max-h-[300px] overflow-y-auto">
+    {% for exercise in exercises %}
+    {{ render_partial('partials/exercise/exercise_list_item.html', exercise=exercise) }}
+    {% endfor %}
+</ul>
+{% else %}
+<div class="py-2 px-4 text-gray-500">No results found</div>
+{% endif %}

templates/partials/exercise/exercise_list_item.html

@@ -0,0 +1,14 @@
+<li class="py-2 px-4 hover:bg-gray-100 cursor-pointer flex items-center justify-between">
+    <!-- Exercise Name -->
+    <span>{{ exercise.name }}</span>
+    <!-- Edit Icon -->
+    <a hx-get="{{ url_for('edit_exercise_name', exercise_id=exercise.exercise_id) }}" hx-target="closest li"
+        hx-swap="outerHTML" class="text-gray-500 hover:text-gray-700" _="on click from me call event.stopPropagation()">
+        <!-- Edit icon SVG -->
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+            stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M15.232 5.232l3.536 3.536M4 20h4l12-12-4-4L4 16v4z" />
+        </svg>
+    </a>
+</li>

templates/partials/exercise_dropdown.html

@@ -1,5 +0,0 @@
-{% for e in exercises %}
-<option value="{{ e.exercise_id }}">{{
-    e.name
-    }}</option>
-{% endfor %}

templates/workout.html

@@ -95,11 +95,18 @@
                 <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
                     Exercise
                 </label>
+                <div class="relative" _="on click from elsewhere set the innerHTML of #exercise-results to ''">
                     <input
                         class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-                    type="text" name="query" placeholder="Search exercises..." hx-get="{{ url_for('get_exercises') }}"
+                        type="text" name="query" placeholder="Search exercises..."
-                    hx-target="#exercise-results" hx-trigger="keyup changed delay:500ms" autocomplete="off">
+                        hx-get="{{ url_for('get_exercises') }}" hx-target="#exercise-results"
-                <div id="exercise-results">
+                        hx-trigger="keyup changed delay:500ms" autocomplete="off">
+
+                    <!-- Dropdown Menu -->
+                    <div id="exercise-results"
+                        class="absolute w-full bg-white border border-gray-200 mt-1 rounded shadow-md z-10">
+                        <!-- Results will be injected here -->
+                    </div>
 
                 </div>
             </div>