From 9dbc66a18ea23b26bd971966ec3b6c393bd20c0f Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 26 May 2022 16:53:59 -0300
Subject: [PATCH] Better styling and store functions parameters.

---
 src/components/base/BaseLayout.vue       |  4 +-
 src/components/lists/CollectionsList.vue | 10 ++++-
 src/components/lists/ItemsList.vue       | 24 ++++++++--
 src/pages/HomePage.vue                   |  2 +-
 src/store/storeTainacan.ts               | 56 ++++++++++++++++++------
 5 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/src/components/base/BaseLayout.vue b/src/components/base/BaseLayout.vue
index d081146..d25362d 100644
--- a/src/components/base/BaseLayout.vue
+++ b/src/components/base/BaseLayout.vue
@@ -12,8 +12,8 @@
                     </ion-button>
                 </ion-buttons>
             </ion-toolbar>
-            <ion-toolbar>
-                <ion-title size="small"> {{ pageTitle }} </ion-title>
+            <ion-toolbar v-if="pageTitle">
+                <ion-title> {{ pageTitle }} </ion-title>
             </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true">
diff --git a/src/components/lists/CollectionsList.vue b/src/components/lists/CollectionsList.vue
index 8fa80d7..6ba1214 100644
--- a/src/components/lists/CollectionsList.vue
+++ b/src/components/lists/CollectionsList.vue
@@ -1,5 +1,5 @@
 <template>
-    <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+    <ion-item class="collection-list-item" v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
         <ion-thumbnail slot="start"> 
             <ion-img :src="(collection.thumbnail && collection.thumbnail.thumbnail && collection.thumbnail.thumbnail[0]) ? collection.thumbnail.thumbnail[0] : thumbnailPlaceholder" :alt="collection.name ? collection.name : 'Imagem de coleção sem nome'"></ion-img>
         </ion-thumbnail>
@@ -33,3 +33,11 @@ export default {
 }
 </script>
 
+<style>
+.collection-list-item {
+    --border-color: var(--ion-color-step-900, #e6e6e6);
+}
+.collection-list-item ion-img {
+    --border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/lists/ItemsList.vue b/src/components/lists/ItemsList.vue
index 0a6915c..a02649d 100644
--- a/src/components/lists/ItemsList.vue
+++ b/src/components/lists/ItemsList.vue
@@ -1,8 +1,8 @@
 <template>
-    <ion-row>
+    <ion-row class="items-list-container">
         <ion-col size="6" v-for="item of items" :key="item.id">
             <ion-card button color="light" >
-                <ion-img :src="(item.thumbnail && item.thumbnail.medium && item.thumbnail.medium[0]) ? item.thumbnail.medium[0] : thumbnailPlaceholder" :alt="item.title ? item.title : 'Imagem de item sem título'"></ion-img>
+                <ion-img :src="(item.thumbnail && item.thumbnail['tainacan-medium'] && item.thumbnail['tainacan-medium'][0]) ? item.thumbnail['tainacan-medium'][0] : thumbnailPlaceholder" :alt="item.title ? item.title : 'Imagem de item sem título'"></ion-img>
                 <ion-card-header>
                     <ion-card-title v-if="item.title"> {{ item.title ? item.title : 'Item sem título' }} </ion-card-title>
                 </ion-card-header>
@@ -39,4 +39,22 @@ export default {
         return { thumbnailPlaceholder }
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.items-list-container {
+    --ion-grid-column-padding: 0px;
+    padding: 12px;
+}
+.items-list-container ion-card {
+    box-shadow: none;
+    margin: 4px;
+}
+.items-list-container ion-card-header {
+    padding: 12px;
+}
+.items-list-container ion-card-title {
+    font-size: 0.875rem;
+    font-weight: normal;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 3a38b82..192270f 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -66,7 +66,7 @@ export default {
     },
     async created() {
         this.setIsLoading(true);
-        await this.tainacanStore.fetchCollections("4", "modified");
+        await this.tainacanStore.fetchCollections({ perPage: "4", orderBy: "modified" });
         await this.tainacanStore.fetchItems();
         this.setIsLoading(false);
     }
diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts
index 959b05f..cfef4f1 100644
--- a/src/store/storeTainacan.ts
+++ b/src/store/storeTainacan.ts
@@ -15,44 +15,72 @@ const useTainacanStore = defineStore("tainacan", {
   },
 
   actions: {
-    async fetchCollections(perPage: string, orderBy: string) {
+    async fetchCollections(params: { perPage: string, orderBy: string }) {
       try {
         const wpStore = useWpStore();
-        const response = await axios.get(
-          `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?${
-            perPage ? "perpage=" + perPage : ""
-          }&${orderBy ? "orderby=" + orderBy : ""}`
-        );
+
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?`;
+
+        if (params && params.perPage)
+          endpoint += '&perpage=' + params.perPage;
+  
+        if (params && params.orderBy)
+          endpoint += '&orderby=' + params.orderBy;
+
+        const response = await axios.get(endpoint);
+
         this.collections = response.data;
+
       } catch (err) {
         this.collections = [];
+
         console.error("Erro no carregamento das coleções:", err);
+
         return err;
       }
     },
 
-    async fetchItemsByCollection(collectionId: string) {
+    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string }) {
       try {
         const wpStore = useWpStore();
         this.collectionItems = [];
-        const response = await axios.get(
-          `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?perpage=12&orderby=modified&fetch_only=id,title,thumbnail`
-        );
+
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
+
+        if (params && params.perPage)
+          endpoint += '&perpage=' + params.perPage;
+  
+        if (params && params.orderBy)
+          endpoint += '&orderby=' + params.orderBy;
+
+        const response = await axios.get(endpoint);
+
         this.collectionItems = response.data.items;
+
       } catch (err) {
         this.collectionItems = [];
+
         console.error("Erro no carregamento dos items da coleção:", err);
+
         return err;
       }
     },
 
-    async fetchItems() {
+    async fetchItems(params: { perPage: string, orderBy: string }) {
       try {
         const wpStore = useWpStore();
         this.items = [];
-        const response = await axios.get(
-          `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?perpage=12&orderby=modified&fetch_only=id,title,thumbnail`
-        );
+        
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail`;
+
+        if (params && params.perPage)
+          endpoint += '&perpage=' + params.perPage;
+  
+        if (params && params.orderBy)
+          endpoint += '&orderby=' + params.orderBy;
+
+        const response = await axios.get(endpoint);
+
         this.items = response.data.items;
       } catch (err) {
         this.items = [];