Refactored main.js file to separate functions for initializing column choices and submitting form, and added event listeners for click and submit events

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();
+});

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;
+  }
+}

src/views/pages/index.hbs

@@ -6,20 +6,20 @@
     <div class="container-fluid">
       <div class="row">
         <div class="col-12">
-          <form method="post" action="">
+          <form method="post" action="/" id="form-download">
             <div class="form-group">
               <label for="name">URL</label>
-              <textarea class="form-control" id="form__url" name="url" rows="3">{{form.url.value}}</textarea>
+              <textarea class="form-control" id="form__url" name="url" rows="5">{{form.url.value}}</textarea>
             </div>
             <div class="row my-5">
-              <div class="col-12 col-md-5">
+              <div class="col-12 col-md-6">
-                <div class="form-group">
+                <div class="form-group form__column column-choices">
-                  <label for="name">Colonnes disponibles</label>
+                  <label for="name" class="column-choices__title">Colonnes disponibles</label>
-                  <ul id="form__choices">
+                  <ul id="form__choices" class="column-choices__list">
                     {{#each form.columns.options}}
                       <li class="form__choice column-choice" data-value="{{this}}">
                         <label class="column-choice__inner">
-                          <input type="checkbox" name="columns[]" value="{{this}}" class="column-choice__input" checked="checked" />
+                          <input type="checkbox" name="columns[]" value="{{this}}" class="column-choice__input" />
                           <span class="column-choice__text">{{this}}</span>
                         </label>
                       </li>
@@ -27,27 +27,22 @@
                   </ul>
                 </div>
               </div>
-              <div class="col-12 col-md-2">
+              <div class="col-12 col-md-6">
-                <div class="row">
+                <div class="form-group form__column column-choices">
-                  <div class="col-6 col-md-12 my-2 d-grid">
+                  <label for="name" class="column-choices__title column-choices__title--green">Colonnes exportées</label>
-                    <button id="form__add" type="button" class="btn btn-success btn-block">></button>
+                  <ul id="form__selected" class="column-choices__list">
-                  </div>
-                  <div class="col-6 col-md-12 my-2 d-grid">
-                    <button id="form__remove" type="button" class="btn btn-danger btn-block"><</button>
-                  </div>
-                </div>
-              </div>
-              <div class="col-12 col-md-5">
-                <div class="form-group">
-                  <label for="name">Colonnes exportées</label>
-                  <ul id="form__selected">
 
                   </ul>
                 </div>
               </div>
             </div>
             <hr />
-            <div class="d-grid gap-2 col-12 col-md-4 mx-auto">
+            <div class="d-flex justify-content-center">
+              <div class="spinner-border text-primary d-none" role="status" id="form__spinner" style="">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </div>
+            <div class="d-grid gap-2 col-12 col-md-4 mx-auto my-3">
               <button class="btn btn-primary" id="form__submit" type="submit">Télécharger</button>
             </div>
           </form>