Node.js / Modificando la pagina de agregar/editar notas

Bienvenidos sean a este post, hoy continuaremos modificando nuestra aplicacion Notas.

En los posts anteriores ya mejoramos la barra de navegacion, mejoramos el listado de las notas al inicio y la pagina de mostrar el contenido de cada nota, ahora nos toca hacer los retoques en la pagina encargada tanto de agregar como editar notas, cuando la creamos en este post mencionamos que se encargaria de ambas tareas y para ello simplemente debiamos pasar un valor para que realice una u otra tarea, para ello necesitaremos el codigo que trabajamos en el post anterior, en caso de no poseerlo les dejo un link para descargarlo:

Descarguen el archivo y extraigan el directorio en el PC, con esto realizado ya tenemos nuestra aplicacion funcionando, el siguiente paso sera ir al archivo editarnota.hbs en el directorio views y modificaremos el codigo actual de la siguiente manera:

views/editarnota.hbs

<form method='POST' action='/notas/save'>
  <div class="container-fluid">
    <input type='hidden' name='creador'
        value='{{#if creador }}crear{{else}}cambiar{{/if}}'>
    <div class="form-group row align-items-center">
        <label for="clavenota" class="col-1 col-form-label">Clave</label>
        {{#if creador }}
                <div class="col">
                  <input type='text' class='form-control'
                  name='clavenota' value=''/>
                </div>
        {{else}}
                {{#if nota }}
                <span class="input-group-text">{{clavenota}}</span>
                {{/if}}
                <input type='hidden' name='clavenota'
                        value='{{#if nota }}{{clavenota}}{{/if}}'/>
        {{/if}}
    </div>

    <div class="form-group row">
        <label for="titulo" class="col-1 col-form-label">Titulo</label>
        <div class="col">
                <input type='text' name='titulo'
                        value='{{#if nota }}{{nota.titulo}}{{/if}}' />
        </div>
    </div>

    <div class="form-group row">
        <textarea class="form-control" rows=5 cols=40
        name='cuerpo'>{{#if nota }}{{nota.cuerpo}}{{/if}}</textarea>
    </div>
    <input type='submit' class="btn btn-default" value='Subir' />
  </div>
</form>

Parecen un monton de cambios pero van a ver que no son tantos y se repiten bastante, si vienen de posts anteriores nuestro primer paso sera implementar div que seran las filas donde estaran cada parte del formulario, primero definimos un div que contendra todos los elementos del form, el elemento hidden se mantiene como anteriormente, despues tenemos un div que sera el encargado de la clave asociada a la nota, lo primero es el div donde tenemos una nueva clase, form-group, esta le indica a bootstrap que estos elementos son parte del form y los debe tratar de forma similar, despues agregamos un label que estara asociado al valor del input e indicara que es para la clave, en este caso le aplicamos la clase col pero con el valor de uno que en conjunto con el input siempre se mantendran a un tamaño correcto, y a su vez le asignamos la clase de tipo label en forms, despues seguimos con el condicional original donde verifica si creador es true o false, en caso de ser verdadero es porque estamos creando una nueva nota y por lo tanto debemos usar el input para que podamos ingresar el nuevo valor, es muy similar al anterior salvo por la clase que le agregamos, y en caso de ser falso usaremos un span para mostrar el valor de la clave de la nota pero no podremos modificarlo.

El siguiente segmento de codigo es para el titulo, volvemos a usar form-group para que se mantenga todo en orden dentro del form, despues tenemos nuevamente un label asociado al input para indicar cual es el valor que agregaremos y en este input seguimos manteniendo el condicional para cuando editamos la nota agregue el valor correspondiente al titulo, y cuando sea el caso de crear una nueva aparecera en blanco, y por ultimo tenemos el cuerpo de la nota donde es muy similar a lo anterior pero no usamos a label sino que directamente le pasamos el textarea donde escribiremos, recuerden dejar todos los valores y elementos juntos como se ven el texto porque sino agregara espacios en blanco innecesarios, y por ultimo tenemos el boton de submit donde le aplicamos una nueva clase para estilizarlo un poco mejor, veamos como funciona ahora con todos estos cambios

Como pueden ver en el video tenemos una version un poco mejor adaptada para nuestra aplicacion y sigue tan funcional como lo era al comienzo de su creacion, solo nos resta trabajar con la ultima accion en nuestras notas pero eso lo veremos en el proximo post, antes de finalizar les dejo un archivo con todos los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos mejorado la pagina donde esta el formulario para la carga y edicion de notas, como con unas pocas lineas hemos mejorado su disposicion para distintos dispositivos, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.