Adiciona funcionalidades faltantes (logout, api guard, snackbar, pagi…

…na erro)
huogerac · Jan 11, 2023 · 5a744f1 · 5a744f1
1 parent 316c12c
commit 5a744f1
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 79 deletions.
diff --git a/template/frontend/src/api/config.js b/template/frontend/src/api/config.js
@@ -1,11 +1,7 @@
 import axios from "axios"
 
-let $store, $router
-
-export function init(context) {
-  $store = context.store
-  $router = context.app.router
-}
+import { useAppStore } from "@/stores/appStore"
+import router from "../router"
 
 const api = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
@@ -20,15 +16,16 @@ export function responseSuccess(response) {
 
 export function responseError(error) {
   // Redireciona falha na comunicação com o BACKEND para página 500
+  const appStore = useAppStore()
   if (!error.response && error.message === "Network Error") {
-    $store.commit("app/setErrorMessage", error.message)
+    appStore.setShowErrorMessage(error.message)
   }
 
   // Redireciona erro de autênticação para página de login
   if (error.response && error.response.status === 401) {
-    $router.push({
+    appStore.showSnackbar("Usuário sem autênticação. Efetue o login!", "warning")
+    router.push({
       name: "accounts-login",
-      params: { message: "Usuário sem autênticação. Efetue o login!" },
     })
     return
   }

diff --git a/template/frontend/src/components/AppErrorDialog.vue b/template/frontend/src/components/AppErrorDialog.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-dialog v-model="showValue" persistent max-width="960px">
+    <v-card class="pa-5">
+      <v-card-title class="text-h5"> Opps! Algo deu errado </v-card-title>
+      <v-card-text>
+        {{ message }}
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" text @click="close"> Fechar </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    message: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ["close"],
+  computed: {
+    showValue: {
+      get() {
+        return this.show
+      },
+    },
+  },
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+  },
+}
+</script>
diff --git a/template/frontend/src/components/AppFooter.vue b/template/frontend/src/components/AppFooter.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-footer :absolute="!fixed" app>
+    <span> &copy; {{ new Date().getFullYear() }} </span>
+    <span v-if="user" class="pl-4">
+      <v-icon>mdi-account</v-icon>
+      {{ user.username }}
+    </span>
+    <div class="px-5 text-grey">
+      <span class="px-5">API: {{ apiBaseUrl }}</span>
+      <span class="px-5">ENV: {{ nodeEnv }}</span>
+    </div>
+  </v-footer>
+</template>
+
+<script>
+export default {
+  props: {
+    fixed: {
+      type: Boolean,
+      default: true,
+    },
+    user: {
+      type: Object,
+      default: null,
+    },
+  },
+  data: () => ({
+    apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
+    nodeEnv: import.meta.env.VITE_NODE_ENV,
+  }),
+}
+</script>
diff --git a/template/frontend/src/components/AppSnackbar.vue b/template/frontend/src/components/AppSnackbar.vue
@@ -7,7 +7,7 @@
     elevation="12"
     content-class="snackbar-ft-size"
     transition="slide-y-transition">
-    {{ errorMessage }}
+    {{ snackbarMessage }}
   </v-snackbar>
 </template>
 
@@ -20,20 +20,14 @@ export default {
     const appStore = useAppStore()
     return { appStore }
   },
-  data: () => {
-    return {
-      show: false,
-      message: null,
-    }
-  },
   computed: {
-    ...mapState(useAppStore, ["errorMessage", "type", "showErrorMessage"]),
+    ...mapState(useAppStore, ["snackbarMessage", "type", "showSnackbarMessage"]),
     showSnackbar: {
       get() {
-        return this.showErrorMessage
+        return this.showSnackbarMessage
       },
       set(value) {
-        this.appStore.setShowErrorMessage(value)
+        this.appStore.showSnackbar(value)
       },
     },
     snackbarCollors() {

diff --git a/template/frontend/src/components/Task.vue b/template/frontend/src/components/Task.vue
@@ -16,6 +16,7 @@ export default {
     task: {
       type: Object,
       default: null,
+      roger: "usalinter",
     },
   },
   data: () => ({}),

diff --git a/template/frontend/src/layouts/default/DefaultLayout.vue b/template/frontend/src/layouts/default/DefaultLayout.vue
@@ -1,20 +1,30 @@
 <template>
   <VLayout>
+    <app-error-dialog :show="showErrorMessage" :message="errorMessage" @close="closeErrorDialog" />
     <VApp :theme="theme">
       <v-app-bar>
         <v-app-bar-title>My Todo List</v-app-bar-title>
         <template #append>
-          <v-btn icon="mdi-heart"></v-btn>
+          <v-btn icon="mdi-heart" :to="{ name: 'basic-home' }"></v-btn>
           <v-btn icon="mdi-magnify"></v-btn>
           <v-btn
             :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
             @click="onClick"></v-btn>
-          <v-btn icon="mdi-dots-vertical"></v-btn>
+
+          <v-btn icon="mdi-dots-vertical">
+            <v-icon icon="mdi-dots-vertical" />
+            <v-menu activator="parent">
+              <v-list>
+                <v-list-item :to="{ name: 'accounts-logout' }"> Sair </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-btn>
         </template>
       </v-app-bar>
       <VMain>
         <RouterView />
       </VMain>
+      <app-footer :fixed="true" :user="loggedUser" />
     </VApp>
     <app-snackbar />
   </VLayout>
@@ -31,12 +41,32 @@ function onClick() {
 </script>
 
 <script>
+import { mapState } from "pinia"
+import { useAppStore } from "@/stores/appStore"
+import { useAccountsStore } from "@/stores/accountsStore"
 import AppSnackbar from "@/components/AppSnackbar.vue"
+import AppErrorDialog from "@/components/AppErrorDialog.vue"
+import AppFooter from "@/components/AppFooter.vue"
 
 export default {
   name: "DefaultLayout",
   components: {
     AppSnackbar,
+    AppErrorDialog,
+    AppFooter,
+  },
+  setup() {
+    const appStore = useAppStore()
+    return { appStore }
+  },
+  computed: {
+    ...mapState(useAppStore, ["errorMessage", "showErrorMessage"]),
+    ...mapState(useAccountsStore, ["loggedUser"]),
+  },
+  methods: {
+    closeErrorDialog() {
+      this.appStore.setShowErrorMessage(null)
+    },
   },
 }
 </script>
diff --git a/template/frontend/src/layouts/default/EmptyLayout.vue b/template/frontend/src/layouts/default/EmptyLayout.vue
@@ -1,21 +1,43 @@
 <template>
   <VLayout>
+    <app-error-dialog :show="showErrorMessage" :message="errorMessage" @close="closeErrorDialog" />
     <VApp>
       <VMain>
         <RouterView />
       </VMain>
+      <app-footer :fixed="true" :user="loggedUser" />
     </VApp>
     <app-snackbar />
   </VLayout>
 </template>
 
 <script>
+import { mapState } from "pinia"
+import { useAppStore } from "@/stores/appStore"
+import { useAccountsStore } from "@/stores/accountsStore"
 import AppSnackbar from "@/components/AppSnackbar.vue"
+import AppErrorDialog from "@/components/AppErrorDialog.vue"
+import AppFooter from "@/components/AppFooter.vue"
 
 export default {
   name: "EmptyLayout",
   components: {
     AppSnackbar,
+    AppErrorDialog,
+    AppFooter,
+  },
+  setup() {
+    const appStore = useAppStore()
+    return { appStore }
+  },
+  computed: {
+    ...mapState(useAppStore, ["errorMessage", "showErrorMessage"]),
+    ...mapState(useAccountsStore, ["loggedUser"]),
+  },
+  methods: {
+    closeErrorDialog() {
+      this.appStore.setShowErrorMessage(null)
+    },
   },
 }
 </script>
diff --git a/template/frontend/src/router/accounts.routes.js b/template/frontend/src/router/accounts.routes.js
@@ -1,6 +1,7 @@
 // Composables
 import EmptyLayout from "@/layouts/default/EmptyLayout.vue"
 import LoginView from "@/views/accounts/LoginView.vue"
+import LogoutView from "@/views/accounts/LogoutView.vue"
 
 export default [
   {
@@ -15,7 +16,7 @@ export default [
       {
         path: "logout",
         name: "accounts-logout",
-        component: LoginView,
+        component: LogoutView,
       },
     ],
   },

diff --git a/template/frontend/src/router/basic.routes.js b/template/frontend/src/router/basic.routes.js
@@ -1,7 +1,7 @@
 // Composables
 import EmptyLayout from "@/layouts/default/EmptyLayout.vue"
 import HomeView from "@/views/basic/HomeView.vue"
-import TestView from "@/views/basic/TestView.vue"
+import GetStartedView from "@/views/basic/GetStartedView.vue"
 
 export default [
   {
@@ -14,9 +14,9 @@ export default [
         component: HomeView,
       },
       {
-        path: "test",
-        name: "Test",
-        component: TestView,
+        path: "getstarted",
+        name: "basic-getstarted",
+        component: GetStartedView,
       },
     ],
   },

diff --git a/template/frontend/src/stores/appStore.js b/template/frontend/src/stores/appStore.js
@@ -4,16 +4,19 @@ export const useAppStore = defineStore("appStore", {
   state: () => ({
     errorMessage: undefined,
     showErrorMessage: false,
+    snackbarMessage: undefined,
+    showSnackbarMessage: false,
     type: "success",
   }),
   actions: {
-    setShowErrorMessage(payload) {
-      this.showErrorMessage = payload
+    setShowErrorMessage(errorMessage) {
+      this.errorMessage = errorMessage
+      this.showErrorMessage = !!errorMessage
     },
     showSnackbar(message, type) {
       this.type = type
-      this.errorMessage = message
-      this.showErrorMessage = !!message
+      this.snackbarMessage = message
+      this.showSnackbarMessage = !!message
     },
   },
 })
diff --git a/template/frontend/src/views/accounts/LoginView.vue b/template/frontend/src/views/accounts/LoginView.vue
@@ -37,7 +37,7 @@
             color="primary"
             variant="outlined"
             :to="{ name: 'basic-home' }">
-            Home
+            Início
           </v-btn>
         </v-form>
       </v-col>
@@ -71,7 +71,6 @@ export default {
     ...mapState(useAccountsStore, ["loggedUser"]),
   },
   mounted() {
-    this.checkMessage()
     console.log(this.loggedUser)
     AccountsApi.whoami().then((response) => {
       if (response.authenticated) {
@@ -85,12 +84,12 @@ export default {
     login() {
       this.loading = true
       AccountsApi.login(this.username, this.password)
-        .then((user) => {
-          if (!user) {
+        .then((response) => {
+          if (!response) {
             this.appStore.showSnackbar("Usuário ou senha invalida", "danger")
             return
           }
-          this.saveLoggedUser(user)
+          this.saveLoggedUser(response.user)
           this.showTasks()
         })
         .finally(() => {
@@ -109,12 +108,6 @@ export default {
       this.$router.push({ name: "tasks-list" })
       console.log("--> tasks")
     },
-    checkMessage() {
-      if (this.$route.params.message) {
-        // this.$nuxt.$emit("show-snackbar", this.$route.params.message, "warning")
-        console.log("--->", this.$route.params.message)
-      }
-    },
   },
 }
 </script>