cinetek/assets/js/addCollectionVanilla.js

import { autocomplete } from './autocomplete.js'

const initCollectionForms = () => {
    document
        .querySelectorAll('ul.collection-form li')
        .forEach(item => {
            // Élément déjà initialisé (page restaurée depuis le cache Turbo)
            if (item.dataset.collectionFormInit) {
                return
            }
            item.dataset.collectionFormInit = 'true'

            const input = item.querySelector('input')
            if (input) {
                input.readOnly = true
                addDeleteLink(item)
            }
        });

    document
    .querySelectorAll('.add_item_link')
    .forEach(btn => {
        if (btn.dataset.collectionFormInit) {
            return
        }
        btn.dataset.collectionFormInit = 'true'
        btn.addEventListener("click", addFormToCollection)
    });

    function addFormToCollection(e) {
        const collectionHolder = document.querySelector('#' + e.currentTarget.dataset.collectionHolderId);
        const path = e.currentTarget.dataset.path ?? '';

        const item = document.createElement('li');
        item.className = collectionHolder.dataset.classLi

        item.innerHTML = collectionHolder
        .dataset
        .prototype
        .replace(
            /__name__/g,
            collectionHolder.dataset.index
        );

        if (path !== '') {
            autocomplete(item, path);
        }

        collectionHolder.appendChild(item);

        addDeleteLink(item);

        collectionHolder.dataset.index++;
    };

    function addDeleteLink(item) {
        const input = item.querySelector('input') ?? item.querySelector('select');
        const deleteLink = document.createElement('button');
        deleteLink.type = 'button';
        deleteLink.className = 'btn btn-outline-secondary';
        const i = document.createElement('i');
        i.className = 'fa-solid fa-trash fa-lg text-danger';
        deleteLink.appendChild(i);

        deleteLink.addEventListener("click", (event) => {
            item.remove();
            event.preventDefault(); // évite qu'un # apparaisse dans l'URL
        });

        input.after(deleteLink);
    };
};

initCollectionForms();
document.addEventListener('turbo:load', initCollectionForms);