@burh/nuxt-core 1.1.10 → 1.1.12

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

@@ -1,736 +1,738 @@
-<template>
-	<div class="bg-white content-middle">
-		<!-- FERRAMENTAS -->
-		<div class="tools mt-3">
-			<button
-				v-for="(tool, index) in tools"
-				:key="index"
-				class="ml-3 burh-color"
-				@click="
-					isLocked && !unlockedButtons.includes(tool.event)
-						? $emit('open-contact')
-						: tool.event !== 'moveTo' && $emit(tool.event)
-				"
-			>
-				<template v-if="tool.event !== 'moveTo'">
-					<diamond v-if="isLocked && tool.event !== 'share'" class="mr-1" :size="16" />
-					{{ tool.name }}
-				</template>
-				<template v-else-if="tool.event === 'moveTo'">
-					<el-dropdown trigger="click" class="dropdown__content">
-						<span class="title__content icon">
-							{{tool.name}}
-							<i class="fas fa-angle-down dropdown__icon"></i>
-						</span>
-						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item
-								v-for="(tab, index) in moveToItems"
-								:key="index"
-								@click.native="$emit(tool.event, tab)"
-							>
-								<i class="fas fa-clipboard-list"></i>
-								{{ tab.title }}
-							</el-dropdown-item>
-						</el-dropdown-menu>
-					</el-dropdown>
-				</template>
-			</button>
-		</div>
-		<!-- CV -->
-		<div class="about content-block mt-5 ml-3 mr-3" v-if="userData.user_curriculum && userData.user_curriculum.annex">
-			<h5 class="font-weight-bold">
-				Cadastro Simplificado
-				<el-tooltip
-					placement="top"
-				>
-					<div style="max-width: 300px" slot="content">
-						O cadastro simplificado é uma solução criada pela Burh para facilitar a candidatura em vagas sem que seja necessário o preenchimento completo do perfil do candidato, apenas a importação do currículo.
-					</div>
-
-					<span class="text-primary ml-2">
-						<i class="fas fa-info-circle"></i>
-					</span>
-				</el-tooltip>
-
-				<button
-					class="cv__box mt-2"
-					:disabled="isCvDownloading"
-					@click="() => !isCvDownloading && handleDownloadCv(userData.user_curriculum)"
-				>
-					<template v-if="!isCvDownloading">
-						<span>
-							<i class="fas fa-download"></i>
-						</span>
-
-						<span class="font-weight-bold">Baixar Currículo</span>
-					</template>
-
-					<template v-else>
-						<span>
-							<i class="fas fa-spinner spin"></i>
-						</span>
-
-						<span class="font-weight-bold">Baixando</span>
-					</template>
-				</button>
-			</h5>
-		</div>
-		<!-- CV -->
-		<!-- SOBRE -->
-		<div class="about content-block mt-5 ml-3 mr-3">
-			<h5 class="font-weight-bold">Sobre</h5>
-			<p
-				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.about || false"
-				id="USER_ABOUT"
-				class="mb-0"
-				:class="
-					!wordIsLesserThan(
-						userData.user_complementary_information.about
-					) && 'readmore'
-				"
-				v-html="
-					highlightText(
-						search,
-						userData.user_complementary_information.about
-					)
-				"
-			></p>
-			<a
-				href="#"
-				aria-label="expandir conteudo"
-				v-if="
-					userData && userData.user_complementary_information && userData.user_complementary_information.about &&
-						!wordIsLesserThan(
-							userData.user_complementary_information.about
-						) || false
-				"
-				@click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
-			>Ler mais</a
-			>
-
-			<p v-if="!(userData && userData.user_complementary_information && userData.user_complementary_information.about)" class="">
-				Nenhuma informação adicionada
-			</p>
-		</div>
-		<!-- VÍDEO DE APRESENTAÇÃO -->
-		<div
-			v-if="
-				userData &&
-					userData.user_complementary_information &&
-					userData.user_complementary_information.presentation_video"
-			class="about content-block mt-5 ml-3 mr-3"
-		>
-			<h5 class="font-weight-bold">Vídeo de Apresentação</h5>
-
-			<div class="mux__video">
-				<MuxVideo
-					:src="userData.user_complementary_information.presentation_video"
-				/>
-			</div>
-		</div>
-		<!-- CONTATO -->
-		<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: {{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 -->
-		<h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
-		<div
-			class="	 ml-3"
-			v-show="userData.user_education.length > 0"
-			v-for="(edu, index) in userData.user_education"
-			:key="index"
-		>
-			<p
-				class="sub-title"
-				v-html="highlightText(search, edu.formation)"
-			></p>
-			<p class="info-text">{{ edu.institution }}</p>
-			<span class="info-text">
-				{{ edu.start_month }}/{{ edu.start_year }} -
-				{{ treatEndDate(edu.end_month, edu.end_year) }}
-				{{ getTime(false, edu) }}
-				{{
-					edu.user_education_period
-						? '-' + edu.user_education_period.name
-						: ''
-				}} </span
-			><br />
-			<span
-				class="info-text"
-			>
-				{{edu.formation_level_id | formationLevel}}
-			</span>
-		</div>
-
-		<!-- EXPERIÊNCIAS -->
-		<h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
-		<div
-			class="no-info ml-3"
-			v-show="userData.user_experience.length === 0"
-		>
-			<p>
-				Nenhuma informação adicionada
-			</p>
-		</div>
-		<div
-			v-show="userData.user_experience.length > 0"
-			class="experience ml-3 mr-3"
-			v-for="(exp, index) in userData.user_experience"
-			:key="`experience-${index}`"
-		>
-			<p
-				class="sub-title"
-				v-html="highlightText(search, exp.job_title)"
-			></p>
-			<p
-				class="info-text"
-				v-html="
-					highlightText(search, `${exp.company}, ${exp.location}`)
-				"
-			></p>
-			<span class="info-text">
-				{{ exp.start_month }}/{{ exp.start_year }} -
-				{{ treatEndDate(exp.end_month, exp.end_year) }}
-				{{ getTime(true, exp) }}
-			</span>
-
-			<p
-				:id="`USER_EXPERIENCE-${index}`"
-				class="description mt-4 mb-0"
-				:class="!wordIsLesserThan(exp.description) && 'readmore'"
-				v-html="highlightText(search, exp.description)"
-			></p>
-
-			<a
-				href="#"
-				aria-label="expandir conteudo"
-				v-show="!wordIsLesserThan(exp.description)"
-				@click.prevent.stop="
-					toggleReadMore($event, `USER_EXPERIENCE-${index}`)
-				"
-			>Ler mais</a
-			><br /><br />
-		</div>
-
-		<!-- CURSOS -->
-		<h5 class="font-weight-bold mt-1 ml-3">Cursos Complementares</h5>
-		<div class="no-info ml-3" v-show="userData.user_course.length === 0">
-			<p>
-				Nenhuma informação adicionada
-			</p>
-		</div>
-		<div
-			v-show="userData.user_course.length > 0"
-			class="courses ml-3"
-			v-for="(cou, index) in userData.user_course"
-			:key="`course-${index}`"
-		>
-			<p
-				class="sub-title"
-				v-html="highlightText(search, cou.institution)"
-			></p>
-			<p
-				class="info-text mb-3"
-				v-html="
-					highlightText(
-						search,
-						`${cou.name} - ${cou.end_year || ''} ${getTime(
-							false,
-							cou
-						)}`
-					)
-				"
-			/>
-		</div>
-	</div>
-</template>
-
-<script>
-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 MuxVideo from '../../Video/MuxVideo.vue';
-
-import swal from 'sweetalert2';
-import axios from 'axios';
-
-export default {
-	name: 'user-cv-middle',
-	directives: { mask },
-	props: {
-		userData: Object,
-		tools: {
-			type: Array,
-			default: () => []
-		},
-		search: {
-			type: String,
-			default: ''
-		},
-		moveToItems: {
-			type: Array,
-			default: () => [
-				{
-					id: 1,
-					name: 'applieds',
-					title: 'Inscritos'
-				},
-				{
-					id: 3,
-					name: 'selecteds',
-					title: 'Selecionados'
-				},
-				{
-					id: 5,
-					name: 'hireds',
-					title: 'Contratados'
-				},
-				{
-					id: 4,
-					name: 'other',
-					title: 'Reprovado'
-				}
-			]
-		}
-	},
-	filters: {
-		formationLevel(id) {
-			const typeFormation = {
-				1: 'Ensino Médio',
-				2: 'Ensino Técnico',
-				3: 'Graduação',
-				4: 'Pós-Graduação',
-				5: 'Mestrado',
-				6: 'Doutorado',
-				8: 'Ensino Fundamental'
-			};
-
-			return typeFormation[id] || '-';
-		}
-	},
-	components: {
-		ElDropdown: Dropdown,
-		ElDropdownMenu: DropdownMenu,
-		ElDropdownItem: DropdownItem,
-		MuxVideo
-	},
-	data() {
-		return {
-			isLocked: !this.companyHasProduct(
-				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
-			),
-			unlockedButtons: ['share', 'moveTo'],
-			isCvDownloading: false
-		};
-	},
-	mounted() {
-		this.userData.user_experience = this.filterByDate(
-			this.userData.user_experience,
-			'old'
-		);
-		this.userData.user_education = this.filterByDate(
-			this.userData.user_education,
-			'old'
-		);
-		this.userData.user_course = this.filterByDate(
-			this.userData.user_course,
-			'old'
-		);
-	},
-	watch: {
-		userData() {
-			this.userData.user_experience = this.filterByDate(
-				this.userData.user_experience,
-				'old'
-			);
-			this.userData.user_education = this.filterByDate(
-				this.userData.user_education,
-				'old'
-			);
-			this.userData.user_course = this.filterByDate(
-				this.userData.user_course,
-				'old'
-			);
-		}
-	},
-	methods: {
-		showMessage(message, type = 'success') {
-			const Toast = swal.mixin({
-				toast: true,
-				position: 'top-end',
-				showConfirmButton: false,
-				timer: 3000,
-			});
-
-			return Toast.fire({
-				type: type,
-				title: message,
-			});
-		},
-		async handleDownloadCv(data) {
-			this.isCvDownloading = true;
-
-			const response = await axios.get(data.annex, {
-				responseType: 'blob'
-			})
-				.then(res => URL.createObjectURL(res.data))
-				.catch(err => {
-					return {
-						error: true,
-						message: (err && err.response && err.response.data && err.response.data.message) || 'Falha ao baixar arquivo'
-					};
-				});
-
-			this.isCvDownloading = false;
-
-			if (response.error) {
-				this.showMessage(response.message, 'error');
-				return;
-			}
-
-			const link = document.createElement('a');
-			link.href = response;
-			link.download = `${data.user_id}.pdf`;
-			link.click();
-		},
-		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;
-
-			const regex = new RegExp(search.toLowerCase(), 'gmi');
-			return String(text || '').replace(
-				regex,
-				`<span class="search-highlight">${search}</span>`
-			);
-		},
-		filterByDate(data, by = 'new') {
-			let sortedArray = data.sort((a, b) => {
-				a = [
-					a.start_month,
-					a.start_year,
-					a.end_month || 12,
-					a.end_year || 9999
-				];
-
-				b = [
-					b.start_month,
-					b.start_year,
-					b.end_month || 12,
-					b.end_year || 9999
-				];
-
-				// Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
-				// Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
-
-				let byStart;
-				let byEnd;
-
-				switch (by) {
-				case 'old':
-					byStart =
-                            new Date(a[1], a[0], 1).getTime() -
-                            new Date(b[1], b[0], 1).getTime();
-					byEnd =
-                            new Date(b[3], b[2], 1).getTime() -
-                            new Date(a[3], a[2], 1).getTime();
-					break;
-
-				default:
-					byStart =
-                            new Date(b[1], b[0], 1).getTime() -
-                            new Date(a[1], a[0], 1).getTime();
-					byEnd =
-                            new Date(b[3], b[2], 1).getTime() -
-                            new Date(a[3], a[2], 1).getTime();
-					break;
-				}
-
-				return byEnd - byStart;
-			});
-
-			return sortedArray;
-		},
-		toggleReadMore(event, id) {
-			const element = document.getElementById(id);
-			element.classList.toggle('readmore');
-			event.target.innerText == 'Ler mais'
-				? (event.target.innerText = 'Esconder')
-				: (event.target.innerText = 'Ler mais');
-		},
-		getTime(
-			isExperience,
-			{ start_year = null, end_year = null, start_month, end_month },
-			textHappening = 'Cursando'
-		) {
-			const isHappening = !end_month && !end_year;
-
-			if (isHappening) {
-				return isExperience === true ? 'Atualmente' : 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 '';
-		},
-		wordIsLesserThan(word, value = 300) {
-			return word && word.length < value;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-.mux__video {
-    width: 100%;
-    margin-top: 16px;
-
-    video {
-        width: 100% !important;
-        border-radius: 8px !important;
-        display: block !important;
-    }
-}
-
-.cv__box {
-    cursor: pointer;
-    margin: 0;
-    border: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    background: rgba(#5865f2, 0.2);
-    color: #5865F2;
-    font-size: 1rem;
-    padding: 1.25rem 1rem;
-    border-radius: 0.25rem;
-    transition: background-color 0.25s, color 0.25s;
-
-    &:hover:not(:disabled) {
-        background: rgba(#5865f2, 0.3);
-    }
-
-    &:disabled {
-        cursor: not-allowed !important;
-        background: #f5f5f5;
-        color: #c8c8c8;
-    }
-
-    @keyframes spinner {
-        from {
-            transform: rotate(0);
-        }
-        to {
-            transform: rotate(360deg);
-        }
-    }
-
-    .spin {
-        animation: spinner 0.75s infinite linear;
-    }
-}
-
-/deep/ .dropdown__content {
-	&, .title__content {
-		width: 100%;
-		height: 100%;
-		display: grid;
-		place-items: center;
-	}
-    .title__content.icon {
-        grid-template-columns: 1fr 10px;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        color: #fff;
-        font-weight: 600;
-        font-size: 12px;
-        margin: 0!important;
-        i {
-            font-size: 1rem;
-            margin-left: 10px;
-        }
-    }
-}
-
-/deep/ .search-highlight {
-    background: rgb(255, 252, 61);
-    color: #000;
-}
-
-.content-middle {
-    width: 50%;
-    border-right: 1px solid #ececec5c;
-    word-break: break-word !important;
-}
-
-.readmore {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-}
-
-.tools {
-    flex-wrap: wrap;
-    display: grid;
-    align-items: center;
-    justify-content: space-between;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 10px;
-    padding-right: 20px;
-    button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        margin-left: 0!important;
-
-        height: 29px;
-        border: none;
-
-        background: #5865F2;
-        border-radius: 16px;
-        color: #fff;
-
-        font-size: 0.75rem;
-        font-weight: 600;
-        outline: 0;
-
-        padding: 0px 10px;
-        .dropdown__icon {
-            margin-right: 20px;
-        }
-    }
-}
-
-.education {
-    margin-top: 15px;
-}
-
-.experience {
-    .description {
-        font-size: 14px;
-        color: #62778c;
-    }
-
-    a {
-        margin-bottom: 1px;
-    }
-}
-
-.sub-title {
-    margin-bottom: 1px;
-
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 21px;
-    color: #62778c;
-    text-transform: uppercase;
-}
-
-.info-text {
-    margin-bottom: 1px;
-
-    font-size: 14px;
-    color: #8da2b5;
-}
-
-.content-block {
-    p {
-        font-size: 14px;
-        color: #62778c;
-    }
-}
-
-.no-info {
-    p {
-        font-size: 0.875rem;
-        color: #62778c;
-    }
-}
-</style>
+<template>
+	<div class="bg-white content-middle">
+		<!-- FERRAMENTAS -->
+		<div class="tools mt-3">
+			<button
+				v-for="(tool, index) in tools"
+				:key="index"
+				class="ml-3 burh-color"
+				@click="
+					isLocked && !unlockedButtons.includes(tool.event)
+						? $emit('open-contact')
+						: tool.event !== 'moveTo' && $emit(tool.event)
+				"
+			>
+				<template v-if="tool.event !== 'moveTo'">
+					<diamond v-if="isLocked && tool.event !== 'share'" class="mr-1" :size="16" />
+					{{ tool.name }}
+				</template>
+				<template v-else-if="tool.event === 'moveTo'">
+					<el-dropdown trigger="click" class="dropdown__content">
+						<span class="title__content icon">
+							{{tool.name}}
+							<i class="fas fa-angle-down dropdown__icon"></i>
+						</span>
+						<el-dropdown-menu slot="dropdown">
+							<el-dropdown-item
+								v-for="(tab, index) in moveToItems"
+								:key="index"
+								@click.native="$emit(tool.event, tab)"
+							>
+								<i class="fas fa-clipboard-list"></i>
+								{{ tab.title }}
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					</el-dropdown>
+				</template>
+			</button>
+		</div>
+		<!-- CV -->
+		<div class="about content-block mt-5 ml-3 mr-3" v-if="userData.user_curriculum && userData.user_curriculum.annex">
+			<h5 class="font-weight-bold">
+				Cadastro Simplificado
+				<el-tooltip
+					placement="top"
+				>
+					<div style="max-width: 300px" slot="content">
+						O cadastro simplificado é uma solução criada pela Burh para facilitar a candidatura em vagas sem que seja necessário o preenchimento completo do perfil do candidato, apenas a importação do currículo.
+					</div>
+
+					<span class="text-primary ml-2">
+						<i class="fas fa-info-circle"></i>
+					</span>
+				</el-tooltip>
+
+				<button
+					class="cv__box mt-2"
+					:disabled="isCvDownloading"
+					@click="() => !isCvDownloading && handleDownloadCv(userData.user_curriculum)"
+				>
+					<template v-if="!isCvDownloading">
+						<span>
+							<i class="fas fa-download"></i>
+						</span>
+
+						<span class="font-weight-bold">Baixar Currículo</span>
+					</template>
+
+					<template v-else>
+						<span>
+							<i class="fas fa-spinner spin"></i>
+						</span>
+
+						<span class="font-weight-bold">Baixando</span>
+					</template>
+				</button>
+			</h5>
+		</div>
+		<!-- CV -->
+		<!-- SOBRE -->
+		<div class="about content-block mt-5 ml-3 mr-3">
+			<h5 class="font-weight-bold">Sobre</h5>
+			<p
+				v-if="userData && userData.user_complementary_information && userData.user_complementary_information.about || false"
+				id="USER_ABOUT"
+				class="mb-0"
+				:class="
+					!wordIsLesserThan(
+						userData.user_complementary_information.about
+					) && 'readmore'
+				"
+				v-html="
+					highlightText(
+						search,
+						userData.user_complementary_information.about
+					)
+				"
+			></p>
+			<a
+				href="#"
+				aria-label="expandir conteudo"
+				v-if="
+					userData && userData.user_complementary_information && userData.user_complementary_information.about &&
+						!wordIsLesserThan(
+							userData.user_complementary_information.about
+						) || false
+				"
+				@click.prevent.stop="toggleReadMore($event, 'USER_ABOUT')"
+			>Ler mais</a
+			>
+
+			<p v-if="!(userData && userData.user_complementary_information && userData.user_complementary_information.about)" class="">
+				Nenhuma informação adicionada
+			</p>
+		</div>
+		<!-- VÍDEO DE APRESENTAÇÃO -->
+		<div
+			v-if="
+				userData &&
+					userData.user_complementary_information &&
+					userData.user_complementary_information.presentation_video"
+			class="about content-block mt-5 ml-3 mr-3"
+		>
+			<h5 class="font-weight-bold">Vídeo de Apresentação</h5>
+
+			<div class="mux__video">
+				<MuxVideo
+					:src="userData.user_complementary_information.presentation_video"
+				/>
+			</div>
+		</div>
+		<!-- CONTATO -->
+		<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: {{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 -->
+		<h5 class="font-weight-bold mt-4 ml-3">Educação</h5>
+		<div
+			class="	 ml-3"
+			v-show="userData.user_education.length > 0"
+			v-for="(edu, index) in userData.user_education"
+			:key="index"
+		>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, edu.formation)"
+			></p>
+			<p class="info-text">{{ edu.institution }}</p>
+			<span class="info-text">
+				{{ edu.start_month }}/{{ edu.start_year }} -
+				{{ treatEndDate(edu.end_month, edu.end_year) }}
+				{{ getTime(false, edu) }}
+				{{
+					edu.user_education_period
+						? '-' + edu.user_education_period.name
+						: ''
+				}} </span
+			><br />
+			<span
+				class="info-text"
+			>
+				{{edu.formation_level_id | formationLevel}}
+			</span>
+		</div>
+
+		<!-- EXPERIÊNCIAS -->
+		<h5 class="font-weight-bold mt-4 ml-3">Experiência</h5>
+		<div
+			class="no-info ml-3"
+			v-show="userData.user_experience.length === 0"
+		>
+			<p>
+				Nenhuma informação adicionada
+			</p>
+		</div>
+		<div
+			v-show="userData.user_experience.length > 0"
+			class="experience ml-3 mr-3"
+			v-for="(exp, index) in userData.user_experience"
+			:key="`experience-${index}`"
+		>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, exp.job_title)"
+			></p>
+			<p
+				class="info-text"
+				v-html="
+					highlightText(search, `${exp.company}, ${exp.location}`)
+				"
+			></p>
+			<span class="info-text">
+				{{ exp.start_month }}/{{ exp.start_year }} -
+				{{ treatEndDate(exp.end_month, exp.end_year) }}
+				{{ getTime(true, exp) }}
+			</span>
+
+			<p
+				:id="`USER_EXPERIENCE-${index}`"
+				class="description mt-4 mb-0"
+				:class="!wordIsLesserThan(exp.description) && 'readmore'"
+				v-html="highlightText(search, exp.description)"
+			></p>
+
+			<a
+				href="#"
+				aria-label="expandir conteudo"
+				v-show="!wordIsLesserThan(exp.description)"
+				@click.prevent.stop="
+					toggleReadMore($event, `USER_EXPERIENCE-${index}`)
+				"
+			>Ler mais</a
+			><br /><br />
+		</div>
+
+		<!-- CURSOS -->
+		<h5 class="font-weight-bold mt-1 ml-3">Cursos Complementares</h5>
+		<div class="no-info ml-3" v-show="userData.user_course.length === 0">
+			<p>
+				Nenhuma informação adicionada
+			</p>
+		</div>
+		<div
+			v-show="userData.user_course.length > 0"
+			class="courses ml-3"
+			v-for="(cou, index) in userData.user_course"
+			:key="`course-${index}`"
+		>
+			<p
+				class="sub-title"
+				v-html="highlightText(search, cou.institution)"
+			></p>
+			<p
+				class="info-text mb-3"
+				v-html="
+					highlightText(
+						search,
+						`${cou.name} - ${cou.end_year || ''} ${getTime(
+							false,
+							cou
+						)}`
+					)
+				"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+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 MuxVideo from '../../Video/MuxVideo.vue';
+
+import swal from 'sweetalert2';
+import axios from 'axios';
+
+export default {
+	name: 'user-cv-middle',
+	directives: { mask },
+	props: {
+		userData: Object,
+		tools: {
+			type: Array,
+			default: () => []
+		},
+		search: {
+			type: String,
+			default: ''
+		},
+		moveToItems: {
+			type: Array,
+			default: () => [
+				{
+					id: 1,
+					name: 'applieds',
+					title: 'Inscritos'
+				},
+				{
+					id: 3,
+					name: 'selecteds',
+					title: 'Selecionados'
+				},
+				{
+					id: 5,
+					name: 'hireds',
+					title: 'Contratados'
+				},
+				{
+					id: 4,
+					name: 'other',
+					title: 'Reprovado'
+				}
+			]
+		}
+	},
+	filters: {
+		formationLevel(id) {
+			const typeFormation = {
+				1: 'Ensino Médio',
+				2: 'Ensino Técnico',
+				3: 'Graduação',
+				4: 'Pós-Graduação',
+				5: 'Mestrado',
+				6: 'Doutorado',
+				8: 'Ensino Fundamental'
+			};
+
+			return typeFormation[id] || '-';
+		}
+	},
+	components: {
+		ElDropdown: Dropdown,
+		ElDropdownMenu: DropdownMenu,
+		ElDropdownItem: DropdownItem,
+		MuxVideo
+	},
+	data() {
+		return {
+			isLocked: !this.companyHasProduct(
+				this.$store.state.loja && this.$store.state.loja.showableProducts && this.$store.state.loja.showableProducts['INTERACAO_USUARIO'] || false
+			),
+			unlockedButtons: ['share', 'moveTo'],
+			isCvDownloading: false
+		};
+	},
+	mounted() {
+		this.userData.user_experience = this.filterByDate(
+			this.userData.user_experience,
+			'old'
+		);
+		this.userData.user_education = this.filterByDate(
+			this.userData.user_education,
+			'old'
+		);
+		this.userData.user_course = this.filterByDate(
+			this.userData.user_course,
+			'old'
+		);
+	},
+	watch: {
+		userData() {
+			this.userData.user_experience = this.filterByDate(
+				this.userData.user_experience,
+				'old'
+			);
+			this.userData.user_education = this.filterByDate(
+				this.userData.user_education,
+				'old'
+			);
+			this.userData.user_course = this.filterByDate(
+				this.userData.user_course,
+				'old'
+			);
+		}
+	},
+	methods: {
+		showMessage(message, type = 'success') {
+			const Toast = swal.mixin({
+				toast: true,
+				position: 'top-end',
+				showConfirmButton: false,
+				timer: 3000,
+			});
+
+			return Toast.fire({
+				type: type,
+				title: message,
+			});
+		},
+		async handleDownloadCv(data) {
+			this.isCvDownloading = true;
+
+			const response = await axios.get(data.annex, {
+				responseType: 'blob'
+			})
+				.then(res => URL.createObjectURL(res.data))
+				.catch(err => {
+					return {
+						error: true,
+						message: (err && err.response && err.response.data && err.response.data.message) || 'Falha ao baixar arquivo'
+					};
+				});
+
+			this.isCvDownloading = false;
+
+			if (response.error) {
+				this.showMessage(response.message, 'error');
+				return;
+			}
+
+			const link = document.createElement('a');
+			link.href = response;
+			link.download = `${data.user_id}.pdf`;
+			link.click();
+		},
+		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;
+
+			const regex = new RegExp(search.toLowerCase(), 'gmi');
+			return String(text || '').replace(
+				regex,
+				`<span class="search-highlight">${search}</span>`
+			);
+		},
+		filterByDate(data, by = 'new') {
+			let sortedArray = data.sort((a, b) => {
+				a = [
+					a.start_month,
+					a.start_year,
+					a.end_month || 12,
+					a.end_year || 9999
+				];
+
+				b = [
+					b.start_month,
+					b.start_year,
+					b.end_month || 12,
+					b.end_year || 9999
+				];
+
+				// Primeiro filtro -> chaves: 0 e 1 -> Filtro por data de inicio
+				// Segundo filtro -> chaves: 2 e 3 -> Filtro por data de termino (subir não concluídos para primeiros)
+
+				let byStart;
+				let byEnd;
+
+				switch (by) {
+				case 'old':
+					byStart =
+                            new Date(a[1], a[0], 1).getTime() -
+                            new Date(b[1], b[0], 1).getTime();
+					byEnd =
+                            new Date(b[3], b[2], 1).getTime() -
+                            new Date(a[3], a[2], 1).getTime();
+					break;
+
+				default:
+					byStart =
+                            new Date(b[1], b[0], 1).getTime() -
+                            new Date(a[1], a[0], 1).getTime();
+					byEnd =
+                            new Date(b[3], b[2], 1).getTime() -
+                            new Date(a[3], a[2], 1).getTime();
+					break;
+				}
+
+				return byEnd - byStart;
+			});
+
+			return sortedArray;
+		},
+		toggleReadMore(event, id) {
+			const element = document.getElementById(id);
+			element.classList.toggle('readmore');
+			event.target.innerText == 'Ler mais'
+				? (event.target.innerText = 'Esconder')
+				: (event.target.innerText = 'Ler mais');
+		},
+		getTime(
+			isExperience,
+			{ start_year = null, end_year = null, start_month, end_month },
+			textHappening = 'Cursando'
+		) {
+			const isHappening = !end_month && !end_year;
+
+			if (isHappening) {
+				return isExperience === true ? 'Atualmente' : 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 '';
+		},
+		wordIsLesserThan(word, value = 300) {
+			return word && word.length < value;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+.mux__video {
+    width: 100%;
+    margin-top: 16px;
+
+    video {
+        width: 100% !important;
+        max-height: 400px !important;
+        border-radius: 8px !important;
+        display: block !important;
+				background: #212529 !important;
+    }
+}
+
+.cv__box {
+    cursor: pointer;
+    margin: 0;
+    border: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    background: rgba(#5865f2, 0.2);
+    color: #5865F2;
+    font-size: 1rem;
+    padding: 1.25rem 1rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.25s, color 0.25s;
+
+    &:hover:not(:disabled) {
+        background: rgba(#5865f2, 0.3);
+    }
+
+    &:disabled {
+        cursor: not-allowed !important;
+        background: #f5f5f5;
+        color: #c8c8c8;
+    }
+
+    @keyframes spinner {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .spin {
+        animation: spinner 0.75s infinite linear;
+    }
+}
+
+/deep/ .dropdown__content {
+	&, .title__content {
+		width: 100%;
+		height: 100%;
+		display: grid;
+		place-items: center;
+	}
+    .title__content.icon {
+        grid-template-columns: 1fr 10px;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        color: #fff;
+        font-weight: 600;
+        font-size: 12px;
+        margin: 0!important;
+        i {
+            font-size: 1rem;
+            margin-left: 10px;
+        }
+    }
+}
+
+/deep/ .search-highlight {
+    background: rgb(255, 252, 61);
+    color: #000;
+}
+
+.content-middle {
+    width: 50%;
+    border-right: 1px solid #ececec5c;
+    word-break: break-word !important;
+}
+
+.readmore {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+
+.tools {
+    flex-wrap: wrap;
+    display: grid;
+    align-items: center;
+    justify-content: space-between;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 10px;
+    padding-right: 20px;
+    button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        margin-left: 0!important;
+
+        height: 29px;
+        border: none;
+
+        background: #5865F2;
+        border-radius: 16px;
+        color: #fff;
+
+        font-size: 0.75rem;
+        font-weight: 600;
+        outline: 0;
+
+        padding: 0px 10px;
+        .dropdown__icon {
+            margin-right: 20px;
+        }
+    }
+}
+
+.education {
+    margin-top: 15px;
+}
+
+.experience {
+    .description {
+        font-size: 14px;
+        color: #62778c;
+    }
+
+    a {
+        margin-bottom: 1px;
+    }
+}
+
+.sub-title {
+    margin-bottom: 1px;
+
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    color: #62778c;
+    text-transform: uppercase;
+}
+
+.info-text {
+    margin-bottom: 1px;
+
+    font-size: 14px;
+    color: #8da2b5;
+}
+
+.content-block {
+    p {
+        font-size: 14px;
+        color: #62778c;
+    }
+}
+
+.no-info {
+    p {
+        font-size: 0.875rem;
+        color: #62778c;
+    }
+}
+</style>