Creación del formulario

[omiras]

Objetivo y análisis

Queremos poder ofrecer al usuario la creación de un formulario de forma dinámica.

• Cuando un usario selecciona un control del formulario de la parte derecha, debería quedar disabled y no debería posible añadirlo de nuevo
• Eliminar el HTML donde aparece "Código Generado"
• Cuando hacemos clic en "Crear Formulario" Y se genera de manera exitosa la URL única; el botón debería desaparecer.
• El botón "Crear formulario" debería estar deshabilitado si no hay al menos un control en la zona de creación
• Investigar: como crear un botón típico de "copiar enlace" al lado de la URL generado.
• Refactorizar: poner todo el código JAvaScript en su propio fichero JS; y hacer los "partials" EJS adecuados.

Cómo probar la issue

Generar formulario

1. Arrastrar Nombre de la zona de controles al area de creación
2. El control "Nombre" debería quedar deshabilitado
3. Hacemos clic en "Generar formulario"
4. Debería aparecer un mensaje tipo "alert" de bootstrap con la URL para poder recuperar el formularo.

No se puede generar un formulario sin controles

1. La zona de creación esta vacía
2. No debería poder hacer clic en el botón "Crear Formulario"

Un usuario puede generar un formulario y copiar la URL

1. Generar el formulario.
2. Pulsar el boton "Crear formulario".
3. Debera aparecer un mensaje con la url y un icono a la derecha del mensaje para copiar la url automaticamente.
4. Pulsar dicho icono, y pegar el contenido en la barra de navegador para comprobar que te lleva al formulario.

Vaciar area de creación

1. Mover todos los controladores,uno a uno, al area de creacion.
2. Mover todos los controladores, uno a uno, del area de creacion al area de control.

[arlomba]

Pequeños apuntes sobre eventos para resolver el primer punto de la issue:

• onStart(evt) { ... }: El método se llama cuando empiezas a arrastrar un elemento.
• onEnd(evt) { ... }: El método se llama cuando terminas de arrastrar un elemento.

Hay que tener en cuenta las propiedades que nos ofrece el objeto evt (o como queráis llamarlo), también merece la pena mirar el resto de eventos, puede que sean necesarios para recuperar el control de un input desactivado cuando es borrado del formulario.

https://github.com/SortableJS/Sortable#options

[JFSilvaM]

Problema casi resuelto al primer punto de la issue:

new Sortable(dropZone, {
  group: "shared", // Cambiar de la dropZone a la dragZone
  animation: 150, // Añadimos una pequeña animación cuando se ordenen los elementos
  onChange() {
    htmlCode.textContent = dropZone.innerHTML; // Si el contenido del contenedor cambia, actualizamos el código HTML
  }
});

new Sortable(dragZone, {
  group: "shared", // Cambiar de la dragZone a la dropZone
  sort: false, // En este contenedor no queremos cambiar el orden de los elementos
  onChange() {
    htmlCode.textContent = dropZone.innerHTML;
  }
});

Aún tiene fallos pero es un avance. Dos de los fallos son:

1. Al arrastrar por ejemplo "Nombre" a la izquierda, sin soltarlo y volver a la derecha, se crea el código. Si lo sueltas en la izquierda y luego lo devuelves a la derecha si se borra.
2. Al devolver a la derecha por ejemplo "Nombre", si lo pones debajo de email se queda debajo y no debe, tiene que estar donde está inicialmente.

[omiras]

1. Si no soltamos el control en la zona de creación; también se ejecuta el método onChange. Verificar si la biblioteca ofrece otros métodos onDorpped? para entonces ahí SI actualizar numControles.
2. Cuando le damos a crear formulario, ocultar la zona de controles , para que no pueda "devolver" los controles a dicha zona.
3. El alert de bootstrap que nos sugirió @arlomba , no es adecuado. Quitar la posibilidad de cerrarlo con el aspa.

[omiras]

Escribid tests de las funcionalidades implementadas siguiendo el patrón. @k87c

[k87c]

Instrucciones sobre como realizar los test de las funcionalidades, finalizados. Dependiendo de como se desarrolle el proyecto, quiza alla que editarlos de nuevo.

[omiras]

Instrucciones sobre como realizar los test de las funcionalidades, finalizados. Dependiendo de como se desarrolle el proyecto, quiza alla que editarlos de nuevo.

Genial David, buen trabajo. Bueno, si se hacen issues nuevas, ahí pondremos los tests nuevos.