managers.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{layouts/common.html :: head}"></head>
  5. <body id="page-top">
  6. <!-- Navigation -->
  7. <nav th:replace="~{layouts/common.html :: navbar}"></nav>
  8. <!-- Content -->
  9. <div class="content uv-content d-flex" id="uv-wrapper">
  10. <div class="bg-light border-right" id="uv-sidebar-wrapper" th:replace="~{layouts/sidebar.html :: sidebar}"></div>
  11. <div class="container uv-home-section navVisible" id="uv-content-wrapper">
  12. <div class="uv-loading-spinner" th:text="#{global.loading}"></div>
  13. <div class="col-sm-12"></div>
  14. <div class="uv-container">
  15. <div class="uv-table-group-procedure-info" style="margin-bottom:20px;">
  16. <div class="uv-table-title">
  17. <h6 class="uv-table-header-h6" th:text="#{managers.title}"></h6>
  18. <hr class="uv-procedure-hr">
  19. <span th:text="#{managers.subtitle}"></span>
  20. </div>
  21. </div>
  22. <div class="uv-table-group-procedure" th:if="${sup_centres != null}">
  23. <label th:text="#{managers.centers}">Centre(s)</label>
  24. <select class="selectpicker" id="centersSelector" name="centers[]" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
  25. <option th:each="item : ${sup_centres}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.id.lugar}"></option>
  26. </select>
  27. </div>
  28. <div class="uv-table-group-procedure">
  29. <label th:text="#{managers.titulations}" th:if="${sup_titulacions != null}">Titulació(ns)</label>
  30. <select class="selectpicker" id="titulationsSelector" name="titulations[]" multiple data-live-search="true" data-width="100%" data-actions-box="true" required>
  31. <option th:each="item : ${sup_titulacions}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.id.lugar}"></option>
  32. </select>
  33. </div>
  34. <div class="uv-table-group-procedure" style="margin-top:50px;cursor: auto;">
  35. <button th:text="#{managers.search}" class="btn btn-primary" onclick="search();">Cargar</button>
  36. </div>
  37. <div class="uv-table-group" th:if="${roleExists != null}" style="margin-top:25px;">
  38. <span class="alert alert-warning" th:text="#{admin.managers.exists}"></span>
  39. </div>
  40. <div class="uv-table-group" style="margin-top:50px;cursor: auto;" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
  41. <div class="col-sm-12 uv-table-section">
  42. <div class="uv-table-header">
  43. <hr class="uv-table-header-hr">
  44. <br><br>
  45. <span class="btn btn-primary pointer" id="btnAddManager" style="float:right; cursor:pointer; margin-top:-45px;" data-toggle="modal" data-target="#newRoleModal" th:text="#{admin.managers.newRole}">Añadir responsable</span>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="uv-table-group-procedure" id="results" style="cursor: auto;">
  50. <div th:if="${#ctx.containsVariable('results')}">
  51. <div th:replace="components/list_managers.html :: results" ></div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="modal fade" id="newRoleModal" tabindex="-1" role="dialog" aria-labelledby="newRoleModal" aria-hidden="true" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
  58. <div class="modal-dialog modal-lg">
  59. <div class="modal-content">
  60. <div class="modal-header">
  61. <h5 class="modal-title" th:text="#{admin.managers.newRole}">Añadir responsable</h5>
  62. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  63. <span aria-hidden="true">&times;</span>
  64. </button>
  65. </div>
  66. <div class="modal-body">
  67. <div class="container-fluid">
  68. <form id="newRoleForm" enctype='multipart/form-data' method="POST" action="/admin/userrole/new" style="margin-top:25px;">
  69. <div class="form-group">
  70. <label th:text="#{admin.managers.center}">Centre</label>
  71. <select class="selectpicker" id="roleCentersSelector" name="centre" data-live-search="true" data-width="100%" data-actions-box="true" required>
  72. <option th:each="item : ${sup_centres}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.id.lugar}"></option>
  73. </select>
  74. </div>
  75. <div class="form-group">
  76. <label th:text="#{admin.managers.titulation}">Titulació</label>
  77. <select class="selectpicker" id="roleTitulationsSelector" name="titulacio" data-live-search="true" data-width="100%" data-actions-box="true">
  78. <option th:each="item : ${sup_titulacions}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.id.lugar}"></option>
  79. </select>
  80. </div>
  81. <div class="form-group">
  82. <label th:text="#{admin.managers.user}">Usuario</label>&nbsp;&nbsp;&nbsp;<span class="pointer" style="color:#007bff;" onclick="newUser();" th:title="#{admin.managers.newUser}"><i id="addUserIcon" class="fas fa-plus"></i></span>
  83. <div id="userSelectorContainer">
  84. <select class="selectpicker" id="userSelector" name="usuari" data-dropup-auto="false" data-live-search="true" data-width="100%" data-actions-box="true" required>
  85. <option th:each="item : ${users}" th:text="${item.nom}+' '+${item.cognoms}+' ('+${item.email}+')'" th:attr="value=${item.usuari}"></option>
  86. </select>
  87. </div>
  88. <div class="form-group" id="newUserContainer">
  89. <div class="row">
  90. <div class="form-group col-6">
  91. <label th:text="#{admin.managers.firstname}">Nombre</label>
  92. <input class="form-control" type="text" value="" name="firstname" id="firstname">
  93. </div>
  94. <div class="form-group col-6">
  95. <label th:text="#{admin.managers.lastname}">Apellidos</label>
  96. <input class="form-control" type="text" value="" name="lastname" id="lastname">
  97. </div>
  98. <div class="form-group col-6">
  99. <label th:text="#{admin.managers.user}">Usuario</label>
  100. <input class="form-control" type="text" value="" name="username" id="username" onkeyup="setEmail();">
  101. </div>
  102. <div class="form-group col-6">
  103. <label th:text="#{admin.managers.email}">Email</label>
  104. <input class="form-control" type="email" value="" name="email" id="email">
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="form-group">
  110. <label th:text="#{admin.managers.role}">Rol</label>
  111. <select class="selectpicker" id="roleSelector" name="idRol" data-dropup-auto="false" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
  112. <option th:each="item : ${roles}" th:text="${#locale.language} == 'es' ? ${item.descripcioCas}:${item.descripcioVal}" th:attr="value=${item.idRol}"></option>
  113. </select>
  114. </div>
  115. </form>
  116. </div>
  117. </div>
  118. <div class="modal-footer">
  119. <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.cancel}">Cancelar</button>
  120. <button class="btn btn-success" type="submit" form="newRoleForm" th:text="#{global.confirm}">Confirmar</button>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <!-- contactModal -->
  126. <div th:replace="~{layouts/common.html :: contactModal}"></div>
  127. <!-- Footer -->
  128. <footer class="uv-footer uv-footer-text" th:replace="~{layouts/common.html :: footer}"></footer>
  129. <script th:src="@{/js/jquery/jquery.min.js}"></script>
  130. <script th:src="@{/js/popper.js}"></script>
  131. <script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
  132. <script th:src="@{/js/fa/all.js}"></script>
  133. <script th:src="@{/js/jquery/jquery.dataTables.min.js}"></script>
  134. <script th:src="@{/js/jquery/jquery.dataTables.responsive.min.js}"></script>
  135. <script th:src="@{/js/jquery/jquery.dataTables.rowReorder.min.js}"></script>
  136. <script th:src="@{/js/bootstrap/dataTables.bootstrap4.min.js}"></script>
  137. <script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
  138. <script th:src="@{/js/saic.js}"></script>
  139. <script th:src="@{/js/datepicker/bootstrap-datepicker.min.js}"></script>
  140. <script th:src="@{/js/bootstrap-select/bootstrap-select.js}"></script>
  141. <script th:src="@{/js/bootstrap-select/i18n/defaults-es_ES.js}" th:if="${#locale.language} == 'es'"></script>
  142. <script th:src="@{/js/bootstrap-select/i18n/defaults-ca_CA.js}" th:if="${#locale.language} != 'es'"></script>
  143. <script type="text/javascript" th:if="${#ctx.containsVariable('restoreCentres')}" th:inline="javascript">
  144. var selcentres = /*[[${restoreCentres}]]*/ "";
  145. selcentres = selcentres.replace('[', '').replace(']', '').split(',')
  146. </script>
  147. <script type="text/javascript" th:if="${#ctx.containsVariable('restoreTitulacions')}" th:inline="javascript">
  148. var seltitulacions = /*[[${restoreTitulacions}]]*/ "";
  149. seltitulacions = seltitulacions.replace('[', '').replace(']', '').split(',')
  150. </script>
  151. <script type="text/javascript">
  152. $( document ).ready(function(){
  153. layout = new Layout("");
  154. layout.initTableLayout({paging:false});
  155. layout.closeLoadingSpinner(".uv-loading-spinner");
  156. $('#newUserContainer').hide();
  157. if($('#centersSelector')){
  158. $('#centersSelector').val('').trigger('change');
  159. $('#centersSelector').change(complete_titulations);
  160. }
  161. if (typeof selcentres !== 'undefined') {
  162. $('#centersSelector').selectpicker('val', selcentres[0]).trigger('change');
  163. delete selcentres;
  164. }
  165. if (typeof seltitulacions !== 'undefined') {
  166. $.post("/ajax/search/managers/titulations", {'center':$('#centersSelector').val()}, function(data) {
  167. $("#titulationsSelector")
  168. .html(data)
  169. .selectpicker('refresh')
  170. .val('')
  171. .trigger('change');
  172. $('#titulationsSelector').selectpicker('val', seltitulacions.map(String)).trigger('refresh');
  173. delete seltitulacions;
  174. });
  175. }
  176. $('#titulationsSelector').on('change', function(){$("#newManagerFields").html('');});
  177. $('#roleCentersSelector').val('').trigger('change');
  178. $('#roleTitulationsSelector').val('').trigger('change');
  179. $('#roleSelector').val('').trigger('change');
  180. $('#userSelector').val('').trigger('change');
  181. $('#roleCentersSelector').change(complete_rolTitulacions);
  182. });
  183. function complete_titulations(){
  184. $.post("/ajax/search/managers/titulations", {'center':$('#centersSelector').val()}, function(data) {
  185. $("#titulationsSelector")
  186. .html(data)
  187. .selectpicker('refresh');
  188. });
  189. }
  190. function complete_rolTitulacions(){
  191. $.post("/ajax/search/managers/titulations", {'center':$('#roleCentersSelector').val()}, function(data) {
  192. $("#roleTitulationsSelector")
  193. .html(data)
  194. .selectpicker('refresh')
  195. .val('')
  196. .trigger('change');
  197. });
  198. }
  199. function search(){
  200. $.post("/managers/search", {'center':$('#centersSelector').val(), 'titulation[]':$('#titulationsSelector').val()}, function(data) {
  201. $("#results")
  202. .html(data)
  203. .selectpicker('refresh');
  204. $('#btnAddManager').show();
  205. $("#newManagerFields").html('');
  206. layout.initTableLayout({paging:false});
  207. });
  208. }
  209. function newUser(){
  210. if(!$('#newUserContainer').is(":visible")){
  211. $('#firstname').val('').attr('required', true);
  212. $('#lastname').val('').attr('required', true);
  213. $('#username').val('').attr('required', true);
  214. $('#email').val('').attr('required', true);
  215. $('#newUserContainer').show();
  216. $('#userSelector').attr('required', false);
  217. $('#userSelectorContainer').hide();
  218. $('#addUserIcon').removeClass('fa-plus');
  219. $('#addUserIcon').addClass('fa-minus');
  220. }
  221. else{
  222. $('#firstname').val('').attr('required', false);
  223. $('#lastname').val('').attr('required', false);
  224. $('#username').val('').attr('required', false);
  225. $('#email').val('').attr('required', false);
  226. $('#newUserContainer').hide();
  227. $('#userSelector').attr('required', true);
  228. $('#userSelectorContainer').show();
  229. $('#addUserIcon').removeClass('fa-minus');
  230. $('#addUserIcon').addClass('fa-plus');
  231. }
  232. }
  233. function setEmail(){
  234. $('#email').val($('#username').val()+'@uv.es');
  235. }
  236. </script>
  237. </body>
  238. </html>