Refactor the form on the index page to include a help image and improve the layout of the form fields

src/routes/index.js

@@ -27,23 +27,13 @@ router.get('/', async function(req, res, next) {
           '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',
@@ -54,25 +44,14 @@ router.get('/', async function(req, res, next) {
           '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',
@@ -92,6 +71,28 @@ router.get('/', async function(req, res, next) {
           'parutionavisprecedent.dateParution',
           'parutionavisprecedent.numeroParution',
           'parutionavisprecedent.numeroAnnonce',
+        ],
+        selected: [
+          'region_code',
+          'region_nom_officiel',
+          'numerodepartement',
+          'departement_nom_officiel',
+          'cp',
+          'listepersonnes.personne.typePersonne',
+          'listepersonnes.personne.formeJuridique',
+          'listepersonnes.personne.denomination',
+          'listepersonnes.personne.numeroImmatriculation.codeRCS',
+          'listepersonnes.personne.numeroImmatriculation.numeroIdentification',
+          'listepersonnes.personne.nom',
+          'listepersonnes.personne.nomCommercial',
+          'listepersonnes.personne.prenom',
+          'listeetablissements.etablissement.activite',
+          'listeetablissements.etablissement.adresse.complGeographique',
+          'listeetablissements.etablissement.adresse.ville',
+          'acte.dateCommencementActivite',
+          'acte.vente.publiciteLegale.date',
+          'acte.descriptif',
+          'acte.vente.categorieVente',
         ]
       }
     }

src/views/pages/index.hbs

@@ -10,9 +10,16 @@
       <div class="row">
         <div class="col-12">
           <form method="post" action="/" id="form-download">
-            <div class="form-group">
-              <label for="name">URL</label>
+            <div class="form-group mb-3">
+              <img src="/img/help.jpg" alt="help" class="img-fluid img-thumbnail" />
+            </div>
+            <hr />
+            <div class="form-group mt-3">
+              <label for="name" class="form-label">URL</label>
               <textarea class="form-control" id="form__url" name="url" rows="5">{{form.url.value}}</textarea>
+              <div class="form-text">
+                Inserer dans le champs ci-dessus l'url du fichier CSV bodacc à télécharger
+              </div>
             </div>
             <div class="row my-5">
               <div class="col-12 col-md-6">
@@ -34,7 +41,14 @@
                 <div class="form-group form__column column-choices">
                   <label for="name" class="column-choices__title column-choices__title--green">Colonnes exportées</label>
                   <ul id="form__selected" class="column-choices__list">
-
+                    {{#each form.columns.selected}}
+                      <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>