68 lines
3.5 KiB
Django/Jinja
68 lines
3.5 KiB
Django/Jinja
{% extends 'base.html.j2' %}
|
|
{% block title %}{{ list.name }} | Sigl{% endblock %}
|
|
{% block header %}
|
|
<div class="flex justify-between items-center py-1">
|
|
<div class="font-bold text-gray-800">Add Item to {{ list.name }}</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block head_scripts %}
|
|
<script src="https://unpkg.com/@jadetree/ui/dist/components/autocomplete.iife.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/@jadetree/ui/css/index.css" />
|
|
{% endblock %}
|
|
{% block main %}
|
|
<form method="post">
|
|
<div class="py-2 px-4 flex flex-col">
|
|
<fieldset class="flex flex-col" x-data="{productName:'',newProduct:false}">
|
|
<legend class="sr-only">Select Product to Add</legend>
|
|
<div class="flex flex-col pb-4">
|
|
<label for="product" class="py-1 text-sm text-gray-700 font-semibold">Product:</label>
|
|
<jt-autocomplete clearable>
|
|
<input id="product" name="productName" class="p-1 border border-gray-200 rounded" list="product-list" x-model="productName" @blur="newProduct=!isExistingProduct(productName)" />
|
|
</jt-autocomplete>
|
|
<span class="text-sm text-blue-300" x-show="newProduct">New Product</span>
|
|
</div>
|
|
<div class="flex flex-row align-center justify-start gap-2 pb-4" x-show="newProduct">
|
|
<input type="checkbox" id="rememberProduct" name="remember" checked />
|
|
<label for="rememberProduct" class="text-sm text-gray-700 font-semibold">Remember Product</label>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row sm:justify-between" x-show="newProduct">
|
|
<div class="w-full flex flex-col pb-4">
|
|
<label for="productCategory" class="py-1 text-sm text-gray-700 font-semibold">Category:</label>
|
|
<input type="text" id="productCategory" name="productCategory" class="p-1 border border-gray-200 rounded" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="flex flex-col pb-4">
|
|
<label for="quantity" class="py-1 text-sm text-gray-700 font-semibold">Quantity:</label>
|
|
<input type="text" name="quantity" id="quantity" class="p-1 border border-gray-200 rounded" />
|
|
</div>
|
|
<div class="flex flex-col pb-4">
|
|
<label for="notes" class="py-1 text-sm text-gray-700 font-semibold">Notes:</label>
|
|
<textarea name="notes" id="notes" class="p-1 border border-gray-200 rounded"></textarea>
|
|
</div>
|
|
<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-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-white bg-blue-600 hover:bg-blue-700">Add Item</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<datalist id="product-list">
|
|
{% for p in products|sort(attribute='category')|sort(attribute='name') %}
|
|
<option{% if p.category %} data-category="{{ p.category }}"{% endif %}>{{ p.name }}</option>
|
|
{% endfor %}
|
|
</datalist>
|
|
{% endblock %}
|
|
{% block body_scripts %}
|
|
<script language="javascript">
|
|
function isExistingProduct(product) {
|
|
if (!product) return true;
|
|
const products = Array.from(document.querySelectorAll('#product-list option'))
|
|
.map((opt) => opt.textContent.toLowerCase().trim());
|
|
return products.includes(product.toLowerCase().trim());
|
|
}
|
|
</script>
|
|
{% endblock %} |