feat: firebase in cloud home-page

MiniDudi · May 22, 2024 · b564d0f · b564d0f
1 parent 764d0e9
commit b564d0f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 21 deletions.
diff --git a/project/src/views/Home.vue b/project/src/views/Home.vue
@@ -7,43 +7,73 @@
     </v-row>
 
     <v-row no-gutters class="mt-10">
-      <v-col v-for="item in itens" :key="item" cols="2" style="margin: 20px;" align="center">
-
-        <v-card @click="onCardClick()" width="220" height="300" elevation="7" border="5">
-          <v-avatar color="#FFC641" size="80" class="mt-6" align="center" justify=center>
-            <v-avatar color="surface-variant" size="70"><v-img src="@/styles/gato.jpeg"></v-img></v-avatar>
-          </v-avatar>
-          <v-card-text class="pb-0">Nome da Empresa</v-card-text>
-          <p class="text-caption">Mercado</p>
-          <v-card-text class="pb-0">Produtos Disponíveis</v-card-text>
-          <p>3</p>
-
+      <v-col cols="9">
+        <v-row no-gutters>
+          <v-col v-for="participant in participants" :key="participant" cols="2" style="margin-bottom: 20px;"
+            align="center">
+            <v-card @click="onCardClick()" width="200" height="300" elevation="7" border="5">
+              <v-avatar color="#FFC641" size="80" class="mt-6" align="center" justify=center>
+                <v-avatar color="surface-variant" size="70"><v-img src="@/styles/gato.jpeg"></v-img></v-avatar>
+              </v-avatar>
+              <v-card-text class="pb-0">{{ participant.nome }}</v-card-text>
+              <p class="text-caption">Mercado</p>
+              <v-card-text class="pb-0">Produtos Disponíveis</v-card-text>
+              <p>3</p>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-col>
+      <v-col cols="3">
+        <v-card class="ml-2" height="620" elevation="7" border="5">
+          <v-card-title class="side-bar" align="center" justify="center">Last twenty registered
+            participants</v-card-title>
         </v-card>
       </v-col>
     </v-row>
   </v-col>
 </template>
 
 <script>
+import { collection, getDocs, deleteDoc, doc } from 'firebase/firestore';
+import { db } from '../firebase/index';
+
 export default {
   name: 'HomePage',
   data() {
     return {
-      itens: 14,
+      itens: 33,
+      participants: [],
     }
   },
   computed() {
-    
+
   },
   created() {
-
+    this.fetchParticipants();
   },
   methods: {
     onCardClick() {
       this.$router.push('/participants')
-    }
+    },
+    async fetchParticipants() {
+      try {
+        const querySnapshot = await getDocs(collection(db, 'participants'));
+        this.participants = [];
+        querySnapshot.forEach((doc) => {
+          this.participants.push({ id: doc.id, ...doc.data() });
+        });
+      } catch (error) {
+        console.error("Erro ao buscar os participantes: ", error);
+      }
+    },
   }
 
 }
 
 </script>
+
+<style scoped>
+.side-bar {
+  color: #FFC641;
+}
+</style>
diff --git a/project/src/views/participant/newParticipant.vue b/project/src/views/participant/newParticipant.vue
@@ -16,7 +16,7 @@
                                 <div class="text-subtitle-1 text-medium-emphasis">Participant Name</div>
                             </v-row>
                             <v-row no-gutters align="center" justify="center">
-                                <v-text-field v-model="participantEmail" label="Name" outlined
+                                <v-text-field v-model="participantName" label="Name" outlined
                                     prepend-icon="mdi-account"></v-text-field></v-row>
                         </v-col>
                     </v-row>
@@ -26,7 +26,7 @@
                                 <div class="text-subtitle-1 text-medium-emphasis">Participant E-mail</div>
                             </v-row>
                             <v-row no-gutters align="center" justify="center">
-                                <v-text-field v-model="participantName" label="E-mail" outlined
+                                <v-text-field v-model="participantEmail" label="E-mail" outlined
                                     prepend-icon="mdi-email"></v-text-field></v-row>
                         </v-col>
                         <v-col cols="6">

diff --git a/project/src/views/settingsPage.vue b/project/src/views/settingsPage.vue
@@ -11,10 +11,10 @@
         </v-row>
         <v-row no-gutters align="center" justify="center" class="mt-15">
             <v-col cols="7">
-                <v-card elevation="3" class="info-card ml-10 mr-10" id="card1" align="center" justify="center" ref="card1">
+                <v-card elevation="3" class="info-card ml-10 mr-10" id="card1" align="center" justify="center" ref="card1" height="300">
                     <v-card-title class="section-title">User Information</v-card-title>
                     <v-card-text align="center" justify="center">
-                        <v-row no-gutters>
+                        <v-row no-gutters align="center" justify="center">
                             <v-col cols="12">
                                 <v-text-field v-model="email" label="Email" clearable outlined
                                     prepend-icon="mdi-email" />
@@ -25,14 +25,14 @@
                             </v-col>
                         </v-row>
                         <v-row no-gutters align="center" justify="center">
-                            <v-btn class="mb-1 mt-1" elevation="3" color="green">Salvar</v-btn>
+                            <v-btn elevation="3" rounded="0" color="green">Salvar</v-btn>
                         </v-row>
                     </v-card-text>
                 </v-card>
             </v-col>
 
             <v-col cols="5" align="center" justify="center">
-                <v-card elevation="3" class="avatar-card" align="center" justify="center" :style="{ height: `${card1Height}px` }">
+                <v-card elevation="3" class="avatar-card" align="center" justify="center" height="300">
                     <v-card-title class="section-title">Profile Picture</v-card-title>
                     <v-col cols="12">
                         <v-row no-gutters align="center" justify="center">