peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Partial refactor of tags functionality

Browse Source 
Still need to move tags db logic to BP and move workout tag logic to BP as well
This commit is contained in:
Peter Stockings
2025-04-19 21:10:34 +10:00
parent e947feb3e3
commit 7aa7f9b8dc
6 changed files with 180 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
templates/partials/tags.html
View File

@@ -1,23 +1,24 @@
<div class="flex w-full flex-wrap justify-center animate-fadeIn">
{# Container for the tags partial, needed for HTMX swapping #}
<div id="tags-container" class="flex w-full flex-wrap justify-center items-center animate-fadeIn space-x-2">
{# Display Existing Tags #}
{% for t in tags %}
<div data-te-chip-init data-te-ripple-init
class="[word-wrap: break-word] my-[5px] mr-4 flex h-[32px] cursor-pointer items-center justify-between rounded-[16px] border border-[#9fa6b2] bg-[#eceff1] bg-[transparent] py-0 px-[12px] text-[13px] font-normal normal-case leading-loose text-[#4f4f4f] shadow-none transition-[opacity] duration-300 ease-linear hover:border-[#9fa6b2] hover:!shadow-none dark:text-neutral-200"
class="[word-wrap: break-word] my-1 flex h-8 cursor-pointer items-center justify-between rounded-full border border-gray-300 bg-gray-100 py-0 px-3 text-sm font-normal text-gray-700 shadow-none transition-opacity duration-300 ease-linear hover:border-gray-400 hover:shadow-sm dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-200"
data-te-ripple-color="dark">
<span hx-get="{{ url_for('goto_tag') }}" {% if person_id %}
hx-vals='{"filter": "{{ t["tag_filter"] }}", "person_id": "{{ person_id }}"}' {% else %}
hx-vals='{"filter": "{{ t["tag_filter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true">{{
t['tag_name'] }}</span>
{# Tag Name (Clickable to filter) #}
<span class="pr-2" hx-get="{{ url_for('tags.goto_tag') }}"
hx-vals='{"filter": "{{ t.tag_filter }}", "person_id": "{{ person_id | default("", true) }}"}'
hx-target="#container" hx-push-url="true">{{ t.tag_name }}</span>
{# Delete Button #}
<span
class="float-right w-4 cursor-pointer pl-[8px] text-[16px] text-[#afafaf] opacity-[.53] transition-all duration-200 ease-in-out hover:text-[#8b8b8b] dark:text-neutral-400 dark:hover:text-neutral-100"
hx-get="{{ url_for('delete_tag', tag_id=t['tag_id']) }}" {% if person_id %}
hx-vals='{"filter": "{{ t["tag_filter"] }}", "person_id": "{{ person_id }}"}' {% else %}
hx-vals='{"filter": "{{ t["tag_filter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true" _="on htmx:confirm(issueRequest)
halt the event
call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['tag_name'] }} tag?'})
if result.isConfirmed issueRequest()">
class="ml-1 cursor-pointer text-gray-400 hover:text-gray-600 dark:text-neutral-400 dark:hover:text-neutral-100"
hx-delete="{{ url_for('tags.delete_tag', tag_id=t.tag_id) }}" hx-target="#tags-container" {# Target the
container to refresh the list #} hx-swap="outerHTML" {# Replace the whole container #}
hx-confirm="Are you sure you want to delete the '{{ t.tag_name }}' tag?"
hx-vals='{"person_id": "{{ person_id | default("", true) }}", "current_filter": "{{ request.query_string | default("", true) }}"}'>
{# Pass context if needed by backend #}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-3 w-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -26,52 +27,44 @@
</div>
{% endfor %}
<div class="flex justify-center space-x-2">
<div>
<button type="button" data-te-ripple-init data-te-ripple-color="light"
class="inline-block rounded-full bg-primary p-2 uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
id="add-tag">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
{# Add Tag Section - Initially Hidden Button, reveals Form #}
<div id="add-tag-section" class="my-1">
{# Show Add Button #}
<button id="show-add-tag-form-btn"
class="inline-block rounded-full bg-blue-500 p-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-600 hover:shadow-lg focus:bg-blue-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-700 active:shadow-lg"
_="on click toggle .hidden on #add-tag-form then toggle .hidden on me">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
{# Add Tag Form (Initially Hidden) #}
<form id="add-tag-form" class="hidden flex items-center space-x-1" hx-post="{{ url_for('tags.add_tag') }}"
hx-target="#tags-container" {# Target the container to refresh the list #} hx-swap="outerHTML" {# Replace
the whole container #}
_="on htmx:afterRequest toggle .hidden on #show-add-tag-form-btn then toggle .hidden on me then set me.tag_name.value to ''">
{# Hide form, show button, clear input after submit #}
<input type="hidden" name="person_id" value="{{ person_id | default('', true) }}">
<input type="hidden" name="current_filter" value="{{ request.query_string.decode() | default('', true) }}">
{# Pass
context
if needed #}
<input type="text" name="tag_name" required
class="h-8 rounded border border-gray-300 px-2 text-sm focus:border-blue-500 focus:ring-blue-500"
placeholder="New tag...">
<button type="submit"
class="inline-block rounded bg-green-500 px-3 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg">
Add
</button>
</div>
<button type="button"
class="inline-block rounded bg-gray-400 px-3 py-1.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-gray-500 hover:shadow-lg focus:bg-gray-500 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-600 active:shadow-lg"
_="on click toggle .hidden on #show-add-tag-form-btn then toggle .hidden on the closest <form/>">
Cancel
</button>
</form>
</div>
</div>
<script>
document.querySelector('#add-tag').addEventListener('click', function () {
Swal.fire({
title: 'Create a tag',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Add',
showLoaderOnConfirm: true,
preConfirm: (tag) => {
return fetch(`{{ url_for('add_tag') }}?tag=${encodeURIComponent(tag)}&filter=${encodeURIComponent(window.location.search)}{% if person_id %}{{ "&person_id={person_id}".format(person_id=person_id) | safe }} {% endif%}`)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.text()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
htmx.ajax('GET', `{{ (url_for('person_overview', person_id=person_id) if person_id else url_for('dashboard')) + '?' + request.query_string.decode() }}`, '#container')
}
})
})
</script>
</div>