@burh/nuxt-core 1.0.0

package/components/burh-ds/Capsules/UserProfile.vue

@@ -0,0 +1,1938 @@
+<template>
+	<div v-show="loaded && (isCurrentUser() || !isCurrentUser() && !user.private)">
+		<basics :isLoading="loading" v-if="loading"/>
+		<client-only>
+			<profile-header type="primary" :image="user.cover" :class="{'profile-edit': isCurrentUser()}">
+				<template slot="cover-percentage">
+					<h1
+						class="cover-percentage"
+						v-if="coverPercentCompleted != null"
+					>{{coverPercentCompleted}}%</h1>
+				</template>
+				<template v-if="isCurrentUser() && coverPercentCompleted == null" slot="cover-percentage">
+					<span
+						:class="{'profile-edit__icon--edit': isEditing}"
+						class="profile-edit__icon">
+						<span class="profile-edit__text mr-md-4" title="Editar imagem de capa" v-on:click.prevent="onCoverClick();">
+							<font-awesome-icon :icon="['fas', 'pen']" size="lg" /> Mudar imagem de capa
+						</span>
+						<span v-if="user.cover" class="profile-edit__text" title="Excluir imagem de capa" v-on:click.prevent="removeUserImage('banner');">
+							<font-awesome-icon :icon="['fas', 'trash']" size="lg" /> Excluir imagem de capa
+						</span>
+					</span>
+				</template>
+				<div class="subheader__user col-12 col-md-8">
+					<div class="subheader__avatar avatar rounded-circle">
+						<img
+							:src="user.avatar"
+							:alt="user.name + ' ' + user.last_name"
+							v-if="user.avatar != null && user.avatar != ''"
+						/>
+						<span
+							class="bigger"
+							v-if="user.avatar == null || user.avatar == ''"
+						>{{user.name.charAt(0)}}{{user.last_name.split(' ')[0].charAt(0)}}</span>
+						<h1
+							class="avatar-percentage"
+							v-if="avatarPercentCompleted != null"
+						>{{avatarPercentCompleted}}%</h1>
+
+						<span
+							:class="{'profile-edit__icon--edit': isEditing}"
+							class="profile-edit__icon"
+							v-if="isCurrentUser()"
+						>
+							<input
+								ref="inputFile"
+								type="file"
+								@change="onAvatarChange($event)"
+								class="profile-edit__caller"
+							/>
+							<span v-on:click.prevent="onAvatarClick()" class="d-block mr-4 avatar-svg" title="Editar Avatar">
+								<i class="fas fa-pen fa-lg"></i>
+								<!-- <font-awesome-icon :icon="['fas', 'globe']" size="lg" v-on:click.self="onAvatarClick()" /> -->
+							</span>
+							<span v-if="user.avatar" v-on:click.prevent="removeUserImage('avatar')" class="d-block avatar-svg" title="Excluir Avatar">
+								<i class="fas fa-trash fa-lg"></i>
+								<!-- <font-awesome-icon :icon="['fas', 'trash']" size="lg" /> -->
+							</span>
+						</span>
+
+						<div
+							class="profile-pcd rounded-circle"
+							v-if="$store.state.localStorage.currentCompany != null && !isCurrentUser() && user.deficiency != null"
+						>
+							<font-awesome-icon :icon="['fas', 'wheelchair']" />
+						</div>
+					</div>
+					<div class="subheader__info">
+						<h1 class="h1">
+							{{user.name}} {{user.last_name}}
+							<span
+								class="badge badge-info badge-sm small badge-private"
+								v-if="user.private"
+							>Privado</span>
+							<button
+								v-if="isCurrentUser()"
+								class="btn btn-link pl-1 pr-1 my-0 py-0"
+								style="min-width: 40px"
+								@click="openModal('information', modalInformationData())"
+							>
+								<font-awesome-icon :icon="['fas', 'pen']" />
+							</button>
+						</h1>
+
+						<template v-if="currentJob() != null">
+							<p class="ellipsis">{{currentJob().job_title}}</p>
+							<p class="small">
+								<span>no</span>
+								{{currentJob().company}} em
+								<b>{{currentJob().location}}</b>
+							</p>
+						</template>
+					</div>
+				</div>
+				<div class="col-12 col-md-4 subheader__actions" id="subheader">
+					<template v-if="isCurrentUser()">
+						<base-dropdown
+							:menuOnRight="true"
+							direction="up"
+							titleTag="Adicionar Nova Seção"
+							class="add-fixed helper-fran"
+							v-on:change="isActive = $event"
+						>
+							<div class="helper-fran__caller" slot="title-container">
+								<span class="fran-avatar fran-avatar--mini">
+									<img src="/img/content/fran/fran-00.svg" alt="Fran">
+								</span>
+								<div class="helper-fran__caller__text">
+									Sou a Fran, posso te ajudar a adicionar itens ao seu perfil
+								</div>
+								<base-button
+									type="primary"
+									class="btn-rounded mt-0 mr-0 px-3 py-3"
+									:class="{'active': isActive}"
+									@click="toggleActive()"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" aria-label="Adicionar Nova Seção" />
+								</base-button>
+							</div>
+							<li>
+								<h4 class="h4 helper-fran__header">
+									<span class="fran-avatar">
+										<img src="/img/content/fran/fran-00.svg" alt="Fran">
+									</span>
+									Escolha a área que deseja adicionar ao seu perfil.
+								</h4>
+							</li>
+							<li>
+								<a :class="{'text-danger': !(user.complementary_information.about != null && user.complementary_information.about.length)}" class="dropdown-item" href="javascript:void(0);" @click="openModal('about', user.complementary_information.about)">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'user']" />
+									</span>
+									Sobre
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="user.complementary_information.about != null && user.complementary_information.about.length" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+							<li>
+								<a :class="{'text-danger': user.experience != [] && user.experience.length == 0}" class="dropdown-item" href="javascript:void(0);" @click="openModal('experience')">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'suitcase']" />
+									</span>
+									Experiência Profissional
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="user.experience != [] && user.experience.length != 0" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+							<li>
+								<a :class="{'text-danger': user.education != [] && user.education.length == 0}" class="dropdown-item" href="javascript:void(0);" @click="openModal('education')">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'user-graduate']" />
+									</span>
+									Educação
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="user.education != [] && user.education.length != 0" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+							<li>
+								<a :class="{'text-danger': user.course != [] && user.course.length == 0}" class="dropdown-item" href="javascript:void(0);" @click="openModal('courses')">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'university']" />
+									</span>
+									Cursos Profissionalizantes
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="user.course != [] && user.course.length != 0" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+							<li>
+								<a :class="{'text-danger': user.skill != [] && user.skill.length == 0}" class="dropdown-item" href="javascript:void(0);" @click="openModal('skills')">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'award']" />
+									</span>
+									Habilidades
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="user.skill != [] && user.skill.length != 0" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+							<li>
+								<a :class="{'text-danger': user.language != [] && user.language.length == 0}" class="dropdown-item" href="javascript:void(0);" @click="openModal('languages')">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'globe']" />
+									</span>
+									Idiomas
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="user.language != [] && user.language.length != 0" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+							<li>
+								<a :class="{'text-danger': !isUserHasPhoneNumber || !isUserHasAddress}" class="dropdown-item" href="javascript:void(0);" @click="openModal('information', modalInformationData())">
+									<span class="dropdown-item__icon">
+										<font-awesome-icon :icon="['fas', 'address-card']" />
+									</span>
+									Dados Gerais
+									<span class="dropdown-item__icon">
+										<font-awesome-icon v-if="isUserHasPhoneNumber && isUserHasAddress" :icon="['fas', 'check']" class="text-success"></font-awesome-icon>
+										<font-awesome-icon v-else :icon="['fas', 'times']" class="text-danger"></font-awesome-icon>
+									</span>
+								</a>
+							</li>
+						</base-dropdown>
+						<!-- só mobile -->
+						<button
+							class="btn btn-outline-primary btn-hide-icon d-block d-sm-none"
+							@click="onShareUserProfile()"
+						>
+							<span class="icon-mobile">
+								<font-awesome-icon :icon="['fas', 'link']" />
+							</span> Compartilhar
+						</button>
+						<!-- /só mobile -->
+						<!-- <button class="btn btn-outline-primary btn-hide-icon" @click="toggleEdit()"> -->
+						<button class="btn btn-sm btn-outline-primary px-4 btn-hide-icon" @click="openModal('information', modalInformationData())">
+							<span class="icon-mobile">
+								<font-awesome-icon :icon="['fas', 'pen']" />
+							</span>
+							<font-awesome-icon :icon="['fas', 'pen']" class="d-none d-sm-inline-block mr-2" />
+							Dados Pessoais
+						</button>
+						<!-- <button class="btn btn-outline-primary btn-hide-icon d-none d-sm-block">
+              <span class="icon-mobile"><font-awesome-icon :icon="['fas', 'pen']" /></span> Compartilhar
+            </button>-->
+						<base-dropdown :menuOnRight="true" direction class="d-none d-sm-block">
+							<base-button
+								slot="title-container"
+								type="outline-primary"
+								class="mt-0 mr-0 btn-rounded btn-ellipsis"
+							>
+								<font-awesome-icon :icon="['fas', 'ellipsis-h']" />
+							</base-button>
+							<button class="dropdown-item" @click="onShareUserProfile()">
+								<font-awesome-icon :icon="['fas', 'link']" />Compartilhar
+							</button>
+							<button class="dropdown-item" @click="onDownloadProfile()">
+								<font-awesome-icon :icon="['fas', 'print']" />Imprimir Currículo
+							</button>
+						</base-dropdown>
+					</template>
+					<template v-if="!isCurrentUser()">
+						<!-- só mobile -->
+						<!-- <button class="btn btn-outline-primary btn-hide-icon d-block d-sm-none">
+              <span class="icon-mobile"><font-awesome-icon :icon="['fas', 'print']" /></span> Imprimir
+            </button>-->
+						<!-- /só mobile -->
+						<button class="btn btn-outline-primary btn-hide-icon" @click="onShareUserProfile()">
+							<span class="icon-mobile">
+								<font-awesome-icon :icon="['fas', 'link']" />
+							</span> Compartilhar
+						</button>
+						<!-- <button class="btn btn-outline-primary btn-hide-icon d-none d-sm-block">
+              <span class="icon-mobile"><font-awesome-icon :icon="['fas', 'pen']" /></span> Compartilhar
+            </button>-->
+						<base-dropdown v-if="$store.state.localStorage.currentUser != null" :menuOnRight="true" class="d-none d-sm-block">
+							<base-button
+								slot="title-container"
+								type="outline-primary"
+								class="mt-0 mr-0 btn-rounded btn-ellipsis"
+							>
+								<font-awesome-icon :icon="['fas', 'ellipsis-h']" />
+							</base-button>
+							<!-- <a class="dropdown-item" href="#"><font-awesome-icon :icon="['fas', 'link']" /> Compartilhar</a> -->
+							<button class="dropdown-item" @click="onDownloadProfile()">
+								<font-awesome-icon :icon="['fas', 'print']" />Imprimir Currículo
+							</button>
+						</base-dropdown>
+					</template>
+				</div>
+			</profile-header>
+			<div
+				id="profilePageContent"
+				class="page-content page-content--transparent py-2 py-md-4 container-fluid container-fluid--bu"
+			>
+				<div class="row">
+					<div class="col-12 col-md-7 col-lg-8">
+						<div v-if="isCurrentUser()" class="profile-bar mb-5 border p-3">
+							<span>
+								Força do Perfil:
+								<b v-if="profile_completion < 60">Iniciante</b>
+								<b v-if="profile_completion >= 60 && profile_completion < 75">Intermediário</b>
+								<b v-if="profile_completion >= 75 && profile_completion < 85">Avançado</b>
+								<b v-if="profile_completion >= 85 && profile_completion < 90">Incrível</b>
+								<b v-if="profile_completion >= 90">Fantástico</b>
+							</span>
+
+							<base-progress
+								class="progress-xs mb-5 mt-3"
+								:height="20"
+								:type="'color-primary'"
+								:value="profile_completion"
+								:gradient="true"
+							></base-progress>
+
+							<!-- {{$store.state.localStorage.currentUser.profile_completion}} -->
+
+							<div class="profile-tips" v-if="$store.state.localStorage.currentUser.profile_completion > 10 && $store.state.localStorage.currentUser.profile_completion < 80">
+								<p class="small">Para se candidatar a uma vaga você precisa preencher o seu cadastro até o nível <b>Intermediário</b> . </p>
+								<p class="small">Clique e preencha os itens das categorias abaixo:</p>
+
+								<ul class="list-unstyled small">
+									<li class="btn btn-sm btn-link d-block my-2 mx-0 px-2 text-left pointer" @click="openModal('experience')" v-if="user.experience == null || user.experience.length == 0">
+										<font-awesome-icon :icon="['fas', 'suitcase']" v-if="user.experience == null || user.experience.length == 0" /> Experiência Profissional
+									</li>
+									<li class="btn btn-sm btn-link d-block my-2 mx-0 px-2 text-left pointer" @click="openModal('education')" v-if="user.education == null || user.education.length == 0">
+										<font-awesome-icon :icon="['fas', 'user-graduate']" /> Educação
+									</li>
+									<li class="btn btn-sm btn-link d-block my-2 mx-0 px-2 text-left pointer" @click="openModal('courses')" v-if="user.course == null || user.course.length == 0">
+										<font-awesome-icon :icon="['fas', 'university']" /> Cursos Profissionalizantes
+									</li>
+									<li class="btn btn-sm btn-link d-block my-2 mx-0 px-2 text-left pointer" @click="openModal('skills')" v-if="user.skill == null || user.skill.length == 0">
+										<font-awesome-icon :icon="['fas', 'award']" /> Habilidades
+									</li>
+									<li class="btn btn-sm btn-link d-block my-2 mx-0 px-2 text-left pointer" @click="openModal('languages')" v-if="user.language == null || user.language.length == 0">
+										<font-awesome-icon :icon="['fas', 'globe']" /> Idiomas
+									</li>
+								</ul>
+							</div>
+
+							<div class="jobs-history" v-if="job != null">
+								<div class="row">
+									<div class="col-12 col-lg-6">
+										<div class="card card--job cursor-pointer z-0 mb-4 mb-lg-0">
+											<div class="card-header">
+												<span class="avatar rounded-circle">
+													<img
+														alt
+														:src="job.company_logo"
+														onerror="this.src=''"
+													/>
+												</span>
+											</div>
+											<div class="card-body">
+												<span class="card__company">{{job.company_name}}</span>
+												<h5 class="card-title">{{job.job_title}}</h5>
+												<span class="card__local">
+													{{job.city_name}}
+												</span>
+
+												<p class="card__published w-100">{{fromNow(job.created_at)}}</p>
+												<button class="btn btn-xs btn-outline-primary" @click.prevent="$router.push('/vagas/' + job.job_id)">Ver detalhes</button>
+											</div>
+										</div>
+									</div>
+									<div class="col-12 col-lg-6 d-flex flex-wrap align-items-end text-left">
+										<h2 class="h6 w-100 mb-0"><b>Complete seu perfil para a vaga!</b></h2>
+										<p class="small">Para se candidatar a uma vaga você precisa preencher o seu cadastro até o nível <b>Intermediário</b> . </p>
+										<p class="small">Quanto mais informações no seu perfil, maiores são as chances do selecionador chamá-lo para uma entrevista.</p>
+										<button @click.prevent="applyToJob()" class="btn btn-sm my-2" :class="{'btn-outline-disabled': profile_completion < 60, 'btn-primary': profile_completion >= 60}" :disabled="profile_completion < 60">Candidatar-se agora</button>
+									</div>
+								</div>
+							</div>
+
+							<div class="profile-bar__tip">
+								<el-tooltip content="Clique e veja todos os itens que podem ser adicionados em seu perfil." placement="bottom">
+									<a href="javascript:void(0);" class="small" @click="toggleEdit()">
+										<template v-if="switches.helpProfile">
+											<font-awesome-icon :icon="['fas', 'toggle-on']" size="lg" />
+											Ocultar
+										</template>
+										<template v-else>
+											<font-awesome-icon :icon="['fas', 'toggle-off']" size="lg" />
+											Mostrar
+										</template>
+
+										Ajuda de Preenchimento
+									</a>
+								</el-tooltip>
+							</div>
+						</div>
+
+						<div
+							:class="isCurrentUser() && isEditing == false && $store.state.localStorage.currentUser.profile_completion <= 10 ? '' : 'closed'"
+							class="card card--animate bg-lighter mt-5"
+						>
+							<div class="card-body">
+								<h3 class="h3">
+									Boas vindas
+									<b>{{user.name}} {{user.last_name}}</b>!
+								</h3>
+								<p>Agora que você fez seu cadastro no Burh é necessário preencher seus dados abaixo para participar de processos seletivo.s</p>
+								<p>Lembre-se que quanto mais informações você colocar e quanto mais elas forem detalhadas, maiores são suas chances de contratação.</p>
+								<p>Portanto, capriche em seu perfil e, para fechar com chave de ouro, adicione uma foto e uma imagem de capa - afinal, isso demonstra sua preocupação com os detalhes.</p>
+								<button
+									class="btn btn-primary btn-auto"
+									@click="toggleEdit()"
+								>Preencha agora seu perfil</button>
+							</div>
+						</div>
+
+						<div
+							class="box-zone"
+							:class="{
+								'box-zone--edit': isCurrentUser()
+							}"
+							v-if="user.complementary_information != null && user.complementary_information.about != null && user.complementary_information.about.trim() != '' || isEditing == true"
+						>
+							<h2 class="h2">
+								Sobre
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link"
+									@click="openModal('about', user.complementary_information.about)"
+								>
+									<font-awesome-icon :icon="['fas', 'pen']" />
+								</button>
+							</h2>
+							<div
+								class="p-4 bg-lightest"
+								v-if="isEditing == true && user.complementary_information.about == null || user.complementary_information.about.trim() == ''"
+							>
+								<p>Conte-nos um pouco sobre você. Pode ser um texto curtinho, explicando o que você faz ou procura - não precisa ser uma super apresentação. Veja o exemplo:</p>
+								<p class="mb-0">
+									<i>Eu sou a Fran. Trabalho com atendimento e satisfação do cliente. Gosto muito da área de humanas e sou formada em Comunicação Social. Acredito que meu trabalho pode modificar o mundo e direciono com o lema "não basta trabalhar, é preciso ser agende de mudanças positivas".</i>
+								</p>
+								<button
+									class="btn btn-link btn-sm px-0 w-auto mb-0"
+									@click="openModal('about', user.complementary_information.about)"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar descrição
+								</button>
+							</div>
+							<pre class="default-text default-text--pre">{{user.complementary_information.about}}</pre>
+						</div>
+						<div
+							class="box-zone"
+							:class="{
+								'box-zone--edit': isCurrentUser()
+							}"
+							v-if="user.experience != null && user.experience.length > 0 || isEditing == true"
+						>
+							<h2 class="h2">
+								Experiência Profissional
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link"
+									@click="openModal('experience')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar
+								</button>
+							</h2>
+							<div class="p-4 bg-lightest" v-if="isEditing == true && user.experience.length == 0">
+								<p
+									class="mb-0"
+								>Adicione as suas experiências de trabalho. Pode ser estágio, trabalhos temporários e até mesmo projetos PJ que você ache relavantes. Esse é o espaço para você falar sobre itens que formaram sua carreira até o momento.</p>
+								<button
+									class="btn btn-link btn-sm px-0 w-auto mb-0"
+									@click="openModal('experience')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar Experiência
+								</button>
+							</div>
+							<div
+								:class="{'box-profile--edit': isCurrentUser()}"
+								class="box-profile"
+								v-for="(job, index) in sortUserExperience()"
+								v-bind:key="index"
+								@click="isCurrentUser() ? openModal('experience', job, index) : ''"
+							>
+								<div class="box-profile__header">
+									<h3 class="h3">
+										{{job.job_title}}
+										<button
+											v-if="isCurrentUser()"
+											class="btn btn-link"
+										>
+											<font-awesome-icon :icon="['fas', 'pen']" />
+										</button>
+									</h3>
+									<p>{{job.company}} - {{job.location}}</p>
+									<p class="small">
+										{{formatNumberDate(job.start_month, job.start_year)}} {{job.end_month != null && job.end_year != null ? ' - '+ formatNumberDate(job.end_month, job.end_year) : '' }}
+										<template v-if="job.current == 1">(emprego atual)</template>
+									</p>
+								</div>
+								<div
+									class="box-profile__body"
+									v-if="job.description != null && job.description != ''"
+								>
+									<p>{{job.description}}</p>
+								</div>
+							</div>
+						</div>
+						<div
+							class="box-zone"
+							:class="{
+								'box-zone--edit': isCurrentUser()
+							}"
+							v-if="user.education != null && user.education.length > 0 || isEditing == true"
+						>
+							<h2 class="h2">
+								Educação
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link"
+									@click="openModal('education')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar
+								</button>
+							</h2>
+							<div class="p-4 bg-lightest" v-if="isEditing == true && user.education.length == 0">
+								<p>Coloque suas formações acadêmicas aqui.</p>
+								<p class="mb-0">
+									<b>Dica:</b> insira as formações mais altas e coloque cursos superiores adicionais. Deixe cursos extras para o item "Cursos Profissionalizantes".
+								</p>
+								<button
+									class="btn btn-link btn-sm px-0 w-auto mb-0"
+									@click="openModal('education')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar Formação
+								</button>
+							</div>
+							<div
+								:class="{'box-profile--edit': isCurrentUser()}"
+								class="box-profile"
+								v-for="(education, index) in sortUserEducation()"
+								v-bind:key="index"
+								@click="isCurrentUser() ? openModal('education', education, index) : ''"
+							>
+								<div class="box-profile__header">
+									<h3 class="h3">
+										{{education.formation}}
+										<button
+											v-if="isCurrentUser()"
+											class="btn btn-link"
+										>
+											<font-awesome-icon :icon="['fas', 'pen']" />
+										</button>
+									</h3>
+									<p>{{education.institution}} - {{education.location}}</p>
+									<p>
+										{{formatNumberDate(education.start_month, education.start_year)}}
+										<template
+											v-if="education.end_year == null"
+										>(estudando)</template>
+										<template
+											v-if="education.end_year != null"
+										>- {{formatNumberDate(education.end_month, education.end_year)}}</template>
+									</p>
+								</div>
+							</div>
+						</div>
+						<div
+							class="box-zone"
+							:class="{
+								'box-zone--edit': isCurrentUser()
+							}"
+							v-if="user.course != null && user.course.length > 0 || isEditing == true"
+						>
+							<h2 class="h2">
+								Cursos e Certificados
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link"
+									@click="openModal('courses')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" />Adicionar
+								</button>
+							</h2>
+							<div class="p-4 bg-lightest" v-if="isEditing == true && user.course.length == 0">
+								<p
+									class="mb-0"
+								>Coloque outros cursos que você realizou e são extra-curriculares. Coloque aqui formações como "Libras", "Curso Extensivo para Metrologia", etc.</p>
+								<button class="btn btn-link btn-sm px-0 w-auto mb-0" @click="openModal('courses')">
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar Curso ou Certificado
+								</button>
+							</div>
+							<div
+								:class="{'box-profile--edit': isCurrentUser()}"
+								class="box-profile"
+								v-for="(course, index) in sortUserCourse()"
+								v-bind:key="index"
+								@click="isCurrentUser() ? openModal('courses', course, index) : ''"
+							>
+								<div class="box-profile__header">
+									<h3 class="h3">
+										{{course.name}}
+										<button
+											v-if="isCurrentUser()"
+											class="btn btn-link"
+										>
+											<font-awesome-icon :icon="['fas', 'pen']" />
+										</button>
+									</h3>
+									<p>{{course.institution}}</p>
+									<p>
+										<template
+											v-if="formatNumberDate(course.start_month, course.start_year) != null"
+										>
+											{{formatNumberDate(course.start_month, course.start_year)}}
+											<template
+												v-if="course.period != null && course.period > 0 && course.current == 0"
+											>({{course.period}} horas)</template>
+										</template>
+
+										<template
+											v-if="formatNumberDate(course.start_month, course.start_year) == null"
+										>{{course.period}} horas</template>
+
+										<template v-if="course.current == 1">(estudando)</template>
+										<template
+											v-if="course.current == 0 && formatNumberDate(course.end_month, course.end_year) != null && formatNumberDate(course.start_month, course.start_year) != null"
+										>até {{formatNumberDate(course.end_month, course.end_year)}}</template>
+									</p>
+								</div>
+							</div>
+						</div>
+						<div
+							class="box-zone"
+							:class="{
+								'box-zone--edit': isCurrentUser()
+							}"
+							v-if="user.skill != null && user.skill.length > 0 || isEditing == true"
+						>
+							<h2 class="h2">
+								Habilidades
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link"
+									@click="openModal('skills')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar
+								</button>
+							</h2>
+							<div class="p-4 bg-lightest" v-if="isEditing == true && user.skill.length == 0" @click="openModal('skills')">
+								<p
+									class="mb-0"
+								>Adicione habilidades que você acha relevantes. Podem ser itens relacionados a especificações de cargo, habilidades humanas ou resumos de certificados.</p>
+								<button class="btn btn-link btn-sm px-0 w-auto mb-0">
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar Habilidades
+								</button>
+							</div>
+							<ul class="list-inline">
+								<li
+									class="list-inline-item"
+									v-for="(skill, index) in user.skill"
+									v-bind:key="index"
+								>
+									<button
+										class="tag tag-outline-default"
+										:class="{
+											'tag-static': !isCurrentUser()
+										}"
+									>
+										{{skill.name}}
+										<font-awesome-icon
+											:icon="['fas', 'trash']"
+											@click="deleteSkill(skill.skill_id, index, skill.name)"
+										/>
+									</button>
+								</li>
+							</ul>
+						</div>
+						<div
+							class="box-zone"
+							:class="{
+								'box-zone--edit': isCurrentUser()
+							}"
+							v-if="user.language != null && user.language.length > 0 || isEditing == true"
+						>
+							<h2 class="h2">
+								Idiomas
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link"
+									@click="openModal('languages')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar
+								</button>
+							</h2>
+							<div class="p-4 bg-lightest" v-if="isEditing == true && user.language.length == 0">
+								<p class="mb-0">
+									Insira aqui os idiomas que você tem proeficiência, mas evite colocar seu idioma nativo se você está morando no país.
+									<b>Exemplo:</b> Evite colocar
+									<em>Português - Fluente</em>.
+								</p>
+								<button
+									class="btn btn-link btn-sm px-0 w-auto mb-0"
+									@click="openModal('languages')"
+								>
+									<font-awesome-icon :icon="['fas', 'plus']" /> Adicionar Curso ou Certificado
+								</button>
+							</div>
+							<div class="row">
+								<div
+									class="col-12 col-sm-6"
+									v-for="(language, index) in user.language"
+									v-bind:key="index"
+								>
+									<div class="box-image mb-4" :class="{'box-image--edit': isCurrentUser()}"
+										@click="isCurrentUser() ? openModal('languages', language, index) : '' ">
+										<div class="box-image__brand avatar avatar-md rounded-circle">
+											<span
+												class="flag-icon flag-icon-squared"
+												:class="textToFlagClass(language.language)"
+											></span>
+										</div>
+										<div class="box-image__description">
+											<h3 class="h3">
+												{{language.language}}
+												<button
+													v-if="isCurrentUser()"
+													class="btn btn-link"
+													@click="openModal('languages', language, index)"
+												>
+													<font-awesome-icon :icon="['fas', 'pen']" />
+												</button>
+											</h3>
+											<p>{{languageLevel(language.level)}}</p>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-4 col-lg-3 offset-md-1 offset-lg-1">
+						<div class="box-zone">
+							<h2 class="h2">Comunidade</h2>
+							<div class="row box-zone__community">
+								<div class="col-3 col-lg-6">
+									<strong>{{user.social.following}}</strong>
+									seguindo
+								</div>
+								<div class="col-3 col-lg-6">
+									<strong>{{user.social.followers}}</strong>
+									seguidores
+								</div>
+							</div>
+						</div>
+						<div class="box-zone">
+							<h2 class="h2">Links
+								<button
+									v-if="isCurrentUser()"
+									class="btn btn-link pl-1 pr-1 my-0 py-0"
+									style="min-width: 40px"
+									@click="openModal('links', modalLinksData())"
+								>
+									<font-awesome-icon :icon="['fas', 'pen']" />
+								</button>
+							</h2>
+							<ul class="list-unstyled">
+								<li
+									class="pb-3"
+									v-if="user.complementary_information != null && user.complementary_information.twitter_url != null"
+								>
+									<a :href="user.complementary_information.twitter_url" target="_blank">
+										<i class="fab fa-twitter"></i>
+										Twitter
+									</a>
+								</li>
+								<li
+									class="pb-3"
+									v-if="user.complementary_information != null && user.complementary_information.facebook_url != null"
+								>
+									<a :href="user.complementary_information.facebook_url" target="_blank">
+										<i class="fab fa-facebook"></i> Facebook
+									</a>
+								</li>
+								<li
+									class="pb-3"
+									v-if="user.complementary_information != null && user.complementary_information.linkedin_url != null"
+								>
+									<a :href="user.complementary_information.linkedin_url" target="_blank">
+										<i class="fab fa-linkedin"></i> Linkedin
+									</a>
+								</li>
+								<li
+									class="pb-3"
+									v-if="user.complementary_information != null && user.complementary_information.website != null"
+								>
+									<a :href="user.complementary_information.website" target="_blank">
+										<i class="fas fa-globe"></i> Website
+									</a>
+								</li>
+							</ul>
+							<div class="qr-code">
+								<qrcode
+									:value="baseUrl + '/' + $route.params.id"
+									:options="{ width: 128, height: 128 }"
+									class="border"
+								></qrcode>
+								<h3 class="h3">Código BURH</h3>
+								<p>
+									<strong>{{user.user_id}}</strong>
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<share-modal :show="modals" :url="linkShare" />
+
+			<burh-modals
+				:render="['name', 'about','experience','education','courses','skills','languages','information', 'links', 'address', 'phone']"
+				:active="activeModal"
+				:data="userData"
+				:index="index"
+				v-on:modal-close="clearActive($event)"
+				v-on:updatedOtherInformations="setUpdatedOtherInformations($event)"
+				v-on:updatedLinks="setUserLinks($event)"
+				v-on:updateName="user.name = $event"
+				v-on:updateLastName="user.last_name = $event"
+				v-on:updateAbout="user.complementary_information.about = $event"
+				v-on:addExperience="user.experience.unshift($event)"
+				v-on:updateExperience="user.experience[$event.index] = $event"
+				v-on:deleteExperiences="deleteThisExperience($event.index)"
+				v-on:addEducation="user.education.unshift($event)"
+				v-on:updateEducation="user.education[$event.index] = $event"
+				v-on:deleteEducations="deleteThisEducation($event.index)"
+				v-on:addCourses="user.course.unshift($event)"
+				v-on:updateCourses="user.course[$event.index] = $event"
+				v-on:deleteCourses="deleteThisCourse($event.index)"
+				v-on:addSkill="user.skill.unshift($event)"
+				v-on:addLanguages="user.language.unshift($event)"
+				v-on:updateLanguages="user.language[$event.index] = $event"
+				v-on:deleteLanguage="deleteLanguage($event.index)"
+				v-on:updateUserInfo="updateUserInfo()"
+			></burh-modals>
+
+			<crop
+				v-if="fileImageBase64 != null"
+				:show="modals.crop"
+				:type="cropType"
+				:file="fileImageBase64"
+				v-on:cancel="fileImageBase64 = null; modals.crop = false"
+				v-on:image-cropped="onImageCropped($event)"
+			></crop>
+		</client-only>
+	</div>
+</template>
+<script>
+// import { isMobile, isMobileOnly } from 'mobile-device-detect';
+import { isMobileOnly } from 'mobile-device-detect';
+import ProfileHeader from '~/components/burh-ds/Headings/ProfileHeader.vue';
+import { Crop } from '~/components/burh-ds';
+import https from 'https';
+import BurhModals from '@/pages/burh/modals/modals';
+import ShareModal from '~/components/burh-ds/Modals/ShareModal.vue';
+import swal from 'sweetalert2';
+import Basics from '~/components/burh-ds/Loadings/Basics.vue';
+
+import { textToFlagClass } from '~/util/common';
+
+import moment from 'moment';
+import 'moment/locale/pt-br';
+
+import heic2any from 'heic2any';
+
+export default {
+	layout: 'BurhUserLayout',
+	name: 'user-profile',
+	components: {
+		ProfileHeader,
+		Crop,
+		BurhModals,
+		ShareModal,
+		Basics
+	},
+	props: ['userProfile'],
+	watch: {
+		'$store.state.localStorage.currentUser'() {
+			if (this.$store.state.localStorage.currentUser == null) {
+				if (!this.isCurrentUser() && this.user.private) {
+					this.$router.push('/');
+				}
+			}
+		}
+	},
+	data() {
+		return {
+			console: console,
+			modals: {
+				crop: false,
+				modal0: false
+			},
+			isBig: false,
+			isActive: false,
+			isEditing: false,
+			isMobileOnlyWatch: isMobileOnly,
+			baseUrl: process.env.baseAppUrl,
+			fileImageBase64: null,
+			avatarPercentCompleted: null,
+			coverPercentCompleted: null,
+			cropType: 'avatar',
+			activeModal: '',
+			userData: null,
+			index: null,
+			linkShare: null,
+			profile_completion: 0,
+			job: null,
+			user: this.userProfile,
+			switches: {
+				helpProfile: false
+			},
+			loading: false
+		};
+	},
+	head() {
+		if (this.user != null) {
+
+			let meta = [];
+			if(this.user.complementary_information.about != null && this.user.complementary_information.about.trim() != '') {
+				meta.push(
+					{
+						hid: 'description',
+						name: 'description',
+						content: `Conheça ${this.user.name} ${this.user.last_name}. ${this.user.complementary_information.about.substring(0, 140)} `
+					},
+					{
+						hid: 'og:description',
+						name: 'og:description',
+						content: `Conheça ${this.user.name} ${this.user.last_name}. ${this.user.complementary_information.about.substring(0, 140)} `
+					},
+					{
+						hid: 'twitter:description',
+						name: 'twitter:description',
+						content: `Conheça ${this.user.name} ${this.user.last_name}. ${this.user.complementary_information.about.substring(0, 140)} `
+					}
+				);
+			}
+
+			meta.push(
+				{
+					hid: 'og:title',
+					name: 'og:title',
+					content: `${this.user.name} ${this.user.last_name} no Burh`
+				},
+				{
+					hid: 'twitter:title',
+					name: 'twitter:title',
+					content: `${this.user.name} ${this.user.last_name} no Burh`
+				},
+				{
+					hid: 'og:url',
+					name: 'og:url',
+					content: `https://burh.com.br/${this.user.slug}`
+				}
+			);
+
+			return {
+				title: `${this.user.name} ${this.user.last_name} no Burh`,
+				meta: meta
+			};
+		} else {
+			return {
+				//title: "Olalala "
+			};
+		}
+	},
+	methods: {
+
+		async resize(img, type = 'jpeg') {
+			// let max_width
+			const MAX_WIDTH = 1280;
+			const MAX_HEIGHT = 720;
+			const MAX_SIZE = 100000; // 100kb
+
+			const canvas = document.createElement('canvas');
+			const ctx = canvas.getContext('2d');
+
+			ctx.drawImage(img, 0, 0);
+
+			let width = img.width;
+			let height = img.height;
+			let start = 0;
+			let end = 1;
+			let last, accepted, blob;
+
+			// keep portration
+			if (width > height) {
+				if (width > MAX_WIDTH) {
+					height *= MAX_WIDTH / width;
+					width = MAX_WIDTH;
+				}
+			} else {
+				if (height > MAX_HEIGHT) {
+					width *= MAX_HEIGHT / height;
+					height = MAX_HEIGHT;
+				}
+			}
+			canvas.width = width;
+			canvas.height = height;
+
+			ctx.drawImage(img, 0, 0, width, height);
+
+			accepted = blob = await new Promise(rs => canvas.toBlob(rs, 'image/'+type, 1));
+
+			if (blob.size < MAX_SIZE) {
+
+				return blob;
+			} else {
+
+			}
+
+			// Binary search for the right size
+			while (true) {
+				const mid = Math.round( ((start + end) / 2) * 100 ) / 100;
+				if (mid === last) break;
+				last = mid;
+				blob = await new Promise(rs => canvas.toBlob(rs, 'image/'+type, mid));
+
+				if (blob.size > MAX_SIZE) { end = mid; }
+				if (blob.size < MAX_SIZE) { start = mid; accepted = blob; }
+			}
+
+			return accepted;
+		},
+		b64toBlob (b64Data, contentType='', sliceSize=512) {
+
+			// var byteString = atob(b64Data.split(',')[1]);
+			const byteCharacters = atob(b64Data.split(',')[1]);
+			const byteArrays = [];
+
+			for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+				const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+				const byteNumbers = new Array(slice.length);
+				for (let i = 0; i < slice.length; i++) {
+					byteNumbers[i] = slice.charCodeAt(i);
+				}
+
+				const byteArray = new Uint8Array(byteNumbers);
+				byteArrays.push(byteArray);
+			}
+
+			const blob = new Blob(byteArrays, { type: contentType });
+			return blob;
+		},
+		sortUserCourse(){
+			return this.procedureSortInformation(this.user.course);
+		},
+
+		sortUserExperience(){
+			return this.procedureSortInformation(this.user.experience);
+		},
+
+		sortUserEducation() {
+			return this.procedureSortInformation(this.user.education);
+		},
+
+		procedureSortInformation(value){
+			if(value == null || value == '' || value == undefined){
+				return;
+			}
+
+			let arrRetuned = [];
+
+			let isHappening = value.filter(e => e.current == 1);
+			let isFinished = value.filter(e => e.current == 0);
+
+			let auxElement, auxIndex;
+			isHappening.forEach((element, index, arr) => {
+
+				for(let i = index; i < arr.length; i++){
+					if (index == i ) {
+						auxElement = arr[i];
+						auxIndex = i;
+					}else {
+						if (arr[i].start_year >= auxElement.start_year) { // more than or equal
+							if (arr[i].start_year > auxElement.start_year) { // only more than
+								auxElement = arr[i];
+								auxIndex = i;
+							} else if (arr[i].start_month >= auxElement.start_month) { // if equal compare months
+								auxElement = arr[i];
+								auxIndex = i;
+							}
+						}
+					}
+				}
+
+				arr[auxIndex] = element;
+				arrRetuned.push(auxElement);
+				// arr[index] = auxElement;
+
+			});
+
+			isFinished.forEach((element, index, arr) => {
+
+				for(let i = index; i < arr.length; i++){
+					if (index == i ) {
+						auxElement = arr[i];
+						auxIndex = i;
+					}else {
+						if (arr[i].end_year >= auxElement.end_year) { // more than or equal
+							if (arr[i].end_year > auxElement.end_year) { // only more than
+								auxElement = arr[i];
+								auxIndex = i;
+							} else if (arr[i].end_month >= auxElement.end_month) { // if equal compare months
+								auxElement = arr[i];
+								auxIndex = i;
+							}
+						}
+					}
+				}
+
+				arr[auxIndex] = element;
+				arrRetuned.push(auxElement);
+				// arr[index] = auxElement;
+
+			});
+
+			return arrRetuned;
+
+		},
+		async removeUserImage(type){
+
+			let obj = {
+				title: type == 'avatar' ? 'perfil' : 'capa',
+				description: type == 'avatar' ? 'sua foto de perfil.' : 'sua imagem de capa'
+			};
+
+			swal
+				.fire({
+					title: `<span class="text-danger">Remover Imagem de ${obj.title}</span>`,
+					html: `Você tem certeza que deseja excluir ${obj.description}`,
+					buttonsStyling: false,
+					confirmButtonClass: ' btn btn-danger btn-fill',
+					confirmButtonText: 'Sim, Remover',
+					showCancelButton: true,
+					cancelButtonText: 'Cancelar',
+					cancelButtonClass: 'btn btn-outline-default btn-fill',
+					reverseButtons: true
+				})
+				.then(async result => {
+					if (result.value) {
+						let url;
+
+						if(type == 'avatar'){
+							url = process.env.routes.api.user.removeUserAvatar;
+							this.user.avatar = null;
+						}
+
+						if(type == 'banner'){
+							url = process.env.routes.api.user.removeUserBanner;
+							this.user.cover = null;
+						}
+
+						await this.$axios.delete(url, {
+							headers: {
+								Authorization: `Bearer ${this.$store.state.localStorage.token}`
+							}
+						});
+
+						this.updateUserInfo();
+					}
+				});
+		},
+
+		async applyToJob() {
+
+			if(this.$store.state.localStorage.currentUser.profile_completion >= 60) {
+				if (this.job.handicapped == true && this.$store.state.localStorage.currentUser.deficiency.id == 0) {
+					swal.fire({
+						title: 'Vaga exclusiva para PCD',
+						html: 'Essa é uma oportunidade exclusiva para pcd, para se candidatar é necessario informar uma deficiência.',
+						buttonsStyling: false,
+						confirmButtonClass: ' btn btn-primary btn-fill',
+						showCancelButton: true,
+						confirmButtonText: 'Editar perfil',
+						cancelButtonText: 'Cancelar',
+						cancelButtonClass: 'btn btn-outline-default btn-fill',
+						reverseButtons: true
+					});
+				} else {
+					let obj = {
+						data:{
+							job_id: this.job.job_id,
+							user_id: this.$store.state.localStorage.currentUser.user_id
+						}
+					};
+
+					let { data } = await this.$axios.post(process.env.routes.api.user.applyToJob, obj, {
+						headers: {
+							Authorization: `Bearer ${this.$store.state.localStorage.token}`
+						}
+					});
+
+					swal.fire({
+						title: `${!this.job.applied ? 'Inscrição realizada com sucesso' : 'Você saiu dessa vaga'}`,
+						buttonsStyling: false,
+						confirmButtonClass: 'btn btn-primary btn-fill'
+					});
+
+					this.job.applied = !this.job.applied;
+					let href = window.location.href;
+					let newHREF = href.replace(window.location.search, '');
+					window.history.replaceState({}, document.title, newHREF);
+					let id = this.job.job_id;
+					this.job = null;
+					this.$router.push('/vagas/' + id);
+				}
+			}
+		},
+		fromNow(date, format = 'YYYY-MM-DD HH:mm:ss') {
+			return date != null ? moment(date, format).locale('pt-BR').fromNow() : null;
+		},
+		textToFlagClass: textToFlagClass,
+		async updateUserInfo() {
+			let objUser = await this.$getUser(this.$store.state.localStorage.token);
+			this.$store.commit('localStorage/setUser', objUser.data.user);
+			this.profile_completion = objUser.data.user.profile_completion;
+		},
+		onShareUserProfile() {
+			this.linkShare = process.env.baseAppUrl + '/' + this.$route.params.userSlug;
+			this.modals.modal0 = true;
+		},
+		async onDownloadProfile() {
+			let downloadCv = await this.$axios.get(
+				process.env.routes.api.user.getProfilePdf
+					.replace(':company_id', 22845207)
+					.replace(':user_id', this.user.user_id),
+				{
+					headers: {
+						Authorization: `Bearer ${this.$store.state.localStorage.token}`
+					},
+					responseType: 'blob'
+				}
+			);
+			const url = window.URL.createObjectURL(new Blob([downloadCv.data]));
+			const link = document.createElement('a');
+			link.href = url;
+			link.setAttribute('download', this.user.name + '.pdf'); //or any other extension
+			document.body.appendChild(link);
+			link.click();
+			link.remove();
+			window.URL.revokeObjectURL(url);
+		},
+		setUserLinks(data){
+			if (data.linkedin_url != null){
+				this.user.complementary_information.linkedin_url = !data.linkedin_url ? null : data.linkedin_url;
+			}
+
+			if (data.facebook_url != null) {
+				this.user.complementary_information.facebook_url = !data.facebook_url ? null : data.facebook_url;
+			}
+
+			if (data.twitter_url != null){
+				this.user.complementary_information.twitter_url = !data.twitter_url ? null : data.twitter_url;
+			}
+
+			if (data.website != null){
+				this.user.complementary_information.website = !data.website ? null : data.website;
+			}
+
+		},
+		setUpdatedOtherInformations(data) {
+			if (data.address != null) {
+				this.user.address = data.address;
+			}
+
+			if (data.deficiency != null) {
+				this.user.deficiency = data.deficiency;
+			}
+
+			if (data.desired_job != null) {
+				this.user.desired_job = data.desired_job;
+			}
+
+			if (data.name != null && data.last_name != null) {
+				this.user.name = data.name;
+				this.user.last_name = data.last_name;
+			}
+
+			if (data.wage_pretension != null) {
+				this.user.complementary_information.wage_pretension =
+          data.wage_pretension;
+			}
+
+			if (data.cellphone != null) {
+				if (this.user.contact != null && this.user.contact.length > 0) {
+					this.user.contact[0].cellphone = data.cellphone == false ? null : data.cellphone;
+				} else {
+					this.user.contact = [{ phone: null, cellphone: data.cellphone == false ? null : data.cellphone }];
+				}
+			}
+
+			if (data.phone != null) {
+				if (this.user.contact != null && this.user.contact.length > 0) {
+					this.user.contact[0].phone = data.phone == false ? null : data.phone;
+				} else {
+					this.user.contact = [{ phone: data.phone == false ? null : data.phone, cellphone: null }];
+				}
+			}
+
+			if(data.birthday != null) {
+				this.user.complementary_information.birth = data.birthday;
+			}
+
+			if(data.gender != null) {
+				this.user.complementary_information.gender = data.gender;
+			}
+
+		},
+		setNewValue: function(object, value) {
+			let userEducation = object.filter(obj => {
+				return obj.education_id == value.education_id ? obj : null;
+			});
+
+			this.user.complementary_information.about = $event;
+		},
+
+		toggleActive: function() {
+			this.isActive = !this.isActive;
+		},
+		toggleEdit: function() {
+			this.isEditing = !this.isEditing;
+			this.switches.helpProfile = !this.switches.helpProfile;
+		},
+
+		isCurrentUser() {
+			return (
+				this.$store.state.localStorage.currentUser != null &&
+                this.$store.state.localStorage.currentUser.slug ==
+                this.$route.params.userSlug &&
+                this.$store.state.localStorage.currentCompany == null
+			);
+		},
+		toBase64: file =>
+			new Promise((resolve, reject) => {
+
+				const reader = new FileReader();
+				reader.readAsDataURL(file);
+				reader.onload = () => resolve(reader.result);
+				reader.onerror = error => reject(error);
+			}),
+		async onImageCropped(event) {
+			if (this.cropType == 'avatar') {
+				await this.saveAvatar(event);
+			} else {
+				await this.saveCover(event);
+			}
+		},
+		async saveCover(event) {
+			this.modals.crop = false;
+
+			// Rota para salvar o cover com crop
+			let routeCropped = process.env.routes.api.user.saveCover.replace(
+				':userId',
+				this.user.user_id
+			);
+			routeCropped = routeCropped.replace(':size', '2048');
+
+			this.coverPercentCompleted = 0;
+
+			// Requisização para salvar o cover com crop
+			let { data } = await this.$axios.post(routeCropped, event.croppedFile, {
+				onUploadProgress: progressEvent => {
+					this.coverPercentCompleted =
+            Math.floor((progressEvent.loaded * 100) / progressEvent.total) / 2;
+				}
+			});
+
+			// Rota para salvar o cover original
+			let routeOriginal = process.env.routes.api.user.saveCover.replace(
+				':userId',
+				this.user.user_id
+			);
+			routeOriginal = routeOriginal.replace(':size', '');
+			routeOriginal = routeOriginal + '?name=' + data.data.replace('2048/', '');
+
+			// Requisição para salvar o cover original
+			await this.$axios.post(routeOriginal, event.originalFile, {
+				onUploadProgress: progressEvent => {
+					this.coverPercentCompleted +=
+            Math.floor((progressEvent.loaded * 100) / progressEvent.total) / 2;
+				}
+			});
+
+			this.coverPercentCompleted = null;
+
+			this.user.cover = event.croppedBase64;
+			this.updateUserInfo();
+		},
+		async calculateImageSize(base64String) {
+			let padding, inBytes, base64StringLength;
+			if(base64String.endsWith('==')) padding = 2;
+			else if (base64String.endsWith('=')) padding = 1;
+			else padding = 0;
+
+			base64StringLength = base64String.length;
+			//
+			inBytes =(base64StringLength / 4 ) * 3 - padding;
+			//
+			this.kbytes = inBytes / 1000;
+			return this.kbytes;
+		},
+		async uploadCroppedAvatar(event) {
+			let routeCropped = process.env.routes.api.user.saveAvatar.replace(
+				':userId',
+				this.user.user_id
+			);
+			routeCropped = routeCropped.replace(':size', '200');
+
+			this.avatarPercentCompleted = 0;
+
+			let { data } = await this.$axios.post(routeCropped, event.croppedFile, {
+				onUploadProgress: progressEvent => {
+					this.avatarPercentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total) / 2;
+				}
+			});
+
+			return data;
+		},
+		async uploadOriginalAvatar(event, data, blob) {
+			let routeOriginal = process.env.routes.api.user.saveAvatar.replace(
+				':userId',
+				this.user.user_id
+			);
+			routeOriginal = routeOriginal.replace(':size', '');
+			routeOriginal = routeOriginal + '?name=' + data.data.replace('200/', '');
+
+			let formData = new FormData();
+			formData.append('blob', blob, data.data.replace('200/', ''));
+
+			await this.$axios.post(routeOriginal, formData, {
+				onUploadProgress: progressEvent => {
+					this.avatarPercentCompleted += Math.floor((progressEvent.loaded * 100) / progressEvent.total) / 2;
+				}
+			});
+		},
+		async saveAvatar(event) {
+			let resizedImage;
+			this.modals.crop = false;
+
+			const blob = await this.b64toBlob(event.originalBase64);
+
+			const img = new Image();
+			img.src = URL.createObjectURL(blob);
+
+			img.onload = () => this.resize(img, 'jpeg').then(async blob => {
+				resizedImage = blob;
+				let data = await this.uploadCroppedAvatar(event);
+				await this.uploadOriginalAvatar(event, data, resizedImage);
+
+				this.avatarPercentCompleted = null;
+
+				this.user.avatar = event.croppedBase64;
+				let user = this.$store.state.localStorage.currentUser;
+				user.avatar = 'https://burh.s3-sa-east-1.amazonaws.com/' + data.data;
+				this.$store.commit('localStorage/setUser', user);
+				this.updateUserInfo();
+			});
+
+			// ATÉ AQUI PARA REDIMENSIONAR A IMAGEM
+
+			// Rota para salvar o avatar com crop
+			// let routeCropped = process.env.routes.api.user.saveAvatar.replace(
+			// 	':userId',
+			// 	this.user.user_id
+			// );
+			// routeCropped = routeCropped.replace(':size', '200');
+
+			// this.avatarPercentCompleted = 0;
+
+			// // Requisização para salvar o avatar com crop
+			// let { data } = await this.$axios.post(routeCropped, event.croppedFile, {
+			// 	onUploadProgress: progressEvent => {
+			// 		this.avatarPercentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total) / 2;
+			// 	}
+			// });
+
+			// Rota para salvar o avatar original
+			// let routeOriginal = process.env.routes.api.user.saveAvatar.replace(
+			// 	':userId',
+			// 	this.user.user_id
+			// );
+			// routeOriginal = routeOriginal.replace(':size', '');
+			// routeOriginal = routeOriginal + '?name=' + data.data.replace('200/', '');
+
+			// let formData = new FormData();
+			// formData.append('blob', resizedImage, data.data.replace('200/', ''));
+
+			// // Requisição para salvar o avatar original
+
+			//
+			//
+
+			// await this.$axios.post(routeOriginal, event.originalFile, {
+			// 	onUploadProgress: progressEvent => {
+			// 		this.avatarPercentCompleted += Math.floor((progressEvent.loaded * 100) / progressEvent.total) / 2;
+			// 	}
+			// });
+
+		},
+		onAvatarClick() {
+			if (!this.isCurrentUser()) {
+				return;
+			}
+			this.cropType = 'avatar';
+			this.$refs.inputFile.value = null;
+			this.fileImageBase64 = null;
+			this.modals.crop = false;
+			this.$refs.inputFile.click();
+		},
+		onCoverClick() {
+			if (!this.isCurrentUser()) {
+				return;
+			}
+			this.cropType = 'cover';
+			this.$refs.inputFile.value = null;
+			this.fileImageBase64 = null;
+			this.modals.crop = false;
+			this.$refs.inputFile.click();
+		},
+		async onAvatarChange() {
+			let file = this.$refs.inputFile.files[0];
+			this.loading = true;
+			let blob = new Blob([file], { type: file.type });
+			if (file.type == 'image/heic') {
+
+				const convertedFile = await heic2any({
+					blob: blob,
+					type: 'image/jpeg',
+					quality: 0.1
+				});
+				blob = convertedFile;
+
+			}
+
+			this.fileImageBase64 = await this.toBase64(blob);
+			this.loading = false;
+			this.modals.crop = true;
+		},
+		currentJob: function() {
+			if (this.user.experience == null) {
+				return null;
+			}
+
+			let filter = this.user.experience.filter(exp => {
+				return exp.current == 1;
+			});
+
+			if (filter.length <= 0) {
+				return null;
+			} else {
+				return filter[0];
+			}
+		},
+
+		formatNumberDate(month, year) {
+			if (month == 0 && year == 0) {
+				return null;
+			}
+
+			if (month.toString().length == 1) {
+				month = '0' + month;
+			}
+
+			return month + '/' + year;
+		},
+
+		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 '';
+			}
+		},
+
+		openModal(modal, data = null, index) {
+			this.index = index;
+			this.activeModal = modal;
+			this.userData = data;
+			document.body.classList.add('modal-open');
+			document.body.classList.add('no-scroll');
+		},
+
+		async deleteSkill(skillId, skill, name) {
+			swal
+				.fire({
+					title: '<span class="text-danger">Remover Habilidade</span>',
+					html: `Você tem certeza que deseja excluir a habilidade <b class="d-block border-radius bg-lighter mt-4 p-3 big">${name}</b>`,
+					buttonsStyling: false,
+					confirmButtonClass: ' btn btn-danger btn-fill',
+					confirmButtonText: 'Sim, Remover',
+					showCancelButton: true,
+					cancelButtonText: 'Cancelar',
+					cancelButtonClass: 'btn btn-outline-default btn-fill',
+					reverseButtons: true
+				})
+				.then(async result => {
+					if (result.value) {
+						let response = await this.$axios.delete(
+							process.env.routes.api.user.deleteSkill.replace(
+								':skillId',
+								skillId
+							),
+							{
+								headers: {
+									'Content-Type': 'application/json',
+									Authorization: `Bearer ${this.$store.state.localStorage.token}`
+								},
+								httpsAgent: new https.Agent({
+									rejectUnauthorized: false
+								})
+							}
+						);
+
+						if (response.data.error == false) {
+							this.user.skill.splice(skill, 1);
+						}
+					}
+				});
+		},
+
+		deleteLanguage(index) {
+			this.user.language.splice(index, 1);
+			this.updateUserInfo();
+		},
+
+		deleteThisCourse(index) {
+			this.user.course.splice(index, 1);
+			this.updateUserInfo();
+		},
+
+		deleteThisEducation(index) {
+			this.user.education.splice(index, 1);
+			this.updateUserInfo();
+		},
+		deleteThisExperience(index) {
+			this.user.experience.splice(index, 1);
+			this.updateUserInfo();
+		},
+
+		clearActive() {
+			this.activeModal = '';
+			this.userData = null;
+			document.body.classList.remove('no-scroll');
+			document.body.classList.remove('modal-open');
+			document.getElementsByTagName('html')[0].classList.remove('modal-open');
+		},
+
+		modalInformationData() {
+			let data = {
+				name: this.user.name + ' ' + this.user.last_name,
+				wage_pretension: this.user.complementary_information.wage_pretension,
+				cellphone: this.user.contact != null && this.user.contact.length
+					? this.user.contact[0].cellphone
+					: null,
+				phone: this.user.contact != null && this.user.contact.length
+					? this.user.contact[0].phone
+					: null,
+				address: this.user.address,
+				deficiency: this.user.deficiency,
+				desired_job: this.user.desired_job,
+				date_of_birth: this.user.complementary_information.birth,
+				gender: this.user.complementary_information.gender
+			};
+
+			return data;
+		},
+		modalLinksData() {
+			let data = {
+				linkedin: this.user.complementary_information.linkedin_url,
+				facebook: this.user.complementary_information.facebook_url,
+				twitter: this.user.complementary_information.twitter_url,
+				website: this.user.complementary_information.website,
+			};
+
+			return data;
+		},
+	},
+	mounted() {
+
+		if (this.isCurrentUser()) {
+			this.profile_completion = this.$store.state.localStorage.currentUser.profile_completion;
+		}
+		if (!this.isCurrentUser() && this.user.private) {
+			return this.$router.push('/');
+		}
+
+		if(this.$route.query.job_id != null && this.isCurrentUser()) {
+			this.job = this.$route.query;
+		}
+
+	},
+	computed: {
+		isUserHasPhoneNumber() {
+			if (this.$store.state.localStorage.currentUser == null || this.$store.state.localStorage.currentUser.contact == null) {
+				return;
+			}
+
+			if (this.$store.state.localStorage.currentUser.contact.cellphone != null) {
+				return true;
+			}
+
+			return false;
+		},
+
+		isUserHasAddress() {
+			if (this.$store.state.localStorage.currentUser == null) {
+				return;
+			}
+
+			if (this.$store.state.localStorage.currentUser.profile_pendencies != null && this.$store.state.localStorage.currentUser.profile_pendencies.includes('Endereço')) {
+				return false;
+			}
+
+			return true;
+		},
+
+		loaded() {
+			return (
+				this.$store.state.localStorage.currentUser != undefined ||
+                this.$store.state.localStorage.currentUser == null
+			);
+		},
+		applyingToJob() {
+			return (
+				this.$route.query.job_id != null &&
+                this.$route.query.company_name != null &&
+                this.$route.query.job_title != null &&
+                this.$route.query.created_at != null &&
+                this.$route.query.city_name != null
+			);
+		}
+	}
+};
+</script>
+<style lang="scss">
+@import "~bootstrap/scss/functions.scss";
+@import "~bootstrap/scss/mixins.scss";
+@import "assets/sass/burh-ds/variables.scss";
+@import "assets/sass/burh-ds/variables/_colors.scss";
+
+#profilePageContent {
+  min-height: 100vh;
+  padding-top: calc(#{$avatar-size} * 2.5) !important;
+
+  @media (min-width:  map-get($grid-breakpoints, "md")) {
+      padding-top: calc(#{$avatar-size-md} * .8) !important;
+  }
+  @media (min-width:  map-get($grid-breakpoints, "lg")) {
+      padding-top: calc(#{$avatar-size-lg} * .8) !important;
+  }
+  @media (min-width:  map-get($grid-breakpoints, "xl")) {
+      padding-top: calc(#{$avatar-size-xl} * .8) !important;
+  }
+}
+.badge-private {
+  font-size: 10px !important;
+}
+.flag-icon {
+  width: 48px !important;
+  height: 48px !important;
+  border-radius: 50% !important;
+}
+// TODO: Remover da página de profile e por em uma de ícone
+.flag-icon-esperanto {
+  background-image: url("/img/icons/flags/esperanto.svg");
+}
+.subheader__avatar {
+  .avatar-percentage {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 999;
+  }
+}
+.jobs-history {
+  .profile-bar .avatar {
+    position: relative;
+  }
+}
+
+.cover-percentage {
+  position: absolute;
+  z-index: 999;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+  text-shadow: 1px 1px black;
+}
+.card {
+  &--animate {
+    position: relative;
+    top: 0;
+    width: 100%;
+    height: auto;
+    opacity: 1;
+    transform: scale(1);
+    transition: all 0.35s ease-in-out;
+
+    &.closed {
+      top: -50vh;
+      height: 0;
+      opacity: 0;
+      transform: scale(0);
+      transition: all 0.35s ease-in-out;
+      margin: 0 !important;
+    }
+  }
+}
+.helper-fran {
+  &,
+  &.add-fixed {
+    right: 4vw;
+    width: 92vw;
+
+    @include media-breakpoint-up(md) {
+      width: 350px;
+      right: 6vw;
+    }
+    [class^="text"] {
+      margin-right: 0;
+      //float: right;
+    }
+    .helper-fran {
+      &__caller {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: 0 2px 4px #C4C4C4;
+        background-color: $base-light;
+        border-radius: 10rem;
+        padding: .5rem;
+        //color: $base-light;
+
+        min-width: 92vw;
+
+        @include media-breakpoint-up(md) {
+          min-width: 350px;
+        }
+
+        .fran-avatar {
+          width: calc(45px + .5rem);
+
+          @include media-breakpoint-up(md) {
+            width: calc(55px + .5rem);
+            flex: 0 0 calc(55px + .5rem);
+          }
+        }
+        .btn {
+          width: 45px;
+          height: 45px;
+
+          @include media-breakpoint-up(md) {
+            width: 55px;
+            height: 55px;
+          }
+        }
+
+        &__text {
+          flex: 1;
+          text-align: left;
+          font-size: .8rem;
+          padding: 1em;
+        }
+      }
+      &__header {
+        display: flex;
+        flex: calc(75px + .5rem) 1 0;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background-color: $primary;
+        border-radius: .4375rem .4375rem 0 0;
+
+        .fran-avatar {
+          margin-right: .5em;
+        }
+
+        &,
+        &.h4 {
+          color: $base-light !important;
+          font-size: .7rem !important;
+        }
+      }
+    }
+    .dropdown-menu {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+  &.show {
+    .helper-fran {
+      &__caller {
+        box-shadow: 0 0 0 transparent;
+        background-color: transparent;
+        color: transparent;
+
+        .fran-avatar {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+.fran-avatar {
+  display: inline-block;
+  width: 75px;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+
+  &--mini {
+    width: 55px;
+  }
+}
+.dropdown-item {
+  &__icon {
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+
+    &:last-child {
+      float: right;
+    }
+  }
+}
+</style>