@burh/nuxt-core 1.1.7 → 1.1.9

package/.vscode/settings.json

@@ -5,6 +5,6 @@
     "eslint.packageManager": "yarn",
 
     "editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true,
+      "source.fixAll.eslint": "explicit"
     },
 }

package/components/burh-ds/Curriculum/UserCurriculum/CvRight/NoteBaloon.vue

@@ -0,0 +1,156 @@
+<template>
+	<div class="user__note__baloon">
+		<div class="notes-baloon fullsize">
+			<div class="notes-text mx-3 pt-1">
+				<p class="mt-3">{{ comment.comment }}</p>
+			</div>
+
+			<div
+				class="d-flex justify-content-between align-items-center mx-3"
+			>
+				<p v-if="hasAction" @click.prevent="hasCommentRemove = !hasCommentRemove" class="notes-date remove-baloon">
+					Excluir
+				</p>
+
+				<p class="notes-date">
+					{{ comment.created_at | convertDate }}
+				</p>
+			</div>
+		</div>
+
+		<div v-if="hasAction && hasCommentRemove" class="archive-remove">
+			<p>Você tem certeza que deseja apagar este comentário?</p>
+			<div class="d-flex">
+				<base-button
+					@click="removeComment(comment.id)"
+					size="sm"
+					class="btn-outline-primary col-6 p-1"
+				>
+					Apagar
+				</base-button>
+				<base-button
+					@click="hasCommentRemove = false"
+					size="sm"
+					class="btn-outline-danger col-6 p-1"
+				>
+					Cancelar
+				</base-button>
+			</div>
+		</div>
+
+		<div class="notes-owner d-flex mt-2">
+			<avatar
+				:src="userData.urlAvatar"
+				:alt="userData.name"
+				:fallbackText="userData.name"
+			/>
+
+			<p class="ml-1">
+				{{ userData.name }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import Avatar from '../../../Img/ImageWithFallback.vue';
+
+export default {
+	name: 'user-note-baloon',
+	components: {
+		Avatar
+	},
+	props: {
+		comment: {
+			type: Object,
+			default: () => ({})
+		},
+		hasAction: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			hasCommentRemove: false
+		};
+	},
+	computed: {
+		userData() {
+			if (this.comment.user) {
+				return this.comment.user;
+			}
+
+			return {
+				urlAvatar: null,
+				name: 'Anônimo'
+			};
+		}
+	},
+	filters: {
+		convertDate(data) {
+			if (typeof data !== 'string') {
+				data = '2020-01-01 12:00:00';
+			}
+			let d = new Date(data);
+			let options = { hour: '2-digit', minute: '2-digit' };
+			return d.toLocaleDateString('pt-BR', options);
+		}
+	},
+	methods: {
+		removeComment(commentId) {
+			this.$emit('remove-comment', commentId);
+			this.hasCommentRemove = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.user__note__baloon {
+    margin-bottom: 16px;
+
+    .notes {
+        &-baloon {
+            width: 231px;
+            height: auto;
+            border-radius: 10px 10px 10px 0;
+            background: #eff5fd;
+            &.fullsize {
+                width: 80%!important;
+                min-width: 280px;
+            }
+        }
+        &-text {
+            p {
+                font-size: 13px;
+                color: #62778c;
+            }
+        }
+        &-date {
+            font-size: 11px;
+            text-align: right;
+            color: #8da2b5;
+            top: calc(50% - 17px / 2 - 444.5px);
+        }
+        &-owner {
+            img {
+            width: 23px;
+            height: 23px;
+            border-radius: 50%;
+            }
+            p {
+                font-size: 13px;
+                font-weight: 600;
+                text-transform: uppercase;
+
+                color: #62778c;
+            }
+        }
+    }
+
+    .remove-baloon{
+        cursor: pointer;
+    }
+}
+</style>

package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue

@@ -116,8 +116,8 @@
 		<h5 class="font-weight-bold mt-4 ml-3">Contatos</h5>
 		<div class="ml-3 info-text">
 			<span v-if="userData.email != null">Email: {{userData.email}}</span><br>
-			<span v-if="userData.user_contact && userData.user_contact.cellphone != null && userData.user_contact.cellphone.length > 1 ">Celular: {{phoneMask(userData.user_contact.cellphone)}}</span><br>
-			<span v-if="userData.user_contact && userData.user_contact.phone != null && userData.user_contact.phone.length > 1">Telefone: {{phoneMask(userData.user_contact.phone)}}</span>
+			<span v-if="userData.user_contact && userData.user_contact.cellphone != null && userData.user_contact.cellphone.length > 1 ">Celular: {{getPhoneFormatted(userData.user_contact.cellphone)}}</span><br>
+			<span v-if="userData.user_contact && userData.user_contact.phone != null && userData.user_contact.phone.length > 1">Telefone: {{getPhoneFormatted(userData.user_contact.phone)}}</span>
 		</div>
 
 		<!-- EDUCAÇÃO -->
@@ -237,6 +237,7 @@
 import getPrefixes from '~/util/getPrefixes.js';
 import { mask } from 'vue-the-mask';
 import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
+import { parsePhoneNumber } from 'awesome-phonenumber';
 
 import swal from 'sweetalert2';
 import axios from 'axios';
@@ -379,21 +380,14 @@ export default {
 			link.download = `${data.user_id}.pdf`;
 			link.click();
 		},
-		phoneMask(v) {
-
-			let r = v.replace(/\D/g, '');
-			r = r.replace(/^0/, '');
-
-			if (r.length > 11) {
-				r = r.replace(/^(\d\d)(\d{5})(\d{4}).*/, '($1) $2-$3');
-			} else if (r.length > 7) {
-				r = r.replace(/^(\d\d)(\d{5})(\d{0,4}).*/, '($1) $2-$3');
-			} else if (r.length > 2) {
-				r = r.replace(/^(\d\d)(\d{0,5})/, '($1) $2');
-			} else if (v.trim() !== '') {
-				r = r.replace(/^(\d*)/, '($1');
-			}
-			return r;
+		getPhoneFormatted(phoneNumber) {
+			const formattedPhoneNumber = parsePhoneNumber(phoneNumber, { regionCode: 'BR' });
+
+			return (
+				formattedPhoneNumber &&
+                formattedPhoneNumber.number &&
+                formattedPhoneNumber.number.national
+			) || phoneNumber;
 		},
 		highlightText(search, text) {
 			if (search.length < 2) return text;

package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSide.vue

@@ -470,60 +470,17 @@
 				<div class="line mb-3"></div>
 
 				<template v-if="!isLocked">
-					<div v-if="userReportData.comment">
-						<div class="notes-baloon fullsize">
-							<div class="notes-text mx-3 pt-1">
-								<p class="mt-3">{{ userReportData.comment.comment }}</p>
-							</div>
-							<div
-								class="d-flex justify-content-between align-items-center mx-3"
-							>
-								<p @click.prevent="hasCommentRemove = !hasCommentRemove" class="notes-date remove-baloon">
-									Excluir
-								</p>
-
-								<p class="notes-date">
-									{{ userReportData.comment.created_at | convertDate }}
-								</p>
-							</div>
-						</div>
-						<div v-if="hasCommentRemove" class="archive-remove">
-							<p>Você tem certeza que deseja apagar este comentário?</p>
-							<div class="d-flex">
-								<base-button
-									@click="removeComment(userReportData.comment.id)"
-									size="sm"
-									class="btn-outline-primary col-6 p-1"
-								>
-									Apagar
-								</base-button>
-								<base-button
-									@click="hasCommentRemove = false"
-									size="sm"
-									class="btn-outline-danger col-6 p-1"
-								>
-									Cancelar
-								</base-button>
-							</div>
-						</div>
-						<div class="notes-owner d-flex mt-2">
-							<img
-								v-if="userReportData.comment.user.urlAvatar"
-								:src="userReportData.comment.user.urlAvatar"
-								:alt="userReportData.comment.user.name"
-							/>
-							<div
-								v-else
-								class="notes-avatar"
-							></div>
-							<p class="ml-1">
-								{{ userReportData.comment.user.name }}
-							</p>
-						</div>
+					<div v-if="userReportData.comments && userReportData.comments.length > 0">
+						<note-baloon
+							v-for="comment in userReportData.comments"
+							:key="comment.id"
+							:comment="comment"
+							@remove-comment="removeComment"
+						/>
 					</div>
 				</template>
 
-				<div class="input-container" v-if="!isLocked && !userReportData.comment">
+				<div class="input-container" v-if="!isLocked">
 					<input
 						class="notes-new pl-4 mt-3 mb-3 form-rounded"
 						type="text"
@@ -549,6 +506,7 @@ import swal from 'sweetalert2';
 import UpgradePlan from './UpgradePlan.vue';
 import like from '../../../organismos/atomos/Like.vue';
 import deslike from '../../../organismos/atomos/Deslike.vue';
+import NoteBaloon from './CvRight/NoteBaloon.vue';
 
 export default {
 	name: 'user-cv-right-side',
@@ -583,7 +541,8 @@ export default {
 		DropzoneFileUpload,
 		UpgradePlan,
 		like,
-		deslike
+		deslike,
+		NoteBaloon
 	},
 	data(){
 		return {
@@ -655,10 +614,11 @@ export default {
 
 			this.notes = this.notes.filter(n => n.id !== note.id);
 		},
-		removeComment(item){
-			this.userReportData.comment = undefined;
-			this.$emit('remove-comment', item);
-			this.hasCommentRemove = false;
+		removeComment(commentId){
+			console.log('call', commentId);
+
+			this.userReportData.comments = this.userReportData.comments.filter(comment => comment.id != commentId);
+			this.$emit('remove-comment', commentId);
 		},
 		handleNewReportNoteSubmit() {
 			if (this.newReportNote.length > 3) {
@@ -867,11 +827,11 @@ export default {
 
 		mountUserReport(userData) {
 			const annex = userData.annex[0] || undefined;
-			const comment = userData.comments[0] || undefined;
+			const comments = userData.comments || [];
 
 			this.userReportData = {
 				annex,
-				comment
+				comments
 			};
 		},
 		haveAnswers(){

package/components/burh-ds/Curriculum/UserCurriculum/UserCvRightSideNotAuth.vue

@@ -78,37 +78,32 @@
 				<p class="notes-title mb-0">Comentários Recrutador</p>
 				<div class="line mb-3"></div>
 
-				<p v-show="!userReportData.annex" class="history-text">
+				<p v-show="!userReportData.comments || userReportData.comments && userReportData.comments.length <= 0" class="history-text">
 					Nenhum comentário vinculado a este usuário.
 				</p>
 
-				<div v-if="userReportData.comment">
-					<div class="notes-baloon fullsize">
-						<div class="notes-text mx-3 pt-1">
-							<p class="mt-3">{{ userReportData.comment.comment }}</p>
-						</div>
-						<div
-							class="d-flex justify-content-end align-items-center mr-3"
-						>
-							<p class="notes-date">
-								{{ userReportData.comment.created_at | convertDate }}
-							</p>
-						</div>
-					</div>
-					<div class="notes-owner d-flex mt-2">
-						<img
-							v-if="userReportData.comment.user.urlAvatar"
-							:src="userReportData.comment.user.urlAvatar"
-							:alt="userReportData.comment.user.name"
-						/>
-						<div
-							v-else
-							class="notes-avatar"
-						></div>
-						<p class="ml-1">
-							{{ userReportData.comment.user.name }}
-						</p>
-					</div>
+				<div v-if="userReportData.comments && userReportData.comments.length > 0">
+					<note-baloon
+						v-for="comment in userReportData.comments"
+						:key="comment.id"
+						:comment="comment"
+						:hasAction="false"
+					/>
+				</div>
+
+				<div class="input-container">
+					<input
+						class="notes-new pl-4 mt-3 mb-3 form-rounded"
+						type="text"
+						placeholder="Escrever anotação"
+						v-model="newReportNote"
+						@change="handleNewReportNoteSubmit"
+						v-on:change="cleatInput()"
+					/>
+					<i
+						@click="handleNewReportNoteSubmit"
+						class="fas fa-paper-plane input-icon"
+					></i>
 				</div>
 			</el-tab-pane>
 		</el-tabs>
@@ -119,6 +114,7 @@
 import { Tabs, TabPane } from 'element-ui';
 import like from '../../../organismos/atomos/Like.vue';
 import deslike from '../../../organismos/atomos/Deslike.vue';
+import NoteBaloon from './CvRight/NoteBaloon.vue';
 
 export default {
 	name: 'user-cv-right-side',
@@ -137,6 +133,7 @@ export default {
 		[TabPane.name]: TabPane,
 		like,
 		deslike,
+		NoteBaloon
 	},
 	data(){
 		return {
@@ -152,6 +149,14 @@ export default {
 			return this.liked;
 		}
 	},
+	watch: {
+		userData: {
+			deep: true,
+			handler() {
+				this.getUserFolderData();
+			}
+		}
+	},
 	props: {
 		userData: Object,
 		userFolderId: String,
@@ -160,6 +165,15 @@ export default {
 		await this.getUserFolderData();
 	},
 	methods: {
+		cleatInput() {
+			this.newNote = '';
+		},
+		handleNewReportNoteSubmit() {
+			if (this.newReportNote.length > 3) {
+				this.$emit('new-report-note', this.newReportNote, this.userFolderId, this.userData.id);
+				this.newReportNote = '';
+			}
+		},
 		async getUserFolderData() {
 			const apiUrl = `${process.env.baseApiUrlV2}/company/buffer/folder/user/${this.userFolderId}`;
 
@@ -197,11 +211,11 @@ export default {
 
 		mountUserReport(userData) {
 			const annex = userData.annex[0] || undefined;
-			const comment = userData.comments[0] || undefined;
+			const comments = userData.comments || [];
 
 			this.userReportData = {
 				annex,
-				comment
+				comments
 			};
 		}
 	},
@@ -355,6 +369,17 @@ export default {
 	}
 }
 
+.notes-new {
+    width: 95%;
+    height: 33px;
+
+    background: #f5f5f5;
+    border-radius: 16.5px;
+    border: none;
+
+    outline: 0;
+}
+
 .readmore {
     overflow: hidden;
     text-overflow: ellipsis;

package/components/burh-ds/Img/ImageWithFallback.vue

@@ -1,73 +1,73 @@
-<template>
-	<img
-		:src="(this.src) ? this.src : getAvatarUrl()"
-		:alt="this.alt"
-		@error="img => getImageFallback(img)"
-	>
-</template>
-
-<script>
-export default {
-	name: 'image-with-fallback',
-	props: {
-		src: {
-			type: [String, Boolean],
-			default: null
-		},
-		alt: {
-			type: String,
-			required: true
-		},
-		fallbackSize: {
-			type: String,
-			default: '512'
-		},
-		fallbackBackground: {
-			type: [String, Boolean],
-			default: null
-		},
-		fallbackText: {
-			type: String,
-			required: true
-		},
-		fallbackSingle: {
-			type: Boolean,
-			default: true
-		}
-	},
-	methods: {
-		getAvatarUrl() {
-			let size = this.fallbackSize;
-			let text = this.getNameInitials();
-			// let background = this.fallbackBackground;
-
-			const url = new URL('https://api.dicebear.com/7.x/initials/svg');
-
-			url.searchParams.append('seed', text);
-			url.searchParams.append('backgroundColor', '8DA2B5');
-			url.searchParams.append('size', size);
-			url.searchParams.append('fontSize', '40');
-
-			return url.toString();
-		},
-		getImageFallback(img) {
-			img.target.src = this.getAvatarUrl();
-		},
-		getNameInitials() {
-			let userAvatarName;
-
-			if (this.fallbackText) {
-				if (this.fallbackSingle) {
-					userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
-				} else {
-					userAvatarName = this.fallbackText;
-				}
-			} else {
-				userAvatarName = 'BURH';
-			}
-
-			return userAvatarName;
-		},
-	}
-};
-</script>
+<template>
+	<img
+		:src="(this.src) ? this.src : getAvatarUrl()"
+		:alt="this.alt"
+		@error="img => getImageFallback(img)"
+	>
+</template>
+
+<script>
+export default {
+	name: 'image-with-fallback',
+	props: {
+		src: {
+			type: [String, Boolean],
+			default: null
+		},
+		alt: {
+			type: String,
+			required: true
+		},
+		fallbackSize: {
+			type: String,
+			default: '512'
+		},
+		fallbackBackground: {
+			type: [String, Boolean],
+			default: null
+		},
+		fallbackText: {
+			type: String,
+			required: true
+		},
+		fallbackSingle: {
+			type: Boolean,
+			default: true
+		}
+	},
+	methods: {
+		getAvatarUrl() {
+			let size = this.fallbackSize;
+			let text = this.getNameInitials();
+			// let background = this.fallbackBackground;
+
+			const url = new URL('https://api.dicebear.com/7.x/initials/svg');
+
+			url.searchParams.append('seed', text);
+			url.searchParams.append('backgroundColor', '8DA2B5');
+			url.searchParams.append('size', size);
+			url.searchParams.append('fontSize', '40');
+
+			return url.toString();
+		},
+		getImageFallback(img) {
+			img.target.src = this.getAvatarUrl();
+		},
+		getNameInitials() {
+			let userAvatarName;
+
+			if (this.fallbackText) {
+				if (this.fallbackSingle) {
+					userAvatarName = this.fallbackText.slice(0, 1).toUpperCase();
+				} else {
+					userAvatarName = this.fallbackText;
+				}
+			} else {
+				userAvatarName = 'BURH';
+			}
+
+			return userAvatarName;
+		},
+	}
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@burh/nuxt-core",
-    "version": "1.1.7",
+    "version": "1.1.9",
     "description": "Design System and Components.",
     "author": "Burh",
     "private": false,
@@ -32,6 +32,7 @@
         "@nuxtjs/google-adsense": "^1.1.3",
         "@nuxtjs/google-tag-manager": "^2.3.1",
         "@nuxtjs/pwa": "^3.0.0-beta.16",
+        "awesome-phonenumber": "5.11.0",
         "bootstrap": "4.3.1",
         "chart.js": "2.9.4",
         "d3": "^5.9.2",