Creando un sistema CRUD con Vue y Laravel 17/23

serie-crud-js

17- Usando componentes Vue

Como hemos dicho en el post anterior usaremos un componente de Vue para hacer el picker de fechas.

Usaremos este componente: vue-datepicker.

Este componente nos pide una dependencia: moment que es una librería muy buena y popular para manejar fechas.

Lo primero que haremos es usar el terminal del ordenador e instalar lo que necesitamos

npm install vue-datepicker moment --save

El siguiente paso es crear un archivo .vue en resources/js/componentes lo llamaremos datepicker.vue. Es importante visitar el Github del componente que usaremos porque ahí hay información sobre la configuración del componente que usaremos aquí. Y aunque explicaremos paso a paso es bueno tener la información original para contrastar los cambios.

Este archivo .vue contendrá el siguiente código

<script>
    import Datepicker from 'vue-datepicker'
export default {
    data() {
            return {
                startTime: {
                    time: ''
                },
                endtime: {
                    time: ''
                },
                option: {
                    type: 'day',
                    week: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
                    month: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    format: 'DD-MM-YYYY',
                    placeholder: 'Fecha de nacimiento',
                    inputStyle: {
                        'display': 'inline-block',
                        'padding': '6px',
                        'line-height': '22px',
                        'font-size': '16px',
                        'border': '2px solid #fff',
                        'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
                        'border-radius': '2px',
                        'color': '#5F5F5F'
                    },
                    color: {
                        header: '#ccc',
                        headerText: '#2813ff'
                    },
                    buttons: {
                        ok: 'Aceptar',
                        cancel: 'Cancelar'
                    },
                    overlayOpacity: 0.5, // 0.5 as default
                    dismissible: true // as true as default
                },
            }
        },
        methods: {
            updateData() {
                this.$emit('update:birthday', this.startTime.time)
            },
        },
        components: {
            'date-picker': Datepicker
        }
} </script>
<template>
<div class="content" >
    <date-picker :date="startTime" :option="option" v-on:change="updateData"></date-picker>
</div> 
</template>

Vayamos por partes.

El código empieza por <script> lo que quiere decir que estamos dentro de código js.

import Datepicker from 'vue-datepicker'

Aqui estamos trayendo el componente que hemos instalado con npm install y a partir de ahora se llama Datepicker.

export default es donde definiremos nuestro componente.

También tenemos una zona data aquí y aunque el formato es diferente la función es la misma: las variables del componente.

Todas estas variables sin excepción son las que la ayuda del componente nos explica como configurar.

startTime y endTime nos sirve para configurar un rango de fechas elegibles. Para  nuestro proyecto no necesitamos ningún limite de fechas asi que lo dejamos con valores null (»).

Lo que hemos hecho en el siguiente código es cambiar los días y el formato de fecha a Español.

type: 'day',
week: ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'],
month: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
format: 'DD-MM-YYYY',

Posteriormente hemos puesto el mensaje que aparecerá en el input cuando este vacío (placeholder)

placeholder: 'Fecha de nacimiento',

Las siguientes lineas las hemos dejado como el original. Son para cambiar el formato de presentación

inputStyle: {
    'display': 'inline-block',
    'padding': '6px',
    'line-height': '22px',
    'font-size': '16px',
    'border': '2px solid #fff',
    'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
    'border-radius': '2px',
    'color': '#5F5F5F'
},

Tampoco hemos tocado los colores de la cabecera

color: {
    header: '#ccc',
    headerText: '#2813ff'
},

Configuramos los botones de cancelar y aceptar con mensajes propios

buttons: {
    ok: 'Aceptar',
    cancel: 'Cancelar'
},

Las siguientes lineas también las hemos dejado tal cual el ejemplo

overlayOpacity: 0.5, // 0.5 as default
dismissible: true // as true as default

Luego esta components

components: {
   'date-picker': Datepicker
}

Aquí estamos usando el componente importado (recordemos que ahora se llama Datepicker) para crear el nuestro (date-picker) con las opciones modificadas como lo hemos hecho.

Luego aparece <template></template>. Aqui definimos el html de nuestro componente. la parte importante es:

<date-picker :date="startTime" :option="option" v-on:change="updateData"></date-picker>

Le pasamos el starTime que a pesar de estar nulo cumple una doble función ya que cuando se elige una fecha se guarda en startTime.time y le asociamos las opciones.

Ahora pasemos a la acción. Nuestro componente tiene un apartado methods que no habíamos mencionado. En el html tenemos el evento change (cuando cambia) asociado a una función (v-on:change=»updateData»).

Esta función la definimos en methods así:

methods: {
  updateData() {
     this.$emit('update:birthday', this.startTime.time)
   },
},

Lo que hacemos aqui es emitir un evento con el valor actualizado de la fecha. Esto por si solo no hace nada. Pero lo usaremos en el front.

Tenemos nuestro componente hecho.

Ahora debemos modificar el archivo resource/js/app.js y agregar la siguiente linea

Vue.component('birthdaypicker', require('./components/datepicker.vue'));

Aqui lo que estamos haciendo es sencillo. Asociamos el componente que hemos creado con Vue con el nombre birthdaypicker. Eso nos permitira hacer <birthdaypicker></birthdaypicker>

Ahora solo el ultimo cambio en el front. En el modal buscaremos

<input class="input" :readonly="modalEmployee==3" placeholder="Nacimiento" v-model="birthdayEmployee">

y eliminamos esa linea. En cambio pondremos

<birthdayPicker :birthday.sync="birthdayEmployee"></birthdayPicker>

El evento que emitimos anteriormente nos sirve aqui para coordinar el valor con la variable birthdayEmployee. De esta manera siempre tendremos esa variable actualizada.

Ahora ya tenemos el picker funcionando.

Código: Github 

Proximo post: Trabajando con los select.

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces