112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
import { Controller } from '@hotwired/stimulus';
|
|
|
|
export default class extends Controller {
|
|
static targets = [
|
|
'row',
|
|
'term',
|
|
'input',
|
|
'save',
|
|
'edit',
|
|
'cancel',
|
|
];
|
|
|
|
static values = {
|
|
saveUrl: String,
|
|
};
|
|
|
|
/**
|
|
* @todo Simpler way?
|
|
*/
|
|
edit(event) {
|
|
const id = event.currentTarget.getAttribute('data-id');
|
|
|
|
this.saveTargets.forEach((btn, index) => {
|
|
if (btn.getAttribute('data-id') === id) {
|
|
btn.classList.toggle('is-hidden');
|
|
this.inputTargets[index].disabled = false;
|
|
this.cancelTargets[index].classList.toggle('is-hidden');
|
|
}
|
|
});
|
|
|
|
event.currentTarget.classList.add('is-hidden');
|
|
}
|
|
|
|
async save(event) {
|
|
const id = event.currentTarget.getAttribute('data-id');
|
|
let term = '';
|
|
|
|
for (let input of this.inputTargets) {
|
|
if (input.getAttribute('data-id') === id) {
|
|
term = input.value;
|
|
}
|
|
}
|
|
|
|
let data = new FormData;
|
|
data.append("_id", id);
|
|
data.append("_new_term", term);
|
|
|
|
const url = event.currentTarget.getAttribute('data-url');
|
|
|
|
const res = await fetch(url, {
|
|
method: "POST",
|
|
body: data,
|
|
});
|
|
|
|
if (res.status === 200) {
|
|
let notif = document.getElementById('ajax-saved');
|
|
notif.classList.toggle('is-hidden');
|
|
};
|
|
|
|
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-id');
|
|
|
|
this.editTargets.forEach((btn, index) => {
|
|
if (btn.getAttribute('data-id') === id) {
|
|
btn.classList.toggle('is-hidden');
|
|
this.inputTargets[index].disabled = true;
|
|
this.saveTargets[index].classList.toggle('is-hidden');
|
|
this.cancelTargets[index].classList.toggle('is-hidden');
|
|
}
|
|
});
|
|
}
|
|
}
|