From b4fafd3a81f86f9a6fafb9808b70b9340be66e3d Mon Sep 17 00:00:00 2001
From: Joel <jflor999@gmail.com>
Date: Mon, 1 Nov 2021 15:47:15 -0300
Subject: [PATCH] experiencia con modal bootstrap

---
 curriculumsearch/src/main/resources/static/main.js       | 85 ++++++++++++++++++++++++++++++++++++++-----------------------------------------------
 curriculumsearch/src/main/webapp/jsp/postulante-form.jsp | 49 ++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/curriculumsearch/src/main/resources/static/main.js b/curriculumsearch/src/main/resources/static/main.js
index f16ce41..b2f3c1b 100644
--- a/curriculumsearch/src/main/resources/static/main.js
+++ b/curriculumsearch/src/main/resources/static/main.js
@@ -1,30 +1,48 @@
 var cont_experiencia = 0;
 let cont_estudios = 0;
 let cont_tecnologia = 0;
-function agregarFieldExpierncia(evt){
+const experiencias = [];
+const estudios = [];
+const tecnologias = [];
+function agregarFieldExpierncia(){
+    //recoger del form
+    const pairs = {};
+    const formexp = document.querySelector("[name=experiencia-form]");
+    const formData = new FormData(formexp);
+    for (const [name, value] of formData){
+        pairs[name] = value
+    }
+    experiencias[cont_experiencia] = pairs;
+    formexp.reset();
+    //imprimir lista actualizada
+    const div = document.querySelector("#experiencias")
+    const div1 = document.createElement('div');
+    let content='<ul>'
     
-    const btn = evt.target
+    for (let index = 0; index < experiencias.length; index++) {
+        const exp = experiencias[index];
+        if(exp==null) continue;
+        content += `
+        <li id="exp-${index}">        
+            ${exp.institucion}
+            <button type="button" onclick="eliminarExperiencia(event)">Eliminar</button>
+        </li>
+        
+        `
+    }
+    content += "</ul>" 
+    div1.innerHTML = content
+    div.innerHTML = '';
+    div.appendChild(div1);
     cont_experiencia++;
-    
-    const nee = document.createElement("div")
-    nee.innerHTML = `
-    <label for="institucion" class="form-label">Institucion</label>
-    <input type="text" class="form-control  " name="experiencia-${cont_experiencia}-institucion" id="institucion" >
-    <label for="fechaDesde" class="form-label">FechaDesde</label>
-    <input type="date" class="form-control  " name="experiencia-${cont_experiencia}-fechaDesde" id="fechaDesde" >
-    <label for="fechaHasta" class="form-label">Fecha Hasta</label>
-    <input type="date" class="form-control  " name="experiencia-${cont_experiencia}-fechaHasta" id="fechaHasta" >
-    <label for="cargo" class="form-label">Cargo</label>
-    <input type="cargo" class="form-control  " name="experiencia-${cont_experiencia}-cargo" id="cargo" >
-    <label for="refNombre" class="form-label">Referencia Nombre</label>
-    <input type="text" class="form-control  " name="experiencia-${cont_experiencia}-referencias" id="refNombre" >
-    <button type="button" onclick="eliminarExperiencia(event)">Eliminar</button>
-    `;
-    nee.className = "mb-3 col-5"
-    form.insertBefore(nee,btn)
+
 }
 
 function eliminarExperiencia(event) {
+    //eliminar del array
+    console.log(event.target.parentElement.id.split("-")[1])
+    experiencias[event.target.parentElement.id.split("-")[1]]=null
+    //eliminar en html
     event.target.parentElement.remove()
 }
 function serializeJSON (form) {
@@ -33,37 +51,10 @@ function serializeJSON (form) {
 
     // Create an object to hold the name/value pairs
     const pairs = {};
-    const experiencias = [];
-    const estudios = [];
-    const tecnologias = [];
 
     // Add each name/value pair to the object
     for (const [name, value] of formData) {
-        //los atributos no primitivos tiene una nomenclatura distinta en sus names
-        //ej.: experiencia-4-institucion == experencias[4].institucion
-        let codificacion = name.split("-")
-        if(codificacion.length==1){
-            pairs[name] = value
-        }
-        else{
-            switch (codificacion[0]) {
-                case "experiencia":
-                    if(experiencias[codificacion[1]]==null) experiencias[codificacion[1]]={};
-                    experiencias[codificacion[1]][codificacion[2]] = value
-                    break;
-                case "estudio":
-                    if(estudios[codificacion[1]]==null) estudios[codificacion[1]]={};
-                    estudios[codificacion[1]][codificacion[2]] = value
-                    break;
-                case "tecnologia":
-                    if(tecnologias[codificacion[1]]==null) tecnologias[codificacion[1]]={};
-                    tecnologias[codificacion[1]][codificacion[2]] = value
-                    break;
-            
-                default:
-                    break;
-            }
-        }
+        pairs[name] = value
     }
     pairs["experiencias"] = experiencias.filter(exp => exp)//eliminacion de nulos
     pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos
diff --git a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
index db96a87..254a91d 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
@@ -70,20 +70,51 @@
       
         
       
-      <button type="button" name="addExp" onclick="agregarFieldExpierncia(event)">Agregar</button>
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#experienciaForm">
+            Agregar Experiencia
+        </button>
+        <div id="experiencias">
+            
+        </div>
         <button type="submit" class="btn btn-primary">Submit</button>
       </form>
 
-    <!-- Optional JavaScript; choose one of the two! -->
+      <div class="modal fade" id="experienciaForm" tabindex="-1" role="dialog" aria-labelledby="experienciaForm" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLabel">Experiencia</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+                <form name="experiencia-form">
+                    <label for="institucion" class="form-label">Institucion</label>
+                    <input type="text" class="form-control  " name="institucion" id="institucion" >
+                    <label for="fechaDesde" class="form-label">FechaDesde</label>
+                    <input type="date" class="form-control  " name="fechaDesde" id="fechaDesde" >
+                    <label for="fechaHasta" class="form-label">Fecha Hasta</label>
+                    <input type="date" class="form-control  " name="fechaHasta" id="fechaHasta" >
+                    <label for="cargo" class="form-label">Cargo</label>
+                    <input type="cargo" class="form-control  " name="cargo" id="cargo" >
+                    <label for="refNombre" class="form-label">Referencia Nombre</label>
+                    <input type="text" class="form-control  " name="referencias" id="refNombre" >
+                </form>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()" data-dismiss="modal">Agregar</button>
+            </div>
+          </div>
+        </div>
+      </div>
 
-    <!-- Option 1: Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <!-- Optional JavaScript; choose one of the two! -->
 
-    <!-- Option 2: Separate Popper and Bootstrap JS -->
-    <!--
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-    -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
     <script src="./main.js"></script>
   </body>
 </html>
\ No newline at end of file
--
libgit2 0.26.0