Funcion para elejir palabras para usar en formulario de configuracion de sesion

tecnicas/static/js/panel-words.js

@@ -1,4 +1,178 @@
-const selectWordsContainer = document.querySelector(".ct-words-select");
+const imgList = document.querySelector(".ct-img-list");
+
+const listWordsSelect = [];
+const wordsSelectContainer = document.querySelector(".ct-palabras-usadas");
+
+const errorp = document.getElementsByClassName("ct-error-words")[0];
+const foundWordsContainer = document.getElementsByClassName(
+  "ct-palabras-encontradas"
+)[0];
+
+const formSearch = document.getElementsByClassName("ct-serach-words")[0];
+formSearch.addEventListener("submit", getWordsByName);
+
+async function getWordsByName(e) {
+  e.preventDefault();
+  errorp.classList.add("hidden");
+  foundWordsContainer.innerHTML = "";
+
+  let words = [];
+
+  const dataForm = new FormData(this);
+  const params = new URLSearchParams({
+    palabra: dataForm.get("search").trim(),
+  });
+
+  const url = `api/palabras?${params}`;
+
+  try {
+    const respone = await fetch(url, {
+      method: "GET",
+      headers: {
+        "X-CSRFToken": dataForm.get("csrfmiddlewaretoken"),
+      },
+    });
+
+    const jsonResponse = await respone.json();
+
+    if (jsonResponse.error) {
+      errorp.textContent = `Error: ${jsonResponse.error}`;
+      errorp.classList.remove("hidden");
+      return;
+    }
+
+    words = jsonResponse["data"];
+  } catch (error) {
+    console.log("Error:", error);
+  }
+
+  showWordsFound(words);
+}
+
+function createWordElement({ word, add = true, callback = null }) {
+  const li = document.createElement("li");
+  li.classList.add(
+    add ? "bg-gray-600" : "bg-gray-400",
+    add ? "text-white" : "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"
+  );
+
+  const pName = document.createElement("p");
+  pName.textContent = word.nombre_palabra;
+  pName.id = word.id;
+
+  let callButton;
+
+  if (callback) {
+    callButton = () => callback(word);
+  }
+
+  li.appendChild(pName);
+  li.appendChild(createButton(add, callButton));
+
+  return li;
+}
+
+function createButton(add = true, callback = null) {
+  const button = document.createElement("button");
+  button.textContent = add ? "➕" : "➖";
+  button.classList.add(
+    "px-4",
+    "border-b-2",
+    "active:border-b-0",
+    "active:border-t-2",
+    "transition-all",
+    "rounded-xl",
+    "font-black",
+    "w-fit",
+    "capitalize"
+  );
+
+  button.classList.add(
+    add ? "active:border-green-500" : "active:border-red-500",
+    add ? "border-green-800" : "border-red-800",
+    add ? "bg-green-500" : "bg-red-500"
+  );
+
+  if (callback) {
+    button.addEventListener("click", callback);
+  }
+
+  return button;
+}
+
+function swtichGridSearch(change = true) {
+  change
+    ? foundWordsContainer.classList.add("grid")
+    : foundWordsContainer.classList.remove("grid");
+}
+
+function showWordsFound(words) {
+  foundWordsContainer.innerHTML = "";
+  swtichGridSearch();
+
+  words.forEach((word) => {
+    const elemtnLi = createWordElement({ word: word, callback: addWordToUse });
+    foundWordsContainer.appendChild(elemtnLi);
+  });
+}
+
+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);
+    
+    return;
+  }
+
+  listWordsSelect.push(word);
+  updatelistWordsSelect();
+}
+
+function spanNotificationRed(params) {}
+
+function removeWordToUse(word) {
+  const index = listWordsSelect.findIndex((w) => w.id === word.id);
+  if (index > -1) {
+    listWordsSelect.splice(index, 1);
+    updatelistWordsSelect();
+  }
+}
+
+function updatelistWordsSelect() {
+  wordsSelectContainer.innerHTML = "";
+  listWordsSelect.forEach((word) => {
+    const elemtnLi = createWordElement({
+      word: word,
+      add: false,
+      callback: removeWordToUse,
+    });
+    wordsSelectContainer.appendChild(elemtnLi);
+  });
+
+  if (listWordsSelect.length === 0) {
+    wordsSelectContainer.appendChild(imgList);
+  }
+}
+
+/*const selectWordsContainer = document.querySelector(".ct-words-select");
 const tagsWords = document.querySelectorAll(".word");
 let numberWords = 3;
 const allWords = [];
@@ -66,3 +240,4 @@ function creadSelect(index) {
 
   return label;
 }
+*/

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

@@ -23,35 +23,42 @@
             </p>
             {% endif %}
 
-            <article class="flex flex-col md:flex-row gap-5 justify-between items-center">
-                <section class="flex-1/3 bg-gray-600 text-white p-4 rounded-lg text-center">
-                    <p>Soy una palabra</p>
-                </section>
-                <section class="flex-2/3 w-full">
-                    <form action="" method="get" class="h-full w-full">
+            <article class="flex flex-col md:flex-row gap-5 justify-between">
+                <section class="flex-3/5 flex flex-col gap-4">
+                    <form action="" method="get" class="ct-serach-words">
                         {% csrf_token %}
-                        <label for="search">
-                            <input type="text" name="search" id="search" placeholder="Buscar palabra"
-                                class="p-2 px-4 bg-gray-200 rounded-lg w-full text-lg">
-                        </label>
+                        <section class="flex flex-row gap-2">
+                            <label for="search" class="w-full">
+                                <input type="text" name="search" id="search" placeholder="Buscar palabra"
+                                    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">
+                                Buscar
+                            </button>
+                        </section>
                     </form>
+                    <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>
+                </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">
+                        <img src="{% static 'img/list.svg' %}" alt="lista de palabras" class="ct-img-list">
+                    </ul>
                 </section>
             </article>
 
-
-            <form action="" method="post" class="flex flex-col gap-5">
-                {% csrf_token %}
-                <article class="p-4 flex flex-col items-center gap-2 rounded">
-                    <h2 class="text-2xl mb-2 text-center font-bold">Estilo Atributos<br>Seleccion de palabras</h2>
-                    <div class="ct-words-select flex flex-row flex-wrap justify-center items-center gap-5 text-lg">
-                    </div>
-                    <hr>
-                    <button type="button"
-                        class="ct-gen-or 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">
-                        Agregar otra palabra
-                    </button>
-                </article>
-            </form>
+            <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">
+            </article>
         </article>
     </section>
 </article>

tecnicas/test/test_words.py

@@ -7,9 +7,9 @@ class TestsApiWords(TestCase):
     def setUp(self):
         Palabra.objects.create(nombre_palabra="salado")
 
-    def test_get_word_fail(self):
+    def test_get_words_fail(self):
         word_name = "dulce"
-        expected_error = "palabra no encontrada"
+        expected_error = "no existen palabras"
 
         response = self.client.get(
             reverse("cata_system:api_palabras")+f"?palabra={word_name}"
@@ -21,7 +21,7 @@ class TestsApiWords(TestCase):
         self.assertIn("error", res_json)
         self.assertEqual(res_json["error"], expected_error)
 
-    def test_get_word_no_parameter(self):
+    def test_get_words_no_parameter(self):
         expected_error = "parametros no encontrados"
 
         response = self.client.get(reverse("cata_system:api_palabras"))
@@ -32,11 +32,11 @@ class TestsApiWords(TestCase):
         self.assertIn("error", res_json)
         self.assertEqual(res_json["error"], expected_error)
 
-    def test_get_word_success(self):
-        word_name = "salado"
-        expected_message = "dato localizado"
+    def test_get_words_success(self):
+        word_name = "sal"
+        expected_message = "datos localizados"
 
-        expected_data = Palabra.objects.get(nombre_palabra=word_name).to_dict()
+        expected_data = Palabra.objects.filter(nombre_palabra__contains=word_name)
 
         response = self.client.get(
             reverse("cata_system:api_palabras")+f"?palabra={word_name}"
@@ -50,8 +50,7 @@ class TestsApiWords(TestCase):
         self.assertEqual(res_json["message"], expected_message)
 
         data = res_json["data"]
-        self.assertEqual(data["id"], expected_data["id"])
-        self.assertEqual(data["name"], expected_data["nombre_palabra"])
+        self.assertEqual(len(data), len(expected_data))
 
     def test_post_word_success(self):
         word_name = "dulce"

tecnicas/views/api_words.py

@@ -8,18 +8,19 @@ def words(req: HttpRequest):
     if req.method == "GET":
         try:
             word_name = req.GET["palabra"]
-            fund_word = Palabra.objects.get(nombre_palabra=word_name)
+            fund_words = Palabra.objects.filter(
+                nombre_palabra__contains=word_name)
         except KeyError:
             return general_error("parametros no encontrados")
-        except Palabra.DoesNotExist:
-            return general_error("palabra no encontrada")
+        
+        if not fund_words:
+            return general_error("no existen palabras")
+
+        response_words = [word.to_dict() for word in fund_words]
 
         response = {
-            "message": "dato localizado",
-            "data": {
-                "id": fund_word.id,
-                "name": fund_word.nombre_palabra,
-            }
+            "message": "datos localizados",
+            "data": response_words
         }
 
         return JsonResponse(response)