Se agregan la funcion de crear palabras nuevas en panel congfiguracion de palabras

tecnicas/forms/__init__.py

@@ -2,4 +2,5 @@ from .sesion_basic_form import SesionBasicForm
 from .sesion_tags_form import SesionTagsForm
 from .etiqueta_form import EtiquetaForm
 from .codes_form import CodesForm
-from .catador_form import CatadorForm
+from .catador_form import CatadorForm
+from .word_form import WordForm

tecnicas/forms/word_form.py

@@ -0,0 +1,36 @@
+from django import forms
+
+from ..models import Palabra
+
+
+class WordForm(forms.ModelForm):
+    class Meta:
+        model = Palabra
+        fields = ["nombre_palabra"]
+
+        labels = {
+            "nombre_palabra": "nombre_palabra"
+        }
+
+        widgets = {
+            "nombre_palabra": forms.TextInput(attrs={
+                "class": "bg-gray-300 border-b text-center text-black pb-1 rounded",
+                "placeholder": "Ingrese palabra",
+                "oninput": "this.value = this.value.toLowerCase()"
+            })
+        }
+
+        error_messages = {
+            "nombre_palabra": {
+                "required": "parametros requeridos",
+                "unique": "palabra repetida"
+            }
+        }
+
+    def clean_nombre_palabra(self):
+        nombre_palabra = self.cleaned_data.get('nombre_palabra')
+
+        if nombre_palabra:
+            nombre_palabra = nombre_palabra.lower().strip()
+
+        return nombre_palabra

tecnicas/static/js/panel-words.js

@@ -1,3 +1,6 @@
+// **************************************
+// Logic for get to words and render UI
+// **************************************
 const imgList = document.querySelector(".ct-img-list");
 
 const listWordsSelect = [];
@@ -131,14 +134,10 @@ function showWordsFound(words) {
 
 function addWordToUse(word) {
   if (listWordsSelect.find((w) => w.id === word.id)) {
-    const noti = document.querySelector(".ct-notification-red");
-    noti.textContent = `La palabra "${word.nombre_palabra}" ya fue seleccionada`;
-    noti.classList.remove("hidden");
-
-    setTimeout(() => {
-      noti.classList.add("hidden");
-    }, 1800);
-    
+    spanNotificationRed(
+      `La palabra "${word.nombre_palabra}" ya fue seleccionada`
+    );
+
     return;
   }
 
@@ -146,7 +145,25 @@ function addWordToUse(word) {
   updatelistWordsSelect();
 }
 
-function spanNotificationRed(params) {}
+function spanNotificationRed(errorMessage) {
+  const noti = document.querySelector(".ct-notification-red");
+  noti.textContent = errorMessage;
+  noti.classList.remove("hidden");
+
+  setTimeout(() => {
+    noti.classList.add("hidden");
+  }, 2500);
+}
+
+function spanNotificationGreen(message) {
+  const noti = document.querySelector(".ct-notification-green");
+  noti.textContent = message;
+  noti.classList.remove("hidden");
+
+  setTimeout(() => {
+    noti.classList.add("hidden");
+  }, 3000);
+}
 
 function removeWordToUse(word) {
   const index = listWordsSelect.findIndex((w) => w.id === word.id);
@@ -172,72 +189,45 @@ function updatelistWordsSelect() {
   }
 }
 
-/*const selectWordsContainer = document.querySelector(".ct-words-select");
-const tagsWords = document.querySelectorAll(".word");
-let numberWords = 3;
-const allWords = [];
-
-for (let i = 0; i < tagsWords.length; i++) {
-  let atributes = tagsWords.item(i).children;
-  allWords.push({
-    id: atributes[1].innerText,
-    name: atributes[0].innerText,
-    selected: false,
-  });
-}
-
-for (let i = 1; i <= numberWords; i++) {
-  const select = creadSelect(i);
-  selectWordsContainer.appendChild(select);
-}
+// **************************************
+// Logic for post new Word
+// **************************************
+const formNewWord = document.querySelector(".ct-form-new-word");
+formNewWord.addEventListener("submit", postNewWord);
 
-function creadSelect(index) {
-  const label = document.createElement("label");
-  label.attributes["form"] = `palabra-${index}`;
-  label.classList.add(
-    "font-medium",
-    "py-2",
-    "px-3",
-    "bg-gray-200",
-    "capitalize",
-    "rounded",
-    "text-center"
-  );
+async function postNewWord(e) {
+  e.preventDefault();
 
-  const p = document.createElement("p");
-  p.innerText = `Palabra ${index}`;
+  const dataForm = new FormData(this);
+  const url = "api/palabras";
 
-  const select = document.createElement("select");
-  select.attributes["id"] = `palabra-${index}`;
-  select.name = `palabra-${index}`;
-  select.required = true;
-  select.classList.add(
-    "ct-select-op",
-    "p-1",
-    "rounded",
-    "bg-gray-500",
-    "[*]:capitalize",
-    "[*]:text-white"
+  dataForm.set(
+    "nombre_palabra",
+    dataForm.get("nombre_palabra").trim().toLowerCase()
   );
 
-  const emtpyOption = document.createElement("option");
-  emtpyOption.value = "";
-  emtpyOption.innerText = "Seleccione palabra";
-  emtpyOption.attributes["selected"] = true;
-  emtpyOption.attributes["disabled"] = true;
+  try {
+    const respone = await fetch(url, {
+      method: "POST",
+      headers: {
+        "X-CSRFToken": dataForm.get("csrfmiddlewaretoken"),
+      },
+      body: dataForm,
+    });
 
-  select.appendChild(emtpyOption);
+    const jsonResponse = await respone.json();
 
-  allWords.forEach((dataWord, i) => {
-    const option = document.createElement("option");
-    option.value = dataWord.id;
-    option.innerText = dataWord.name;
-    select.appendChild(option);
-  });
+    if (jsonResponse.error) {
+      spanNotificationRed(`Error: ${jsonResponse.error}`);
+      return;
+    }
 
-  label.appendChild(p);
-  label.appendChild(select);
+    const word = jsonResponse["data"];
+    addWordToUse(word);
+    spanNotificationGreen(jsonResponse["message"]);
 
-  return label;
+    formNewWord.reset();
+  } catch (error) {
+    spanNotificationRed(`Error: ${error}`);
+  }
 }
-*/

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-words.html

@@ -27,6 +27,9 @@
                 <section class="flex-3/5 flex flex-col gap-4">
                     <form action="" method="get" class="ct-serach-words">
                         {% csrf_token %}
+                        <p class="text-lg font-bold text-center mb-2 bg-gray-600 p-2 rounded text-white">
+                            Dejar en blaco para buscar las primeras 10 palabras
+                        </p>
                         <section class="flex flex-row gap-2">
                             <label for="search" class="w-full">
                                 <input type="text" name="search" id="search" placeholder="Buscar palabra"
@@ -56,8 +59,32 @@
                 </section>
             </article>
 
+            <article class="ct-new-tags bg-gray-600 p-5 flex justify-center items-center rounded-2xl">
+                <form method="post" action="" class="ct-form-new-word p-3">
+                    {% csrf_token %}
+                    <p class="mb-4 text-2xl font-bold text-center text-white">¿No encuentras una palabra?</p>
+                    <label for="{{ form_word.nombre_palabra.id_for_label }}"
+                        class="font-medium text-xl text-white flex gap-3 mb-4">
+                        <p class="px-4">Nueva palabra:</p>
+                        {{ form_word.nombre_palabra }}
+                    </label>
+                    <p
+                        class="ct-error-word mb-4 font-bold bg-red-500 text-white text-md capitalize text-center rounded hidden">
+                        error</p>
+                    <hr class="text-white">
+                    <article class="flex justify-center gap-8 mt-4 text-white font-medium tracking-wide">
+                        <button class="rounded px-3 py-1 bg-green-700 active:bg-green-600" type="submit">
+                            Crear y agregar a la lista
+                        </button>
+                    </article>
+                </form>
+            </article>
+
+            <article
+                class="ct-notification-red absolute max-md:fixed bottom-0 mb-4 left-1/2 -translate-x-1/2 bg-red-600 text-white p-2 px-4 rounded-lg text-center font-medium hidden uppercase">
+            </article>
             <article
-                class="ct-notification-red absolute max-md:fixed bottom-0 mb-4 left-1/2 -translate-x-1/2 bg-red-600 text-white p-2 px-4 rounded-lg text-center font-medium hidden">
+                class="ct-notification-green absolute max-md:fixed bottom-0 mb-4 left-1/2 -translate-x-1/2 bg-green-600 text-white p-2 px-4 rounded-lg text-center font-medium hidden uppercase">
             </article>
         </article>
     </section>

tecnicas/test/test_words.py

@@ -36,7 +36,8 @@ class TestsApiWords(TestCase):
         word_name = "sal"
         expected_message = "datos localizados"
 
-        expected_data = Palabra.objects.filter(nombre_palabra__contains=word_name)
+        expected_data = Palabra.objects.filter(
+            nombre_palabra__contains=word_name)
 
         response = self.client.get(
             reverse("cata_system:api_palabras")+f"?palabra={word_name}"
@@ -56,12 +57,11 @@ class TestsApiWords(TestCase):
         word_name = "dulce"
         expected_message = "palabra creada"
 
-        response = self.client.post(
-            reverse("cata_system:api_palabras"),
-            data={"nombre_palabra": word_name}
-        )
+        data = {
+            "nombre_palabra": word_name
+        }
 
-        self.assertEqual(response.status_code, 200)
+        response = self.client.post(reverse("cata_system:api_palabras"), data)
 
         res_json = response.json()
 
@@ -73,28 +73,46 @@ class TestsApiWords(TestCase):
         self.assertIn("nombre_palabra", data)
         self.assertEqual(data["nombre_palabra"], word_name)
 
+    def test_post_word_lowercase(self):
+        word_name = "AMargo"
+        expected_message = "palabra creada"
+
+        data = {
+            "nombre_palabra": word_name
+        }
+
+        response = self.client.post(reverse("cata_system:api_palabras"), data)
+
+        res_json = response.json()
+
+        self.assertIn("message", res_json)
+        self.assertEqual(res_json["message"], expected_message)
+
+        data = res_json["data"]
+        self.assertIn("id", data)
+        self.assertIn("nombre_palabra", data)
+        self.assertEqual(data["nombre_palabra"], word_name.lower())
+
     def test_post_word_fail(self):
         word_name = "salado"
         expected_error = "palabra repetida"
 
+        data = {"nombre_palabra": word_name}
+
         response = self.client.post(
             reverse("cata_system:api_palabras"),
-            data={"nombre_palabra": word_name}
+            data
         )
 
-        self.assertEqual(response.status_code, 200)
-
         res_json = response.json()
         self.assertIn("error", res_json)
         self.assertEqual(res_json["error"], expected_error)
-    
+
     def test_post_word_no_parameter(self):
-        expected_error = "parametros no encontrados"
+        expected_error = "parametros requeridos"
 
         response = self.client.post(reverse("cata_system:api_palabras"))
 
-        self.assertEqual(response.status_code, 200)
-
         res_json = response.json()
         self.assertIn("error", res_json)
-        self.assertEqual(res_json["error"], expected_error)
+        self.assertEqual(res_json["error"], expected_error)

tecnicas/views/api_words.py

@@ -2,17 +2,22 @@ from django.http import HttpRequest, JsonResponse
 from django.db import IntegrityError
 from ..models import Palabra
 from ..utils import general_error
+from ..forms.word_form import WordForm
 
 
 def words(req: HttpRequest):
     if req.method == "GET":
         try:
             word_name = req.GET["palabra"]
-            fund_words = Palabra.objects.filter(
-                nombre_palabra__contains=word_name)
+
+            if word_name == "":
+                fund_words = Palabra.objects.all()[:10]
+            else:
+                fund_words = Palabra.objects.filter(
+                    nombre_palabra__startswith=word_name)
         except KeyError:
             return general_error("parametros no encontrados")
-        
+
         if not fund_words:
             return general_error("no existen palabras")
 
@@ -25,17 +30,21 @@ def words(req: HttpRequest):
 
         return JsonResponse(response)
     elif req.method == "POST":
-        try:
-            word_name = req.POST["nombre_palabra"]
-            new_word = Palabra.objects.create(nombre_palabra=word_name)
-        except KeyError:
-            return general_error("parametros no encontrados")
-        except IntegrityError:
-            return general_error("palabra repetida")
+        form = WordForm(req.POST)
 
-        response = {
-            "message": "palabra creada",
-            "data": new_word.to_dict()
-        }
-
-        return JsonResponse(response)
+        if form.is_valid():
+            form.cleaned_data["nombre_palabra"] = form.cleaned_data["nombre_palabra"].lower(
+            )
+            new_word = form.save()
+            send_word = {
+                "nombre_palabra": new_word.nombre_palabra,
+                "id": new_word.id
+            }
+            response = {
+                "message": "palabra creada",
+                "data": send_word
+            }
+            return JsonResponse(response)
+        else:
+            errors = form.errors.get("nombre_palabra")
+            return general_error(errors[0])

tecnicas/views/configuration_panel_words.py

@@ -1,11 +1,15 @@
 from django.http import HttpRequest
 from django.shortcuts import render
 from ..models.palabra import Palabra
+from ..forms.word_form import WordForm
+
 
 def configurationPanelWords(req: HttpRequest):
     if req.method == "GET":
-        allWords =  Palabra.objects.all()
+        form = WordForm()
+        all_words = Palabra.objects.all()
         context = {
-            "words": allWords
+            "words": all_words,
+            "form_word": form
         }
-        return render(req, "tecnicas/create_sesion/configuracion-panel-words.html", context)
+        return render(req, "tecnicas/create_sesion/configuracion-panel-words.html", context)