murph-skeleton/assets/js/addons/form-collection.js

85 lines
2.4 KiB
JavaScript

const $ = require('jquery');
const DeleteHandler = (e) => {
e.stopPropagation()
const target = e.target;
let button = $(target);
if (button.is('[data-collection-delete-container]')) {
button = button.find('*[data-collection-delete]').first()
}
const id = button.attr('data-collection-delete');
const collection = button.parents('[data-collection]')
const item = collection.find('*[data-collection-item="' + id + '"]')
if (confirm('Validez-vous la suppression ?')) {
item.remove();
collection.trigger('collection.update');
}
}
const CollectionInitilizedAndUpdated = (e) => {
const target = $(e.target)
target.find('*[data-collection-empty]').toggleClass(
'd-none',
target.find('*[data-collection-item]').length !== 0
);
target.find('*[data-collection-nonempty]').toggleClass(
'd-none',
target.find('*[data-collection-item]').length === 0
);
}
const FormCollection = () => {
$('*[data-collection]').on(
'collection.update',
CollectionInitilizedAndUpdated
);
$('*[data-collection]').on(
'collection.init',
CollectionInitilizedAndUpdated
);
$('body').on(
'click',
'*[data-collection-delete], *[data-collection-delete-container]',
DeleteHandler
);
$('body').on('click', '*[data-collection-add]', (e) => {
e.stopPropagation()
const collectionId = $(e.target).attr('data-collection-add')
const collectionContainer = $('*[data-collection="' + collectionId + '"]')
const prototypeContent = $('#' + collectionId).html()
let name = 0
collectionContainer.find('*[data-collection-item]').each(function() {
var n = parseInt($(this).attr('data-collection-item'))
if (n >= name) {
name = n + 1
}
})
collectionContainer.append(prototypeContent)
const item = collectionContainer.children('*[data-collection-item]:last-child')
const deleteBtn = $('<span data-collection-delete="__name__" class="fa fa-trash"></span>')
item.find('*[data-collection-delete-container]').first().append(deleteBtn)
item.html(item.html().replace(/__name__/g, name))
item.attr('data-collection-item', name)
collectionContainer.trigger('collection.update');
});
$('*[data-collection]').trigger('collection.init');
}
module.exports = FormCollection;