Manejo de datos en session, validacion de agregar palabra nueva, trato de palabras seleccionadas

tecnicas/forms/atributes_form.py

@@ -0,0 +1,11 @@
+from django import forms
+
+
+class AtributesForm(forms.Form):
+    def __init__(self, *args, atributes=[], **kwargs):
+        super().__init__(*args, **kwargs)
+
+        for index, atribute in enumerate(atributes):
+            self.fields[f'atributo_{index+1}'] = forms.CharField(max_length=150, required=True, min_length=3, initial=atribute, label=f"Atributo {index+1}", widget=forms.TextInput(attrs={
+                "class": "ct-atributo bg-gray-300 p-1 border-b-1 text-center w-full disabled:bg-gray-500 uppercase"
+            }))

tecnicas/forms/word_form.py

@@ -4,33 +4,33 @@ from ..models import Palabra
 
 
 class WordForm(forms.ModelForm):
+    nombre_palabra = forms.CharField(
+        min_length=3,
+        max_length=255,
+        error_messages={
+            "required": "parametros requeridos",
+            "unique": "palabra repetida",  # Ojo: 'unique' lo maneja ModelForm, no aquí
+            "min_length": "la palabra es muy corta",
+            "max_length": "la palabra es muy larga",
+        },
+        widget=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()",
+        })
+    )
+
     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()
 
+        if Palabra.objects.filter(nombre_palabra=nombre_palabra).exists():
+            raise forms.ValidationError("palabra repetida")
+
         return nombre_palabra

tecnicas/static/js/panel-words.js

@@ -14,6 +14,8 @@ const foundWordsContainer = document.getElementsByClassName(
 const formSearch = document.getElementsByClassName("ct-serach-words")[0];
 formSearch.addEventListener("submit", getWordsByName);
 
+checInitWords();
+
 async function getWordsByName(e) {
   e.preventDefault();
   errorp.classList.add("hidden");
@@ -175,6 +177,7 @@ function removeWordToUse(word) {
 
 function updatelistWordsSelect() {
   wordsSelectContainer.innerHTML = "";
+
   listWordsSelect.forEach((word) => {
     const elemtnLi = createWordElement({
       word: word,
@@ -231,3 +234,39 @@ async function postNewWord(e) {
     spanNotificationRed(`Error: ${error}`);
   }
 }
+
+// **************************************
+// Create Session
+// **************************************
+const formCreateSession = document.querySelector(".ct-creat-session");
+formCreateSession.addEventListener("submit", createSession);
+
+async function createSession(e) {
+  e.preventDefault();
+
+  if (listWordsSelect.length === 0) {
+    spanNotificationRed("Debe seleccionar al menos una palabra");
+    return;
+  }
+
+  const wordsInput = document.createElement("input");
+  wordsInput.type = "hidden";
+  wordsInput.name = "words";
+  wordsInput.value = JSON.stringify(listWordsSelect);
+  this.appendChild(wordsInput);
+
+  this.submit();
+}
+
+function checInitWords() {
+  const wordsSends = document.getElementsByClassName("ct-word-received");
+
+  for (let i = 0; i < wordsSends.length; i++) {
+    const id = parseInt(wordsSends.item(i).id);
+    const name = wordsSends.item(i).textContent;
+    const newWord = { id: id, nombre_palabra: name };
+    listWordsSelect.push(newWord);
+  }
+
+  updatelistWordsSelect();
+}

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

@@ -7,14 +7,6 @@
 <article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
     <section class="w-fit h-fit relative">
         <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
-            <ul class="all-words hidden">
-                {% for word in words %}
-                <li class="word">
-                    <p>{{ word.nombre_palabra }}</p>
-                    <p>{{ word.id }}</p>
-                </li>
-                {% endfor %}
-            </ul>
             <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
             <hr>
             {% if error %}
@@ -36,7 +28,7 @@
                                     class="p-2 px-4 bg-gray-200 rounded-lg w-full text-lg font-medium">
                             </label>
                             <button type="submit"
-                                class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit capitalize">
+                                class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-blue-500 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit capitalize">
                                 Buscar
                             </button>
                         </section>
@@ -44,17 +36,27 @@
                     <p
                         class="ct-error-words hidden capitalize text-white bg-red-600 text-center text-2xl p-1.5 rounded">
                         error</p>
-                    <ul class="ct-palabras-encontradas  gap-2 grid-cols-2 max-h-96 overflow-y-auto">
-                        <object type="image/svg" class="flex justify-center items-center h-full">
-                            <img src="{% static 'img/lupa.svg' %}" alt="lupa de busqueda" class="h-full">
-                        </object>
+                    <ul class="ct-palabras-encontradas gap-2 grid-cols-2 max-h-96 overflow-y-auto">
+                        <div class="flex justify-center items-center">
+                            <img src="{% static 'img/lupa.svg' %}" alt="lupa de busqueda" style="width: 50%;">
+                        </div>
                     </ul>
                 </section>
                 <section class="flex-1/3 bg-gray-600 text-white p-4 rounded-lg text-center min-h-96">
                     <p class="text-xl font-bold pb-3">Lista de palabras</p>
                     <hr class="mb-3 text-white">
                     <ul class="ct-palabras-usadas flex flex-col gap-3">
+                        {% if not words %}
                         <img src="{% static 'img/list.svg' %}" alt="lista de palabras" class="ct-img-list">
+                        {% endif %}
+                        {% for word in words %}
+                        <li
+                            class="bg-gray-400 text-black rounded font-bold text-lg px-4 py-3 flex flex-wrap flex-row flex-1 min-w-fit justify-center items-center gap-3">
+                            <p class="ct-word-received" id="{{ word.id }}">{{ word.nombre_palabra }}</p>
+                            <button
+                                class="px-4 border-b-2 active:border-b-0 active:border-t-2 transition-all rounded-xl font-black w-fit capitalize active:border-red-500 border-red-800 bg-red-500">➖</button>
+                        </li>
+                        {% endfor %}
                     </ul>
                 </section>
             </article>
@@ -62,24 +64,39 @@
             <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>
+                    <p class="mb-4 text-2xl min-md:text-xl 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">
+                        class="font-medium text-xl text-white flex flex-wrap justify-center items-center 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>
+                        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">
+                        <button
+                            class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-green-500 border-green-800  transition-all rounded-xl bg-green-600 text-white w-fit"
+                            type="submit">
                             Crear y agregar a la lista
                         </button>
                     </article>
                 </form>
             </article>
 
+            <article>
+                <form action="" method="post" class="ct-creat-session flex justify-center mt-4">
+                    {% csrf_token %}
+                    <button type="submit" name="start"
+                        class="text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit capitalize">
+                        Iniciar sesión
+                    </button>
+                </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>

tecnicas/test/test_words.py

@@ -116,3 +116,18 @@ class TestsApiWords(TestCase):
         res_json = response.json()
         self.assertIn("error", res_json)
         self.assertEqual(res_json["error"], expected_error)
+
+    def test_post_word_too_short(self):
+        word_name = "ab"
+        expected_error = "la palabra es muy corta"
+
+        data = {"nombre_palabra": word_name}
+
+        response = self.client.post(
+            reverse("cata_system:api_palabras"),
+            data
+        )
+
+        res_json = response.json()
+        self.assertIn("error", res_json)
+        self.assertEqual(res_json["error"], expected_error)

tecnicas/views/configuration_panel_codes.py

@@ -7,12 +7,12 @@ import json
 
 
 def configurationPanelCodes(req: HttpRequest):
-    data_basic = req.session["form_basic"]
-    data_tags = req.session["form_tags"]
+    if not req.session.get("form_basic") or not req.session.get("form_tags"):
+        req.session.flush()
+        return redirect(reverse("cata_system:seleccion_tecnica") +
+                        "?error=datos del formulario requerido no encontrados")
 
-    if not data_basic or not data_tags:
-        redirect(reverse("cata_system:seleccion_tecnica") +
-                 "?error=datos del formulario requerido no encontrados")
+    data_basic = req.session["form_basic"]
 
     num_products = data_basic["numero_productos"]
     num_tester = data_basic["numero_catadores"]

tecnicas/views/configuration_panel_words.py

@@ -1,15 +1,51 @@
 from django.http import HttpRequest
-from django.shortcuts import render
+from django.shortcuts import render, redirect
+from django.urls import reverse
 from ..models.palabra import Palabra
 from ..forms.word_form import WordForm
 
+import json
+
 
 def configurationPanelWords(req: HttpRequest):
+    if not req.session.get("form_basic") or not req.session.get("form_tags") or not req.session.get("form_codes"):
+        req.session.flush()
+        return redirect(reverse("cata_system:seleccion_tecnica") +
+                        "?error=datos del formulario requerido no encontrados")
+
+    form = WordForm()
+    context = {
+        "form_word": form
+    }
+
     if req.method == "GET":
-        form = WordForm()
-        all_words = Palabra.objects.all()
-        context = {
-            "words": all_words,
-            "form_word": form
-        }
+        return render(req, "tecnicas/create_sesion/configuracion-panel-words.html", context)
+    elif req.method == "POST":
+        if not req.POST.get("words"):
+            return render(req, "tecnicas/create_sesion/configuracion-panel-words.html", context)
+
+        words = json.loads(req.POST.get("words"))
+
+        context["words"] = words
+
+        print(words)
+
+        # form = WordForm(req.POST)
+        # all_words = Palabra.objects.all()
+        # context = {
+        #     "words": all_words,
+        #     "form_word": form
+        # }
+
+        # if form.is_valid():
+        #     new_word = form.cleaned_data.get("nombre_palabra")
+        #     if not Palabra.objects.filter(nombre_palabra__iexact=new_word).exists():
+        #         Palabra.objects.create(nombre_palabra=new_word)
+        #         context["form_word"] = WordForm()
+        #         context["words"] = Palabra.objects.all()
+        #     else:
+        #         context["error"] = "La palabra ya existe"
+        # else:
+        #     context["error"] = "Error en los datos recibidos"
+
         return render(req, "tecnicas/create_sesion/configuracion-panel-words.html", context)