nicolo/arcoa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Copy collection; Stimulus controller for vocabs (incomplete)

Browse Source
This commit is contained in:
Nicolò P
2024-11-08 17:32:45 +01:00
parent 239240360e
commit dce0e1b693
10 changed files with 197 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
templates/vocab_func_context/index.html.twig
View File

@@ -28,38 +28,63 @@
</form>
{% endif %}
<div class="notification is-success is-hidden mt-5" id="ajax-success">
</div>
<div class="notification is-success is-hidden mt-5"
data-controller="notification"
data-notification-target=""="notif">
<button class="delete" data-action="click->notification#close"></button>
</div>
{% for message in app.flashes('notice') %}
<div class="notification is-success mt-5" id="server-success">
<button class="delete"></button>
<div class="notification is-success mt-5" data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
{{ message }}
</div>
{% endfor %}
<h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
<table class="table is-fullwidth" id="terms">
<table class="table is-fullwidth" id="terms" data-controller="vocabs">
<tr><th>Term</th>{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}<th>Actions</th>{% endif %}</tr>
{% for term in terms %}
<tr data-row-id="{{ term.id }}">
<tr data-vocabs-target="row"
data-vocabs-id-value="{{ term.id }}">
<td>
<input class="input" type="text" value="{{ term.term }}" disabled data-term-id="{{ term.id }}" />
<input class="input" type="text" value="{{ term.term }}" disabled
data-vocabs-id-value="{{ term.id }}" data-vocabs-target="input" />
</td>
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
<td>
<div class="buttons">
<button class="button is-primary is-hidden" data-id-save="{{ term.id }}">
<button class="button is-primary is-hidden"
data-vocabs-target="save"
data-action="click->vocabs#save"
data-vocabs-saveUrl-value="{{ path('app_vocab_func_context_upd') }}"
data-vocabs-id-value="{{ term.id }}">
Save
<span class="icon ml-2">
<i class="fa fa-save"></i>
</span>
</button>
<button class="button is-link" data-id-edit="{{ term.id }}">
<button class="button is-hidden"
data-vocabs-id-value="{{ term.id }}"
data-vocabs-target="cancel"
data-action="click->vocabs#cancel">
Cancel
<span class="icon ml-2">
<i class="fa fa-times"></i>
</span>
</button>
<button class="button is-link"
data-vocabs-target="edit"
data-vocabs-id-value="{{ term.id }}"
data-action="click->vocabs#edit">
Edit
<span class="icon ml-2">
<i class="fa fa-edit"></i>
</span>
</button>
<button class="button is-danger" data-id-delete="{{ term.id }}">
<button class="button is-danger"
data-vocabs-id-value="{{ term.id }}"
data-action="click->vocabs#delete"
data-vocabs-delUrl-value="{{ path('app_vocab_func_context_del') }}">
Delete
<span class="icon ml-2">
<i class="fa fa-trash"></i>
@@ -74,94 +99,5 @@
</div>
</div>
<script type="text/javascript" defer>
const terms = document.querySelector('#terms');
const serverNotice = document.querySelector('#server-success');
if (serverNotice) {
serverNotice.querySelector('.delete').addEventListener('click', () => {
serverNotice.remove();
});
}
terms.addEventListener('click', async (event) => {
const clicked = event.target;
if (clicked.getAttribute('data-id-delete')) {
const termId = clicked.getAttribute('data-id-delete');
const data = new FormData;
data.append("_id", termId);
const res = await fetch("{{ path('app_vocab_func_context_del') }}", {
method: "POST",
body: data,
});
const notice = document.querySelector('#ajax-success');
if (res.status === 200) {
notice.innerHTML = `
<button class="delete"></button>
Term deleted successfully
`;
notice.classList.remove('is-hidden');
notice.querySelector('.delete').addEventListener('click', () => {
notice.classList.add('is-hidden');
});
const row = document.querySelector(`tr[data-row-id="${termId}"]`);
row.remove();
}
}
if (clicked.getAttribute('data-id-edit')) {
const termId = clicked.getAttribute('data-id-edit');
const saveBtn = document.querySelector(`button[data-id-save="${termId}"]`);
const input = document.querySelector(`input[data-term-id="${termId}"]`);
input.disabled = input.disabled ? false : true;
saveBtn.classList.toggle('is-hidden');
clicked.classList.toggle('is-link');
if (!clicked.classList.contains('is-link')) {
clicked.innerHTML = `
Cancel
<span class="icon ml-2">
<i class="fa fa-times"></i>
</span>
`;
} else {
clicked.innerHTML = `
Edit
<span class="icon ml-2">
<i class="fa fa-edit"></i>
</span>
`;
}
const data = new FormData;
data.append("_id", termId);
saveBtn.addEventListener('click', async () => {
data.append("_new_term", input.value);
const res = await fetch("{{ path('app_vocab_func_context_upd') }}", {
method: "POST",
body: data,
});
const notice = document.querySelector('#ajax-success');
if (res.status === 200) {
notice.innerHTML = `
<button class="delete"></button>
Term updated successfully
`;
notice.classList.remove('is-hidden');
notice.querySelector('.delete').addEventListener('click', () => {
notice.classList.add('is-hidden');
});
}
});
}
});
</script>
<script type="text/javascript" defer></script>
{% endblock %}