Implement vocab delete in Stimulus
TODO: show modal warning before deleting
This commit is contained in:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user