diff --git a/src/assets/js/main.js b/src/assets/js/main.js index 629adb2..393b3ca 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -1,3 +1,112 @@ import $ from 'jquery'; import 'bootstrap'; import toastr from 'toastr'; + +/*********************************************** + * MAIN JS FILE + ***********************************************/ +const initColumnsChoices = () => { + const $choicesList = $('#form__choices'); + const $selectedList = $('#form__selected'); + + $(document).on('click', '#form__choices .column-choice', function(e) { + e.preventDefault(); + const $this = $(this); + const $input = $this.find('.column-choice__input'); + $input.prop('checked', true).attr('checked', 'checked'); + + $this.detach().appendTo($selectedList); + }); + + $(document).on('click', '#form__selected .column-choice', function(e) { + e.preventDefault(); + const $this = $(this); + const $input = $this.find('.column-choice__input'); + $input.prop('checked', false).removeAttr('checked'); + + $this.detach().appendTo($choicesList); + }); +}; + +const sendRequest = (url, data) => { + return new Promise((resolve, reject) => { + $.ajax({ + url: url, + type: 'POST', + data: data, + success: function(data, textStatus, jqXHR) { + // Créez un lien de téléchargement et définissez ses attributs + const blob = new Blob([data], { type: 'text/csv' }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'fichier.csv'; // Nom du fichier + document.body.appendChild(a); + + // Cliquez sur le lien pour déclencher le téléchargement + a.click(); + + // Supprimez le lien du DOM + window.URL.revokeObjectURL(url); + resolve({ message: 'Fichier généré' }); + }, + error: function(jqXHR, textStatus, errorThrown) { + reject( new Error('Erreur lors de la requête Ajax :', errorThrown) ); + } + }); + }); +}; + +const initSubmitForm = () => { + const $form = $('#form-download'); + const $selectedList = $('#form__selected'); + + $form.on('submit', function(e) { + e.preventDefault(); + const $this = $(this); + const $inputs = $selectedList.find('.column-choice__input'); + const $urlInput = $this.find('#form__url'); + const $submitBtn = $this.find('#form__submit'); + const $spinner = $this.find('#form__spinner'); + + toastr.remove(); + + $submitBtn.prop('disabled', true); + $spinner.removeClass('d-none'); + + if ( $inputs.length === 0 ) { + toastr.error('Veuillez sélectionner au moins une colonne'); + $submitBtn.prop('disabled', false); + $spinner.addClass('d-none'); + return; + } + + const data = { + url: $urlInput.val(), + columns: [] + }; + // Add selected columns to data + $inputs.each(function() { + const $this = $(this); + data.columns.push($this.val()); + }); + + + sendRequest($form.attr('action'), data) + .then((response) => { + toastr.success(response.message); + $submitBtn.prop('disabled', false); + $spinner.addClass('d-none'); + }) + .catch((error) => { + toastr.error(error.message); + $submitBtn.prop('disabled', false); + $spinner.addClass('d-none'); + }); + }); +} + +$(document).ready(function() { + initColumnsChoices(); + initSubmitForm(); +}); diff --git a/src/assets/sass/main.scss b/src/assets/sass/main.scss index 80a722d..39a161b 100644 --- a/src/assets/sass/main.scss +++ b/src/assets/sass/main.scss @@ -3,3 +3,54 @@ @import "toastr"; +// -------------------------------------------------------- +.column-choices { + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 0.5rem; + + &__title { + text-align: center; + text-transform: uppercase; + font-size: 1.25rem; + padding: 0.5rem; + background-color: #133172; + color: #fff; + display: block; + width: 100%; + border-radius: 0.25rem; + margin-bottom: 0.5rem; + + &--green { + background-color: #1e7e34; + } + } + + &__list { + list-style-type: none; + padding: 0px; + margin: 0px; + } +} + +.column-choice { + display: block; + width: 100%; + padding: 0.375rem 0.5rem; + border: 1px solid #ddd; + border-radius: 0.25rem; + margin-bottom: 0.5rem; + cursor: pointer; + user-select: none; + transition: background 0.25s ease-in-out; + word-wrap: break-word; + word-break: break-all; + + &:hover { + background: rgba(black, 0.075); + } + + &__input { + display: none; + } +} \ No newline at end of file diff --git a/src/views/pages/index.hbs b/src/views/pages/index.hbs index 8d95018..0947258 100644 --- a/src/views/pages/index.hbs +++ b/src/views/pages/index.hbs @@ -6,20 +6,20 @@
-
+
- +
-
-
- -
    +
    +
    + +
      {{#each form.columns.options}}
      • @@ -27,27 +27,22 @@
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - -
      +
      +
      + +
    -
    +
    + +
    +