Error messages insert

package-lock.json

@@ -4277,6 +4277,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
+          "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -4555,47 +4598,6 @@
       "integrity": "sha512-zL5kygNq7hONrO1CzaUGprEAklAX+pH8J1MPMCU3Rd2xtSYkZ+PmKU3oEDRg8VAGdL5lNJHzDgrud5amFPtirw==",
       "dev": true
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.9.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
-      "integrity": "sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/vue3-jest": {
       "version": "27.0.0",
       "resolved": "https://registry.npmjs.org/@vue/vue3-jest/-/vue3-jest-27.0.0.tgz",

src/components/base/BaseLayout.vue

@@ -19,10 +19,18 @@
         <ion-content fullscreen="true">
             <slot />
         </ion-content>
+        <ion-toast
+            :is-open="tainacanStore.errorStatus"
+            :message="$t(tainacanStore.errorMessage)"
+            :duration="4000"
+            @didDismiss="setOpen(false)"
+            color="danger"
+        >
+        </ion-toast>
     </ion-page>
 </template>
 
-<script>
+<script lang="ts">
 import { logOutOutline } from "ionicons/icons";
 import { 
     useWpStore
@@ -39,8 +47,10 @@ import {
     IonButton,
     IonButtons,
     IonImg,
+    IonToast
 } from '@ionic/vue';
 import { computed } from 'vue';
+import { useTainacanStore } from '@/store/storeTainacan';
 
 export default {
     props: ['pageTitle', 'pageDefaultBackLink'],
@@ -55,15 +65,18 @@ export default {
         IonBackButton,
         IonButtons,
         IonImg,
+        IonToast
     },
     setup(){
         const tainacanLogo = computed (() => require('../../assets/logo.png'))
         let wpStore = useWpStore();
+        let tainacanStore = useTainacanStore();
 
         return {
             tainacanLogo,
             wpStore,
-            logOutOutline
+            logOutOutline,
+            tainacanStore
         }  
     },
     methods: {

src/locales/translation-strings.ts

@@ -32,7 +32,10 @@ export const translationStrings = {
         label_learn_more_here: 'Learn more here',
         label_item_actions: 'Item actions',
         label_option_edit_item: 'Edit item',
-        label_option_delete_item: 'Send item to trash'
+        label_option_delete_item: 'Send item to trash',
+        error_label_fetch_collections: 'Collections loading error',
+        error_label_fetch_items_collections: 'Items collections loading error',
+        error_label_fetch_items: 'Items loading error'
     },
     pt: {
         collections: "Coleções",
@@ -67,6 +70,9 @@ export const translationStrings = {
         label_learn_more_here: 'Saiba mais aqui.',
         label_item_actions: 'Ações para o item',
         label_option_edit_item: 'Editar item',
-        label_option_delete_item: 'Enviar item para lixeira'
+        label_option_delete_item: 'Enviar item para lixeira',
+        error_label_fetch_collections: 'Erro no carregamento das coleções',
+        error_label_fetch_items_collections: 'Erro no carregamento dos itens da coleção',
+        error_label_fetch_items: 'Erro no carregamento dos itens'
     }
 }

src/store/storeTainacan.ts

@@ -16,7 +16,9 @@ const useTainacanStore = defineStore("tainacan", {
       nextItemsByCollectionPage: 1,
       items: [],
       nextItemsPage: 1,
-      totalItems: 0
+      totalItems: 0,
+      errorMessage: "",
+      errorStatus: false
     };
   },
 
@@ -46,8 +48,9 @@ const useTainacanStore = defineStore("tainacan", {
       } catch (err) {
         this.collections = [];
         this.totalCollections = 0;
-        console.error("Erro no carregamento das coleções:", err);
+        this.errorMessage = "error_label_fetch_collections";
-
+        this.errorStatus = true;
+        console.error("Collections loading error: ", err);
         return err;
       }
     },
@@ -71,8 +74,9 @@ const useTainacanStore = defineStore("tainacan", {
       } catch (err) {
         this.homeCollections = [];
         this.totalHomeCollections = 0;
-        console.error("Erro no carregamento das coleções da home:", err);
+        this.errorMessage = "error_label_fetch_collections";
-
+        this.errorStatus = true;
+        console.error("Home collections loading error: ", err);
         return err;
       }
     },
@@ -121,8 +125,9 @@ const useTainacanStore = defineStore("tainacan", {
         this.collectionItems = [];
         this.totalCollectionItems = 0;
         this.nextItemsByCollectionPage = 1;
-        console.error("Erro no carregamento dos items da coleção:", err);
+        this.errorMessage = "error_label_fetch_items_collections";
-
+        this.errorStatus = true;
+        console.error("Items collections loading error: ", err);
         return false;
       }
     },
@@ -130,7 +135,6 @@ const useTainacanStore = defineStore("tainacan", {
     async fetchHomeItems() {
       try {
         const wpStore = useWpStore();
-        
         const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?context=edit&fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
         const authorization = (wpStore.userLogin && wpStore.userToken) ? ('Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken)) : null;
 
@@ -142,11 +146,13 @@ const useTainacanStore = defineStore("tainacan", {
 
         this.homeItems = response.data.items;
         this.totalHomeItems = response.headers['x-wp-total'];
-
+      
       } catch (err) {
         this.homeItems = [];
         this.totalHomeItems = 0;
-        console.error("Erro no carregamento dos items da home:", err);
+        this.errorMessage = "error_label_fetch_items_collections";
+        this.errorStatus = true;
+        console.error("Items collections loading error: ", err);
         return err;
       }
     },
@@ -191,7 +197,9 @@ const useTainacanStore = defineStore("tainacan", {
         this.items = [];
         this.totalItems = 0;
         this.nextItemsPage = 1;
-        console.error("Erro no carregamento dos items:", err);
+        this.errorMessage = "error_label_fetch_items";
+        this.errorStatus = true;
+        console.error("Items loading error: ", err);
         return err;
       }
     },