ltbxd-actorle/assets/controllers/import_modal_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['overlay', 'fileInput', 'feedback', 'submitBtn'];

    open() {
        this.overlayTarget.hidden = false;
    }

    close() {
        this.overlayTarget.hidden = true;
        this.fileInputTarget.value = '';
        this.feedbackTarget.hidden = true;
    }

    async submit() {
        const file = this.fileInputTarget.files[0];
        if (!file) {
            this._showFeedback('Veuillez sélectionner un fichier.', true);
            return;
        }

        if (!file.name.endsWith('.csv')) {
            this._showFeedback('Seuls les fichiers CSV sont acceptés.', true);
            return;
        }

        this.submitBtnTarget.disabled = true;

        const formData = new FormData();
        formData.append('file', file);

        try {
            const response = await fetch('/api/imports', {
                method: 'POST',
                body: formData,
            });

            if (!response.ok) {
                const data = await response.json();
                this._showFeedback(data.error || 'Une erreur est survenue.', true);
                return;
            }

            this._showFeedback('Import lancé !', false);
            document.dispatchEvent(new CustomEvent('import:started'));
            setTimeout(() => this.close(), 1500);
        } catch (e) {
            this._showFeedback('Une erreur est survenue.', true);
        } finally {
            this.submitBtnTarget.disabled = false;
        }
    }

    _showFeedback(message, isError) {
        this.feedbackTarget.textContent = message;
        this.feedbackTarget.className = isError ? 'modal-feedback error' : 'modal-feedback success';
        this.feedbackTarget.hidden = false;
    }
}