Curso Laravel Inertia - Crear un Componente de paginación personalizado
En Inertia, no tenemos un componente de paginación para usar; así que, tenemos que crear uno.
Desde el listado paginado, debemos el apartado de links en los cuales se encuentran todos los enlaces para la paginación en un array:
Así que, los iteramos:
<Link v-for="l in categories.links" :key="l" v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>Para desactivar la página actual y evitar dejar un enlace que navegue a sí mismo, podemos hacer un condicional y colocar un SPAN cuando se utilice la página actual:
<template v-for="l in categories.links" :key="l">
<Link v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>
<span v-else class="px-2 py-1" v-html="l.label" />
</template>Y agregar algo de estilo para indicar que es un enlace desactivado, aunque realmente es una etiqueta SPAN:
<template v-for="l in categories.links" :key="l">
<Link v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>
<span v-else class="px-2 py-1 cursor-pointer text-gray-500" v-html="l.label" />
</template>
<script>Desde Vue, tenemos una etiqueta llamada "Component" con la cual podemos renderizar componentes de manera dinámica en base a una condición evaluada en con el prop de is:
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {
components: { Foo, Bar },
data() {
return {
view: 'Foo'
}
}
}
</script>
<template>
<component :is="view" />
</template>Con este componente en Vue, podemos renderizar ya sea componente de Vue o HTML directamente desde la definición del mismo:
<Component v-for="l in categories.links" :key="l" :is="!l.active ? 'Link' :'span'" class="px-2 py-1" :class="!l.active ? '' : 'text-gray-500 cursor-pointer'" :href="l.url" v-html="l.label" />Y con esto, tenemos el mismo resultado que antes, pero queda más limpia la sintaxis.
Ahora, para poder reutilizar el componente de manera global, creamos un nuevo componente que reciba como parámetro el listado paginado mediante un prop:
resources/js/Shared/Pagination.vue
<template>
<!-- <Link class="px-2 py-1" v-if="!l.active" :href="l.url">{{ l.label }}</Link>
<span class="px-2 py-1 cursor-pointer text-gray-500" v-else>{{ l.label }}</span> -->
<template v-for="l in links" v-bind:key="l">
<Component v-html="`${l.label}`" class="px-2 py-1" :is="!l.active ? 'Link' : 'span'"
:href="l.url == null ? '#' : l.url" :class="!l.active ? '' : 'cursor-pointer text-gray-500'"
/>
</template>
</template>
<script>
import { Link } from '@inertiajs/vue3';
export default {
components: {
Link
},
props: {
links: Array
}
}
</script>Desde el listado de categorías, usamos este componente:
resources/js/Pages/Dashboard/Category/Index.vue
***
<pagination :links="categories.links" />
</app-layout>
</template>
***
import Pagination from '@/Shared/Pagination.vue'
export default {
components:{
AppLayout,
Link,
Pagination
},
// ***Y obtendremos:
http://localhost/category?page=1
Transcripción del vídeo
Lamentablemente en Laravel inertia no tenemos un componente de paginación, así que nos toca implementar uno nosotros mismos lo bueno es que es muy fácil y lo podemos luego reutilizar en cualquier otra página que vayamos a utilizar la paginación así que pues vamos allá te voy a explicar un poquito el código para que te quede un poco más claro por aquí puedes ver los pasos buen ya pasamos todo esto qué es lo que vamos a hacer el componente de paginación como puedes suponer va a ser un link la paginación aquí es exactamente lo mismo que tenemos en Laravel que tenemos un parámetro llamado page en la URL que indica la página que vamos a visualizar entonces para eso Aquí vamos a emplear el link y no la el enlace es decir la etiquetada por lo comentado antes para que sea una paginación de tipo spa sin recargar toda la página sino el componente esencial Eh bueno entonces lo que haríamos es colocar un link a secas y listo en base a la paginación que ya tenemos es decir iteramos los links los dibujamos y se acabó ahora bien aquí lo podemos optimizar un poquito más por ejemplo, preguntando si es la página activa entonces coloca un spam para que no pueda navegar a sí misma que eso es lo que sucede en la en el componente real de paginación del arabel Entonces lo podemos simular de esta forma y a partir de aquí hacemos algunas optimizaciones más pero vamos a ir de poco entonces vamos a regresar aquí y lo primero que vamos a hacer sería crear una carpeta aparte o un archivo aparte para tal recurso ya que otra vez esto lo vamos a querer reutilizar en cualquier otra parte de nuestra aplicación así que.
Crear el archivo componente .vue
Por aquí dentro de js muy importante voy a crear uno llamado share puede ser helper. Entonces un poco lo mismo de siempre por aquí colocarían la parte del html y por aquí sería la parte del bloque de Script lo primero sería importar los elementos necesarios que sería en este caso el de link el mismo link que utilizamos antes ya aquí nos autocompletado y por aquí sería components y cargamos nuestro link para poder utilizarlo dentro de la página qué otra cosa vamos a necesitar los enlaces que nosotros vamos a dibujar es decir la parte de paginación que es un objeto tal cual veíamos antes es decir vamos a querir justamente esta parte que te mostraba por acá Todo esto los links es lo que le estamos pasando que creo que es un objeto y ahorita de igual manera lo chequeamos y eso obviamente lo pasamos mediante un prop ya que Recuerda que los props es el mecanismo que tenemos para pasar datos entre componentes en este caso este componente necesita el de links para poder funcionar o poder hacer su labor Entonces ya aquí tenemos todo lo necesario vamos a subir aqui nosotros podemos en Vue 3 podemos colocar múltiples componentes raíces.
que aquí la pestaña de si la tienes por aquí el componente de Index buscamos aquí prop y por aquí links bueno dice que es una Ray ahorita lo cambio a ver y por aquí cómo es la estructura fíjate que es links aquí tenemos la data sería links entonces nuestro prop se llama links yo voy a suministrarle al menos el componente completo entonces sería colocar aquí links:
<script>
import { Link } from '@inertiajs/vue3';
export default {
components: {
Link
},
props: {
links: Array
}
}
</script>Para cuando no queremos renderizar nada de html es decir hubiéramos podido colocar ahí un div pero se fuera a renderizar cada vez que nosotros mediante el v-for:
<template>
<Link class="px-2 py-1" v-if="!l.active" :href="l.url">{{ l.label }}</Link>
<span class="px-2 py-1 cursor-pointer text-gray-500" v-else>{{ l.label }}</span>
<template v-for="l in links" v-bind:key="l">
</template> Es el parámetro y como queremos que evalúe la condición le colocamos dos puntos y colocamos aquí el parámetro sería categories categories punto links esa sería la página que le tenemos que pasar el link según lo evaluado …
<Link class="px-2 py-1" v-if="!l.active" :href="l.url">{{ l.label }}</Link>
<span class="px-2 py-1 cursor-pointer text-gray-500" v-else>{{ l.label }}</span>Luego escapamos el html pero ya lo vemos más adelante para que imprima el carácter, aquí lo tenemos prácticamente todo entonces podemos navegar aquí puedes ver que puedo ir a la segunda página yo tengo Solamente tres registros, así que solamente me navega hacia ellos ya no hay una next ya esto automáticamente si revisamos qué es lo que hay aquí en next en el href no tenemos nada …
Entonces ahí puedes colocar una condición que si URL es nula haces algo por ejemplo qué es lo que queremos hacer para evitar navegar hacia la misma página cosa que ahorita podemos yo Por ejemplo ahorita me encuentro en la página uno aquí lo puedes ver uno y dos y puedo darle aquí al uno y puedes ver que todavía está navegando cosa que aunque no pasa mucho no quiero hacerlo así quiero que se quede un poquito más bonito el desarrollo entonces para esto aquí sí podemos colocar un condicional fue donde me marié un poquito yo y por aquí preguntamos si es la página activa que es otra ot otro objeto que tenemos ahí otro valor Active si esto vamos a imprimirlo si no está activo si está activa entonces colocamos un spam aquí coloco el label:
<Link class="px-2 py-1" v-if="!l.active" :href="l.url">{{ l.label }}</Link>
<span class="px-2 py-1 cursor-pointer text-gray-500" v-else>{{ l.label }}</span>El resto de los cambios realizados, son clases de Tailwind para especificar la manito mediante la clase cursor-pointer, que simula el cursor o la manito, y clases como un color de texto para que no quede tan feo; puedes personalizar el estilo, agregarle un borde, color de fondo, etc, ya el estilo como siempre depende de ti, de como lo quieras definir.
Segundo formato, mediante Component
Otro componente que en este caso es el componente llamado link es decir tú aquí puedes indicar como demonios quieres que esto se procese en base al atributo aquí llamado If que es el que indica qué es lo que va a hacer si un spam otra vez o que por suerte tienen el mismo comportamiento de pasarle el href y obviamente las clases que es común en cualquier componente o html entonces eso es básicamente lo que hace y por aquí estaba dando un pequeño ejemplo de esto en el cual tenía un componente llamado Fod un componente llamado Bar y por aquï indica en base a alguna condición que en este caso es Vue mediante el texto:
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export default {
components: { Foo, Bar },
data() {
return {
view: 'Foo'
}
}
}
</script>
<template>
<component :is="view" />
</template>Fíjate que es un texto que indica el nombre de componente qué es lo que va a renderizar si esto es true que sería el bueno perdón esto lo aquí no estoy colocando nada de true si simplemente aquí le pasamos Fu entonces Esto va a renderizar mediante el componente llamado Foo que puede ser cualquier cosa y si le colocamos bar va a ser el componente llamado bar de igual manera ya lo vamos a ver entonces vamos allá regresamos acá y voy a duplicar esto voy a comentarlo aquí.
Vamos a colocar el llamado component voy a cerrar aquí local y aquí le tenemos que definir el llamado is qué queremos que lo evalúe qué es lo que va a colocar aquí según te comentaba por aquí vamos a colocar una condición básicamente el valor que queramos evaluar entonces aquí también podemos colocar un condicional corto que indique si active está definido significa que tenemos que colocar un enlace o en este caso lo inverso si active no está definido punto active entonces tenemos que colocar sería el de link:
<Component v-html="`${l.label}`" class="px-2 py-1" :is="!l.active ? 'Link' : 'span'"
:href="l.url == null ? '#' : l.url" :class="!l.active ? '' : 'cursor-pointer text-gray-500'"
/>Y si está activo es decir es la página que estamos viendo Es la misma por ejemplo la página un tenemos que colocar el spam entonces aquí colocamos el elemento html llamado spam aquí coloco los dos puntos y esto sería ya todo por aquí en este punto tuviéramos que bueno empezar a cortar esto que es común aquí por ejemplo el de URL lo podemos colocar aquí al span sin ningún problema y aquí el ya esto no sería necesario Así que lo podemos descartar quedarían estas clases que son comunes entonces la podemos colocar aquí también; recuerda que estas dos clases se las estamos indicando por acá y quedan estas dos clases que no son comunes entonces aquí también podemos evaluar una clase adicional pero en este caso colocamos dos puntos ya que queremos evaluarlo Recuerda que todo esto es código View y por aquí también podemos preguntar que si es si no está activa entonces colocamos algo y si está y si está activa colocamos otra cosa entonces básicamente la misma condición que tenemos ahí arriba si está si no está activa es decir es la sería por ejemplo mi ejemplo yo estoy en la página uno sería la página dos entonces ahí puedes colocar clases específicas que en mi caso no necesito Entonces voy a colocar directamente un vacío y si es la página que está activa en mi caso sería la página uno coloco estas clases que es lo mismo que tenemos acá y bueno el resultado Debería ser exactamente lo mismo que tenemos voy a Bueno voy a bajar esto aquí un poquito y ahí lo puedes ver entonces guardamos regresamos aquí y aquí tenemos un error bueno Esto es nuevo esto no me había pasado la versión anterior del curso pero creo que no quiere que el href sea nulo y le dimos nulo entonces lo coloca así y aquí es decir aquí evalúo si esto es nulo entonces imprimo este carácter por ejemplo y si no imprimo esto aquí también me faltó una cosita más que sería el V html para imprimir el Label entonces aquí de una colocamos l punto Label y esto sería ya Prácticamente todo me parece voy a colocarlo por aquí arriba a ver qué problema tiene aquí está aquí puedes ver que funciona correctamente y puedes evaluar bueno esto lo tuviéramos que quitar para que no esté imprimiendo esto por aquí arriba correctamente aquí lo tienes tiene el enlace.
Recuerda que al se traduce como un enlace y tiene el spam Aunque si no te gusta no pasa nada también puede dejar este formato pero era para mostrarte otra posible implementación así que pues nada ya con esto terminamos esta clase
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter