Ya casi hemos terminado la vista de Profile. Para terminar el (gran) componente de MainBlock nos queda una última cosa y ya podríamos pasar al componente de los artesanos.
Lo que vamos a implementar ahora es que cuando hagamos click en un héroe, tanto si haces click en el rostro del hero en TopHeroe o en HeroIco (primera columna de la tabla), cambiemos a la ruta de detalle del héroe, es decir, a la vista Hero.
Para refrescar contenidos, estas son las rutas que habíamos definido:
Queremos que al hacer click en la "cara" de un hero, la app cambie de ruta y cargue la vista de Hero. Tenemos dos casos en los que controlar este comportamiento, por lo tanto, para reutilizar, vamos a crear un mixin que, más tarde, lo usaremos en múltiples componentes.
Creamos nuestro mixin en la carpeta /mixins. Como se trata de una función (method) que va a navegar a la vista del hero, podemos llamarle goToHero.js. Va a tener este contenido:
exportdefault{methods:{/**
* Go to hero Id
* @paramheroId{String | Number} */goToHero(heroId){// Sacar los datos de la URLconst{ region, battleTag }=this.$route.params// Navegar a la ruta "Hero"this.$router.push({name:'Hero',params:{ region, battleTag, heroId }})}}}
Para poder usarlo, primero lo importamos y después lo declaramos en el componente. Vamos a usarlo en dos componentes:
Si pruebas a hacer click en estos elementos, debería funcionarte y cambiarte de vista.
Sin embargo, tenemos un problema que tal vez hayas visto. La interfaz no es muy intuitiva, pues cuando pasamos el ratón por encima, el cursor no cambia a pointer 👆.
Podemos solucionarlo con una clase de CSS. Vamos a crear una clase CSS en nuestro fichero global de estilos CSS /assets/css/main.styl.
¡Estupendo! El componente MainBlock ya está listo (¡Por fin!). Podemos pasar a desarrollar el componente de los artesanos.
Y en cuanto terminemos con los artesanos podríamos dar por finalizada esta vista, la vista Profile.
ArtisansBlock
Este componente es también bastante sencillo: va a mostrar datos básicos de los tres artesanos (herrero, joyero y mística).
Para empezar, vamos a crear todos los archivos necesarios. Dentro de la carpeta /views/Profile, al mismo nivel que /MainBlock, creamos una nueva llamada /ArtisansBlock. Dentro de esta creamos Index.vue y ArtisanItem.vue.
Ahora toca actualizar el componente vista /views/Profile/Index.vue, y agregarle el nuevo componente de ArtisansBlock que acabamos de crear.
/views/Profile/Index.vue
En el bloque de JavaScript, importamos y habilitamos el componente (as usual):
El componente está recibiendo artisansData como prop. Vamos a crear una computed property que genere el objeto que necesitamos, los datos de los tres artesanos y en los dos modos (normal y hardcore):
> 😎 Truqui: si estás en MacOS, puedes pulsar la combinación de teclas Control + Cmd + Tecla Espacio para sacar un selector de emojis. 👇
> ¿Eres usuario de Windows? Con la combinación Win + . puedes hacer lo mismo 😉
Hemos creado un array con tres items. Cada item corresponde a un artesano. Cada uno tiene los dos datos de su tipo que ha recibido de las props.
Además, le hemos dado un color, un emoji y un ícono (icon, que hace referencia a FontAwesome, la librería de íconos que ya conoces)
El objeto que hemos generado con la computed property, que es el que se va a usar para iterar y generar los tres componentes de artesanos dinámicamente, tiene este contenido:
El HTML lo explicamos un poquito más, aunque es muy simple, ya verás. ¿Recuerdas que hablamos de los emojis anteriormente? En esta ocasión le estamos pasando, a través de las props, ¡emojis al componente! 😏
¿Cuál te gusta más? ¿Cuál crees que es mejor? Deja tus comentarios y explica tu respuesta.
La decisión es tuya, tú eliges con que opción te quedas. En mi caso voy a usar la opción uno, la de los emojis.
¡Maravilloso! 🎉 Hemos terminado con la vista de Profile. Ahora debemos continuar con la vista de detalle del héroe, donde cargaremos los items y los skills de nuestro personaje.
Lo vemos en el siguiente tema.
