Copy collection; Stimulus controller for vocabs (incomplete)

This commit is contained in:
2024-11-08 17:32:45 +01:00
parent 239240360e
commit dce0e1b693
10 changed files with 197 additions and 139 deletions

View File

@@ -7,6 +7,15 @@
<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>
{% for message in app.flashes('notice') %}
<div class=" mt-4 notification is-success"
data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
{{ message }}
</div>
{% endfor %}
<article class="message is-info mt-3">
<div class="message-body">
<p>

View File

@@ -8,11 +8,14 @@
<h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
{% for message in app.flashes('notice') %}
<div class=" mt-4 notification is-success">
<button class="delete"></button>
<div class=" mt-4 notification is-success"
data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
{{ message }}
</div>
{% endfor %}
<div class="card p-5 mt-6 pt-6 pb-6">
<div class="columns">
<div class="column is-half has-text-centered">
@@ -100,12 +103,4 @@
</div>
</div>
</div>
<script type="text/javascript" defer>
const delBtns = document.querySelectorAll('.delete');
for (let btn of delBtns) {
btn.addEventListener('click', function () {
this.parentElement.classList.add('is-hidden');
})
}
</script>
{% endblock %}

View File

@@ -7,6 +7,15 @@
<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>
{% for message in app.flashes('notice') %}
<div class=" mt-4 notification is-success"
data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
{{ message }}
</div>
{% endfor %}
<article class="message is-info mt-3">
<div class="message-body">
<p>
@@ -27,12 +36,13 @@
<i class="fa fa-edit"></i>
</span>
</button>
<button class="button is-link">
<a href="{{ path('app_collection_copy', {'id' : record.id}) }}"
class="button is-link">
Copy
<span class="icon ml-2">
<i class="fa fa-copy"></i>
</span>
</button>
</a>
<a href="{{ path('app_collection_del', {'id' : record.id}) }}"
class="button is-danger"
data-delete-record-target="path" data-action="click->delete-record#show">

View File

@@ -8,10 +8,12 @@
<h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
{% for message in app.flashes('notice') %}
<div class=" mt-4 notification is-success">
<button class="delete"></button>
<div class=" mt-4 notification is-success"
data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
{{ message }}
</div>
</div>
{% endfor %}
<div class="card p-5 mt-6 pt-6 pb-6">
<div class="columns">
@@ -100,12 +102,4 @@
</div>
</div>
</div>
<script type="text/javascript" defer>
const delBtns = document.querySelectorAll('.delete');
for (let btn of delBtns) {
btn.addEventListener('click', function () {
this.parentElement.classList.add('is-hidden');
})
}
</script>
{% endblock %}

View File

@@ -8,10 +8,12 @@
<h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>
{% for message in app.flashes('notice') %}
<div class=" mt-4 notification is-success">
<button class="delete"></button>
<div class=" mt-4 notification is-success"
data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
{{ message }}
</div>
</div>
{% endfor %}
<div class="card p-5 mt-6 pt-6 pb-6">
<div class="columns">
@@ -100,12 +102,4 @@
</div>
</div>
</div>
<script type="text/javascript" defer>
const delBtns = document.querySelectorAll('.delete');
for (let btn of delBtns) {
btn.addEventListener('click', function () {
this.parentElement.classList.add('is-hidden');
})
}
</script>
{% endblock %}

View File

@@ -12,7 +12,8 @@
<div class="card" style="max-width: 40vw; margin: 0 auto;">
{% if error %}
<div class="notification is-danger is-light" data-controller="notification" data-notification-target="notif">
<div class="notification is-danger is-light" data-controller="notification"
data-notification-target="notif">
<button class="delete" data-action="click->notification#close"></button>
Wrong user name and/or password. Please retry
</div>

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 %}