CategoryList & type Category

A este módulo, lo llamamos módulo de repaso, porque vamos a hacer algunos cambios sobre nuestro proyecto usando conocimiento que ya tenemos, porque lo hemos visto en módulos anteriores. Probablemente surjan algunos detalles nuevos, entonces es una buena oportunidad por si quieres primero hacer tú los cambios, y luego comparar con la solución planteada en el curso. Bien, lo que vamos a hacer primero es un cambio visual, vamos a agregar aquí al lado izquierdo las categorías. La idea es que al lado derecho tengamos los productos, pero al lado izquierdo tengamos las categorías. De hecho, en la documentación de Vuetify, nosotros habíamos visto una sección llamada wireframes, y esto lo estábamos usando como guía para maquetar más rápido el layout de nuestro sitio. Para este caso, por ejemplo, vamos a mostrar las categorías de esta manera, en el lado izquierdo. En el lado derecho, vamos a tener los productos, y en el lado izquierdo las categorías. En este código de ejemplo vemos que se tiene un VContainer, se tiene un VRow, donde en su interior hay un VColumn, que está ocupando dos columnas, ¿sí? Y luego otro v-column que ocupa el resto. Lo que vamos a hacer entonces es copiar el v-column que está ocupando las dos primeras columnas. Es decir, lo que tenemos aquí al lado izquierdo. La pregunta es, ¿dónde tenemos que hacer el cambio? Tenemos que ir de más a menos. Nuestro proyecto mostrará un componente según la página que está viendo el usuario. En este caso, el usuario se encuentra viendo el componente HomeView. Entonces nos vamos a views, HomeView, y esto es lo que actualmente tenemos en HomeView. Solamente tenemos un product list. La idea es que el product list quede al lado derecho y al lado izquierdo quedn las categorías. Por lo tanto, vamos a poner aquí lo que habíamos cortado. Tenemos aquí un v-col, sin embargo recordemos que este v-col siempre tiene que estar dentro de un v-row, y de esta manera vamos a tener dos bloques. Uno ocupando dos columnas y otro ocupando 10, de tal manera que sumen 12, ya que el sistema de grillas se compone de 12 columnas. ¿Sí? Esta es la idea: tener un v-row, luego un bloque de dos columnas y luego otro de 10. Guardemos hasta aquí para ver qué resultado tenemos. Al volver al navegador nos encontramos con este cambio. Tenemos nuestro product list al lado derecho, y una lista de items al lado izquierdo. Esto es bueno, sin embargo, si nosotros expandimos v-column vamos a ver un montón de código, Si expandimos el bloque de 10 columnas vemos solo un componente, entonces idealmente este bloque de dos columnas tendría que contener un componente y este otro para que sea más sencillo de visualizar. Por lo tanto vamos a crear un componente nuevo para representar a nuestras categorías. Así como tenemos un componente llamado Product List, vamos a crear otro componente nuevo, que se va a llamar Category List, punto View, para representar a la lista de categorías. Por ahora no vamos a agregar ninguna lógica, simplemente un template. Y vamos a poner aquí el contenido de este v-col. Entonces por aquí lo ponemos. Y vamos a indentar también un poco para que quede organizado el código. Bien, entonces aquí tenemos que hacer uso de Category List. De esta manera. Entonces aquí pondremos, coma, Category List. Recordemos que tenemos que importar Category List desde el archivo correspondiente que se encuentra en la carpeta de components. Guardamos nuestros cambios y el resultado sigue siendo el mismo. En el navegador vemos que el resultado es el mismo. La diferencia es que ahora podemos gestionar el componente de categorías de manera aislada del componente de productos. De esta manera cuando se vaya a revisar el código de HomeView será más sencillo de entender porque nos encontraremos solo con dos componentes. Y sabremos directamente cuántas columnas está ocupando cada uno de ellos. Ahora nosotros podemos ir de manera específica a Category List y actualizar según nuestras necesidades. Por ejemplo, actualmente estos cinco list item se generan a partir de una directiva Vue for. La directiva vue form en este caso, simplemente itera cinco veces, y terminamos mostrando cinco items. Sin embargo, cuando nosotros queramos realmente mostrar nuestras categorías vamos a tener un arreglo de categorías. Y vamos a mostrar aquí los nombres de las categorías. Por lo tanto tenemos que limpiar un poco este ejemplo. Empecemos agregando una sección de script. Y con este etiqueta indicamos que haremos uso de TypeScript. Aquí vamos a agregar un export default y vamos a devolver un objeto. Vamos a tener un método data que va a hacer "return" de un objeto, representando el estado del componente. En este caso vamos a contar con categorías. Las categorías serán un arreglo. Y aquí nosotros vamos a indicar el tipo. Se va a tratar de un array del tipo Category. Aquí tenemos un error porque no existe el tipo Category. Tenemos que definir esta interfaz. Por lo tanto, nos vamos a nuestra carpeta de model y dentro del archivo de types vamos a agregar un tipo nuevo. Export interface, Category. ¿Qué atributos considerar? Va a depender de qué tantos datos quieras tener para cada categoría, lo más sencillo sería por ejemplo contar con un ID que represente cada categoría, un nombre, y si lo deseas puedes poner también una descripción. Yo por ahora lo voy a omitir. Entonces guardamos y aquí tenemos que importar esta categoría para poder usarla, entonces aquí arriba vamos a poner "import type category", y de esta manera importamos category desde types, ¿sí? Guardamos y ahora lo que queremos es mostrar aquí no "n" sino más bien el nombre de cada categoría, ¿sí? Para ello tenemos que iterar sobre las categorías. Por lo tanto vamos a escribir aquí category in categories. Cuando se usa una directiva view for se recomienda que cada item sea único. Para que cada item sea único tenemos que indicar una KEY, diciendo qué valor es el que hace único a cada item. En este caso el valor que hace único a cada item es el ID de categoría. Sin embargo, lo que queremos mostrar al usuario como title del componente v-list item será "category.name". Este view for es una directiva que se está aplicando sobre este elemento llamado view list item. Este v-list item contiene un v-list item title, pero al final, lo que estamos generando son varios list item dentro de un view list, este elemento view list es el que se usa para mostrar una lista de elementos. Entonces vamos a guardar nuestros cambios, y a volver al navegador, no tenemos ninguna categoría. Esto ocurre porque nuestro arreglo declarado aquí está vacío. Por ahora vamos a definir algunas categorías aquí. Por ejemplo vamos a definir una categoría de tecnología, y vamos a definir otra categoría, y vamos a definir otra categoría de juguetes, por ejemplo. Si hacemos esto, el v-for será capaz de iterar sobre el arreglo de categorías y de imprimir el name de cada categoría. En vez de refresh, nosotros vamos a poner otra opción que vamos a usar también más adelante. La opción será order by price, ordenar por precio. La idea es que cuando se haga clic sobre esto, ordene de menor a mayor, o de mayor a menor, según el precio, ¿sí? Esto lo haremos más adelante. Por ahora solo estamos dando forma a nuestro proyecto. En el módulo siguiente vamos a ver cómo conectar nuestro proyecto con una API, como consumir servicios web, para que a partir de la información que nos da un servidor, podamos mostrar productos, podemos mostrar categorías, etcétera.

Crea una cuenta y continúa aprendiendo 🚀

CategoryList & type Category