edit user done

package.json

@@ -14,6 +14,7 @@
     "leaflet": "^1.6.0",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
+    "vue-cropperjs": "^4.1.0",
     "vue-izitoast": "^1.2.1",
     "vue-router": "^3.2.0",
     "vue2-leaflet": "^2.5.2",

src/components/cpmCard.vue

@@ -5,8 +5,9 @@
 
             <v-app-bar color="white" class="d-flex align-center" dense>
 
-                <v-avatar size="36">
-                    <v-img :src="card.user.avatar"></v-img>
+                <v-avatar size="36" color="orange">
+                   <v-icon v-if="!card.user.avatar" dark>mdi-account-circle</v-icon>
+                    <img v-else :src="card.user.avatar" alt="avatar">
                 </v-avatar>
 
                 <div class="ml-3">{{card.name}}</div>

src/components/cpmDialogProfile.vue

@@ -66,7 +66,6 @@
               </v-col>
             </v-row>
           </v-container>
-          <small>*indicates required field</small>
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
@@ -82,68 +81,110 @@
 // import {mapActions} from 'vuex';
 
 export default {
-  props: ["user_data", "updateUser"],
+  props: ["user_data", "updateUser", "updateAvatar"],
 
   data: () => ({
     dialog: false,
-   
+
+    newAvatar: '',
+
     passwords: {
-      newPassword: '',
-      passwordConfirm: ''
-    }  
+      newPassword: "",
+      passwordConfirm: "",
+    },
   }),
 
   methods: {
     // ...mapActions({
     //   updateUser: 'ProfileVuex/updateUser'
     // }),
 
+    formValidation(){
+      if(this.user_data.name == "" || this.user_data.email == "" || this.user_data.whatsapp == ""){
+        return false;
+      };
+
+      return true;
+    },
+
     async pickAvatar() {
       this.$refs.fileInput.click();
     },
-    async onFilePicked(event) {
+
+    onFilePicked(event) {
       const files = event.target.files;
       let fileName = files[0].filename;
+      this.imageData = event.target.files[0];
 
       const fileReader = new FileReader();
       fileReader.addEventListener("load", () => {
         this.user_data.avatar = fileReader.result;
+        this.newAvatar = fileReader.result;
       });
       fileReader.readAsDataURL(files[0]);
-      this.image = files[0];
     },
 
-    //TODO fazer update no avatar do user
-    async update(){
-   
-      let newUser =  {
-        avatar: this.user_data.avatar,
+    async uploadPhoto() {
+      const fd = new FormData();
+      fd.append("photo", this.imageData);
+
+      const url = await this.updateAvatar(fd);
+
+      return url;
+    },
+
+    async update() {
+
+      if(!this.formValidation()){
+        this.$toast.error("Verifique se existe algum campo vazio", "Atenção!", {
+            position: "topCenter",
+        });
+
+        return;
+      }
+
+      let newUser = {
+        avatar: this.newAvatar,
         name: this.user_data.name,
         email: this.user_data.email,
         password: "",
         whatsapp: this.user_data.whatsapp
       };
 
-      if(this.passwords.newPassword !== '' && this.passwords.passwordConfirm !== ''){
-        if(this.passwords.newPassword === this.passwords.passwordConfirm){
+      if(newUser.avatar != ""){
+        const url = await this.uploadPhoto();
+        console.log('a')
+        newUser.avatar = url;
+      }
+
+      if (
+        this.passwords.newPassword !== "" &&
+        this.passwords.passwordConfirm !== ""
+      ) {
+        if (this.passwords.newPassword === this.passwords.passwordConfirm) {
           newUser.password = this.passwords.newPassword;
-        }else{
-          this.$toast.error('Confirme a senha corretamente.', 'Atenção!', {position: 'topCenter'})
+        } else {
+          this.$toast.error("Confirme a senha corretamente.", "Atenção!", {
+            position: "topCenter",
+          });
           return;
-        };
-      };
+        }
+      }
 
       const retorno = await this.updateUser(newUser);
 
-      if(retorno){
-        this.$toast.success('Informações atualizadas com sucesso!', 'Yeah',  {position: 'topCenter'});
-        this.dialog = false
-      }else{
-        this.$toast.error('Aconteceu um erro.', 'Error!', {position: 'topCenter'})
+      if (retorno) {
+        this.$toast.success("Informações atualizadas com sucesso!", "Yeah", {
+          position: "topCenter",
+        });
+        this.dialog = false;
+        localStorage.token = retorno;
+      } else  {
+        this.$toast.error("Aconteceu um erro.", "Error!", {
+          position: "topCenter",
+        });
       }
-    
-      console.log(newUser)
-    }
+    },
   },
 };
 </script>

src/components/cpmToolBar.vue

@@ -50,7 +50,7 @@
 
           <v-list-item exact to="/Event">
             <v-list-item-icon>
-              <v-icon>mdi-account</v-icon>
+              <v-icon>mdi-book-plus</v-icon>
             </v-list-item-icon>
             <v-list-item-title>Eventos</v-list-item-title>
           </v-list-item>
@@ -64,7 +64,7 @@
 
           <div>
             <v-col>
-              <v-btn to="/Login" await @click="logOff" color="red" dark>SAIR</v-btn>
+              <v-btn to="/Login" await @click="logOff()" color="red" dark>SAIR</v-btn>
             </v-col>
           </div>
 
@@ -85,7 +85,9 @@
     }),
     methods: {
       async logOff(){
-        await localStorage.removeItem('token')
+        localStorage.removeItem('token')
+
+        await this.$router.push('/')
       }
     }
   }

src/store/modules/ProfileVuex.js

@@ -38,6 +38,12 @@ export default {
       const events = await axios.get(process.env.VUE_APP_BASE_URL+'/event/user');
 
       return events.data;
+    },
+
+    async updateAvatar(context, newAvatar){
+      const retorno = await axios.post(process.env.VUE_APP_UPLOAD_URL+'/upload/image', newAvatar);
+
+      return retorno.data;
     }
 
   }