jkrauss/sigl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update and harmonize views

Browse Source
This commit is contained in:
Jonathan Krauss
2022-07-14 11:04:55 -07:00
parent 2d313a9e75
commit 20977b2378
6 changed files with 96 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
sigl/templates/lists/addItem.html.j2
View File

@@ -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>

12
sigl/templates/lists/create.html.j2
View File

@@ -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>

26
sigl/templates/lists/detail.html.j2
View File

@@ -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="w-full flex items-center justify-between px-2 py-2">
<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 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 %}
<div x-show="notesOpen" class="p-2 text-sm w-full">{{ entry.notes }}</div>
{% endif %}
{% if entry.product.notes %}
<div x-show="notesOpen" class="p-2 text-sm w-full">{{ entry.product.notes }}</div>
{% if entry.notes or entry.product.notes %}
<div x-show="notesOpen" class="p-2 text-sm w-full">
{% if entry.notes %}<p>{{ entry.notes }}</p>{% endif %}
{% if entry.product.notes %}<p>{{ entry.product.notes }}</p>{% endif %}
</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.')) {

32
sigl/templates/lists/editItem.html.j2
View File

@@ -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="text-sm font-bold text-gray-800">Edit Item in {{ 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 class="flex flex-col justify-start items-start sm:flex-row sm:justify-between sm:items-center sm:py-1">
<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 w-full sm:w-auto shrink-0 justify-between items-start py-1">
</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 items-center justify-between w-full">
<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 %}

24
sigl/templates/lists/update.html.j2
View File

@@ -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>

28
sigl/views/lists.py
View File

@@ -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_entry_set_crossedOff,
list_update, list_addItem, list_deleteItem, list_editItem, list_stores,
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))