Fix delete record JS mess

This commit is contained in:
Nicolò P 2024-11-11 17:21:00 +01:00
parent 0a0f553510
commit adee0f6d0f
5 changed files with 49 additions and 19 deletions

View File

@ -5,17 +5,22 @@ import { Controller } from '@hotwired/stimulus';
* [template: {entity}/index.html.twig]
*/
export default class extends Controller {
static targets = ['modal', 'path'];
static targets = ['modal', 'path', 'name', 'message'];
/**
* @todo Refactor with actions for modal
* @param {object} event
*/
show(event) {
warn(event) {
event.preventDefault();
const id = event.currentTarget.getAttribute('data-url').match(/\d+$/)[0];
const modal = this.modalTarget;
const name = this.nameTargets.find(a => a.href.includes(id)).textContent;
const message = `The record '<strong>${name.trim()}</strong>' will be permanently deleted. Proceed?`;
modal.classList.add('is-active');
this.messageTarget.innerHTML = message;
modal.querySelector('.delete').addEventListener('click', () => {
modal.classList.remove('is-active');
});
@ -28,8 +33,8 @@ export default class extends Controller {
}
// Proceed with deletion...
delete(event) {
const delPath = this.pathTarget.href;
delete() {
const delPath = this.pathTarget.getAttribute('data-url');
location.href = delPath;
}
}

View File

@ -0,0 +1,13 @@
import { Controller } from '@hotwired/stimulus';
/**
*/
export default class extends Controller {
static targets = [ 'map',];
static values = {
state: Number,
};
initialize() {
}
}

View File

@ -54,7 +54,11 @@
{% for record in records %}
<tr>
<td><a href="{{ path('app_bibliography', {'id' : record.id}) }}">{{ record.id }}</a></td>
<td><a href="{{ path('app_bibliography', {'id' : record.id}) }}">{{ record.citation }}</a></td>
<td>
<a data-delete-record-target="name" href="{{ path('app_bibliography', {'id' : record.id}) }}">
{{ record.citation }}
</a>
</td>
<td>{{ record.status }}</td>
<td>{{ record.owner }}</td>
<td style="max-width: 350px;">{{ record.reference }}</td>
@ -69,13 +73,13 @@
<i class="fa fa-edit"></i>
</span>
</button>
<a href="{{ path('app_bibliography_del', {'id' : record.id}) }}"
<button data-url="{{ path('app_bibliography_del', {'id' : record.id}) }}"
class="button is-small is-danger" title="Delete record"
data-delete-record-target="path" data-action="click->delete-record#show">
data-delete-record-target="path" data-action="click->delete-record#warn">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
</a>
</button>
</div>
</td>
</tr>
@ -92,7 +96,7 @@
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="is-size-5">This record will be permanently deleted. Proceed?</p>
<p class="is-size-5" data-delete-record-target="message"></p>
</section>
<footer class="modal-card-foot">
<div class="buttons is-right">

View File

@ -53,7 +53,11 @@
{% for record in records %}
<tr>
<td><a href="{{ path('app_collection', {'id' : record.id}) }}">{{ record.id }}</a></td>
<td><a href="{{ path('app_collection', {'id' : record.id}) }}">{{ record.title }}</a></td>
<td>
<a data-delete-record-target="name" href="{{ path('app_collection', {'id' : record.id}) }}">
{{ record.title }}
</a>
</td>
<td>{{ record.status }}</td>
<td>{{ record.owner }}</td>
<td style="max-width: 350px;">{{ record.chronology }}</td>
@ -68,13 +72,13 @@
<i class="fa fa-edit"></i>
</span>
</button>
<a href="{{ path('app_collection_del', {'id' : record.id}) }}"
<button data-url="{{ path('app_collection_del', {'id' : record.id}) }}"
class="button is-small is-danger" title="Delete record"
data-delete-record-target="path" data-action="click->delete-record#show">
data-delete-record-target="path" data-action="click->delete-record#warn">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
</a>
</button>
</div>
</td>
</tr>
@ -91,7 +95,7 @@
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="is-size-5">This record will be permanently deleted. Proceed?</p>
<p class="is-size-5" data-delete-record-target="message"></p>
</section>
<footer class="modal-card-foot">
<div class="buttons is-right">

View File

@ -53,7 +53,11 @@
{% for record in records %}
<tr>
<td><a href="{{ path('app_collector', {'id' : record.id}) }}">{{ record.id }}</a></td>
<td><a href="{{ path('app_collector', {'id' : record.id}) }}">{{ record.name }}</a></td>
<td>
<a data-delete-record-target="name" href="{{ path('app_collector', {'id' : record.id}) }}">
{{ record.name }}
</a>
</td>
<td>{{ record.status }}</td>
<td>{{ record.owner }}</td>
<td style="max-width: 350px;">{{ record.places }}</td>
@ -68,13 +72,13 @@
<i class="fa fa-edit"></i>
</span>
</button>
<a href="{{ path('app_collector_del', {'id' : record.id}) }}"
<button data-url="{{ path('app_collector_del', {'id' : record.id}) }}"
class="button is-small is-danger" title="Delete record"
data-delete-record-target="path" data-action="click->delete-record#show">
data-delete-record-target="path" data-action="click->delete-record#warn">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
</a>
</button>
</div>
</td>
</tr>
@ -91,7 +95,7 @@
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="is-size-5">This record will be permanently deleted. Proceed?</p>
<p class="is-size-5" data-delete-record-target="message"></p>
</section>
<footer class="modal-card-foot">
<div class="buttons is-right">