Update and harmonize views

sigl/templates/lists/addItem.html.j2

@@ -3,11 +3,6 @@
 {% block header %}
 <div class="flex justify-between items-center py-1">
     <div class="text-sm font-bold text-gray-800">Add Item to {{ list.name }}</div>
-    <div class="flex justify-start items-start">
-        <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-xs text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
-            Cancel
-        </a>
-    </div>
 </div>
 {% endblock %}
 {% block main %}
@@ -44,7 +39,12 @@
             <label for="notes" class="py-1 text-xs text-gray-700 font-semibold">Notes:</label>
             <textarea name="notes" id="notes" class="p-1 text-sm border border-gray-200 rounded"></textarea>
         </div>
-        <div class="flex justify-end">
+        <div class="flex items-center justify-between">
+            <div class="flex justify-start items-start">
+                <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-sm text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
+                    Cancel
+                </a>
+            </div>
             <button type="submit" class="px-2 py-1 border rounded text-sm text-white bg-blue-600 hover:bg-blue-700">Add Item</button>
         </div>
     </div>

sigl/templates/lists/create.html.j2

@@ -3,11 +3,6 @@
 {% block header %}
 <div class="flex justify-between items-center py-1">
     <div class="text-sm font-bold text-gray-800">Create New List</div>
-    <div class="flex justify-start items-start">
-        <a href="{{ url_for('lists.home') }}" class="px-2 py-1 text-xs text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
-            Cancel
-        </a>
-    </div>
 </div>
 {% endblock %}
 {% block main %}
@@ -21,7 +16,12 @@
             <label for="notes" class="py-1 text-xs text-gray-700 font-semibold">Notes:</label>
             <textarea name="notes" id="notes" class="p-1 text-sm border border-gray-200 rounded"></textarea>
         </div>
-        <div class="flex justify-end">
+        <div class="flex items-center justify-between">
+            <div class="flex justify-start items-start">
+                <a href="{{ url_for('lists.home') }}" class="px-2 py-1 text-sm text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
+                    Cancel
+                </a>
+            </div>
             <button type="submit" class="px-2 py-1 border rounded text-sm text-white bg-blue-600 hover:bg-blue-700">Create</button>
         </div>
     </div>

sigl/templates/lists/detail.html.j2

@@ -34,8 +34,8 @@
 </div>
 {% endblock %}
 {% block main %}
-<div class="fixed bottom-0 flex max-w-3xl w-full mx-auto bg-white md:border-l md:border-r border-b md:rounded-b border-gray-300">
+<div class="fixed bottom-0 flex flex-col sm:flex-row max-w-3xl w-full mx-auto bg-white md:border-l md:border-r border-b md:rounded-b border-gray-300">
-    <div class="w-full flex items-center justify-between px-2 py-2">
+    <div class="w-full flex flex-grow items-center justify-between px-2 py-2 border-b sm:border-none">
         <label for="sorting" class="font-bold">Sort By: </label>
         <select name="sorting" id="sorting" class="flex-grow ml-2 p-1 bg-white border rounded" onchange="changeSorting(event)">
             <option value="none"{% if sortBy == 'none' %} selected="selected"{% endif %}>None</option>
@@ -45,6 +45,9 @@
 {% endfor %}
         </select>
     </div>
+    <div class="flex shrink-0 w-full sm:w-fit items-center justify-center px-2 py-2">
+        <button class="px-2 py-1 text-sm text-white bg-red-600 hover:bg-red-700 border rounded flex justify-between items-center" onclick="deleteCrossedOff()">Delete Crossed-Off Items</button>
+    </div>
 </div>
 {% if list.entries|length == 0 %}
 <div class="py-2 bg-white">
@@ -66,7 +69,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5" :class="{'text-gray-200':!crossedOff,'text-gray-600':crossedOff}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
-            <div @click.prevent :class="{'line-through':crossedOff}">{{ entry.product.name }}{% if entry.quantity %}<span class="text-gray-600"> | {{ entry.quantity }}</span>{% endif %}</div>
+            <div class="pointer-events-none" :class="{'line-through':crossedOff}">{{ entry.product.name }}{% if entry.quantity %}<span class="text-gray-600"> | {{ entry.quantity }}</span>{% endif %}</div>
         </div>
         <div class="flex items-center justify-end">
             <div class="mr-2 text-sm text-gray-600">{% if bin %}Bin {{ bin }}{% endif %}</div>
@@ -87,11 +90,11 @@
             </a>
         </div>
     </div>
-{% if entry.notes %}
+{% if entry.notes or entry.product.notes %}
-    <div x-show="notesOpen" class="p-2 text-sm w-full">{{ entry.notes }}</div>
+    <div x-show="notesOpen" class="p-2 text-sm w-full">
-{% endif %}
+        {% if entry.notes %}<p>{{ entry.notes }}</p>{% endif %}
-{% if entry.product.notes %}
+        {% if entry.product.notes %}<p>{{ entry.product.notes }}</p>{% endif %}
-    <div x-show="notesOpen" class="p-2 text-sm w-full">{{ entry.product.notes }}</div>
+    </div>
 {% endif %}
 </li>
 {%- endmacro %}
@@ -124,6 +127,7 @@
 {% endif %}
 {% endif %}
 <form action="{{ url_for('lists.delete', id=list.id) }}" method="post" id="delete-list-form"></form>
+<form action="{{ url_for('lists.deleteCrossedOff', id=list.id) }}" method="post" id="delete-crossedOff-form"></form>
 <script language="javascript">
 function changeSorting(e) {
     const value = e.target.value;
@@ -134,6 +138,12 @@ function changeSorting(e) {
         window.location = `?sort=${encodeURIComponent(sort)}`;
     }
 }
+function deleteCrossedOff() {
+    const form = document.getElementById('delete-crossedOff-form');
+    if (form && confirm('Are you sure you want to delete crossed-off items from "{{ list.name }}"? This cannot be undone.')) {
+        form.submit();
+    }
+}
 function deleteList() {
     const form = document.getElementById('delete-list-form');
     if (form && confirm('Are you sure you want to delete list "{{ list.name }}"? This cannot be undone.')) {

sigl/templates/lists/editItem.html.j2

@@ -1,12 +1,10 @@
 {% extends 'base.html.j2' %}
 {% block title %}{{ list.name }} | Sigl{% endblock %}
 {% block header %}
-<div class="flex justify-between items-center py-1">
+<div class="flex flex-col justify-start items-start sm:flex-row sm:justify-between sm:items-center sm:py-1">
-    <div class="text-sm font-bold text-gray-800">Edit Item in {{ list.name }}</div>
+    <div class="text-sm w-full text-gray-800 py-1 border-b sm:border-none">Edit <span class="font-bold ">{{ entry.product.name }}</span> in <span class="font-bold ">{{ list.name }}</span></div>
-    <div class="flex justify-start items-start">
+    <div class="flex w-full sm:w-auto shrink-0 justify-between items-start py-1">
-        <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-xs text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
+        
-            Cancel
-        </a>
     </div>
 </div>
 {% endblock %}
@@ -21,9 +19,31 @@
             <label for="notes" class="py-1 text-xs text-gray-700 font-semibold">Notes:</label>
             <textarea name="notes" id="notes" class="p-1 text-sm border border-gray-200 rounded">{{ entry.notes or '' }}</textarea>
         </div>
-        <div class="flex justify-end">
+        <div class="flex items-center justify-between w-full">
-            <button type="submit" class="px-2 py-1 border rounded text-sm text-white bg-blue-600 hover:bg-blue-700">Update Item</button>
+            <div class="flex items-center">
+                <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-sm text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
+                    Cancel
+                </a>
+                <button id="delete-list-btn" class="flex ml-2 px-2 py-1 text-sm text-white bg-red-600 hover:bg-red-700 border rounded flex justify-between items-center" onclick="deleteItem()">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="pr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                    Delete Item
+                </button>
+            </div>
+            <div class="flex justify-end">
+                <button type="submit" class="px-2 py-1 border rounded text-sm text-white bg-blue-600 hover:bg-blue-700">Update Item</button>
+            </div>
         </div>
     </div>
 </form>
+<form action="{{ url_for('lists.deleteItem', listId=list.id, entryId=entry.id) }}" method="post" id="delete-item-form"></form>
+<script language="javascript">
+function deleteItem() {
+    const form = document.getElementById('delete-item-form');
+    if (form && confirm('Are you sure you want to delete item "{{ entry.product.name }}" from the list?')) {
+        form.submit();
+    }
+}
+</script>
 {% endblock %}

sigl/templates/lists/update.html.j2

@@ -3,17 +3,6 @@
 {% block header %}
 <div class="flex justify-between items-center py-2">
     <div class="text-lg font-bold text-gray-800">Edit {{ list.name }}</div>
-    <div class="flex justify-start items-start">
-        <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-xs text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
-            Cancel
-        </a>
-        <button id="delete-list-btn" class="ml-2 px-2 py-1 text-xs text-white bg-red-600 hover:bg-red-700 border rounded flex justify-between items-center" onclick="deleteList()">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-            </svg>
-            Delete List
-        </a>
-    </div>
 </div>
 {% endblock %}
 {% block main %}
@@ -27,7 +16,18 @@
             <label for="notes" class="py-1 text-xs text-gray-700 font-semibold">Notes:</label>
             <textarea name="notes" id="notes" class="p-1 text-sm border border-gray-200 rounded">{{ list.notes or '' }}</textarea>
         </div>
-        <div class="flex justify-end">
+        <div class="flex items-center justify-between">
+            <div class="flex justify-start items-start">
+                <a href="{{ url_for('lists.detail', id=list.id) }}" class="px-2 py-1 text-sm text-white bg-gray-600 hover:bg-gray-700 border rounded flex justify-between items-center">
+                    Cancel
+                </a>
+                <button id="delete-list-btn" class="ml-2 px-2 py-1 text-sm text-white bg-red-600 hover:bg-red-700 border rounded flex justify-between items-center" onclick="deleteList()">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                    Delete List
+                </button>
+            </div>
             <button type="submit" class="px-2 py-1 border rounded text-sm text-white bg-blue-600 hover:bg-blue-700">Update</button>
         </div>
     </div>

sigl/views/lists.py

@@ -13,8 +13,8 @@ from sigl.exc import DomainError, Error, NotFoundError
 from sigl.database import db
 from sigl.domain.service import (
     list_entry_by_id, lists_all, list_by_id, list_create, list_delete,
-    list_update, list_addItem, list_editItem, list_stores, 
+    list_update, list_addItem, list_deleteItem, list_editItem, list_stores, 
-    list_entry_set_crossedOff,
+    list_deleteCrossedOff, list_entry_set_crossedOff,
     products_all,
 )
 
@@ -145,6 +145,17 @@ def delete(id):
     return redirect(url_for('lists.home'))
 
 
+@bp.route('/lists/<int:id>/deleteCrossedOff', methods=('POST', ))
+def deleteCrossedOff(id):
+    """Delete all Crossed-Off Items on a Shopping List."""
+    try:
+        list_deleteCrossedOff(db.session, id)
+    except Error as e:
+        flash(str(e), 'error')
+
+    return redirect(url_for('lists.detail', id=id))
+
+
 @bp.route('/lists/<int:id>/crossOff', methods=('POST', ))
 def crossOff(id):
     """Cross Off an Item from a Shopping List.
@@ -259,3 +270,16 @@ def editItem(listId, entryId):
         list=entry.shoppingList,
         entry=entry,
     )
+
+
+@bp.route('/lists/<int:listId>/deleteItem/<int:entryId>', methods=('POST', ))
+def deleteItem(listId, entryId):
+    """Delete an Item from a Shopping List."""
+    try:
+        list_deleteItem(db.session, listId, entryId)
+        return redirect(url_for('lists.detail', id=listId))
+
+    except Error as e:
+        flash(str(e), 'error')
+
+    return redirect(url_for('lists.editItem', listId=listId, entryId=entryId))