Creacion de Vocabularios

tecnicas/admin.py

@@ -6,7 +6,7 @@ from .models import Catador, Presentador
 
 from .models import Tecnica, SesionSensorial
 
-from .models import EsAtributo, Palabra
+from .models import EsAtributo, Palabra, Vocabulario
 
 from .models import Etiqueta, Escala, EtiquetasEscala
 
@@ -31,6 +31,7 @@ admin.site.register(SesionSensorial)
 
 admin.site.register(EsAtributo)
 admin.site.register(Palabra)
+admin.site.register(Vocabulario)
 
 admin.site.register(Escala)
 admin.site.register(EtiquetasEscala)

tecnicas/controllers/__init__.py

@@ -29,6 +29,8 @@ from .views_controller.sessions_tester.login_session_tester_controller import Lo
 from .views_controller.sessions_tester.init_session_tester_controller import InitSessionTesterController
 from .views_controller.sessions_tester.convencional_scales_controller import ConvencionalScalesController
 
+from .views_controller.vocabulary_manage.create_vocabulary_controller import CreateVocabularyController
+
 from .views_controller.api_rating_controller import ApiRatingController
 from .views_controller.tester_list_controller import TesterListController
 from .views_controller.list_sessions_tester_controller import ListSessionsTesterController

tecnicas/controllers/views_controller/vocabulary_manage/create_vocabulary_controller.py

@@ -0,0 +1,68 @@
+from django.shortcuts import render
+from django.db import IntegrityError
+from django.http import HttpRequest
+from tecnicas.forms import WordForm
+from tecnicas.models import Vocabulario, Palabra
+import json
+
+
+class CreateVocabularyController():
+    context = {}
+    current_url = "tecnicas/manage_vocabulary/create-vocabulary.html"
+
+    def __init__(self, form_word: WordForm = WordForm(), list_words: list = []):
+        self.context["form_word"] = form_word
+        self.context["words"] = list_words
+
+    def controllGet(self, request: HttpRequest):
+        self.context = {
+            "form_word": self.context["form_word"],
+            "words": self.context["words"],
+        }
+
+        if "name_vaca" in request.GET:
+            current = Vocabulario.objects.get(nomre_vocabulario=request.GET["name_vaca"])
+
+            self.context = {
+                "name_vacabulary": current.nomre_vocabulario,
+                "words": current.palabras.all()
+            }
+
+        return render(request, self.current_url, self.context)
+
+    def controllPost(self, request: HttpRequest):
+        self.context = {
+            "form_word": self.context["form_word"],
+            "words": self.context["words"],
+        }
+
+        if "nombre_vocabulario" not in request.POST:
+            self.context["error"] = "Nombre de vocabulario requerido"
+            return render(request, self.current_url, self.context)
+
+        vocabulary_name = request.POST.get("nombre_vocabulario").strip()
+
+        try:
+            new_vocababulary = Vocabulario.objects.create(
+                nomre_vocabulario=vocabulary_name)
+        except IntegrityError:
+            self.context["error"] = "Ya existe un vocabulario con ese nombre"
+            return render(request, self.current_url, self.context)
+
+        words_json = request.POST.get("words", "")
+        if words_json:
+            try:
+                words_list = json.loads(words_json)
+
+                ids = [int(w.get("id", 0))
+                       for w in words_list if str(w.get("id", "")).isdigit()]
+
+                words = Palabra.objects.filter(id__in=ids)
+
+                new_vocababulary.palabras.add(*words)
+            except (json.JSONDecodeError, ValueError):
+                self.context["error"] = 'Ocurrió un error al revisar las palabras, revise “Ver vocabularios”, para reasignar las palabras'
+                return render(request, self.current_url, self.context)
+
+        self.context["message"] = 'Vocabulario creado con éxito, puedes revisarlo en "Ver vocabularios"'
+        return render(request, self.current_url, self.context)

tecnicas/static/js/created-vocabulary.js

@@ -0,0 +1,26 @@
+// **************************************
+// Create Vocabulary
+// **************************************
+async function submitSelectWords(classNanmeForm) {
+  const form = document.querySelector(`.${classNanmeForm}`);
+
+  const name_vocabulary = form.querySelector(".cts-name-voca").value;
+  if (!name_vocabulary || name_vocabulary == "") {
+    spanNotificationRed("Se requiere el nombre del vocabulario");
+    return;
+  }
+
+  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);
+
+  form.appendChild(wordsInput);
+
+  form.submit();
+}

tecnicas/static/js/panel-words.js

@@ -28,7 +28,7 @@ async function getWordsByName(e) {
     palabra: dataForm.get("search").trim(),
   });
 
-  const url = `/cata/api/palabras?${params}`;
+  const url = `api/palabras?${params}`;
 
   try {
     const respone = await fetch(url, {

tecnicas/templates/tecnicas/manage_vocabulary/create-vocabulary.html

@@ -0,0 +1,132 @@
+{% extends 'tecnicas/layouts/base.html' %}
+{% load static %}
+
+{% block title %}Crear vocabulario{% endblock %}
+
+{% block content %}
+<article class="cts-container-main">
+    <article
+        class="ct-notification-red absolute max-md:fixed bottom-0 mb-4 left-1/2 -translate-x-1/2 bg-red-400 text-white p-2 px-4 rounded-lg text-center font-bold hidden uppercase traking-wide">
+    </article>
+    <article
+        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 class="cts-wrap-content text-black lg:w-4xl space-y-4">
+        <h1 class="w-full text-center font-bold text-4xl bg-surface-card py-8 rounded-lg">Crear vocabulario</h1>
+
+        {% if error %}
+        {% include "../components/error-message.html" with message=error %}
+        {% endif %}
+        {% if message %}
+        {% include "../components/error-message.html" with message=message %}
+        {% endif %}
+
+        <article class="rounded-lg space-y-4 w-full">
+            <form action="" method="post" class="cts-craed-vocabulary bg-surface-card p-4 rounded-lg">
+                {% csrf_token %}
+                <label for="nombre_vocabulario" class="font-bold text-2xl mb-2 block">Nombre del vocabulario</label>
+                {% if name_vacabulary %}
+                <input id="nombre_vocabulario" name="nombre_vocabulario" type="text" required
+                    class="cts-name-voca p-2 px-4 bg-surface-ligt rounded-lg w-full text-lg font-medium"
+                    placeholder="Ingrese un nombre" value="{{ name_vacabulary }}">
+                {% else %}
+                <input id="nombre_vocabulario" name="nombre_vocabulario" type="text" required
+                    class="cts-name-voca p-2 px-4 bg-surface-ligt rounded-lg w-full text-lg font-medium"
+                    placeholder="Ingrese un nombre">
+                {% endif %}
+                <p class="text-lg mt-2 font-semibold">Debajo puede buscar y seleccionar palabras para asignarlas a
+                    este vocabulario.</p>
+            </form>
+
+            <article class="flex flex-col md:flex-row gap-5 justify-between">
+                <section class="flex-3/5 flex flex-col gap-4 min-h-96 max-h-96">
+                    <form action="" method="get" class="ct-serach-words bg-surface-card p-4 rounded-lg">
+                        {% csrf_token %}
+                        <p class="text-lg font-semibold mb-2">
+                            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"
+                                    class="p-2 px-4 bg-surface-ligt rounded-lg w-full text-lg font-medium">
+                            </label>
+                            <button type="submit"
+                                class="font-bold rounded-lg text-xl px-3 text-center cts-btn-tertiary btn-push">
+                                Buscar
+                            </button>
+                        </section>
+                    </form>
+                    <p class="ct-error-words hidden capitalize bg-red-600 text-center text-2xl p-1.5 rounded">
+                        error</p>
+                    <ul class="ct-palabras-encontradas gap-2 grid-cols-2 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-surface-card p-4 rounded-lg text-center min-h-96 max-h-96 flex flex-col overflow-hidden">
+                    <div>
+                        <p class="text-xl font-bold pb-3">Lista de palabras</p>
+                        <hr class="mb-3">
+                    </div>
+                    <ul class="ct-palabras-usadas flex flex-col gap-3 overflow-y-auto max-h-full">
+                        {% 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>
+
+            <form method="post" action="" class="ct-form-new-word p-4 bg-surface-card rounded-lg">
+                {% csrf_token %}
+                <p class="mb-2 font-bold text-2xl">¿No encuentras una palabra?</p>
+                <section class="flex gap-4 flex-wrap justify-center">
+                    <label for="{{ form_word.nombre_palabra.id_for_label }}"
+                        class="font-medium w-fit text-xl flex-1 *:w-full *:h-full">
+                        {{ form_word.nombre_palabra }}
+                    </label>
+                    <button class="cts-btn-general-compress cts-btn-primary btn-push p-2 flex-1" type="submit">
+                        Crear y agregar a la lista
+                    </button>
+                </section>
+                <p class="ct-error-word mb-4 font-bold bg-red-500 text-md capitalize text-center rounded hidden">
+                    error
+                </p>
+            </form>
+
+            <article class="flex justify-center gap-4 mt-4">
+                <button type="button" name="start" class="cts-btn-general cts-btn-primary btn-push flex-1 w-full"
+                    onclick="submitSelectWords('cts-craed-vocabulary')">
+                    {% if name_vacabulary %}
+                    Actualizar vocabulario
+                    {% else %}
+                    Crear vocabulario
+                    {% endif %}
+                </button>
+                <a href="{% url 'cata_system:panel_vocabulario' %}" class="flex-1 w-full">
+                    <button type="button" class="cts-btn-general cts-btn-error btn-push w-full">
+                        Cancelar
+                    </button>
+                </a>
+            </article>
+        </article>
+
+    </article>
+</article>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{% static 'js/panel-words.js' %}"></script>
+<script src="{% static 'js/created-vocabulary.js' %}"></script>
+{% endblock %}

tecnicas/templates/tecnicas/manage_vocabulary/panel-vocabulary.html

@@ -22,7 +22,7 @@
                     <img src="{% static 'img/letters.webp' %}" alt="varias personas en fila"
                         class="w-full h-full object-cover rounded-xl">
                 </div>
-                <a href="#" class="flex-1">
+                <a href="{% url 'cata_system:crear_vocabulario' %}" class="flex-1">
                     <button class="w-full h-full cts-btn-general cts-btn-primary btn-push">
                         ➕ Crear Vocabulario
                     </button>

tecnicas/urls.py

@@ -44,10 +44,14 @@ urlpatterns = [
          views.createSession,
          name="creando_sesion"),
 
-     # Gestion de Vocabularios
+    # Gestion de Vocabularios
     path("presenter/panel-vocabulario",
          views.vocabularyMenu,
-         name="panel_vocabulario"), 
+         name="panel_vocabulario"),
+
+    path("presenter/crear-vocabulario",
+         views.createVocabulary,
+         name="crear_vocabulario"),
 
     # Gestion de catadores
     path("presenter/panel-catadores",
@@ -104,11 +108,11 @@ urlpatterns = [
 
 
     # APIs
-    path("api/nueva-etiqueta",
+    path("presenter/api/nueva-etiqueta",
          views.newTag,
          name="nueva_etiqueta"),
 
-    path("api/palabras",
+    path("presenter/api/palabras",
          views.words,
          name="api_palabras"),
 

tecnicas/views/__init__.py

@@ -18,7 +18,8 @@ from .tester_management.tester_create import testerCreate
 from .tester_management.tester_search import testerSearch
 from .tester_management.tester_list import testerList
 
-from .vocabulry_management.vocabulry_menu import vocabularyMenu
+from .vocabulary_management.vocabulry_menu import vocabularyMenu
+from .vocabulary_management.create_vocabulary import createVocabulary
 
 from .apis.api_tag import newTag
 from .apis.api_words import words

tecnicas/views/vocabulary_management/create_vocabulary.py

@@ -0,0 +1,19 @@
+from django.shortcuts import render
+from django.http import HttpRequest
+from tecnicas.forms import WordForm
+from tecnicas.controllers import CreateVocabularyController
+
+
+def createVocabulary(req: HttpRequest):
+    view_controller = CreateVocabularyController()
+    if req.method == "GET":
+        response = view_controller.controllGet(req)
+        return response
+
+    elif req.method == "POST":
+        response = view_controller.controllPost(req)
+        return response
+
+    else:
+        context = {"error": "Método no permitido"}
+        return render(req, "tecnicas/manage_vocabulary/create-vocabulary.html", context)