postulantes.jsp 12 KB
Newer Older
Joel Florentin committed
1
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
2
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"  %>  
Joel Florentin committed
3 4
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
5 6
<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
<layout:extends name="layouts/base.jsp">
7 8 9 10 11
    <layout:put block="cssDeclaracion" type="APPEND">
    <link href="../css/PostulanteStyle.css" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    </layout:put>
12 13 14
    <layout:put block="contents" type="REPLACE">
      <h2>Lista de Postulantes</h2>
      <div id="buscador">
willgonzz committed
15
        <form name="buscador">
16 17 18 19 20 21 22 23
          <div class="row justify-content-start gy-2">
            
            <div class="col-auto">
              <input type="text" placeholder="Nombre" name="nombre" id="nombre" class="form-control" value="${param.nombre}">
            </div>
            <div class="col-auto">
              <button class="btn btn-primary">Buscar</button>
            </div>
24 25 26 27 28 29 30
            <div class="col" style="float: left;">
              <a href="/postulantesExcel?${query}" type="button" class="btn btn-light float-end">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-excel-fill" viewBox="0 0 16 16">
                      <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.884 6.68 8 9.219l2.116-2.54a.5.5 0 1 1 .768.641L8.651 10l2.233 2.68a.5.5 0 0 1-.768.64L8 10.781l-2.116 2.54a.5.5 0 0 1-.768-.641L7.349 10 5.116 7.32a.5.5 0 1 1 .768-.64z"></path>
                  </svg>
                  Excel
              </a>
31
          </div>
32 33 34
          </div>
          
          <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 gy-1 mt-2">
35 36 37 38 39 40 41 42 43 44

           <div class="col">
  
             <div class="row">
               <div class="col-auto col-md-4">
                <label class="form-label" for="estado">Estado</label>

               </div>
               <div class="col-auto col-md-8">
                <select class="form-select form-select-sm " name="estado" id="estado">
45
                  <option value="">Todas</option>
46 47 48 49 50 51
                  <c:forEach items="${estadoP}" var="estados">
                    <option value="${estados}" ${param.estado == estados ? "selected" : ""}>${estados.getEstado()}</option>
                  </c:forEach>
                </select>
               </div>
          </div>
52 53 54 55 56
          </div>
          <div class="col">
            <div class="row">
             <div class="col-auto col-md-4">
               <label class="form-label" for="expInMonths">Experiencia en general</label>
57 58

             </div>
59 60 61
              <div class="col-auto col-md-8">
                <select class="form-select form-select-sm " name="expInMonths" id="expInMonths">
                  <option value="">Todas</option>
62 63 64 65 66
                    <option value="0-6" ${param.expInMonths == "0-6" ? "selected" : ""}>Menor a 6 meses</option>
                    <option value="0-12" ${param.expInMonths == "0-12" ? "selected" : ""}>Menor a 1 año</option>
                    <option value="0-36" ${param.expInMonths == "0-36" ? "selected" : ""}>Menor a 3 años</option>
                    <option value="0-60" ${param.expInMonths == "0-60" ? "selected" : ""}>Menor a 5 años</option>
                    <option value="60-1200" ${param.expInMonths == "60-1200" ? "selected" : ""}>Mayor a 5 años</option>
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
                </select>

              </div>        
            </div>
         </div>
           
         <div class="col">
          <div class="row">
            <div class="col-auto col-md-4">
              <label class="form-label" for="cargoId">Cargo</label>
            </div>
            <div class="col-auto col-md-8">
              <select class="form-select form-select-sm " name="cargoId" id="cargoId">
                <option value="">Todas</option>
                <c:forEach items="${cargos}" var="cargo">
                  <option value="${cargo.id}" ${param.cargoId == cargo.id ? "selected" : ""}>${cargo.getNombre()}</option>
                </c:forEach>
              </select>
            </div>
          </div>           
        </div>
      <div class="col">
        <div class="row" id="convocatoriaBlock" style="display: none;">
          <div class="col-auto col-md-4">
            <label class="form-label" for="convId">Convocatoria</label>
          </div>
          <div class="col-auto col-md-8">
            <select class="form-select form-select-sm " name="convId" id="convId">
              <option value="">Todas</option>
            </select>
          </div>
        </div>           
      </div>
      <div class="col">
        <div class="row">
          <div class="col-auto col-md-4">
103
            <label class="form-label" for="instId">Institución Educativa</label>
104 105 106 107 108 109 110 111 112 113 114 115 116 117

          </div>
          <div class="col-auto col-md-8">
            <select class="form-select form-select-sm " name="instId" id="instId">
              <option value="">Todas</option>
              <c:forEach items="${institucionesEducativas}" var="inst">
                <option value="${inst.id}" ${param.instId == inst.id ? "selected" : ""}>${inst.nombre}</option>
              </c:forEach>
            </select>
          </div>
        </div>
         
       
      </div>
118 119 120
             <div class="col">
              <div class="row">
                <div class="col-auto col-md-4">
121
                  <label class="form-label" for="lvlEng">Nivel de Inglés</label>
122 123 124
                </div>
                <div class="col-auto col-md-8">
                  <select class="form-select form-select-sm " name="lvlEng" id="lvlEng">
125
                    <option value="">Todas</option>
126 127 128 129 130 131
                    <option value="1">Básico</option>
                    <option value="2">Regular</option>
                    <option value="3">Intermedio</option>
                    <option value="4">Avanzado</option>
                    <option value="5">Proficiente</option>
                    
132 133 134 135 136 137 138 139
                  </select>
                </div>
              </div>
               
             
              
            </div>
            
140
          
141 142 143 144
          <div class="col">

            <div class="row">
              <div class="col-auto col-md-4">
145
                <label class="form-label" for="tecId">Tecnologías</label>
146 147 148 149

              </div>
              <div class="col-auto col-md-8">
                <select class="form-select form-select-sm " name="tecId" id="tecId">
150
                  <option value="">Todas</option>
151 152 153 154 155 156 157 158 159
                  <c:forEach items="${tecnologias}" var="tecnologia">
                    <option value="${tecnologia.id}" ${param.tecId == tecnologia.id ? "selected" : ""}>${tecnologia.nombre}</option>
                  </c:forEach>
                </select>
              </div>
            </div>
          </div>
          
          <div class="col">
160
            <div class="row" id="lvlTecBlock">
161
              <div class="col-auto col-md-4">
162
                <label class="form-label" for="lvlTec">Nivel de Tecnología</label>
163 164 165
              </div>
              <div class="col-auto col-md-8">
                <select class="form-select form-select-sm" name="lvlTec" id="lvlTec">
166
                  <option value="">Todas</option>
167 168 169 170 171 172 173 174 175 176
                  <c:forEach var = "lvl" begin = "1" end = "5">
                    <option value="${lvl}" ${param.lvlTec == lvl ? "selected" : ""}>${lvl}</option>
                  </c:forEach>
                </select>
              </div>
            </div>
             
            
            
          </div>
177 178 179
          
          
       </div> 
180
      </form>
181
      </div>
182 183 184 185 186 187 188 189 190 191
      <div class="card text-dark bg-light mt-3">
        
        <div class="card-body">
          <div class="table-responsive">

            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Nombre</th>
192
                  <th scope="col">Nivel de Inglés</th>
193
                  <th scope="col">Experiencia</th>
194
                  <th scope="col">Tecnologías</th>
195 196 197 198 199 200 201 202 203
                  <th scope="col">Estado</th>
                </tr>
              </thead>
              <tbody>
                  <c:forEach items="${postulantes}" var="postulante" varStatus="staPost">
                      <tr>
                          <th scope="row">${staPost.index + 1}</th>
                          <td>${postulante.nombre} ${postulante.apellido}</td>
                          <td>${postulante.nivelIngles}</td>
204 205 206 207 208 209 210
                          <td><c:choose>
         
                            <c:when test = "${postulante.experienciaMeses < 12}">
                               ${postulante.experienciaMeses} mes<c:if test="${postulante.experienciaMeses > 1}">es</c:if>
                            </c:when>
                            
                            <c:when test = "${postulante.experienciaMeses > 12}">
211 212
                              <fmt:parseNumber var="j" integerOnly="true" type="NUMBER" value="${postulante.experienciaMeses / 12}" parseLocale="en_US" />  
                              <fmt:parseNumber var="k" integerOnly="true" type="NUMBER" value="${postulante.experienciaMeses % 12}"  parseLocale="en_US" />  
213 214 215 216 217
                               ${j} año<c:if test="${postulante.experienciaMeses >= 24}">s</c:if> <c:if test="${k > 0}"> y ${k} mes<c:if test="${k > 1}">es</c:if></c:if> 
                            </c:when>

                         </c:choose>
                         </td>
218 219 220 221 222 223
                          <td>
                              <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia" varStatus="staTec">
                                  ${detalle_tecnologia.getTecnologia().getNombre()}${not staTec.last ? "," : ""}
                              </c:forEach>
                          </td>
                          <td>${postulante.estado.getEstado()}</td>
224
                          <td><a href="/postulantes/${postulante.id}"><i class="bi bi-eye-fill"></i></a></td>
225 226 227 228 229 230 231 232 233 234 235
                      </tr>
                  </c:forEach>
                </tbody>
      
          </table>
          </div>
          
        </div>
        <div class="card-footer">
          <div>
            <nav aria-label="Page navigation example">
236 237 238 239 240 241 242 243 244
              <div class="row">
                  <div class="col-md-10">
                      <ul class="pagination">
                          <c:forEach begin="1" end="${pages}" var="nro">
                              <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
                          </c:forEach>
                      </ul>
                  </div>
                  <div class="col-md-2">
245
                      <span class="badge bg-light text-dark">Postulantes: ${numeroOcurrencias}</span>
246 247
                  </div>
              </div>
248 249 250
            </nav>
          </div>
        </div>
251
      </div>
252
     
253
    
254
      
255 256 257
    </layout:put>
    <layout:put block="scripts" type="APPEND">
      <script>
258 259 260 261
        var convocatorias = ${convocatoriaC};
      </script>
      <script src="./Convo.js"></script>
      <script>
262 263 264 265 266
        function habilitarLvlTec(){
          //si se selecciono una tecnologia entonces permitir seleccionar un nivel
          lvlTec.disabled = tecId.value == false
          if(lvlTec.disabled){
            lvlTec.firstElementChild.selected=true;
267 268 269 270
            lvlTecBlock.style.display = "none";
          }
          else{
            lvlTecBlock.style.display = "";
271
          }
Joel Florentin committed
272
          
273
        }
274

275
        
276 277
        const tecId = document.querySelector("#tecId");
        const lvlTec = document.querySelector("#lvlTec");
278
        const lvlTecBlock = document.querySelector("#lvlTecBlock");
279 280
        tecId.addEventListener('change',habilitarLvlTec);
        habilitarLvlTec()
281 282


283 284 285
      </script>
    </layout:put>
</layout:extends>