Implement vocab delete in Stimulus

TODO: show modal warning before deleting
This commit is contained in:
2024-11-09 11:18:45 +01:00
parent dce0e1b693
commit a622b3c256
2 changed files with 96 additions and 24 deletions

View File

@@ -18,10 +18,10 @@ export default class extends Controller {
* @todo Simpler way?
*/
edit(event) {
const id = event.currentTarget.getAttribute('data-vocabs-id-value');
const id = event.currentTarget.getAttribute('data-id');
this.saveTargets.forEach((btn, index) => {
if (btn.getAttribute('data-vocabs-id-value') === id) {
if (btn.getAttribute('data-id') === id) {
btn.classList.toggle('is-hidden');
this.inputTargets[index].disabled = false;
this.cancelTargets[index].classList.toggle('is-hidden');
@@ -32,11 +32,11 @@ export default class extends Controller {
}
async save(event) {
const id = event.currentTarget.getAttribute('data-vocabs-id-value');
const id = event.currentTarget.getAttribute('data-id');
let term = '';
for (let input of this.inputTargets) {
if (input.getAttribute('data-vocabs-id-value') === id) {
if (input.getAttribute('data-id') === id) {
term = input.value;
}
}
@@ -45,25 +45,62 @@ export default class extends Controller {
data.append("_id", id);
data.append("_new_term", term);
const res = await fetch(this.saveUrlValue, {
const url = event.currentTarget.getAttribute('data-url');
const res = await fetch(url, {
method: "POST",
body: data,
});
// TODO: show notification
if (res.status === 200) {
console.log('Saved...');
let notif = document.getElementById('ajax-saved');
notif.classList.toggle('is-hidden');
};
}
delete() {
this.cancelTargets.find(btn => btn.getAttribute('data-id') === id)
.classList.toggle('is-hidden');
this.editTargets.find(btn => btn.getAttribute('data-id') === id)
.classList.toggle('is-hidden');
const input = this.inputTargets.find(input => input.getAttribute('data-id') === id)
input.disabled = true;
event.target.classList.toggle('is-hidden');
}
/**
*
* @todo Show modal before deleting! Show delete error (500)!
*/
async delete(event) {
const id = event.currentTarget.getAttribute('data-id');
const url = event.currentTarget.getAttribute('data-url');
let data = new FormData;
data.append("_id", id);
const res = await fetch(url, {
method: "POST",
body: data,
});
if (res.status === 200) {
let notif = document.getElementById('ajax-deleted');
notif.classList.toggle('is-hidden');
this.rowTargets.find(row => row.getAttribute('data-id') === id)
.classList.add('is-hidden');
};
if (res.status === 500) {
let notif = document.getElementById('ajax-error');
notif.classList.toggle('is-hidden');
}
}
cancel(event) {
const id = event.currentTarget.getAttribute('data-vocabs-id-value');
const id = event.currentTarget.getAttribute('data-id');
this.editTargets.forEach((btn, index) => {
if (btn.getAttribute('data-vocabs-id-value') === id) {
if (btn.getAttribute('data-id') === id) {
btn.classList.toggle('is-hidden');
this.inputTargets[index].disabled = true;
this.saveTargets[index].classList.toggle('is-hidden');