starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-08 22:05:11 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: add Swal as a hyperscript behavior

Browse Source
This commit is contained in:
Herculino Trotta
2024-10-14 23:20:09 -03:00
parent aee9f39e20
commit b28e88b9cd
9 changed files with 74 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/account_groups/pages/list.html
+6 -18
View File
@@ -44,24 +44,12 @@
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}" data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'account_group_delete' pk=account_group.id %}" hx-delete="{% url 'account_group_delete' pk=account_group.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
if event.ctrlKey trigger delete_confirmed data-title="{% translate "Are you sure?" %}"
else data-text="{% translate "You won't be able to revert this!" %}"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-confirm-text="{% translate "Yes, delete it!" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a></td>
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed"><i class="fa-solid fa-trash fa-fw"></i></a></td>
<td class="col">{{ account_group.name }}</td> <td class="col">{{ account_group.name }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
app/templates/accounts/pages/list.html
+6 -18
View File
@@ -47,24 +47,12 @@
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}" data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'account_delete' pk=account.id %}" hx-delete="{% url 'account_delete' pk=account.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
if event.ctrlKey trigger delete_confirmed data-title="{% translate "Are you sure?" %}"
else data-text="{% translate "You won't be able to revert this!" %}"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-confirm-text="{% translate "Yes, delete it!" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a></td>
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed"><i class="fa-solid fa-trash fa-fw"></i></a></td>
<td class="col">{{ account.name }}</td> <td class="col">{{ account.name }}</td>
<td class="col-auto">{{ account.currency }} ({{ account.currency.code }})</td> <td class="col-auto">{{ account.currency }} ({{ account.currency.code }})</td>
<td class="col-auto">{% if account.exchange_currency %}{{ account.exchange_currency }} ( <td class="col-auto">{% if account.exchange_currency %}{{ account.exchange_currency }} (
app/templates/categories/pages/list.html
+6 -18
View File
@@ -45,24 +45,12 @@
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}" data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'category_delete' category_id=category.id %}" hx-delete="{% url 'category_delete' category_id=category.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
if event.ctrlKey trigger delete_confirmed data-title="{% translate "Are you sure?" %}"
else data-text="{% translate "You won't be able to revert this!" %}"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-confirm-text="{% translate "Yes, delete it!" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a></td>
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed"><i class="fa-solid fa-trash fa-fw"></i></a></td>
<td class="col-auto text-center"> <td class="col-auto text-center">
{% if category.mute %}<i class="fa-solid fa-circle text-success"></i>{% endif %} {% if category.mute %}<i class="fa-solid fa-circle text-success"></i>{% endif %}
</td> </td>
app/templates/currencies/pages/list.html
+6 -18
View File
@@ -45,24 +45,12 @@
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}" data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'currency_delete' pk=currency.id %}" hx-delete="{% url 'currency_delete' pk=currency.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
if event.ctrlKey trigger delete_confirmed data-title="{% translate "Are you sure?" %}"
else data-text="{% translate "You won't be able to revert this!" %}"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-confirm-text="{% translate "Yes, delete it!" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a></td>
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed"><i class="fa-solid fa-trash fa-fw"></i></a></td>
<td class="col-auto">{{ currency.code }}</td> <td class="col-auto">{{ currency.code }}</td>
<td class="col">{{ currency.name }}</td> <td class="col">{{ currency.name }}</td>
</tr> </tr>
app/templates/includes/scripts.html
+1
View File
@@ -9,6 +9,7 @@
{% include 'includes/scripts/hyperscript/tooltip.html' %} {% include 'includes/scripts/hyperscript/tooltip.html' %}
{% include 'includes/scripts/hyperscript/htmx_error_handler.html' %} {% include 'includes/scripts/hyperscript/htmx_error_handler.html' %}
{% include 'includes/scripts/hyperscript/sounds.html' %} {% include 'includes/scripts/hyperscript/sounds.html' %}
{% include 'includes/scripts/hyperscript/swal.html' %}
{% javascript_pack 'htmx' attrs="defer" %} {% javascript_pack 'htmx' attrs="defer" %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
app/templates/includes/scripts/hyperscript/swal.html
+22
View File
@@ -0,0 +1,22 @@
{% load i18n %}
<script type="text/hyperscript">
behavior prompt_swal
on click
if @data-bypass-on-ctrl === 'true' and event.ctrlKey then trigger confirmed
else
call Swal.fire({title: @data-title,
text: @data-text,
icon: @data-icon or 'warning',
showCancelButton: @data-cancel-button or 'true',
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: @data-cancel-text or '{% translate 'Cancel' %}',
confirmButtonText: @data-confirm-text or '{% translate 'Confirm' %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger confirmed
end
</script>
app/templates/monthly_overview/fragments/list.html
+8 -1
View File
@@ -64,8 +64,15 @@
<button class="btn btn-secondary" <button class="btn btn-secondary"
hx-get="{% url 'transactions_bulk_delete' %}" hx-get="{% url 'transactions_bulk_delete' %}"
hx-include=".transaction" hx-include=".transaction"
hx-trigger="confirmed"
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate 'Delete' %}"><i class="fa-solid fa-trash text-danger"></i> data-bs-title="{% translate 'Delete' %}"
data-bypass-on-ctrl="true"
data-title="{% translate "Are you sure?" %}"
data-text="{% translate "You won't be able to revert this!" %}"
data-confirm-text="{% translate "Yes, delete them!" %}"
_="install prompt_swal">
<i class="fa-solid fa-trash text-danger"></i>
</button> </button>
</div> </div>
</div> </div>
app/templates/tags/pages/list.html
+6 -18
View File
@@ -44,24 +44,12 @@
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}" data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'tag_delete' tag_id=tag.id %}" hx-delete="{% url 'tag_delete' tag_id=tag.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
if event.ctrlKey trigger delete_confirmed data-title="{% translate "Are you sure?" %}"
else data-text="{% translate "You won't be able to revert this!" %}"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-confirm-text="{% translate "Yes, delete it!" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a></td>
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed"><i class="fa-solid fa-trash fa-fw"></i></a></td>
<td class="col">{{ tag.name }}</td> <td class="col">{{ tag.name }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
app/templates/transactions/fragments/item.html
+13 -34
View File
@@ -83,24 +83,13 @@
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
data-bs-title="{% translate "Delete" %}" data-bs-title="{% translate "Delete" %}"
hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}" hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
if event.ctrlKey trigger delete_confirmed data-title="{% translate "Are you sure?" %}"
else data-text="{% translate "You won't be able to revert this!" %}"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-confirm-text="{% translate "Yes, delete it!" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i>
icon: 'warning', </a>
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed"><i class="fa-solid fa-trash fa-fw"></i></a>
</div> </div>
{# Item actions dropdown fallback for mobile#} {# Item actions dropdown fallback for mobile#}
<div class="dropdown !tw-absolute tw-top-0 tw-right-0 xl:tw-invisible"> <div class="dropdown !tw-absolute tw-top-0 tw-right-0 xl:tw-invisible">
@@ -119,22 +108,12 @@
<li><a class="dropdown-item" <li><a class="dropdown-item"
role="button" role="button"
hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}" hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
hx-trigger='delete_confirmed' hx-trigger='confirmed'
_="on click data-bypass-on-ctrl="true"
call Swal.fire({title: '{% translate 'Are you sure?' %}', data-title="{% translate "Are you sure?" %}"
text: '{% blocktranslate %}You won\'t be able to revert this!{% endblocktranslate %}', data-text="{% translate "You won't be able to revert this!" %}"
icon: 'warning', data-confirm-text="{% translate "Yes, delete it!" %}"
showCancelButton: true, _="install prompt_swal">
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '{% blocktranslate %}Cancel{% endblocktranslate %}',
confirmButtonText: '{% blocktranslate %}Yes, delete it!{% endblocktranslate %}',
customClass: {
confirmButton: 'btn btn-primary me-3',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false})
if result.isConfirmed trigger delete_confirmed">
<i class="fa-solid fa-trash me-3"></i>{% translate "Delete" %} <i class="fa-solid fa-trash me-3"></i>{% translate "Delete" %}
</a></li> </a></li>
</ul> </ul>