From df0619c2c4f808a5b932df436ef74bc1c7b565a8 Mon Sep 17 00:00:00 2001
From: Pedro Senai <pedro_hl_santos@estudante.sc.senai.br>
Date: Thu, 8 Oct 2020 20:04:38 -0300
Subject: [PATCH] trying show coments and post coment

---
 src/components/cpmCard.vue          | 56 +++++++++++++++++++++--------
 src/components/cpmDialogProfile.vue | 20 ++++++++---
 src/store/index.js                  |  5 +++
 src/store/modules/FeedVuex.js       | 22 ++++++++++--
 src/store/modules/LoginVuex.js      | 12 +++----
 src/store/modules/ProfileVuex.js    |  3 +-
 src/views/public/Login.vue          |  1 +
 src/views/viewsPrivate.vue          | 18 +++++++++-
 8 files changed, 108 insertions(+), 29 deletions(-)

diff --git a/src/components/cpmCard.vue b/src/components/cpmCard.vue
index 75d00dc..42a2b7a 100644
--- a/src/components/cpmCard.vue
+++ b/src/components/cpmCard.vue
@@ -5,7 +5,7 @@
 
             <v-app-bar color="white" class="d-flex align-center" dense>
 
-                <v-avatar size="36" color="orange">
+                <v-avatar size="36" color="orange" class="mr-3">
                     <v-icon v-if="!cardData.user.avatar" dark>mdi-account-circle</v-icon>
                     <img v-else :src="cardData.user.avatar" alt="avatar">
                 </v-avatar>
@@ -29,24 +29,34 @@
                 <p>{{cardData.description}}</p>
             </v-card-text>
 
-            <v-expansion-panels v-if="cardDataArray[0].comments != '' ">
+            <v-expansion-panels>
                 <v-expansion-panel>
                     <v-expansion-panel-header>Comentários</v-expansion-panel-header>
                         <v-expansion-panel-content>
 
-                            <div class="d-flex" v-for="(item, i) in cardDataArray" :key="i">
+                            <div v-if="cardDataArray[0].comments != '' ">
+                                <div class="d-flex" v-for="(item, i) in cardDataArray" :key="i">
 
-                                <v-avatar size="36" color="orange">
+                                    <v-avatar size="36" color="orange">
+                                        <v-icon v-if="!item.comments[i].user.avatar" dark>mdi-account-circle</v-icon>
+                                        <img v-else :src="item.comments[i].user.avatar" alt="avatar">
+                                    </v-avatar>
+
+                                        <strong class="ml-2 mt-1">{{ item.comments[0].user.name }}:</strong> 
+
+                                        <p class="ml-2 mt-1">{{ item.comments[0].comment }}</p>
+                                </div>
+                            </div>
+
+                            <div>
+
+                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum, magni dicta. Dignissimos doloribus cum, similique corrupti consequatur quod! Deserunt, sequi!
+                                <!-- {{ userData }} -->
+                                <!-- <v-avatar size="36" color="orange">
                                     <v-icon v-if="!item.comments[i].user.avatar" dark>mdi-account-circle</v-icon>
                                     <img v-else :src="item.comments[i].user.avatar" alt="avatar">
                                 </v-avatar>
 
-                                    <strong class="ml-2 mt-1">{{ item.comments[0].user.name }}:</strong> 
-
-                                    <p class="ml-2 mt-1">{{ item.comments[0].comment }}</p>
-                            </div>
-                            
-                            <v-card>
                                 <v-textarea
                                     outlined
                                     v-model="newComent"
@@ -55,10 +65,13 @@
                                     :counter="500"
                                 ></v-textarea>
 
-                                <v-btn class="ml-a">
-                                    Enviar
-                                </v-btn>
-                            </v-card>
+                                <div class="d-flex justify-space-between">           
+                                    <v-btn color="orange" dark class="ml-a" @click="createComent">
+                                        Enviar
+                                    </v-btn>
+                                </div> -->
+
+                            </div>
                         </v-expansion-panel-content>
                 </v-expansion-panel>
             </v-expansion-panels>
@@ -69,6 +82,7 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex'
 export default {
     name: 'Card',
     props: ['cardData'],
@@ -77,6 +91,20 @@ export default {
         newComent:''
     }),
 
+    computed:{
+        ...mapGetters({
+            userData: 'userData'
+        })
+    },
+
+    methods:{
+
+
+        createComent(){
+            
+        }
+    },
+
     created(){
         this.cardDataArray.push(this.cardData)
     }
diff --git a/src/components/cpmDialogProfile.vue b/src/components/cpmDialogProfile.vue
index dfff8e3..7c89020 100644
--- a/src/components/cpmDialogProfile.vue
+++ b/src/components/cpmDialogProfile.vue
@@ -71,8 +71,8 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="blue darken-1" text @click="dialog = false">Cancelar</v-btn>
-          <v-btn color="blue darken-1" @click="update" text>Salvar</v-btn>
+          <v-btn color="error darken-1" text @click="dialog = false">Cancelar</v-btn>
+          <v-btn :loading="apiLoading" color="blue darken-1" @click="updateUserData" text>Salvar</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -80,7 +80,7 @@
 </template>
 
 <script>
-// import {mapActions} from 'vuex';
+import {mapGetters} from 'vuex';
 
 export default {
   props: ["user_data", "updateUser", "updateAvatar"],
@@ -96,6 +96,12 @@ export default {
     },
   }),
 
+  computed:{
+    ...mapGetters({
+      apiLoading: 'apiLoading'
+    })
+  },
+
   methods: {
     // ...mapActions({
     //   updateUser: 'ProfileVuex/updateUser'
@@ -135,7 +141,7 @@ export default {
       return url;
     },
 
-    async update() {
+    async updateUserData() {
 
       if(!this.formValidation()){
         this.$toast.error("Verifique se existe algum campo vazio", "Atenção!", {
@@ -154,8 +160,8 @@ export default {
       };
 
       if(newUser.avatar != ""){
+        this.$store.commit('setApiLoading', true)
         const url = await this.uploadPhoto();
-        console.log('a')
         newUser.avatar = url;
       }
 
@@ -179,9 +185,13 @@ export default {
         this.$toast.success("Informações atualizadas com sucesso!", "Yeah", {
           position: "topCenter",
         });
+        this.$store.commit('setApiLoading', false)
         this.dialog = false;
         localStorage.token = retorno;
+
       } else  {
+        this.$store.commit('setApiLoading', false)
+
         this.$toast.error("Aconteceu um erro.", "Error!", {
           position: "topCenter",
         });
diff --git a/src/store/index.js b/src/store/index.js
index afc1285..af100a6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,12 +11,14 @@ Vue.use(Vuex)
 export default new Vuex.Store({
 
   state: {
+    apiLoading: false,
     coordinateSelected:'',
     uploadedFile:'',
   },
   getters:{
     coordinateSelected: state => state.coordinateSelected,
     uploadedFile: state => state.uploadedFile,
+    apiLoading: state => state.apiLoading,
   },
   mutations: {
     setCoordinateSelected(state, newSate){
@@ -25,6 +27,9 @@ export default new Vuex.Store({
     setUploadedFile(state, newSate){
       state.uploadedFile = newSate
     },
+    setApiLoading(state, newSate){
+      state.apiLoading = newSate
+    },
   },
   actions: {
   },
diff --git a/src/store/modules/FeedVuex.js b/src/store/modules/FeedVuex.js
index 36bfc5a..4686519 100644
--- a/src/store/modules/FeedVuex.js
+++ b/src/store/modules/FeedVuex.js
@@ -6,12 +6,14 @@ export default {
   namespaced: true,
 
   state: {
-    cardsEventData:''
+    cardsEventData:'',
+    userData:'',
   },
 
   getters: {
 
-    cardsEventData: state => state.cardsEventData
+    cardsEventData: state => state.cardsEventData,
+    userData: state => state.userData
 
   },
 
@@ -19,6 +21,9 @@ export default {
     setFeedEventsData(state, newSate){
       state.cardsEventData = newSate
     },
+    setUserData(state, newSate){
+      state.userData = newSate
+    },
 
   },
 
@@ -33,6 +38,19 @@ export default {
       })
 
     },
+
+    async getuserData(context){
+      
+      let userId = localStorage.getItem('id');
+      await axios.get(process.env.VUE_APP_BASE_URL+`/user/${userId}`)
+      .then(resp => {
+          console.log(resp)
+          context.commit('setUserData', resp.data)
+
+          return resp.data;
+      })
+
+    }
         
   }
 }
diff --git a/src/store/modules/LoginVuex.js b/src/store/modules/LoginVuex.js
index ec5fce6..3e1fa2c 100644
--- a/src/store/modules/LoginVuex.js
+++ b/src/store/modules/LoginVuex.js
@@ -5,18 +5,17 @@ export default {
   namespaced: true,
 
   state: {
-
- 
-
+    userData:''
   },
 
   getters: {
-
-
+    userData: state=> state.userData
   },
 
   mutations: {
-
+    setUserData(state, newState){
+      state.userData = newState
+    }
   },
 
   actions: {
@@ -25,6 +24,7 @@ export default {
 
       const autho = await axios.post(process.env.VUE_APP_BASE_URL + '/user/auth', newData)
       localStorage.setItem('id', autho.data[1])
+      context.commit('setUserData', autho)
       return autho
 
     },
diff --git a/src/store/modules/ProfileVuex.js b/src/store/modules/ProfileVuex.js
index fb40818..ce620f4 100644
--- a/src/store/modules/ProfileVuex.js
+++ b/src/store/modules/ProfileVuex.js
@@ -22,9 +22,10 @@ export default {
     async getUser(context){
       const token = localStorage.getItem('token');
       const decodedToken = await axios.post(process.env.VUE_APP_BASE_URL+'/user/authToken', token);
+
       console.log(decodedToken)
-      const user = await axios.get(process.env.VUE_APP_BASE_URL+`/user/mail/${decodedToken.data}`);
 
+      const user = await axios.get(process.env.VUE_APP_BASE_URL+`/user/mail/${decodedToken.data}`);
       return user.data;
     },
 
diff --git a/src/views/public/Login.vue b/src/views/public/Login.vue
index 5dbdc6a..14a7ea2 100644
--- a/src/views/public/Login.vue
+++ b/src/views/public/Login.vue
@@ -49,6 +49,7 @@ export default {
   methods: {
 
     ...mapActions({
+
       authLogin: 'LoginVuex/authLogin',
       authToken: 'LoginVuex/authToken',
 
diff --git a/src/views/viewsPrivate.vue b/src/views/viewsPrivate.vue
index f37a1e7..1577aae 100644
--- a/src/views/viewsPrivate.vue
+++ b/src/views/viewsPrivate.vue
@@ -2,4 +2,20 @@
   <div id="app_p">
       <router-view/>
   </div>
-</template>
\ No newline at end of file
+</template>
+<script>
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+
+  methods:{
+      ...mapActions({
+          getuserData: 'FeedVuex/getuserData'
+      }),
+  },
+
+  created(){
+    this.getuserData()
+  }
+}
+</script>
\ No newline at end of file