E.Noorlander/Collections
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add development documentation and enhance SPA navigation with category/item detail views

Browse Source 
- Add DEVELOPMENT.md with complete LXC environment setup guide
- Implement dynamic category tree with item navigation in sidebar
- Add category detail view with items list via AJAX
- Add item edit form with delete functionality
- Enhance SPA routing to support query parameters for categories/items
- Update Bootstrap styling with icons and improved navigation
- Include SQLite database in repository for development
This commit is contained in:
Edwin Noorlander
2025-11-12 09:51:01 +01:00
parent deb27490c2
commit 9f9617ca45
11 changed files with 499 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/partials/category_detail.twig Normal file
View File

@@ -0,0 +1,39 @@
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>{{ category.name }}</h2>
<button class="btn btn-primary" onclick="fetchContent('/parts')">Add New Item</button>
</div>
<div class="card">
<div class="card-header">
<h5 class="mb-0">Items in this Category</h5>
</div>
<div class="card-body">
{% if items|length > 0 %}
<div class="list-group">
{% for item in items %}
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1">{{ item.name }}</h6>
{% if item.description %}
<p class="mb-1 text-muted">{{ item.description }}</p>
{% endif %}
{% if item.location %}
<small class="text-muted">📍 {{ item.location }}</small>
{% endif %}
</div>
<div>
<button class="btn btn-sm btn-outline-primary edit-btn" data-id="{{ item.id }}">Edit</button>
<button class="btn btn-sm btn-outline-danger delete-btn" data-id="{{ item.id }}">Delete</button>
{% if item.id_code %}
<a href="/print/{{ item.id }}" target="_blank" class="btn btn-sm btn-outline-secondary">QR</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-muted">No items in this category yet.</p>
<button class="btn btn-primary" onclick="fetchContent('/parts')">Add First Item</button>
{% endif %}
</div>
</div>

58
templates/partials/item_edit.twig Normal file
View File

@@ -0,0 +1,58 @@
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Edit Item: {{ item.name }}</h2>
<button class="btn btn-secondary" onclick="fetchContent('/')">Back to Overview</button>
</div>
<form id="editItemForm">
<input type="hidden" id="edit_item_id" value="{{ item.id }}">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="edit_item_name" class="form-label">Name *</label>
<input type="text" class="form-control" id="edit_item_name" value="{{ item.name }}" required>
</div>
<div class="mb-3">
<label for="edit_item_category_id" class="form-label">Category</label>
<select class="form-select" id="edit_item_category_id">
<option value="">-- Select Category --</option>
{% for category in categories %}
<option value="{{ category.id }}" {% if category.id == item.category_id %}selected{% endif %}>{{ category.path }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="edit_location" class="form-label">Location</label>
<input type="text" class="form-control" id="edit_location" value="{{ item.location }}">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="edit_item_description" class="form-label">Description</label>
<textarea class="form-control" id="edit_item_description" rows="4">{{ item.description }}</textarea>
</div>
<div class="mb-3">
<label for="edit_image" class="form-label">Image</label>
<input type="file" class="form-control" id="edit_image" accept="image/*">
<div id="current_image" class="mt-2">
{% if item.image %}
<p>Current image:</p>
<img src="{{ item.image }}" style="max-width: 100px;">
{% else %}
<p>No image</p>
{% endif %}
</div>
</div>
</div>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-primary" id="saveEditItemBtn">Save Changes</button>
<button type="button" class="btn btn-danger" id="deleteItemBtn">Delete Item</button>
<button type="button" class="btn btn-secondary" onclick="fetchContent('/')">Cancel</button>
</div>
</form>