Stimulus controller to delete record
This commit is contained in:
parent
4e52ea48f6
commit
36185d0539
36
assets/controllers/delete_record_controller.js
Normal file
36
assets/controllers/delete_record_controller.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { Controller } from '@hotwired/stimulus';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show warning before deleting record
|
||||||
|
* [template: {entity}/index.html.twig]
|
||||||
|
*/
|
||||||
|
export default class extends Controller {
|
||||||
|
static targets = ['modal', 'path'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @todo Refactor with actions for modal
|
||||||
|
* @param {object} event
|
||||||
|
*/
|
||||||
|
show(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const modal = this.modalTarget;
|
||||||
|
|
||||||
|
modal.classList.add('is-active');
|
||||||
|
modal.querySelector('.delete').addEventListener('click', () => {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
modal.querySelector('.modal-background').addEventListener('click', () => {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
modal.querySelector('#cancel').addEventListener('click', () => {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
// Proceed with deletion...
|
||||||
|
delete(event) {
|
||||||
|
const delPath = this.pathTarget.href;
|
||||||
|
location.href = delPath;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -3,7 +3,7 @@
|
|||||||
{% block title %}Bibliography - {{ record.citation }} | ArCOA{% endblock %}
|
{% block title %}Bibliography - {{ record.citation }} | ArCOA{% endblock %}
|
||||||
|
|
||||||
{% block rightpanel %}
|
{% block rightpanel %}
|
||||||
<div class="container" style="max-width: 60vw">
|
<div class="container" style="max-width: 60vw" data-controller="delete-record">
|
||||||
<h1 class="is-size-1 mt-0 has-text-centered">Bibliography</h1>
|
<h1 class="is-size-1 mt-0 has-text-centered">Bibliography</h1>
|
||||||
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.citation }}</h2>
|
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.citation }}</h2>
|
||||||
|
|
||||||
@ -34,7 +34,9 @@
|
|||||||
<i class="fa fa-copy"></i>
|
<i class="fa fa-copy"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<a href="{{ path('app_bibliography_del', {'id' : record.id}) }}" class="button is-danger" id="del-record">
|
<a href="{{ path('app_bibliography_del', {'id' : record.id}) }}"
|
||||||
|
class="button is-danger"
|
||||||
|
data-delete-record-target="path" data-action="click->delete-record#show">
|
||||||
Delete
|
Delete
|
||||||
<span class="icon ml-2">
|
<span class="icon ml-2">
|
||||||
<i class="fa fa-trash"></i>
|
<i class="fa fa-trash"></i>
|
||||||
@ -63,55 +65,26 @@
|
|||||||
Some stuff...
|
Some stuff...
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal" data-delete-record-target="modal">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<span class="icon is-large has-text-warning">
|
||||||
|
<i class="fa fa-warning fa-2x"></i>
|
||||||
|
</span>
|
||||||
|
<p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<div class="buttons is-right">
|
||||||
|
<button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
|
||||||
|
<button class="button is-light" id="cancel">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal">
|
|
||||||
<div class="modal-background"></div>
|
|
||||||
<div class="modal-card">
|
|
||||||
<header class="modal-card-head">
|
|
||||||
<span class="icon is-large has-text-warning">
|
|
||||||
<i class="fa fa-warning fa-2x"></i>
|
|
||||||
</span>
|
|
||||||
<p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
|
|
||||||
<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>
|
|
||||||
</section>
|
|
||||||
<footer class="modal-card-foot">
|
|
||||||
<div class="buttons is-right">
|
|
||||||
<button class="button is-link" id="confirm-del">Confirm</button>
|
|
||||||
<button class="button is-light" id="cancel">Cancel</button>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript" defer>
|
|
||||||
const del = document.querySelector('#del-record');
|
|
||||||
const delPath = del.href;
|
|
||||||
|
|
||||||
del.addEventListener('click', event => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
const modal = document.querySelector('.modal');
|
|
||||||
modal.classList.add('is-active');
|
|
||||||
|
|
||||||
modal.querySelector('.delete').addEventListener('click', () => {
|
|
||||||
modal.classList.remove('is-active');
|
|
||||||
});
|
|
||||||
modal.querySelector('.modal-background').addEventListener('click', () => {
|
|
||||||
modal.classList.remove('is-active');
|
|
||||||
});
|
|
||||||
modal.querySelector('#cancel').addEventListener('click', () => {
|
|
||||||
modal.classList.remove('is-active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Proceed with deletion...
|
|
||||||
modal.querySelector('#confirm-del').addEventListener('click', () => {
|
|
||||||
location.href = delPath;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
{% block title %}Collection - {{ record.title }} | ArCOA{% endblock %}
|
{% block title %}Collection - {{ record.title }} | ArCOA{% endblock %}
|
||||||
|
|
||||||
{% block rightpanel %}
|
{% block rightpanel %}
|
||||||
<div class="container" style="max-width: 60vw">
|
<div class="container" style="max-width: 60vw" data-controller="delete-record">
|
||||||
<h1 class="is-size-1 mt-0 has-text-centered">Collection</h1>
|
<h1 class="is-size-1 mt-0 has-text-centered">Collection</h1>
|
||||||
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.title }}</h2>
|
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.title }}</h2>
|
||||||
|
|
||||||
@ -19,27 +19,29 @@
|
|||||||
<div class="card p-5">
|
<div class="card p-5">
|
||||||
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
|
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half"></div>
|
<div class="column is-half"></div>
|
||||||
<div class="column has-text-right">
|
<div class="column has-text-right">
|
||||||
<button class="button is-link">
|
<button class="button is-link">
|
||||||
Edit
|
Edit
|
||||||
<span class="icon ml-2">
|
<span class="icon ml-2">
|
||||||
<i class="fa fa-edit"></i>
|
<i class="fa fa-edit"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-link">
|
<button class="button is-link">
|
||||||
Copy
|
Copy
|
||||||
<span class="icon ml-2">
|
<span class="icon ml-2">
|
||||||
<i class="fa fa-copy"></i>
|
<i class="fa fa-copy"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-danger">
|
<a href="{{ path('app_collection_del', {'id' : record.id}) }}"
|
||||||
Delete
|
class="button is-danger"
|
||||||
<span class="icon ml-2">
|
data-delete-record-target="path" data-action="click->delete-record#show">
|
||||||
<i class="fa fa-trash"></i>
|
Delete
|
||||||
</span>
|
<span class="icon ml-2">
|
||||||
</button>
|
<i class="fa fa-trash"></i>
|
||||||
</div>
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="tabs is-boxed is-fullwidth">
|
<div class="tabs is-boxed is-fullwidth">
|
||||||
@ -83,7 +85,27 @@
|
|||||||
</table>
|
</table>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal" data-delete-record-target="modal">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<span class="icon is-large has-text-warning">
|
||||||
|
<i class="fa fa-warning fa-2x"></i>
|
||||||
|
</span>
|
||||||
|
<p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<div class="buttons is-right">
|
||||||
|
<button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
|
||||||
|
<button class="button is-light" id="cancel">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript" defer></script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -3,7 +3,7 @@
|
|||||||
{% block title %}Collector - {{ record.name }} | ArCOA{% endblock %}
|
{% block title %}Collector - {{ record.name }} | ArCOA{% endblock %}
|
||||||
|
|
||||||
{% block rightpanel %}
|
{% block rightpanel %}
|
||||||
<div class="container" style="max-width: 60vw">
|
<div class="container" style="max-width: 60vw" data-controller="delete-record">
|
||||||
<h1 class="is-size-1 mt-0 has-text-centered">Collector</h1>
|
<h1 class="is-size-1 mt-0 has-text-centered">Collector</h1>
|
||||||
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.name }}</h2>
|
<h2 class="is-size-3 mt-3 has-text-centered">{{ record.name }}</h2>
|
||||||
|
|
||||||
@ -33,12 +33,14 @@
|
|||||||
<i class="fa fa-copy"></i>
|
<i class="fa fa-copy"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-danger">
|
<a href=""
|
||||||
|
class="button is-danger"
|
||||||
|
data-delete-record-target="path" data-action="click->delete-record#show">
|
||||||
Delete
|
Delete
|
||||||
<span class="icon ml-2">
|
<span class="icon ml-2">
|
||||||
<i class="fa fa-trash"></i>
|
<i class="fa fa-trash"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -83,7 +85,28 @@
|
|||||||
</table>
|
</table>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal" data-delete-record-target="modal">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<span class="icon is-large has-text-warning">
|
||||||
|
<i class="fa fa-warning fa-2x"></i>
|
||||||
|
</span>
|
||||||
|
<p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<div class="buttons is-right">
|
||||||
|
<button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
|
||||||
|
<button class="button is-light" id="cancel">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript" defer></script>
|
<script type="text/javascript" defer></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue
Block a user