trying show coments and post coment

LiamTX · Oct 8, 2020 · df0619c · df0619c
1 parent ecdb894
commit df0619c
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 29 deletions.
diff --git 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
@@ -71,16 +71,16 @@
         </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>
   </v-row>
 </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
@@ -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
@@ -6,19 +6,24 @@ export default {
   namespaced: true,
 
   state: {
-    cardsEventData:''
+    cardsEventData:'',
+    userData:'',
   },
 
   getters: {
 
-    cardsEventData: state => state.cardsEventData
+    cardsEventData: state => state.cardsEventData,
+    userData: state => state.userData
 
   },
 
   mutations: {
     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
@@ -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
@@ -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
@@ -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
@@ -2,4 +2,20 @@
   <div id="app_p">
       <router-view/>
   </div>
-</template>
+</template>
+<script>
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+
+  methods:{
+      ...mapActions({
+          getuserData: 'FeedVuex/getuserData'
+      }),
+  },
+
+  created(){
+    this.getuserData()
+  }
+}
+</script>