From cdbd05aa25c7b9219945c0799a97a039a3b6debe Mon Sep 17 00:00:00 2001
From: vicsash <victorsash96@gmail.com>
Date: Fri, 17 May 2024 16:57:54 +0200
Subject: [PATCH] Acabando con implementacion de keyword para almnos y empresas

---
 .../modelControllers/AlumnoController.java    | 15 +++++-
 .../modelControllers/EmpressaController.java  | 14 +++++-
 .../templates/admin/alumno/create.html        | 35 ++++++++++----
 .../templates/admin/alumno/update.html        | 33 +++++++++++--
 .../templates/admin/empresa/create.html       | 39 +++++++++++----
 .../templates/admin/empresa/update.html       | 47 ++++++++++++++-----
 .../resources/templates/list/empresas.html    |  2 +-
 7 files changed, 144 insertions(+), 41 deletions(-)

diff --git a/src/main/java/com/example/proyectofinal/controllers/modelControllers/AlumnoController.java b/src/main/java/com/example/proyectofinal/controllers/modelControllers/AlumnoController.java
index ebb1d42..b0f22b3 100644
--- a/src/main/java/com/example/proyectofinal/controllers/modelControllers/AlumnoController.java
+++ b/src/main/java/com/example/proyectofinal/controllers/modelControllers/AlumnoController.java
@@ -59,11 +59,17 @@ public class AlumnoController {
     @PostMapping("/alumno/save")
     public ResponseEntity<String> saveAlumno(Alumno alumno, @RequestParam("ciclo") Long ciclo, @RequestParam("skills") List<Long> skills, @RequestParam("joinedKeywords") String keywords){
         try{
+            //For some reason the transef of keywords from html to controllers is not done completely right
+            //due to the fact that the first character is always a comma, so we need to remove it
+            if (keywords != null && !keywords.isEmpty() && keywords.charAt(0) == ',') {
+                keywords = keywords.substring(1);
+            }
             Ciclo cicloEntity = cicloService.findById(ciclo);
             Set<Skill> skillEntities = skillService.findAllByIds(skills);
             alumno.setCiclo(cicloEntity);
             alumno.setSkills(skillEntities);
-            alumno.setKeywords(keywords); // Set the keywords from the joinedKeywords string
+            assert keywords != null;
+            alumno.setKeywords(keywords);
             Alumno testIfExist = alumnoService.exists(alumno);
             if(testIfExist != null){
                 return new ResponseEntity<>("El alumno ya existe", HttpStatus.BAD_REQUEST);
@@ -109,12 +115,17 @@ public class AlumnoController {
 
 
     @PostMapping("/alumno/update")
-    public ResponseEntity<String> updateAlumno(Alumno alumno, @RequestParam("ciclo") Long ciclo, @RequestParam("skills") List<Long> skills){
+    public ResponseEntity<String> updateAlumno(Alumno alumno, @RequestParam("ciclo") Long ciclo, @RequestParam("skills") List<Long> skills,@RequestParam("joinedKeywords") String keywords){
         try{
+            if (keywords != null && !keywords.isEmpty() && keywords.charAt(0) == ',') {
+                keywords = keywords.substring(1);
+            }
             Ciclo cicloEntity = cicloService.findById(ciclo);
             Set<Skill> skillEntities = skillService.findAllByIds(skills);
             alumno.setCiclo(cicloEntity);
             alumno.setSkills(skillEntities);
+            assert keywords != null;
+            alumno.setKeywords(keywords);
             alumnoService.save(alumno);
             return new ResponseEntity<>("El alumno fue actualizado con exito", HttpStatus.OK);
         }catch (Exception e) {
diff --git a/src/main/java/com/example/proyectofinal/controllers/modelControllers/EmpressaController.java b/src/main/java/com/example/proyectofinal/controllers/modelControllers/EmpressaController.java
index 72f3c36..c725c8a 100644
--- a/src/main/java/com/example/proyectofinal/controllers/modelControllers/EmpressaController.java
+++ b/src/main/java/com/example/proyectofinal/controllers/modelControllers/EmpressaController.java
@@ -61,8 +61,13 @@ public class EmpressaController {
 
 
     @PostMapping("/empresa/save")
-    public ResponseEntity<String> saveEmpresa(Empresa empresa, @RequestParam("sector.id") Long sectorId){
+    public ResponseEntity<String> saveEmpresa(Empresa empresa, @RequestParam("sector.id") Long sectorId, @RequestParam("joinedKeywords") String keywords){
         try{
+            if (keywords != null && !keywords.isEmpty() && keywords.charAt(0) == ',') {
+                keywords = keywords.substring(1);
+            }
+            assert keywords != null;
+            empresa.setKeywords(keywords);
             Sector existingSector = sectorService.findById(sectorId);
             empresa.setSector(existingSector);
             if(empresaService.exists(empresa) != null){
@@ -98,8 +103,13 @@ public class EmpressaController {
 
 
     @PostMapping("/empresa/update")
-    public ResponseEntity<String> updateEmpresa(Empresa empresa, @RequestParam("sector.id") Long sectorId){
+    public ResponseEntity<String> updateEmpresa(Empresa empresa, @RequestParam("sector.id") Long sectorId, @RequestParam("joinedKeywords") String keywords){
         try{
+            if (keywords != null && !keywords.isEmpty() && keywords.charAt(0) == ',') {
+                keywords = keywords.substring(1);
+            }
+            assert keywords != null;
+            empresa.setKeywords(keywords);
             Sector existingSector = sectorService.findById(sectorId);
             if(existingSector != null) {
                 empresa.setSector(existingSector);
diff --git a/src/main/resources/templates/admin/alumno/create.html b/src/main/resources/templates/admin/alumno/create.html
index b823d3f..d285e20 100644
--- a/src/main/resources/templates/admin/alumno/create.html
+++ b/src/main/resources/templates/admin/alumno/create.html
@@ -99,7 +99,6 @@
         <div class ="form-group row">
             <label class="col-sm-3 col-form-label" for="nia">Nia</label>
             <div class = "col-sm-9">
-                <!--TODO: Añadir validacion de nia-->
                 <input type="text" th:field="*{nia}"   required minlength="8" maxlength="8" title="Entra un nia correcto" class="form-control" id="nia">
             </div>
         </div>
@@ -121,7 +120,7 @@
         <div class="form-group row">
             <label class="col-sm-3 col-form-label" for="correo2">Correo2</label>
             <div class="col-sm-9">
-                <input type="email" th:field="*{correo2}" required minlength="5" maxlength="100" class="form-control" id="correo2" title="Introduce correo alternativo">
+                <input type="email" th:field="*{correo2}" minlength="5" maxlength="100" class="form-control" id="correo2" title="Introduce correo alternativo">
             </div>
         </div>
 
@@ -164,30 +163,46 @@
     </div>
 </form>
 <script>
-    var input = document.querySelector('input[name=tags]');
-    new Tagify(input);
     $(document).ready(function() {
         $('#skills').select2();
     });
-
     function goBack() {
         window.history.back();
     }
     $(document).ready(function() {
         $('#skills').select2();
-
         var tagifyInput = document.querySelector('input[name=tags]');
-        var tagify = new Tagify(tagifyInput); // Create a new instance of Tagify
+        var tagify = new Tagify(tagifyInput, {
+            callbacks: {
+                add: function(e){
+                    if(e.detail.data.value.trim() === ""){
+                        this.removeTag(e.detail.data, {backspace: true});
+                    }
+                   //console.log('Tag added: ', e.detail.data.value); // Log the added tag
+                   //console.log('Current tags: ', tagify.value.map(function(tagData) { return tagData.value ? tagData.value.trim() : null; }).join(',')); // Log the current tags
+                },
+                remove: function(e){
+                   //console.log('Tag removed: ', e.detail.data.value); // Log the removed tag
+                   //console.log('Current tags: ', tagify.value.map(function(tagData) { return tagData.value ? tagData.value.trim() : null; }).join(',')); // Log the current tags
+                }
+            }
+        });
 
         $("form").on("submit", function (event) {
             event.preventDefault();
 
             var formDataArray = $(this).serializeArray();
-            var tags = tagify.value.map(function(tagData) { return tagData.value; }); // Use the tagify instance to get the tags
+            var tags = tagify.value.map(function(tagData) {
+                return tagData.value ? tagData.value.trim() : null;
+            }).filter(function(tag) { return tag; });
+
+            // Convert the tags array to a comma-separated string
+            var joinedKeywords = tags.join(',');
+
             formDataArray.push({name: 'ciclo', value: $('#ciclo').val()});
             formDataArray.push({name: 'skills', value: $('#skills').val()});
-            var joinedKeywords = tags.join(',');
-            $('#joinedKeywords').val(joinedKeywords);
+            formDataArray.push({name: 'joinedKeywords', value: joinedKeywords});
+            //console.log('Joined keywords: ', joinedKeywords); // Log the joinedKeywords value
 
             $.ajax({
                 url: '/alumno/save',
diff --git a/src/main/resources/templates/admin/alumno/update.html b/src/main/resources/templates/admin/alumno/update.html
index cba611f..cc4d47e 100644
--- a/src/main/resources/templates/admin/alumno/update.html
+++ b/src/main/resources/templates/admin/alumno/update.html
@@ -10,6 +10,8 @@
     <link rel="stylesheet" type="text/css" th:href="@{/top.css}">
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify/dist/tagify.css">
+    <script src="https://unpkg.com/@yaireo/tagify"></script>
     <style>
         form {
             display: flex;
@@ -119,7 +121,7 @@
         <div class="form-group row">
             <label class="col-sm-3 col-form-label" for="correo2">Correo2</label>
             <div class="col-sm-9">
-                <input type="email" th:field="*{correo2}"  required minlength="5" maxlength="100"class="form-control" id="correo2" title="Introduce correo alternativo">
+                <input type="email" th:field="*{correo2}"   minlength="5" maxlength="100"class="form-control" id="correo2" title="Introduce correo alternativo">
             </div>
         </div>
 
@@ -133,9 +135,10 @@
         <div class="form-group row">
             <label class="col-sm-3 col-form-label" for="keywords">Keywords</label>
             <div class="col-sm-9">
-                <input type="text" th:field="*{keywords}" class="form-control" id="keywords" title="Introduce keywords">
+                <input name="tags" id="keywords" placeholder="Introduce keywords">
             </div>
         </div>
+        <input type="hidden" id="joinedKeywords" name="joinedKeywords">
 
         <!-- Ciclos -->
         <div class="form-group row">
@@ -160,8 +163,23 @@
         </div>
     </div>
 </form>
-
 <script>
+    var tagify; // Declare tagify outside of the $(document).ready() function
+
+    $(document).ready(function() {
+        // Get the keywords from the Alumno object
+        var keywords = "[[${alumno.keywords}]]";
+
+        // Split the keywords string into an array of keywords
+        var keywordsArray = keywords.split(',');
+
+        // Set the value of the keywords input field
+        var tagifyInput = document.querySelector('input[name=tags]');
+        tagify = new Tagify(tagifyInput); // Initialize tagify
+
+        tagify.addTags(keywordsArray);
+    });
+
     $(document).ready(function() {
         $('#skills').select2();
     });
@@ -169,13 +187,22 @@
     function goBack() {
         window.history.back();
     }
+
     $(document).ready(function () {
         $("form").on("submit", function (event) {
             event.preventDefault();
 
             var formDataArray = $(this).serializeArray();
+            var tags = tagify.value.map(function(tagData) {
+                return tagData.value ? tagData.value.trim() : null;
+            }).filter(function(tag) { return tag; });
+
+            // Convert the tags array to a comma-separated string
+            var joinedKeywords = tags.join(',');
+
             formDataArray.push({name: 'ciclo', value: $('#ciclo').val()});
             formDataArray.push({name: 'skills', value: $('#skills').val()});
+            formDataArray.push({name: 'joinedKeywords', value: joinedKeywords});
 
             $.ajax({
                 url: '/alumno/update',
diff --git a/src/main/resources/templates/admin/empresa/create.html b/src/main/resources/templates/admin/empresa/create.html
index e55a07f..690351b 100644
--- a/src/main/resources/templates/admin/empresa/create.html
+++ b/src/main/resources/templates/admin/empresa/create.html
@@ -8,6 +8,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" th:href="@{/top.css}">
+    <link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify/dist/tagify.css">
+    <script src="https://unpkg.com/@yaireo/tagify"></script>
     <style>
         form {
             display: flex;
@@ -71,7 +73,7 @@
         <div class ="form-group row">
             <label class="col-sm-3 col-form-label" for="correo">Correo</label>
             <div class = "col-sm-9">
-                <input type="text" th:field="*{correo}" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Entra en correo valido." class="form-control" id="correo">
+                <input type="email" th:field="*{correo}" required minlength="5" maxlength="100" title="Entra en correo valido." class="form-control" id="correo">
             </div>
         </div>
 
@@ -82,12 +84,14 @@
             </div>
         </div>
 
-        <div class ="form-group row">
+        <div class="form-group row">
             <label class="col-sm-3 col-form-label" for="keywords">Keywords</label>
-            <div class = "col-sm-9">
-                <input type="text" th:field="*{keywords}" required pattern="([a-zA-Z0-9]+,)*[a-zA-Z0-9]+" title="Los keywords tiene que ser separados por una ," class="form-control" id="keywords">
+            <div class="col-sm-9">
+                <input name="tags" id="keywords" placeholder="Introduce keywords">
             </div>
         </div>
+        <input type="hidden" id="joinedKeywords" name="joinedKeywords">
+
 
         <div class ="form-group row">
             <label class="col-sm-3 col-form-label" for="sector">Sector</label>
@@ -106,21 +110,38 @@
 </form>
 
 <script>
+    var tagify; // Declare tagify outside of the $(document).ready() function
+
+    $(document).ready(function() {
+        // Set the value of the keywords input field
+        var tagifyInput = document.querySelector('input[name=tags]');
+        tagify = new Tagify(tagifyInput); // Initialize tagify
+    });
+
     function goBack() {
         console.log("goBack function called");
         window.history.back();
     }
+
     $(document).ready(function () {
         $("form").on("submit", function (event) {
             event.preventDefault();
 
-            var formData = $(this).serialize();
-            var sectorId = $('#sector').val();
-            formData += '&empresa=' + encodeURIComponent(sectorId);
+            var formDataArray = $(this).serializeArray();
+            var tags = tagify.value.map(function(tagData) {
+                return tagData.value ? tagData.value.trim() : null;
+            }).filter(function(tag) { return tag; });
+
+            // Convert the tags array to a comma-separated string
+            var joinedKeywords = tags.join(',');
+
+            formDataArray.push({name: 'empresa', value: $('#sector').val()});
+            formDataArray.push({name: 'joinedKeywords', value: joinedKeywords});
+
             $.ajax({
                 url: '/empresa/save',
                 type: 'post',
-                data: formData,
+                data: $.param(formDataArray),
                 success: function (message) {
                     if(message === "La empresa fue guardado con exito") {
                         alert("La empresa fue guardado con exito")
@@ -140,8 +161,6 @@
             });
         });
     });
-
-
 </script>
 </body>
 </html>
diff --git a/src/main/resources/templates/admin/empresa/update.html b/src/main/resources/templates/admin/empresa/update.html
index 52722a0..f9b7089 100644
--- a/src/main/resources/templates/admin/empresa/update.html
+++ b/src/main/resources/templates/admin/empresa/update.html
@@ -8,6 +8,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" th:href="@{/top.css}">
+    <link rel="stylesheet" href="https://unpkg.com/@yaireo/tagify/dist/tagify.css">
+    <script src="https://unpkg.com/@yaireo/tagify"></script>
     <style>
         form {
             display: flex;
@@ -83,12 +85,13 @@
             </div>
         </div>
 
-        <div class ="form-group row">
+        <div class="form-group row">
             <label class="col-sm-3 col-form-label" for="keywords">Keywords</label>
-            <div class = "col-sm-9">
-                <input type="text" th:field="*{keywords}" th:value="*{keywords}" required pattern="([a-zA-Z0-9]+,)*[a-zA-Z0-9]+" title="Los keywords tiene que ser separados por una ," class="form-control" id="keywords">
+            <div class="col-sm-9">
+                <input name="tags" id="keywords" placeholder="Introduce keywords">
             </div>
         </div>
+        <input type="hidden" id="joinedKeywords" name="joinedKeywords">
 
         <div class ="form-group row">
             <label class="col-sm-3 col-form-label" for="sector">Sector</label>
@@ -107,21 +110,41 @@
 </form>
 
 <script>
-    function goBack() {
-        console.log("goBack function called");
-        window.history.back();
-    }
+    var tagify; // Declare tagify outside of the $(document).ready() function
+
+    $(document).ready(function() {
+        // Get the keywords from the Empresa object
+        var keywords = "[[${empresa.keywords}]]";
+
+        // Split the keywords string into an array of keywords
+        var keywordsArray = keywords.split(',');
+
+        // Set the value of the keywords input field
+        var tagifyInput = document.querySelector('input[name=tags]');
+        tagify = new Tagify(tagifyInput); // Initialize tagify
+
+        tagify.addTags(keywordsArray);
+    });
+
     $(document).ready(function () {
         $("form").on("submit", function (event) {
             event.preventDefault();
 
-            var formData = $(this).serialize();
-            var sectorId = $('#sector').val();
-            formData += '&sector=' + encodeURIComponent(sectorId);
+            var formDataArray = $(this).serializeArray();
+            var tags = tagify.value.map(function(tagData) {
+                return tagData.value ? tagData.value.trim() : null;
+            }).filter(function(tag) { return tag; });
+
+            // Convert the tags array to a comma-separated string
+            var joinedKeywords = tags.join(',');
+
+            formDataArray.push({name: 'empresa', value: $('#sector').val()});
+            formDataArray.push({name: 'joinedKeywords', value: joinedKeywords});
+
             $.ajax({
                 url: '/empresa/update',
                 type: 'post',
-                data: formData,
+                data: $.param(formDataArray),
                 success: function (message) {
                     if(message === "Los datos de la empresa fue renovados con exito") {
                         alert("Los datos de la empresa fue renovada con exito")
@@ -138,8 +161,6 @@
             });
         });
     });
-
-
 </script>
 </body>
 </html>
diff --git a/src/main/resources/templates/list/empresas.html b/src/main/resources/templates/list/empresas.html
index caec991..14870e0 100644
--- a/src/main/resources/templates/list/empresas.html
+++ b/src/main/resources/templates/list/empresas.html
@@ -174,7 +174,7 @@
                 url: '/empresa/delete/' + rowId,
                 type: 'GET',
                 success: function (response) {
-                    if (response === "La empresa ha sido eliminada") {
+                    if (response === "La empresa ha sido eliminado") {
                         alert("Empresa borrada con exito");
                         window.location.reload();
                     } else {