Refactor form on the home page to include options for selecting columns to export

src/routes/index.js

@@ -9,7 +9,95 @@ const templateService = new TemplateService();
 /* GET home page. */
 router.get('/', async function(req, res, next) {
   res.setHeader('Content-Type', 'text/html; charset=utf-8');
-  res.send(templateService.renderPage('index', { title: 'Express' }));
+
+  const data = {
+    form: {
+      url: {
+        value: 'https://bodacc-datadila.opendatasoft.com/api/explore/v2.1/catalog/datasets/annonces-commerciales/exports/csv?lang=fr&refine=publicationavis%3A%22A%22&refine=publicationavis_facette%3A%22Bodacc%20A%22&refine=familleavis_lib%3A%22Ventes%20et%20cessions%22&refine=numerodepartement%3A%2275%22&refine=typeavis_lib%3A%22Avis%20d%E2%80%99annulation%22&timezone=Asia%2FBaghdad&use_labels=true&delimiter=%3B'
+      },
+      columns: {
+        options: [
+          'id',
+          'publicationavis',
+          'publicationavis_facette',
+          'parution',
+          'dateparution',
+          'numeroannonce',
+          'typeavis',
+          'typeavis_lib',
+          'familleavis',
+          'familleavis_lib',
+          'numerodepartement',
+          'departement_nom_officiel',
+          'region_code',
+          'region_nom_officiel',
+          'tribunal',
+          'commercant',
+          'ville',
+          'registre',
+          'cp',
+          'pdf_parution_subfolder',
+          'ispdf_unitaire',
+          'listepersonnes.personne.typePersonne',
+          'listepersonnes.personne.administration',
+          'listepersonnes.personne.denomination',
+          'listepersonnes.personne.formeJuridique',
+          'listepersonnes.personne.numeroImmatriculation.codeRCS',
+          'listepersonnes.personne.numeroImmatriculation.numeroIdentification',
+          'listepersonnes.personne.numeroImmatriculation.nomGreffeImmat',
+          'listepersonnes.personne.capital.devise',
+          'listepersonnes.personne.capital.montantCapital',
+          'listepersonnes.personne.adresseSiegeSocial.ville',
+          'listepersonnes.personne.adresseSiegeSocial.codePostal',
+          'listepersonnes.personne.adresseSiegeSocial.pays',
+          'listepersonnes.personne.adresseSiegeSocial.typeVoie',
+          'listepersonnes.personne.adresseSiegeSocial.numeroVoie',
+          'listepersonnes.personne.adresseSiegeSocial.nomVoie',
+          'listepersonnes.personne.adresseSiegeSocial.complGeographique',
+          'listepersonnes.personne.nom',
+          'listepersonnes.personne.nomCommercial',
+          'listepersonnes.personne.prenom',
+          'listeetablissements.etablissement.qualiteEtablissement',
+          'listeetablissements.etablissement.adresse.ville',
+          'listeetablissements.etablissement.adresse.codePostal',
+          'listeetablissements.etablissement.adresse.pays',
+          'listeetablissements.etablissement.adresse.typeVoie',
+          'listeetablissements.etablissement.adresse.numeroVoie',
+          'listeetablissements.etablissement.adresse.nomVoie',
+          'listeetablissements.etablissement.adresse.complGeographique',
+          'listeetablissements.etablissement.activite',
+          'listeetablissements.etablissement.origineFonds',
+          'jugement',
+          'acte.descriptif',
+          'acte.dateCommencementActivite',
+          'acte.vente.publiciteLegale.date',
+          'acte.vente.publiciteLegale.titre',
+          'acte.vente.categorieVente',
+          'acte.vente.opposition',
+          'modificationsgenerales',
+          'radiationaurcs',
+          'depot',
+          'listeprecedentexploitant.personne.typePersonne',
+          'listeprecedentexploitant.personne.numeroImmatriculation.codeRCS',
+          'listeprecedentexploitant.personne.numeroImmatriculation.numeroIdentification',
+          'listeprecedentexploitant.personne.numeroImmatriculation.nomGreffeImmat',
+          'listeprecedentexploitant.personne.denomination',
+          'listeprecedentproprietaire.personne.typePersonne',
+          'listeprecedentproprietaire.personne.numeroImmatriculation.codeRCS',
+          'listeprecedentproprietaire.personne.numeroImmatriculation.numeroIdentification',
+          'listeprecedentproprietaire.personne.numeroImmatriculation.nomGreffeImmat',
+          'listeprecedentproprietaire.personne.denomination',
+          'divers',
+          'parutionavisprecedent.nomPublication',
+          'parutionavisprecedent.dateParution',
+          'parutionavisprecedent.numeroParution',
+          'parutionavisprecedent.numeroAnnonce',
+        ]
+      }
+    }
+  };
+
+  res.send(templateService.renderPage('index', data));
   return res;
 });
 

src/views/layout/main.hbs

@@ -5,6 +5,9 @@
     <title>Example App</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
   </head>
   <body>
     <main class="main">

src/views/pages/index.hbs

@@ -9,25 +9,47 @@
           <form method="post" action="">
             <div class="form-group">
               <label for="name">URL</label>
-              <textarea class="form-control" id="url" name="url" rows="3"></textarea>
+              <textarea class="form-control" id="form__url" name="url" rows="3">{{form.url.value}}</textarea>
             </div>
             <div class="row my-5">
               <div class="col-12 col-md-5">
                 <div class="form-group">
                   <label for="name">Colonnes disponibles</label>
+                  <ul id="form__choices">
+                    {{#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" />
+                          <span class="column-choice__text">{{this}}</span>
+                        </label>
+                      </li>
+                    {{/each}}
+                  </ul>
                 </div>
               </div>
               <div class="col-12 col-md-2">
-                <button type="button" class="btn btn-primary">Ajouter</button>
+                <div class="row">
+                  <div class="col-6 col-md-12 my-2 d-grid">
+                    <button id="form__add" type="button" class="btn btn-success btn-block">></button>
+                  </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 disponibles</label>
+                  <label for="name">Colonnes exportées</label>
+                  <ul id="form__selected">
+
+                  </ul>
                 </div>
               </div>
             </div>
             <hr />
-            <button class="btn btn-primary" type="submit">Télécharger</button>
+            <div class="d-grid gap-2 col-12 col-md-4 mx-auto">
+              <button class="btn btn-primary" id="form__submit" type="submit">Télécharger</button>
+            </div>
           </form>
         </div>
       </div>