@burh/nuxt-core 1.1.19 → 1.1.20

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

@@ -1,624 +1,624 @@
-<template>
-	<div class="bg-white content-left">
-		<div class="profile w-100 text-center">
-			<div class="avatar">
-				<image-with-fallback
-					:src="userData.urlAvatar"
-					:alt="userData.name"
-					:fallbackText="userData.name"
-					fallbackSize="1024"
-				/>
-			</div>
-
-			<slot name="compatibilityTag" />
-
-			<h5
-				class="mb-0 text-wrap"
-				v-html="
-					highlightText(
-						search,
-						`${userData.name} ${userData.last_name}`
-					)
-				"
-			/>
-			<h6
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.birth && getAge() > 0 || false"
-			>
-				{{ getAge() }} anos
-			</h6>
-
-			<p
-				class="user-info"
-				v-if="userData && userData.user_experience && userData.user_experience.length || 0"
-				v-html="
-					highlightText(
-						search,
-						`${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`
-					)
-				"
-			></p>
-
-			<span v-if="userData.user_address">
-				<i class="fas fa-map-marker-alt"></i>
-				{{ userData.user_address.city_name }} -
-				{{ userData.user_address.region_code }} <br>
-				{{ userData.user_address.neighborhood }}
-			</span><br />
-
-			<span
-				v-if="
-					userData && userData.user_complementary_information && userData.user_complementary_information.wage_pretension && userData.user_complementary_information.wage_pretension > 1
-				"
-			>Pretensão salarial:
-				{{
-					userData.user_complementary_information.wage_pretension
-						| convertMoney
-				}}</span
-			>
-		</div>
-
-		<template
-			v-if="hasAboutme && userData && userData.profile"
-		>
-			<div class="aboutme title-block mt-3 ml-4">
-				<h6 class="mb-0">
-					Perfil DISC About Me
-
-					<el-tooltip
-						class="ml-1"
-						placement="top"
-					>
-						<div slot="content" style="max-width: 250px">
-							O DISC About Me é o teste de perfil comportamental da Burh que determina se a pessoa é Dominante, Influente, Sensato ou Analista.
-						</div>
-
-						<i class="fas fa-info-circle"></i>
-					</el-tooltip>
-				</h6>
-				<div class="line"></div>
-
-				<div class="aboutme__resume">
-					<profile
-						:profile="userData.profile"
-						:size="48"
-					/>
-
-					<button
-						@click="handleAboutmeDownloadClick"
-					>
-						<template
-							v-if="!isAboutmeUnlocked"
-						>
-							Desbloquear relatório
-							<i class="fas fa-unlock"></i>
-						</template>
-
-						<template v-else>
-							Baixar Relatório
-							<i class="fas fa-file-download"></i>
-						</template>
-					</button>
-				</div>
-			</div>
-		</template>
-
-		<div
-			class="deficiency title-block mt-3 ml-4"
-			v-if="!!(userData.deficiency && userData.deficiency.id)"
-		>
-			<div class="d-flex align-items-center">
-				<i class="fas fa-wheelchair"></i>
-				<h6 class="mb-0 ml-2">Deficiência</h6>
-			</div>
-			<div class="line"></div>
-			<p>
-				{{ userData && userData.deficiency && userData.deficiency && userData.deficiency.deficiency_id | allDeficiencies }}
-
-				<template> - </template>
-
-				{{ userData && userData.deficiency && userData.deficiency && userData.deficiency.cid | formatCid }}
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.appliance)">
-				Acessório: {{ userData.deficiency.appliance }}
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.apparatus)">
-				Necessidade: {{ userData.deficiency.apparatus }}
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.course)">
-				Curso: {{ userData.deficiency.course }}
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.note)">
-				Anotações: {{ userData.deficiency.note }}
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.transport === 1)">
-				Utiliza transporte coletivo
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.vehicle === 1)">
-				Possuí veículo adaptado
-			</p>
-
-			<p v-if="!!(userData && userData.deficiency && userData.deficiency.escort === 1)">
-				Precisa de acompanhante
-			</p>
-		</div>
-
-		<div
-			v-show="userData && userData.user_desired_job && userData.user_desired_job.length || 0"
-			class="desidered title-block mt-3 ml-4"
-		>
-			<h6 class="mb-0">Cargos desejados</h6>
-			<div class="line"></div>
-
-			<p
-				v-for="(des, index) in userData.user_desired_job"
-				:key="`skill-${index}`"
-				class="ml-1 mt-1 mb-0 text-capitalize"
-				v-html="highlightText(search, des.occupation)"
-			></p>
-		</div>
-
-		<div
-			v-show="userData && userData.user_language && userData.user_language.length || 0"
-			class="languages title-block mt-3 ml-4"
-		>
-			<h6 class="mb-0">Idiomas</h6>
-			<div class="line"></div>
-
-			<p
-				class="mb-1 text-capitalize"
-				v-for="(lan, index) in userData.user_language"
-				:key="index"
-				v-html="
-					highlightText(
-						search,
-						`${lan.language[0].name} ${languageLevel(lan.level)}`
-					)
-				"
-			></p>
-		</div>
-
-		<div
-			v-show="userData&&userData.user_skill &&userData.user_skill.length > 0"
-			class="skills title-block ml-4"
-		>
-			<h6 class="mb-0">Habilidades</h6>
-			<div class="line"></div>
-
-			<p
-				v-for="(skill, index) in userData.user_skill"
-				:key="`skill-${index}`"
-				class="ml-1 mt-1 mb-0 text-capitalize"
-				v-html="highlightText(search, skill.skill_word)"
-			></p>
-		</div>
-
-		<div class="socials text-center mt-5">
-			<a
-				:href="baseUrl + '/' + userData.slug.slug"
-				class="text-center"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/burhCv.svg"
-					alt="Burh"
-				/>
-			</a>
-			<a
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.facebook_url || false"
-				:href="userData.user_complementary_information.facebook_url"
-				target="_blank"
-				class="ml-2"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/facebookCv.svg"
-					alt="Facebook"
-				/>
-			</a>
-			<a
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.linkedin_url || false"
-				:href="userData.user_complementary_information.linkedin_url"
-				target="_blank"
-				class="ml-2"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/linkedinCv.svg"
-					alt="Linkdin"
-				/>
-			</a>
-			<a
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.website || false"
-				:href="userData.user_complementary_information.website"
-				class="text-center ml-2"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				<img
-					class="no-social"
-					src="../../../../assets/images/webCv.svg"
-					alt="Web"
-				/>
-			</a>
-		</div>
-
-		<div class="burh-code text-center mt-4">
-			<vue-qrcode
-				:value="baseUrl + '/' + userData.slug.slug"
-				:options="{ width: 98, height: 98 }"
-				class="border qr-code"
-			></vue-qrcode>
-			<p class="mb-0">Código BURH</p>
-			<span class="qr-id">{{ userData.id }}</span
-			><br />
-			<div class="teste-block">
-				<span class="font-weight-normal mt-2 d-block" v-if="!isLocked"
-				>Data de atualização:
-					{{ $moment(userData.updated_at).format('DD/MM/YYYY H:mm') }}
-				</span>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import getPrefixes from '~/util/getPrefixes.js';
-import VueQrcode from '@chenfengyuan/vue-qrcode';
-import moment from 'moment';
-
-import Profile from '../../Aboutme/Profile.vue';
-
-export default {
-	name: 'user-cv-left-side',
-	components: {
-		VueQrcode,
-		Profile
-	},
-	computed: {
-		isAboutmeUnlocked() {
-			const userData = this.userData || {};
-			const isUnlocked = userData['is_aboutme_unlocked'] || false;
-			return isUnlocked;
-		},
-		currentCompany() {
-			return this.$store.state.company.currentCompany;
-		}
-	},
-	props: {
-		userData: {
-			type: Object,
-			required: true
-		},
-		baseUrl: String,
-		search: {
-			type: String,
-			default: ''
-		},
-		hasAboutme: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			isLocked: !this.companyHasProduct(
-				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['BUSCA_AVANCADA'] || false
-			)
-		};
-	},
-	methods: {
-		handleAboutmeDownloadClick() {
-			this.$emit('aboutme-download');
-		},
-		getAge(){
-			const userAge = this.userData.user_complementary_information.birth;
-			return moment().diff(userAge, 'years');
-		},
-		highlightText(search, text) {
-			if (search.length < 2) return text;
-
-			const regex = new RegExp(search.toLowerCase(), 'gmi');
-			return String(text || '').replace(
-				regex,
-				`<span class="search-highlight">${search}</span>`
-			);
-		},
-		getTime(
-			{ start_year = null, end_year = null, start_month, end_month },
-			textHappening = 'Cursando'
-		) {
-			const isHappening = !end_month && !end_year;
-
-			if (isHappening) {
-				return textHappening;
-			}
-
-			const dateInitial = this.$moment(
-				['1', start_month.toString(), start_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const dateDone = this.$moment(
-				['1', end_month.toString(), end_year.toString()],
-				'DD/MM/YYYY'
-			);
-			const diffDuration = this.$moment.duration(
-				dateDone.diff(dateInitial)
-			);
-			const years = diffDuration.years();
-			const months = diffDuration.months();
-
-			if (years) {
-				return years > 1 ? `(${years} anos)` : `(${years} ano)`;
-			}
-
-			return months > 1
-				? `(${months} meses)`
-				: months == 1
-					? `(${months} mês)`
-					: '';
-		},
-		languageLevel(level) {
-			switch (parseInt(level)) {
-			case 1:
-				return 'Iniciante';
-			case 2:
-				return 'Elementar';
-			case 3:
-				return 'Pré-intermediário';
-			case 4:
-				return 'Intermediário';
-			case 5:
-				return 'Intermediário Superior';
-			case 6:
-				return 'Avançado';
-			case 7:
-				return 'Fluente';
-			default:
-				return '';
-			}
-		},
-		treatPhone(phone) {
-			if (phone) {
-				if (phone == '0' || phone.length < 9 || !phone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return phone;
-		},
-		treatCellphone(cellphone) {
-			if (cellphone) {
-				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
-					return 'não cadastrado';
-				}
-			}
-
-			return cellphone;
-		},
-		handleGetPrefixes(name = '') {
-			return getPrefixes(name);
-		},
-		treatEndDate(end_month, end_year) {
-			if (end_month && end_year) {
-				return `${end_month}/${end_year}`;
-			}
-			return '';
-		}
-	},
-	filters: {
-		allDeficiencies(idList) {
-			const typeDeficiency = {
-				1: 'Deficiência Física',
-				2: 'Deficiência Visual',
-				3: 'Deficiência Mental',
-				4: 'Deficiência Auditiva',
-				5: 'Deficiência Fonológica',
-				6: 'Deficiência Múltipla'
-			};
-
-			return idList && idList.length && idList.map(id => typeDeficiency[id] || null).filter(id => id).join(' | ') || '';
-		},
-		formatCid(cidList) {
-			return cidList && cidList.length && cidList.filter(cid => cid).join(' | ') || '';
-		},
-		convertMoney(money) {
-			let moneyAux = parseFloat(money);
-			let m = moneyAux.toLocaleString('pt-BR', {
-				style: 'currency',
-				currency: 'BRL'
-			});
-			return m;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .search-highlight {
-    background: rgb(255, 252, 61);
-    color: #000;
-}
-
-.aboutme {
-	display: flex;
-    flex-direction: column;
-	margin: 1rem 0;
-
-    &__resume {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 1rem;
-
-        > button {
-            padding: 0.25rem 0.5rem;
-            border: 0;
-            margin: 0;
-            color: #5865f2;
-            background: transparent;
-            font-weight: 500;
-            font-size: 0.875rem;
-
-            transition: color 0.25s;
-
-            &:hover {
-                color: darken(#5865f2, 10);
-            }
-
-            i {
-                margin-left: 0.5rem;
-            }
-        }
-    }
-}
-
-.teste-block {
-    display: inline !important;
-}
-.qr-id {
-    color: #32325d !important;
-}
-
-.bg-light--darken {
-    background-color: $gray-100 !important;
-}
-
-.profile {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	
-    .avatar {
-        width: initial!important;
-        height: initial!important;
-        margin-top: -48px;
-        background: transparent !important;
-        img {
-            width: 163px;
-            height: 163px;
-            border-radius: 50%;
-            top: 75%;
-            background: #adb5bd;
-            border: 4px solid #fff;
-        }
-
-        .no-image {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            position: absolute;
-            background-color: #adb5bd;
-            width: 163px;
-            height: 163px;
-            top: 120;
-            border-radius: 50%;
-            margin-bottom: 20px;
-            border: 4px solid #fff;
-        }
-    }
-
-    .user-info {
-        padding: 0 20px;
-        margin-top: 5px;
-    }
-
-    p {
-        font-size: 13px;
-        font-weight: 400;
-        color: #62778c;
-        line-height: 0.85rem;
-        margin-bottom: 2rem;
-    }
-
-    span {
-        font-size: 14px;
-        color: #8da2b5;
-    }
-}
-
-.skills {
-    margin-top: 2.3rem;
-    margin-bottom: 2.3rem;
-}
-
-.desidered {
-    margin-bottom: 2.3rem;
-}
-
-.deficiency {
-    p {
-        margin-top: 0.25rem;
-        margin-bottom: 0;
-        text-transform: capitalize;
-    }
-}
-
-.languages {
-    margin-bottom: 2.3rem;
-}
-
-.title-block {
-    .line {
-        width: 235px;
-        height: 0px;
-        border: 1px solid #ececec5c;
-        margin-bottom: 0.75rem;
-    }
-
-    p {
-        font-size: 13px;
-    }
-}
-
-.burh-code {
-    .qr-code {
-        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-        border-radius: 10px;
-    }
-
-    p {
-        font-size: 8px;
-        font-weight: bold;
-    }
-
-    span {
-        font-size: 12px;
-        font-weight: bold;
-    }
-}
-
-.socials {
-    .no-social {
-        height: 1.39rem;
-    }
-}
-
-.cv-left {
-    word-break: initial;
-}
-
-.disable-none {
-    user-select: none;
-}
-
-.content-left {
-    width: 25%;
-    height: auto;
-    padding: 0 20px;
-    word-break: break-word !important;
-    color: #62778c !important;
-}
-</style>
+<template>
+	<div class="bg-white content-left">
+		<div class="profile w-100 text-center">
+			<div class="avatar">
+				<image-with-fallback
+					:src="userData.urlAvatar"
+					:alt="userData.name"
+					:fallbackText="userData.name"
+					fallbackSize="1024"
+				/>
+			</div>
+
+			<slot name="compatibilityTag" />
+
+			<h5
+				class="mb-0 text-wrap"
+				v-html="
+					highlightText(
+						search,
+						`${userData.name} ${userData.last_name}`
+					)
+				"
+			/>
+			<h6
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.birth && getAge() > 0 || false"
+			>
+				{{ getAge() }} {{ $t('user_cv.left_side.years_old') }}
+			</h6>
+
+			<p
+				class="user-info"
+				v-if="userData && userData.user_experience && userData.user_experience.length || 0"
+				v-html="
+					highlightText(
+						search,
+						`${userData.user_experience[0].job_title} em ${userData.user_experience[0].company}`
+					)
+				"
+			></p>
+
+			<span v-if="userData.user_address">
+				<i class="fas fa-map-marker-alt"></i>
+				{{ userData.user_address.city_name }} -
+				{{ userData.user_address.region_code }} <br>
+				{{ userData.user_address.neighborhood }}
+			</span><br />
+
+			<span
+				v-if="
+					userData && userData.user_complementary_information && userData.user_complementary_information.wage_pretension && userData.user_complementary_information.wage_pretension > 1
+				"
+			>{{ $t('user_cv.left_side.salary_expectation') }}
+				{{
+					userData.user_complementary_information.wage_pretension
+						| convertMoney
+				}}</span
+			>
+		</div>
+
+		<template
+			v-if="hasAboutme && userData && userData.profile"
+		>
+			<div class="aboutme title-block mt-3 ml-4">
+				<h6 class="mb-0">
+					{{ $t('user_cv.left_side.disc_profile_title') }}
+
+					<el-tooltip
+						class="ml-1"
+						placement="top"
+					>
+						<div slot="content" style="max-width: 250px">
+							{{ $t('user_cv.left_side.disc_tooltip') }}
+						</div>
+
+						<i class="fas fa-info-circle"></i>
+					</el-tooltip>
+				</h6>
+				<div class="line"></div>
+
+				<div class="aboutme__resume">
+					<profile
+						:profile="userData.profile"
+						:size="48"
+					/>
+
+					<button
+						@click="handleAboutmeDownloadClick"
+					>
+						<template
+							v-if="!isAboutmeUnlocked"
+						>
+							{{ $t('user_cv.left_side.unlock_report') }}
+							<i class="fas fa-unlock"></i>
+						</template>
+
+						<template v-else>
+							{{ $t('user_cv.left_side.download_report') }}
+							<i class="fas fa-file-download"></i>
+						</template>
+					</button>
+				</div>
+			</div>
+		</template>
+
+		<div
+			class="deficiency title-block mt-3 ml-4"
+			v-if="!!(userData.deficiency && userData.deficiency.id)"
+		>
+			<div class="d-flex align-items-center">
+				<i class="fas fa-wheelchair"></i>
+				<h6 class="mb-0 ml-2">{{ $t('user_cv.left_side.disability_title') }}</h6>
+			</div>
+			<div class="line"></div>
+			<p>
+				{{ userData && userData.deficiency && userData.deficiency && userData.deficiency.deficiency_id | allDeficiencies }}
+
+				<template> - </template>
+
+				{{ userData && userData.deficiency && userData.deficiency && userData.deficiency.cid | formatCid }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.appliance)">
+				{{ $t('user_cv.left_side.accessory_label') }} {{ userData.deficiency.appliance }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.apparatus)">
+				{{ $t('user_cv.left_side.necessity_label') }} {{ userData.deficiency.apparatus }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.course)">
+				{{ $t('user_cv.left_side.course_label') }} {{ userData.deficiency.course }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.note)">
+				{{ $t('user_cv.left_side.notes_label') }} {{ userData.deficiency.note }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.transport === 1)">
+				{{ $t('user_cv.left_side.uses_public_transport') }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.vehicle === 1)">
+				{{ $t('user_cv.left_side.has_adapted_vehicle') }}
+			</p>
+
+			<p v-if="!!(userData && userData.deficiency && userData.deficiency.escort === 1)">
+				{{ $t('user_cv.left_side.needs_companion') }}
+			</p>
+		</div>
+
+		<div
+			v-show="userData && userData.user_desired_job && userData.user_desired_job.length || 0"
+			class="desidered title-block mt-3 ml-4"
+		>
+			<h6 class="mb-0">{{ $t('user_cv.left_side.desired_positions') }}</h6>
+			<div class="line"></div>
+
+			<p
+				v-for="(des, index) in userData.user_desired_job"
+				:key="`skill-${index}`"
+				class="ml-1 mt-1 mb-0 text-capitalize"
+				v-html="highlightText(search, des.occupation)"
+			></p>
+		</div>
+
+		<div
+			v-show="userData && userData.user_language && userData.user_language.length || 0"
+			class="languages title-block mt-3 ml-4"
+		>
+			<h6 class="mb-0">{{ $t('user_cv.left_side.languages') }}</h6>
+			<div class="line"></div>
+
+			<p
+				class="mb-1 text-capitalize"
+				v-for="(lan, index) in userData.user_language"
+				:key="index"
+				v-html="
+					highlightText(
+						search,
+						`${lan.language[0].name} ${languageLevel(lan.level)}`
+					)
+				"
+			></p>
+		</div>
+
+		<div
+			v-show="userData&&userData.user_skill &&userData.user_skill.length > 0"
+			class="skills title-block ml-4"
+		>
+			<h6 class="mb-0">{{ $t('user_cv.left_side.skills') }}</h6>
+			<div class="line"></div>
+
+			<p
+				v-for="(skill, index) in userData.user_skill"
+				:key="`skill-${index}`"
+				class="ml-1 mt-1 mb-0 text-capitalize"
+				v-html="highlightText(search, skill.skill_word)"
+			></p>
+		</div>
+
+		<div class="socials text-center mt-5">
+			<a
+				:href="baseUrl + '/' + userData.slug.slug"
+				class="text-center"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/burhCv.svg"
+					alt="Burh"
+				/>
+			</a>
+			<a
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.facebook_url || false"
+				:href="userData.user_complementary_information.facebook_url"
+				target="_blank"
+				class="ml-2"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/facebookCv.svg"
+					alt="Facebook"
+				/>
+			</a>
+			<a
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.linkedin_url || false"
+				:href="userData.user_complementary_information.linkedin_url"
+				target="_blank"
+				class="ml-2"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/linkedinCv.svg"
+					alt="Linkdin"
+				/>
+			</a>
+			<a
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.website || false"
+				:href="userData.user_complementary_information.website"
+				class="text-center ml-2"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					class="no-social"
+					src="../../../../assets/images/webCv.svg"
+					alt="Web"
+				/>
+			</a>
+		</div>
+
+		<div class="burh-code text-center mt-4">
+			<vue-qrcode
+				:value="baseUrl + '/' + userData.slug.slug"
+				:options="{ width: 98, height: 98 }"
+				class="border qr-code"
+			></vue-qrcode>
+			<p class="mb-0">{{ $t('user_cv.left_side.burh_code') }}</p>
+			<span class="qr-id">{{ userData.id }}</span
+			><br />
+			<div class="teste-block">
+				<span class="font-weight-normal mt-2 d-block" v-if="!isLocked"
+				>{{ $t('user_cv.left_side.update_date') }}
+					{{ $moment(userData.updated_at).format('DD/MM/YYYY H:mm') }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import getPrefixes from '~/util/getPrefixes.js';
+import VueQrcode from '@chenfengyuan/vue-qrcode';
+import moment from 'moment';
+
+import Profile from '../../Aboutme/Profile.vue';
+
+export default {
+	name: 'user-cv-left-side',
+	components: {
+		VueQrcode,
+		Profile
+	},
+	computed: {
+		isAboutmeUnlocked() {
+			const userData = this.userData || {};
+			const isUnlocked = userData['is_aboutme_unlocked'] || false;
+			return isUnlocked;
+		},
+		currentCompany() {
+			return this.$store.state.company.currentCompany;
+		}
+	},
+	props: {
+		userData: {
+			type: Object,
+			required: true
+		},
+		baseUrl: String,
+		search: {
+			type: String,
+			default: ''
+		},
+		hasAboutme: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isLocked: !this.companyHasProduct(
+				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['BUSCA_AVANCADA'] || false
+			)
+		};
+	},
+	methods: {
+		handleAboutmeDownloadClick() {
+			this.$emit('aboutme-download');
+		},
+		getAge(){
+			const userAge = this.userData.user_complementary_information.birth;
+			return moment().diff(userAge, 'years');
+		},
+		highlightText(search, text) {
+			if (search.length < 2) return text;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(
+				regex,
+				`<span class="search-highlight">${search}</span>`
+			);
+		},
+		getTime(
+			{ start_year = null, end_year = null, start_month, end_month },
+			textHappening = null
+		) {
+			const isHappening = !end_month && !end_year;
+			const happeningText = textHappening || this.$t('user_cv.left_side.studying');
+
+			if (isHappening) {
+				return happeningText;
+			}
+
+			const dateInitial = this.$moment(
+				['1', start_month.toString(), start_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const dateDone = this.$moment(
+				['1', end_month.toString(), end_year.toString()],
+				'DD/MM/YYYY'
+			);
+			const diffDuration = this.$moment.duration(
+				dateDone.diff(dateInitial)
+			);
+			const years = diffDuration.years();
+			const months = diffDuration.months();
+
+			if (years) {
+				return years > 1 ? `(${years} ${this.$t('user_cv.left_side.years_plural')})` : `(${years} ${this.$t('user_cv.left_side.year_singular')})`;
+			}
+
+			return months > 1
+				? `(${months} ${this.$t('user_cv.left_side.months_plural')})`
+				: months == 1
+					? `(${months} ${this.$t('user_cv.left_side.month_singular')})`
+					: '';
+		},
+		languageLevel(level) {
+			switch (parseInt(level)) {
+			case 1:
+				return this.$t('user_cv.left_side.language_level_beginner');
+			case 2:
+				return this.$t('user_cv.left_side.language_level_elementary');
+			case 3:
+				return this.$t('user_cv.left_side.language_level_pre_intermediate');
+			case 4:
+				return this.$t('user_cv.left_side.language_level_intermediate');
+			case 5:
+				return this.$t('user_cv.left_side.language_level_upper_intermediate');
+			case 6:
+				return this.$t('user_cv.left_side.language_level_advanced');
+			case 7:
+				return this.$t('user_cv.left_side.language_level_fluent');
+			default:
+				return '';
+			}
+		},
+		treatPhone(phone) {
+			if (phone) {
+				if (phone == '0' || phone.length < 9 || !phone) {
+					return this.$t('user_cv.left_side.phone_not_registered');
+				}
+			}
+
+			return phone;
+		},
+		treatCellphone(cellphone) {
+			if (cellphone) {
+				if (cellphone == '0' || cellphone.length < 11 || !cellphone) {
+					return this.$t('user_cv.left_side.cellphone_not_registered');
+				}
+			}
+
+			return cellphone;
+		},
+		handleGetPrefixes(name = '') {
+			return getPrefixes(name);
+		},
+		treatEndDate(end_month, end_year) {
+			if (end_month && end_year) {
+				return `${end_month}/${end_year}`;
+			}
+			return '';
+		}
+	},
+	filters: {
+		allDeficiencies(idList) {
+			const typeDeficiency = {
+				1: this.$t('user_cv.left_side.disability_physical'),
+				2: this.$t('user_cv.left_side.disability_visual'),
+				3: this.$t('user_cv.left_side.disability_mental'),
+				4: this.$t('user_cv.left_side.disability_auditory'),
+				5: this.$t('user_cv.left_side.disability_phonological'),
+				6: this.$t('user_cv.left_side.disability_multiple')
+			};
+
+			return idList && idList.length && idList.map(id => typeDeficiency[id] || null).filter(id => id).join(' | ') || '';
+		},
+		formatCid(cidList) {
+			return cidList && cidList.length && cidList.filter(cid => cid).join(' | ') || '';
+		},
+		convertMoney(money) {
+			let moneyAux = parseFloat(money);
+			let m = moneyAux.toLocaleString('pt-BR', {
+				style: 'currency',
+				currency: 'BRL'
+			});
+			return m;
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .search-highlight {
+    background: rgb(255, 252, 61);
+    color: #000;
+}
+
+.aboutme {
+	display: flex;
+    flex-direction: column;
+	margin: 1rem 0;
+
+    &__resume {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+
+        > button {
+            padding: 0.25rem 0.5rem;
+            border: 0;
+            margin: 0;
+            color: #5865f2;
+            background: transparent;
+            font-weight: 500;
+            font-size: 0.875rem;
+
+            transition: color 0.25s;
+
+            &:hover {
+                color: darken(#5865f2, 10);
+            }
+
+            i {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+}
+
+.teste-block {
+    display: inline !important;
+}
+.qr-id {
+    color: #32325d !important;
+}
+
+.bg-light--darken {
+    background-color: $gray-100 !important;
+}
+
+.profile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+    .avatar {
+        width: initial!important;
+        height: initial!important;
+        margin-top: -48px;
+        background: transparent !important;
+        img {
+            width: 163px;
+            height: 163px;
+            border-radius: 50%;
+            top: 75%;
+            background: #adb5bd;
+            border: 4px solid #fff;
+        }
+
+        .no-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            position: absolute;
+            background-color: #adb5bd;
+            width: 163px;
+            height: 163px;
+            top: 120;
+            border-radius: 50%;
+            margin-bottom: 20px;
+            border: 4px solid #fff;
+        }
+    }
+
+    .user-info {
+        padding: 0 20px;
+        margin-top: 5px;
+    }
+
+    p {
+        font-size: 13px;
+        font-weight: 400;
+        color: #62778c;
+        line-height: 0.85rem;
+        margin-bottom: 2rem;
+    }
+
+    span {
+        font-size: 14px;
+        color: #8da2b5;
+    }
+}
+
+.skills {
+    margin-top: 2.3rem;
+    margin-bottom: 2.3rem;
+}
+
+.desidered {
+    margin-bottom: 2.3rem;
+}
+
+.deficiency {
+    p {
+        margin-top: 0.25rem;
+        margin-bottom: 0;
+        text-transform: capitalize;
+    }
+}
+
+.languages {
+    margin-bottom: 2.3rem;
+}
+
+.title-block {
+    .line {
+        width: 235px;
+        height: 0px;
+        border: 1px solid #ececec5c;
+        margin-bottom: 0.75rem;
+    }
+
+    p {
+        font-size: 13px;
+    }
+}
+
+.burh-code {
+    .qr-code {
+        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+        border-radius: 10px;
+    }
+
+    p {
+        font-size: 8px;
+        font-weight: bold;
+    }
+
+    span {
+        font-size: 12px;
+        font-weight: bold;
+    }
+}
+
+.socials {
+    .no-social {
+        height: 1.39rem;
+    }
+}
+
+.cv-left {
+    word-break: initial;
+}
+
+.disable-none {
+    user-select: none;
+}
+
+.content-left {
+    width: 25%;
+    height: auto;
+    padding: 0 20px;
+    word-break: break-word !important;
+    color: #62778c !important;
+}
+</style>