Validacion y captura de etiquetas en form_tags

tecnicas/forms/__init__.py

@@ -1,2 +1,3 @@
 from .sesion_basic import SesionBasicForm
-from .sesion_tags import SesionTagsForm
+from .sesion_tags import SesionTagsForm
+from .etiqueta import EtiquetaForm

tecnicas/forms/etiqueta.py

@@ -0,0 +1,7 @@
+from django import forms
+
+class EtiquetaForm(forms.Form):
+    nueva_etiqueta = forms.CharField(max_length=255, required=True, widget=forms.TextInput(attrs={
+        "class": "bg-gray-300 border-b text-center text-black",
+        "placeholder": "No repetir etiqueta"
+    }))

tecnicas/forms/sesion_tags.py

@@ -5,10 +5,23 @@ from django.urls import reverse
 from ..models import Etiqueta
 
 class SesionTagsForm(forms.Form):
-    def __init__(self, *args, segmentos=None, **kwargs):
+    def __init__(self, *args, longitud=None, tipo_escala:str=None, **kwargs):
         super().__init__(*args, **kwargs)
 
-        for i in range(segmentos):
-            self.fields[f'segmento_{i}'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True,label=f"segmento {i+1}", empty_label="Selecione opcion", widget=forms.Select(attrs={
-                "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
-            }))
+        if tipo_escala == "estructurada":
+            for i in range(longitud):
+                self.fields[f'segmento_{i}'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True,label=f"segmento {i+1}", empty_label="Selecione opcion", widget=forms.Select(attrs={
+                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                }))
+        else:
+            self.fields['punto_inicial'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label="Punto inicial", empty_label="Selecione opcion", widget=forms.Select(attrs={
+                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                }))
+            
+            self.fields['punto_medio'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label="Punto medio", empty_label="Selecione opcion", widget=forms.Select(attrs={
+                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                }))
+            
+            self.fields['punto_final'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label="Punto final", empty_label="Selecione opcion", widget=forms.Select(attrs={
+                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                }))

tecnicas/templates/tecnicas/configuracion-panel-tags.html

@@ -11,52 +11,70 @@
 - Presentar un orden basico segun el numero de catadores y los productos, esta se le muestra el presentador
 -->
 
-<!-- <div class="flex flex-row justify-center items-center gap-5 text-lg">
-                    <p class="font-medium p-1 px-3 bg-gray-200">Segmento 1</p>
-                    <label for="etiquta_1">
-                        <select name="etiquta_1" class="p-1 rounded bg-gray-200 [*]:capitalize" id="etiquta_1" required>
-                            <option value="1">no se percibe</option>
-                            <option value="2">poca percepcion</option>
-                            <option value="3">se percibe</option>
-                            <option value="4">percepcion intensa</option>
-                            <option value="5">percepcion muy intensa</option>
-                        </select>
-                    </label>
-                    <button type="button" class="p-1 rounded-lg bg-gray-200 active:bg-gray-400">➕</button>
-                </div> -->
-
 {% block content %}
 <article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
-    <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
-        <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
-        <hr>
-        <form method="post" action="" class="[&>article]:not-last:mb-4 [&>article]:not-first:pt-4 [&>article]:px-6">
-            {% csrf_token %}
-            <article class="bg-gray-500 p-4 flex flex-col gap-2">
-                {% for field in form_tags %}
-                <div class="flex flex-row justify-center items-center gap-5 text-lg">
-                    <label for="{{ field.id_for_label }}" class="font-medium p-1 px-3 bg-gray-200 capitalize">
-                        {{ field.label }}
+    <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">
+            <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
+            <hr>
+            {% if error %}
+            <p class="bg-red-400 font-bold text-lg tracking-wide text-white capitalize text-center py-2">
+                {{ error }}
+            </p>
+            {% endif %}
+            <form method="post" action="" class="flex flex-col gap-5">
+                {% csrf_token %}
+                <article class="p-4 flex flex-col gap-2 rounded">
+                    <h2 class="text-2xl mb-2 font-bold">Seleccion de etiquetas</h2>
+                    {% for field in form_tags %}
+                    <div class="flex flex-row justify-center items-center gap-5 text-lg">
+                        <label for="{{ field.id_for_label }}" class="font-medium p-1 px-3 bg-gray-200 capitalize rounded">
+                            {{ field.label }}
+                        </label>
+                        {{ field }}
+                    </div>
+                    {% endfor %}
+                </article>
+                <hr>
+                <article class="flex gap-3 flex-wrap p-2 justify-center rounded">
+                    <p class="bg-gray-300 p-2 text-center rounded font-bold text-md">
+                        Agregar otra etiqueta
+                    </p>
+                    <button type="button" onclick="showHiddeExtraTags()"
+                        class="p-1 px-10 uppercase text-lg tracking-wider font-medium 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 w-fit">
+                        ➕
+                    </button>
+                </article>
+                <hr>
+                <article class="flex justify-center items-center py-3 rounded">
+                    <button type="submit"
+                    class="uppercase 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">Continuar</button>
+                </article>
+            </form>
+        </article>
+        <article
+            class="ct-new-tags absolute top-0 w-full h-full bg-gray-600/70 p-5 flex justify-center items-center rounded-2xl hidden">
+            <section class="p-5 bg-gray-400 w-fit rounded">
+                <form method="post" action="" class="ct-form-new-tag p-3">
+                    {% csrf_token %}
+                    <label for="{{ form_new_tag.nueva_etiqueta.id_for_label }}"
+                        class="font-medium text-md text-white flex gap-3">
+                        <p class="bg-gray-600 px-4">Nueva etiqueta:</p>
+                        {{ form_new_tag.nueva_etiqueta }}
                     </label>
-                    {{ field }}
-                    <button type="button" class="p-1 rounded-lg bg-gray-200 active:bg-gray-400">➕</button>
-                </div>
-                {% endfor %}
-            </article>
-            <article class="bg-gray-800/70 justify-center items-center">
-                <button class="p-2 bg-gray-400 w-fit" type="submit">Mandar</button>
-            </article>
-            <article class="absolute bg-gray-800/70 p-5 w-full h-full justify-center items-center hidden">
-                <section class="p-2 bg-gray-400 w-fit">
-                    <form action="">
-                        {% csrf_token %}
-                        <label for="nueva_etiqueta">Nueva etiqueta:<input id="nueva_etiqueta" type="text"
-                                required></label>
-                    </form>
-                </section>
-            </article>
-        </form>
-    </article>
+                    <p
+                        class="ct-error-tag mt-4 font-bold bg-red-500 text-white text-md capitalize text-center rounded hidden">
+                        error</p>
+                    <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">Agregar</button>
+                        <button class="rounded px-3 py-1 bg-red-500 active:bg-red-400" type="button"
+                            onclick="showHiddeExtraTags()">Cancelar</button>
+                    </article>
+                </form>
+            </section>
+        </article>
+    </section>
 </article>
 {% endblock %}
 
@@ -66,6 +84,74 @@
     const options = itemsSelects.item(0).getElementsByTagName("option")
     const values = []
 
+    const extraPanel = document.getElementsByClassName("ct-new-tags")[0]
+    function showHiddeExtraTags () {
+        if (extraPanel.classList.contains("hidden")) {
+            extraPanel.classList.remove("hidden")
+        } else {
+            extraPanel.classList.add("hidden")
+        }
+    }
+
+    const formNewTag = document.getElementsByClassName("ct-form-new-tag")[0]
+    if (formNewTag) {
+        formNewTag.addEventListener("submit", postNewTag)
+    }
+
+    async function postNewTag (e) {
+        e.preventDefault()
+
+        const dataForm = new FormData(this)
+        const url = "/cata/nueva-etiqueta"
+
+        try {
+            const respone = await fetch(url, {
+                method: "POST",
+                headers: {
+                    'X-CSRFToken': dataForm.get('csrfmiddlewaretoken'),
+                },
+                body: dataForm
+            })
+
+            const jsonResponse = await respone.json()
+
+            if (jsonResponse.error) {
+                const errorp = document.getElementsByClassName("ct-error-tag")[0]
+                errorp.textContent = `error: ${jsonResponse.error}`
+                errorp.classList.remove("hidden")
+                return
+            }
+
+            const inputTag = document.getElementsByName("nueva_etiqueta")[0]
+            inputTag.value = ""
+            showHiddeExtraTags()
+
+            const newTag = jsonResponse["new_tag"]
+            addNewOptionToSelect(newTag)
+        } catch (error) {
+            console.log("Error:", error)
+
+        }
+    }
+
+    function createOptionSelect (value = 0, text = "define texto") {
+        const option = document.createElement("option")
+        option.value = value
+        option.textContent = text
+        return option
+    }
+
+    function addNewOptionToSelect(newValues) {
+        for (let i = 0; i < itemsSelects.length; i++) {
+            const newOption = createOptionSelect(newValues.id, newValues.valor)
+            itemsSelects.item(i).appendChild(newOption)
+        }
+    }
+</script>
+
+{%if escala == "estructurada"%}
+<script>
+    // Asignacion rapida de valores a los select
     for (let i = 0; i < options.length; i++) {
         if (options.item(i).value) {
             values.push(options.item(i).value)
@@ -74,8 +160,9 @@
 
     values.sort()
 
-    for (let i = 0; i < itemsSelects.length; i++) {
+    for (let i = 0; i < values.length; i++) {
         itemsSelects.item(i).value = values[i]
     }
 </script>
+{% endif %}
 {% endblock %}

tecnicas/urls.py

@@ -13,4 +13,5 @@ urlpatterns = [
     path("seleccion-tecnica", views.selecionTecnica, name="seleccion_tecnica"),
     path("panel-configuracion-basic", views.configuracionPanelBasic, name="panel_configuracion_basic"),
     path("panel-configuracion-tags", views.configuracionPanelTags, name="panel_configuracion_tags"),
+    path("nueva-etiqueta", views.newTag, name="nueva_etiqueta"),
 ]

tecnicas/views/__init__.py

@@ -5,4 +5,5 @@ from .management_catadores import managementCatadores
 from .panel_sessions import sesionesPanel
 from .seleccion_tecnica import selecionTecnica
 from .configuration_panel_basic import configuracionPanelBasic
-from .configuration_panel_tags import configuracionPanelTags
+from .configuration_panel_tags import configuracionPanelTags
+from .api_tag import newTag

tecnicas/views/api_tag.py

@@ -0,0 +1,40 @@
+from django.http import HttpRequest, JsonResponse
+from django.db import IntegrityError
+from ..models import Etiqueta
+from ..forms import EtiquetaForm
+import json
+
+def newTag(req:HttpRequest):
+    if req.method == "GET":
+        return error()
+    elif req.method == "POST":
+        print("Entre al api post tag")
+        try:
+            form = EtiquetaForm(req.POST)
+            if form.is_valid():
+                value_etiqueta = form.cleaned_data["nueva_etiqueta"]
+                value_etiqueta = value_etiqueta.strip()
+                value_etiqueta = value_etiqueta.lower()
+            else:
+                return error()
+        except KeyError:
+            return error()
+        
+        # return JsonResponse({"message": "etiqueta registrada", "new_tag": { "valor": value_etiqueta, "id":6 }})
+
+        try:
+            new_etiqueta = Etiqueta.objects.create(valor_etiqueta=value_etiqueta)
+        except IntegrityError:
+            return error("etiqueta repetida")
+        
+        return JsonResponse({
+            "message": "etiqueta registrada",
+            "new_tag": {
+                "id": new_etiqueta.id,
+                "valor": new_etiqueta.valor_etiqueta
+            }
+        })
+
+def error(message="informacion incorrecta"):
+    respuesta = { "error" : message }
+    return JsonResponse(respuesta)

tecnicas/views/configuration_panel_basic.py

@@ -6,19 +6,22 @@ from ..models import TipoTecnica
 
 def configuracionPanelBasic(req: HttpRequest):
     if req.method == "POST":
-        form = SesionBasicForm(req.POST)
+        try:
+            form = SesionBasicForm(req.POST)
+
+            if form.is_valid():
+                values = {}
 
-        if form.is_valid():
-            values = {}
-            
-            for name, value in form.cleaned_data.items():
-                if not name == "tipo_escala":
-                    values[name] = value
-                else:
-                    values[name] = value.id
-            
-            req.session['datos_formulario'] = values
-            return redirect(reverse("cata_system:panel_configuracion_tags"))
+                for name, value in form.cleaned_data.items():
+                    if not name == "tipo_escala":
+                        values[name] = value
+                    else:
+                        values[name] = value.id
+                
+                req.session['form_basic'] = values
+                return redirect(reverse("cata_system:panel_configuracion_tags"))
+        except KeyError:
+            return redirect(reverse("cata_system:seleccion_tecnica") + "?error=error en datos de configuracion")
 
         return render(req, "tecnicas/configuracion-panel-basic.html", { "form_sesion": form, "error": "Ha ocurrido un error al continuar al siguiente paso." })
     elif req.method == "GET":

tecnicas/views/configuration_panel_tags.py

@@ -1,13 +1,43 @@
 from django.http import HttpRequest
 from django.shortcuts import redirect, render
 from django.urls import reverse
-from ..forms import SesionTagsForm
+from ..forms import SesionTagsForm, EtiquetaForm
+from ..models import TipoEscala
 
 def configuracionPanelTags(req: HttpRequest):
-    # basic_data = req.session.get("basic_form", None)
+    basic_data = req.session.get("form_basic", {})
 
-    # if basic_data is None:
-    #     return redirect(reverse('cata_system:panel_configuracion_basic'))
+    if not basic_data:
+        return redirect(reverse('cata_system:panel_configuracion_basic'))
+    
+    tipo_escala = TipoEscala.objects.get(pk=basic_data["tipo_escala"])
+    tamano_escala = basic_data["tamano_escala"]
+    form_new_etiqueta = EtiquetaForm()
 
-    etiquetas = SesionTagsForm(segmentos=5)
-    return render(req, "tecnicas/configuracion-panel-tags.html", {"form_tags":etiquetas})
+    if req.method == "GET":
+        form_etiqutas = SesionTagsForm(longitud=tamano_escala, tipo_escala=tipo_escala.nombre_escala)
+
+        context_tags = {
+            "form_tags":form_etiqutas,
+            "form_new_tag": form_new_etiqueta
+        }
+
+        return render(req, "tecnicas/configuracion-panel-tags.html", context_tags)
+    elif req.method == "POST":
+        values = {}
+        form = SesionTagsForm(req.POST, longitud=tamano_escala, tipo_escala=tipo_escala.nombre_escala)
+
+        context_tags = {
+            "form_tags":form,
+            "form_new_tag": form_new_etiqueta
+        }
+
+        if form.is_valid():
+            for name, value in form.cleaned_data.items():
+                values[name] = value.id
+
+            req.session["form_tags"] = values
+            return render(req, "tecnicas/configuracion-panel-tags.html", context_tags)
+        else:
+            context_tags["error"] = "ha ocurrido un error"
+            return render(req, "tecnicas/configuracion-panel-tags.html", context_tags)