Merge pull request VitorCarvalho67#30 from Daniel-Alvarenga/main

FIx Image Update

Author: Daniel-Alvarenga

client/src/scss/pages/aluno/_profile.scss

@@ -102,17 +102,10 @@ main {
             }
 
             .infoProfile {
+                @include flex(row, flex-start, center);
                 z-index: 2;
                 position: relative;
-
-                .editButtons {
-                    @include flex-center;
-                    z-index: 2;
-                    position: absolute;
-                    top: 100px;
-                    right: auto;
-                }
-                @include flex(row, flex-start, center);
+                
                 > img {
                     @include flex-center;
                     position: absolute;
@@ -124,6 +117,45 @@ main {
                     background-color: $terciary-color-dark;
                 }
 
+                .inputUpload {
+                    @include flex(row, center, center);
+                    position: absolute;
+                    height: 250px;
+                    width: 250px;
+                    background-color: rgba(0, 0, 0, 0.664);
+    
+                    position: absolute;
+                    bottom: 0;
+                    height: 250px;
+                    width: 250px;
+                    object-fit: cover;
+                    border-radius: 50%;
+
+                    input {
+                        z-index: 2;
+                        width: 100%;
+                        height: 100%;
+                        background-color: rgba(0, 0, 0, 0.664);
+                        opacity: 0;
+                    }
+    
+                    img{
+                        z-index: 1;
+                        position: absolute;
+                        height: 40px;
+                        width: 40px;
+                        filter: invert(100%);
+                    }
+                }
+
+                .editButtons {
+                    @include flex-center;
+                    z-index: 2;
+                    position: absolute;
+                    top: 100px;
+                    right: auto;                
+                }    
+                
                 .info {
                     @include flex(column, center, flex-start);
                     margin-left: 250px;

client/src/scss/pages/shared/_pesquisa.scss

@@ -72,7 +72,9 @@
                 }
 
                 .resultado {
-                    @include flex(column, flex-end, start);
+                    @include flex(column, center, end);
+                    text-align: right;
+                    width: 80%;
                     color: $secondary-color-orange;
                     margin-right: 10px;
                     margin-bottom: 10px;

client/src/views/aluno/Profile.vue

@@ -16,7 +16,8 @@
                                 <input type="file" ref="bannerInput" @change="previewBannerImage">
                                 <img src="../../assets/icons/envio.png" alt="">
                             </div>
-                            <button v-show="modeBanner === 'edit'" @click="updateBannerImage" type="button">
+                            <button v-show="modeBanner === 'edit' && $refs.bannerInput.value != []" 
+                                @click="updateBannerImage" type="button">
                                 <img :src="imgVerificar">Salvar
                             </button>
                             <button v-show="modeBanner === 'edit'" @click="cancelBanner" type="button">
@@ -27,12 +28,16 @@
                     <div class="infoProfile">
                         <img v-if="aluno.imageUrl == 'default'" src="../../assets/icons/artwork.png" :alt="aluno.nome">
                         <img v-else :src="aluno.imageUrl" :alt="aluno.nome">
+                        <div class="inputUpload" v-show="modeImage === 'edit'">
+                            <input type="file" ref="profileInput" v-show="modeImage === 'edit'" @change="previewProfileImage">
+                            <img src="../../assets/icons/envio.png" alt="">
+                        </div>
                         <div class="editButtons">
                             <button v-show="modeImage === 'view'" @click="editModeImage" type="button">
                                 <img :src="imgLapis" alt="">Editar
                             </button>
-                            <input type="file" ref="profileInput" v-show="modeImage === 'edit'">
-                            <button v-show="modeImage === 'edit'" @click="updateProfileImage" type="button">
+                            <button v-show="modeImage === 'edit' && $refs.profileInput.value != []"
+                            @click="updateProfileImage" type="button">
                                 <img :src="imgVerificar">Salvar
                             </button>
                             <button v-show="modeImage === 'edit'" @click="cancelImage" type="button">
@@ -169,9 +174,13 @@ export default {
             this.editMode();
         },
         async cancelImage() {
+            await this.getCurriculoAluno();
+            this.$refs.profileInput.value = [];
             this.editModeImage();
         },
         async cancelBanner() {
+            await this.getCurriculoAluno();
+            this.$refs.bannerInput.value = [];
             this.editModeBanner();
         },
         calcularIdade(nascimento) {
@@ -229,6 +238,7 @@ export default {
                 });
 
                 if (responseBanner.status >= 200 && responseBanner.status < 300) {
+                    console.log("Pegando o banner do aluno");
                     this.aluno.bannerUrl = responseBanner.data.url;
                 } else {
                     console.log("Ops.. Algo deu errado ao recuperar a imagem de capa do perfil. 😕\n" + responseBanner.message);
@@ -273,6 +283,16 @@ export default {
             await this.getCurriculoAluno();
             this.editModeBanner();
         },
+        previewProfileImage(event){
+            const file = event.target.files[0];
+            if (!file) return;
+
+            const reader = new FileReader();
+            reader.onload = e => {
+                this.aluno.imageUrl = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        },
         previewBannerImage(event) {
             const file = event.target.files[0];
             if (!file) return;