ONE PIECE HACKING

Ngiler SH3LL 360
: / home / tbf / membru.tbf.ro / src / components / Pages /

Information Server
MySQL : OFF Perl : OFF CURL : ON WGET : OFF PKEXEC : OFF

Directive	Local Value
IP Address	89.40.16.97
System	Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User	tbf
PHP Version	7.3.33
Software	Apache
Doc root	Writable

Edit File : ShowUser.vue \| Size : 52.58 KB
<template> <div v-if="loaded" class="opacity-page"> <div class="fe-btn-translation" @click="$root.$emit('open_modal_translation', 'Show User', arrayTranslations)" v-if="globalTranslate">OPEN TRANSLATION</div> <div class="item-page" v-if="notPaid"> <not-paid></not-paid> </div> <div class="item-page" v-else-if="notAllowed"> <not-allowed></not-allowed> </div> <div class="item-page" v-else-if="notFound"> <not-found></not-found> </div> <div class="item-page" v-else> <section class="header-user-section"> <div class="space-left"></div> <div class="content-section"> <div class="primary-boxes-user"> <div class="row-data-user"> <div class="box-data-user"> <div class="col-50"> <div class="user-image"> <img :src="user.avatar" v-if="user.avatar"> <div class="user-circle" v-else> <icon-user-settings/> </div> </div> <div class="user-name"> <h1 class="name">{{ user.first_name + ' ' + user.last_name }}</h1> <p class="email">{{ user.email }}</p> <p class="role">{{ $t('users.role-name-' + user.role_name) }}</p> </div> </div> <div class="col-50 working-days-col" v-if="$resize && $mq.above(600)"> <h1>{{ $t('show-user.working-days.title') }}</h1> <span class="subtitle">{{ user.working_days.length }} {{ $t('show-user.working-days.desc') }}</span> <div class="select-workdays"> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('monday')}"> <span class="checkmark">{{ $t('calendar.small_days.monday') }}</span> </label> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('tuesday')}"> <span class="checkmark">{{ $t('calendar.small_days.tuesday') }}</span> </label> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('wednesday')}"> <span class="checkmark">{{ $t('calendar.small_days.wednesday') }}</span> </label> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('thursday')}"> <span class="checkmark">{{ $t('calendar.small_days.thursday') }}</span> </label> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('friday')}"> <span class="checkmark">{{ $t('calendar.small_days.friday') }}</span> </label> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('saturday')}"> <span class="checkmark">{{ $t('calendar.small_days.saturday') }}</span> </label> <label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('sunday')}"> <span class="checkmark">{{ $t('calendar.small_days.sunday') }}</span> </label> </div> </div> </div> </div> <div class="row-data-promises" v-if="user.key_results_count > 0"> <!-- Check if we need to evaluate yesterday promise, today promise or to set a promise for today --> <!-- Card - Promisiunea zilei --> <div class="box-data-promises" v-if="user.has_daily_promise != 'person_not_working_today'"> <div class="text-promise-tutorial"> <div class="title">{{ $t('tutorial-promise.title-box') }} {{ user.has_daily_promise != 'promise_not_set' ? '' : $t('daily_promise.unstable') }}</div> <div class="description" v-html="user.has_daily_promise == 'has_promise' ? user.promise.name : $t('tutorial-promise.desc-box')"></div> <div class="contribute-to" v-if="user.has_daily_promise == 'has_promise'">{{ $t('set-promise.contribute-to') }}: {{ $tc("daily_promise.count_key_results", user.daily_promise.key_results_involved) }}</div> </div> <!-- tutorial_promise --> <div class="button-action" v-if="$auth.user().slug == user.slug"> <div class="with-timer" v-if="user.has_daily_promise == 'has_promise' && user.daily_promise.status == 'pending'"> <button class="button-tbf-blue" @click="user.has_daily_promise == 'has_promise' ? (user.daily_promise.status == 'pending' ? showEvaluate(user.daily_promise) : '') : showModal('add_promise')"> {{ $t('daily_promise.evaluate') }} </button> <span>{{ $t('show-user.start_evaluation') }}</span> </div> <div class="failed" v-else-if="user.has_daily_promise == 'has_promise' && user.daily_promise.status == 'not_completed'"><icon-close/></div> <div class="realized" v-else-if="user.has_daily_promise == 'has_promise' && user.daily_promise.status == 'completed'"><icon-check/></div> <div class="with-timer" v-else> <button class="button-tbf-blue" @click="user.has_daily_promise == 'has_promise' ? (user.daily_promise.status == 'pending' ? showEvaluate(user.daily_promise) : '') : showModal('add_promise')" > {{ $t('daily_plan.add-promise') }} </button> <span>{{ $t('daily_plan.time-remain') }}: {{timeRemain}}</span> </div> </div> <div class="button-action only-svg" v-else> <img src="/build/icons/promises.svg"> </div> </div> <div class="box-data-promises" v-else> <div class="text-promise-tutorial"> <div class="title">{{ $t('tutorial-promise.title-box') }} {{ user.has_daily_promise ? '' : $t('daily_promise.unstable') }}</div> <div class="description" v-if="$auth.user().slug == user.slug">{{ $t('daily_promise.free_day') }}</div> <div class="description" v-else>{{ $t('daily_promise.free_day') }}</div> </div> <div class="button-action with-lottie"> <lottie :options="defaultOptions" :height="85" :width="85" v-on:animCreated="handleAnimation"/> </div> </div> <!-- END Card - promisiunea zilei --> </div> <div class="row-data-promises" v-else> <div class="box-data-promises"> <div class="text-promise-tutorial"> <div class="title">{{ $t('tutorial-promise.title-box') }}</div> <div class="description">{{ $t('daily_promise.not_key_results') }}</div> </div> <div class="button-action with-lottie"> <lottie :options="defaultOptions" :height="85" :width="85" v-on:animCreated="handleAnimation"/> </div> </div> </div> </div> </div> <div class="space-right"></div> </section> <section class="subheader-page-section timeline"> <div class="space-left"><icon-list class="icon-list" /></div> <div class="content-section"> <div class="header-table"> <div class="title">{{$t('show-user.timeline.title')}}</div> <div class="right-part"> <div class="action-header filter-date"> <button class="btn-default-tbf" @click="default_timeline_offset == timeline_offset ? '' : changeOffset(false, 'default')" v-bind:class="{disabled: default_timeline_offset == timeline_offset}" :disabled="default_timeline_offset == timeline_offset">{{$t('show-user.timeline.filter')}} <icon-arrow class="icon-arrow right"/></button> </div> </div> </div> </div> <div class="space-right"></div> </section> <section class="timeline-bar-section"> <div class="space-left"></div> <div class="content-section"> <div class="timeline-bar"> <div class="prev-week" @click="moment(data_timeline[6].created_at) < moment(user.created_at) ? '' : changeOffset(+1)" v-bind:class="{disabled: moment(data_timeline[6].created_at) < moment(user.created_at) }"> <icon-arrow class="icon-arrow left" /> </div> <div class="hider-left"></div> <div class="current-weeks"> <div class="day" v-for="(day, index) in data_timeline" :data-week="moment(day.created_at).week()" v-bind:class="{'start-week': moment(day.created_at).format('d') == 1, 'end-week': moment(day.created_at).format('d') == 0}" :style="'width:' +dayWidth+ '%;'"> <div class="promises-status"> <div class="title">{{$t('show-user.promise')}}</div> <div class="status">{{ $t('timeline_status.' + day.status) }}</div> </div> <div class="num-week">{{ moment(day.created_at).format('d') == 1 ? 'Sapt. '+ moment(day.created_at).format('W') : '' }}</div> <v-popover offset="0" trigger="hover" placement="top" popoverBaseClass="popover-tbf" popoverClass="description-popover" :delay="{show: 0, hide: 0}" :disabled="day.status == 'not_exist'"> <div class="space-box-day" @click="day.status == 'pending' ? showEvaluate(day) : ''"> <div class="box-day" v-bind:class="{ completed: day.status == 'completed', not_set: day.status == 'not_completed' \|\| day.status == 'not_set', warning: day.status == 'pending' \|\| (moment(day.created_at).isSame(moment().format('YYYY-MM-DD')) && user.has_daily_promise == 'promise_not_set'), blue: day.status == 'pending' && moment(day.created_at).isSame(moment().format('YYYY-MM-DD')), disabled: day.status == 'not_exist' }" ></div> </div> <template slot="popover"> <!-- <div class="label" v-if="day.name \|\| (moment(day.created_at) <= moment() && $auth.user().working_days.includes(moment(day.created_at).locale('en').format('dddd').toLowerCase()))">{{ $t('timeline-bar.title') }}</div> --> <div class="label" v-if="day && day.key_results_names != null"><icon-list class="icon-list" /> {{day.key_results_names}}</div> <div class="description" v-if="day.name">{{day.name}}</div> <div class="description" v-else-if="day.status == 'not_working'">{{ $t('show-user.timeline.promise-not-need') }}</div> <div class="description" v-else-if="day.status == 'no_key_result'">{{ $t('show-user.timeline.promise-without-key-result') }}</div> <div class="description" v-else>{{ $t('show-user.timeline.promise-not-set') }}</div> <div class="reason" v-if="day.why_not"><span>{{ $t('show-user.timeline.reason') }}:</span> {{ day.why_not }}</div> </template> </v-popover> <div class="date" v-if="$resize && $mq.above(600)">{{ moment(day.created_at).isSame(moment().format('YYYY-MM-DD')) ? $t('general.today') : moment(day.created_at).format('MMM DD') }}</div> <div class="date" v-else>{{ moment(day.created_at).format('ddd') }}</div> </div> </div> <div class="hider-right"></div> <div class="next-week" @click="timeline_offset <= default_timeline_offset ? '' : changeOffset(-1)" v-bind:class="{disabled: timeline_offset <= default_timeline_offset}"> <icon-arrow class="icon-arrow right" /> </div> </div> </div> <div class="space-right"></div> </section> <section class="header-list-section"> <div class="space-left like-subtitle"><icon-list class="list-icon" /></div> <div class="content-section"> <div class="header-table"> <div class="tabs"> <div class="tab-item" v-bind:class="activetab == 'keyresults' ? 'active' : ''" @click="activateTab('keyresults')"> <span class="like-subtitle">{{$t('show-user.key-results')}} ({{filteredKrs.length}})</span> </div> <div class="tab-item" v-bind:class="activetab == 'objectives' ? 'active' : ''" @click="activateTab('objectives')"> <span class="like-subtitle">{{$t('show-user.objectives')}} ({{filteredObjs.length}})</span> </div> </div> <div class="action-header filter-date dropdown-tbf" v-if="activetab == 'keyresults'"> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-if="$resize && $mq.above(600)"> {{ $t('filter_key-results.' + activeStatusKr) }} <icon-arrow class="icon-arrow"/> </button> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-else><icon-filter /></button> <div class="dropdown-menu" aria-labelledby="dropdownFilter"> <div v-for="krStatus in krStatusList" class="dropdown-item" @click="changeActiveStatus('kr', krStatus)" v-bind:class="{active: activeStatusKr == krStatus}"> {{ $t('filter_key-results.'+krStatus) }} </div> </div> </div> <div class="action-header filter-date dropdown-tbf" v-else-if="activetab == 'objectives'"> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-if="$resize && $mq.above(600)"> {{ $t('filter_objectives.' + activeStatusObj) }} <icon-arrow class="icon-arrow"/> </button> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-else><icon-filter /></button> <div class="dropdown-menu" aria-labelledby="dropdownFilter"> <div v-for="objStatus in objStatusList" class="dropdown-item" @click="changeActiveStatus('objective', objStatus)" v-bind:class="{active: activeStatusObj == objStatus}"> {{ $t('filter_objectives.'+objStatus) }} </div> </div> </div> <div class="action-header filter-quarter solo dropdown-tbf" v-if="$resize && $mq.above(600)"> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="quarter-no">{{ $t('objectives.quarter') }} {{ activeQuarter.quarter }}, {{activeQuarter.year }}</div> <icon-arrow class="icon-arrow"/> </button> <div class="dropdown-menu" aria-labelledby="dropdownFilter"> <div class="dropdown-item" v-for="quarterItem in arrayQuarters" @click="changeActiveQuarter(quarterItem)" v-bind:class="{active: activeQuarter == quarterItem, 'bor-top': quarterItem.quarter == 4 }"> <div class="quarter-no">{{ $t('objectives.quarter_short') }}{{ quarterItem.quarter }} {{ quarterItem.year }}</div> <div class="quarter-period">{{ quarterItem.start_quarter \| moment('MMMM') }} - {{ quarterItem.end_quarter \| moment('MMMM') }}</div> </div> </div> </div> </div> </div> <div class="space-right"></div> </section> <!-- key result list --> <section class="list-items-section tab-container" v-bind:class="{active: activetab == 'keyresults'}" v-if="filteredKrs.length"> <div class="group_items" v-for="key_result in filteredKrs"> <div class="space-left"> <icon-arrow class="icon-arrow right"/> </div> <div class="content-row"> <div class="row-tbf action-row" @click="showModalKR(parseInt(key_result.id).toString(), key_result.uuid, 'updates')" v-bind:class="{upcoming: key_result.status == 'upcoming'}"> <!-- asigned user --> <div class="column-tbf icon-title kr-icon-width" v-if="$resize && $mq.above(770)"> <icon-list /> </div> <!-- end assigned user --> <!-- RC name box --> <div class="column-tbf row-title with-icon kr-name-width"> <v-popover offset="10" trigger="hover click" placement="bottom" popoverBaseClass="popover-tbf" popoverClass="description-popover" :delay="{show: 200, hide: 0}" :disabled="$resize && $mq.below(1030)"> <div class="text"><img class="attention-update" src="/build/icons/attention-square.svg" v-if="$resize && $mq.below(769) && (key_result.needs_an_update == 'today' \|\| key_result.needs_an_update == 'past')"> {{ key_result.name.charAt(0).toUpperCase() + key_result.name.slice(1) }}</div> <div class="subtitle">Obiectiv: {{ key_result.objective.name }}</div> <template slot="popover"> <div class="description">{{ key_result.description }}</div> </template> </v-popover> </div> <!-- end rc name box --> <!-- promises box --> <div class="column-tbf column-value kr-promises-width" v-if="$resize && $mq.above(1030)" @click.stop="showModalKR(parseInt(key_result.id).toString(), key_result.uuid, 'promises')"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}"> <div class="label">{{$t('show-user.promises')}}</div> <div class="value" v-if="key_result.need_evaluate_promise"><img class="circle-info" src="/build/icons/circle-info-orange.svg"> {{ $t('show-user.status-pending') }}</div> <div class="value" v-else>{{ key_result.promises_completed }}/{{ key_result.promises_count }} {{ $t('key-result-promises.completed')}}</div> <template slot="popover"> <div class="simple-text" v-if="key_result.status == 'upcoming'">{{ $tc('key-result.tooltip-promises-cant') }}</div> <div class="simple-text" v-else>{{ key_result.need_evaluate_promise ? $t('key-result.tooltip-promises-evaluate') : $t('key-result.tooltip-promises') }}</div> </template> </v-popover> </div> <!-- end promises box --> <!-- updates box --> <div class="column-tbf column-value kr-updates-width" v-if="$resize && $mq.above(1030)" @click.stop="showModalKR(parseInt(key_result.id).toString(), key_result.uuid, 'updates')"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}"> <div class="label">{{$t('show-user.updates')}}</div> <div class="value" v-if="key_result.needs_an_update == 'today' \|\| key_result.needs_an_update == 'past'"><img class="circle-info" src="/build/icons/circle-info-orange.svg"> {{ $t('show-user.status-pending') }}</div> <div class="value" v-else-if="key_result.last_key_result_log"><img class="circle-info" src="/build/icons/circle-check-green.svg"> {{ $tc('show-user.days-ago', diffDaysFrom(key_result.last_key_result_log.created_at)) }}</div> <div class="value" v-else>{{ $t('show-user.no-updates') }}</div> <template slot="popover"> <div class="simple-text" v-if="key_result.needs_an_update == 'today'">{{ $t('key-result.tooltip-update-today') }}</div> <div class="simple-text" v-else-if="key_result.needs_an_update == 'past'">{{ $t('key-result.tooltip-update-past') }}</div> <div class="simple-text" v-else-if="key_result.needs_an_update">{{ $tc('key-result.tooltip-update-future', key_result.needs_an_update) }}</div> <div class="simple-text" v-else-if="key_result.status == 'upcoming'">{{ $t('key-result.tooltip-update-cant') }}</div> <div class="simple-text" v-else>{{ $tc('key-result.tooltip-updates-view') }}</div> </template> </v-popover> </div> <div class="column-tbf column-value kr-deadline-width" v-if="$resize && $mq.above(1030)"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}"> <div class="label">{{ moment(key_result.start_date) >= moment() ? $t('objectives.start_on') : $t('objectives.deadline')}}</div> <div class="value" v-if="key_result.percent >= 100"><img class="circle-info" src="/build/icons/circle-check-green.svg"> {{ $t('status.completed') }}</div> <div class="value" v-else-if="diffDays(key_result.end_date) < 0"><img class="circle-info" src="/build/icons/circle-info-red.svg"> {{ $t('show-user.outdated') }}</div> <div class="value" v-else>{{ diffDays(key_result.end_date)+" "+$t('show-user.days') }}</div> <template slot="popover"> <div class="simple-text">{{ key_result.end_date \| moment('D MMMM YYYY') }}</div> </template> </v-popover> </div> <!-- last values box --> <div class="column-tbf column-value kr-last-value-width" v-if="$resize && $mq.above(770)"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}"> <div class="label">{{ $t('show-user.last-value') }}</div> <div class="value" v-if="displayKeyResultCurrentValue(key_result) % 1 != 0">{{ displayKeyResultCurrentValue(key_result) \| numeral('0.00a') }}{{ optionsUnits[key_result.unity] ? key_result.unity : ''}} {{ !optionsUnits[key_result.unity] ? key_result.unity : optionsUnits[key_result.unity]}}</div> <div class="value" v-else>{{ displayKeyResultCurrentValue(key_result) \| numeral('0a') }}{{ optionsUnits[key_result.unity] ? key_result.unity : ''}} {{ !optionsUnits[key_result.unity] ? key_result.unity : "("+optionsUnits[key_result.unity]+")"}}</div> <template slot="popover"> <div class="simple-text">{{ $t('progress_type_text.' + key_result.progress_type, { to: key_result.target % 1 != 0 ? $options.filters.numeral(key_result.target , '0,0.00') : $options.filters.numeral(key_result.target , '0,0'), unit: key_result.unity, from: key_result.start_value % 1 != 0 ? $options.filters.numeral(key_result.start_value , '0,0.00') : $options.filters.numeral(key_result.start_value , '0,0')}) }}</div> </template> </v-popover> </div> <!-- end last values box --> <!-- Percentage box --> <div class="column-tbf item-value kr-value-width" v-if="$resize && $mq.above(600)"> <v-popover offset="10" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}" :disabled="$resize && $mq.below(1030)"> <div class="top-data"> <div class="current-value" v-if="moment(key_result.start_date) >= moment()"> <div class="value">0</div> </div> <div class="current-value" v-else> <div class="value">{{ parseInt(key_result.percent).toString()+'%' }}</div> </div> <div class="info"><icon-info class="icon-info"/></div> </div> <div class="progress-bar-tbf" v-bind:class="{disabled: moment(key_result.start_date) > moment()}"> <div class="complete-progress-tbf" v-bind:class="{pink: diffDays(key_result.end_date) < 1 && key_result.percent < 100, green: key_result.percent >= 100}" :style="'width: calc(2px + ' + (parseInt(key_result.percent) < 1 ? '2px' : (key_result.percent < 100 ? key_result.percent + '%' : '100%')) + ');'"></div> </div> <template slot="popover"> <div class="simple-text"> {{ $t('progress_type_text.' + key_result.progress_type, { to: key_result.target % 1 != 0 ? $options.filters.numeral(key_result.target , '0,0.00') : $options.filters.numeral(key_result.target , '0,0'), unit: key_result.unity, from: key_result.start_value % 1 != 0 ? $options.filters.numeral(key_result.start_value , '0,0.00') : $options.filters.numeral(key_result.start_value , '0,0')}) }}. {{ $t('progress_type_text.current_value') }}: {{ displayKeyResultCurrentValue(key_result) % 1 != 0 ? $options.filters.numeral(displayKeyResultCurrentValue(key_result), '0,0.00') : $options.filters.numeral(displayKeyResultCurrentValue(key_result), '0,0')}} {{ key_result.unity }} </div> </template> </v-popover> </div> <!-- End percentage box --> </div> </div> <div class="space-right"> <div class="dots-edit" :id="'edit-key-result-' + key_result.id" v-click-outside="hideDropdown" v-if="key_result.rights.edit \|\| key_result.rights.delete"> <div class="dropdown edit-item-dropdown"> <div class="overlay-button" @click.stop="showDropdown(key_result.id)"></div> <div class="edit-item-button" :id="'dropdownEdit'+key_result.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <icon-edit-dots /> </div> <div class="dropdown-menu dropdown-menu-right" :id="'dropdownMenu'+ key_result.id " :aria-labelledby="'dropdownEdit'+key_result.id"> <div class="dropdown-item" @click.stop="showModal('key_result', parseInt(key_result.id).toString(), key_result.objective)" v-if="key_result.rights.edit">{{$t('show-user.edit')}}</div> <div class="dropdown-item" @click.stop="openModalV2('delete', key_result, 'kr', 'show_user')" v-if="key_result.rights.delete">{{$t('show-user.delete')}}</div> </div> </div> </div> </div> </div> </section> <!-- END key result list --> <!-- no key results message --> <section class="list-items-section tab-container" v-bind:class="{active: activetab == 'keyresults'}" v-else> <div class="group_items"> <div class="space-left"></div> <div class="empty-row mrgn"> <div class="title single" v-html="$t('show-user.no-key-results', { name: user.first_name.charAt(0).toUpperCase() + user.first_name.slice(1) })"> </div> <div class="description wide" v-html="$t('show-user.desc-no-key-results')"> </div> </div> <div class="space-right"></div> </div> </section> <!-- END no key results message --> <!-- objectives list --> <section class="list-items-section tab-container" v-bind:class="{active: activetab == 'objectives'}" v-if="filteredObjs.length"> <div class="group_items" v-for="objective in filteredObjs"> <div class="space-left" @click="showObjective(objective.slug)"> <icon-arrow class="icon-arrow right"/> </div> <div class="content-row" @click="showObjective(objective.slug)"> <div class="row-tbf action-row"> <div class="column-tbf icon-title obj obj-icon-width" v-if="$resize && $mq.above(770)"> <icon-objectives-list /> </div> <div class="column-tbf row-title obj-user-name-width"> <div class="text"><img class="attention-update" src="/build/icons/attention-square.svg" v-if="$resize && $mq.below(769) && (objective.needs_an_update == 'today' \|\| objective.needs_an_update == 'past')">{{ objective.name }}</div> </div> <div class="column-tbf column-value obj-user-kr-width" v-if="$resize && $mq.above(1030)"> <div class="label">{{ $t('objectives.key-results')}}</div> <div class="value"><img class="circle-info" src="/build/icons/circle-info-orange.svg" v-if="objective.needs_an_update == 'today' \|\| objective.needs_an_update == 'past' \|\| objective.need_evaluate_promise"> {{ $t('objectives.key-results-progress', {n: objective.key_results_in_progress, total: objective.key_results_count }) }}</div> </div> <div class="column-tbf column-value obj-user-deadline-width" v-if="$resize && $mq.above(770)"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}"> <div class="label">{{ moment(objective.start_date) >= moment() ? $t('objectives.start_on') : $t('objectives.deadline')}}</div> <div class="value" v-if="objective.percent >= 100"><img class="circle-info" src="/build/icons/circle-check-green.svg"> {{ $t('status.completed') }}</div> <div class="value" v-else-if="diffDays(objective.end_date) < 0"><img class="circle-info" src="/build/icons/circle-info-red.svg"> {{ $t('show-user.outdated') }}</div> <div class="value" v-else-if="moment(objective.start_date) >= moment()">{{ objective.start_date \| moment('DD/MM/YYYY') }}</div> <div class="value" v-else>{{ diffDays(objective.end_date) }} zile</div> <template slot="popover"> <div class="simple-text"> {{ objective.end_date \| moment('D MMMM YYYY') }} </div> </template> </v-popover> </div> <div class="column-tbf item-value obj-user-progress-width" v-if="$resize && $mq.above(600)"> <div class="top-data"> <div class="current-value"> <div class="value" v-if="moment(objective.start_date) >= moment()">0</div> <div class="value" v-else>{{ parseInt(objective.percent).toString() + '%' }}</div> </div> <div class="info"><icon-info class="icon-info"/></div> </div> <div class="progress-bar-tbf" v-bind:class="{disabled: moment(objective.start_date) > moment()}"> <div class="complete-progress-tbf" v-bind:class="{pink: (diffDays(objective.end_date) < 1 && objective.percent != 100), green: objective.percent >= 100}" :style="'width: calc(2px + ' + (parseInt(objective.percent) < 1 ? '2px' : objective.percent + '%') + ');'"></div> </div> </div> </div> </div> <div class="space-right"> <div class="dots-edit" :id="'edit-objective-' + objective.id" v-click-outside="hideDropdownObj" v-if="objective.rights.edit \|\| objective.rights.delete"> <div class="dropdown edit-item-dropdown"> <div class="overlay-button" @click.stop="showDropdownObj(objective.id)"></div> <div class="edit-item-button" :id="'dropdownEditObjective'+objective.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <icon-edit-dots /> </div> <div class="dropdown-menu dropdown-menu-right" :id="'dropdownMenuObjective'+ objective.id " :aria-labelledby="'dropdownEditObjective'+objective.id"> <div class="dropdown-item" @click.stop="showModal('objective', objective.slug)" v-if="objective.rights.edit">{{$t('show-user.edit')}}</div> <div class="dropdown-item" @click.stop="openModalV2('delete', objective, 'objective', 'show_user')" v-if="objective.rights.delete">{{$t('show-user.delete')}}</div> </div> </div> </div> </div> </div> </section> <!-- end objectives list --> <!-- no objectives message --> <section class="list-items-section tab-container" v-bind:class="{active: activetab == 'objectives'}" v-else> <div class="group_items"> <div class="space-left"></div> <div class="empty-row mrgn"> <div class="title single" v-html="$t('show-user.no-objective', { name: user.first_name.charAt(0).toUpperCase() + user.first_name.slice(1) })"> </div> <div class="description wide" v-html="$t('show-user.desc-no-objective')"> </div> </div> <div class="space-right"></div> </div> </section> <!-- END no objectives message --> </div> </div> <!-- placeholder list --> <div v-else> <div class="item-page"> <section class="header-user-section"> <div class="space-left"></div> <div class="content-section"> <div class="primary-boxes-user"> <div class="row-data-user"> <div class="box-data-user placeholder-loader" style="height: 169px;"> </div> </div> <div class="row-data-promises"> <div class="box-data-promises placeholder-loader" style="height: 169px;"> </div> </div> </div> </div> <div class="space-right"></div> </section> <section class="subheader-page-section timeline"> <div class="space-left"><icon-list class="icon-list" /></div> <div class="content-section"> <div class="header-table"> <div class="title placeholder-loader" style="height: 21px; max-width: 170px; width: 100%;"></div> <div class="placeholder-loader" style="margin-left: auto; height: 37px; width: 100%; max-width: 140px;"></div> </div> </div> <div class="space-right"></div> </section> <section class="timeline-bar-section"> <div class="space-left"></div> <div class="content-section"> <div class="placeholder-loader" style="height: 36px; width: 100%; border-radius: 10px; margin-top: 75px;"></div> </div> <div class="space-right"></div> </section> <section class="header-list-section"> <div class="space-left"><icon-list class="list-icon" /></div> <div class="content-section"> <div class="header-table"> <div class="tabs"> <div class="tab-item"> <div class="placeholder-loader" style="height: 36px; width: 136px; display: inline-block; opacity: 1;"></div> </div> <div class="tab-item"> <div class="placeholder-loader" style="height: 36px; width: 95px; display: inline-block; opacity: 1;"></div> </div> </div> <!-- <div class="add-button"> <div class="placeholder-loader" style="height: 37px; width: 140px;"></div> </div> --> </div> </div> <div class="space-right"></div> </section> <!-- loading placeholders --> <section class="list-items-section tab-container" style="display: block;"> <div class="group_items" v-for="n in 3"> <div class="space-left"> <icon-arrow class="icon-arrow right"/> </div> <div class="content-row""> <div class="row-tbf"> <div class="column-tbf user-img kr-user-width" v-if="$resize && $mq.above(770)"> <div class="placeholder-loader" style="height: 38px; width: 100%; max-width: 38px;"></div> </div> <div class="column-tbf row-title with-icon kr-name-width"> <div class="text placeholder-loader" style="height: 21px; width: 100%; max-width: 170px;"></div> </div> <div class="column-tbf status kr-updates-width" v-if="$resize && $mq.above(1030)"> <div class="link-modal disabled"> <div class="box-icon"> </div> <span><div class="placeholder-loader" style="height: 16px; width: 100%; max-width: 63px;"></div></span> </div> </div> <div class="column-tbf row-details kr-promises-width" v-if="$resize && $mq.above(1030)"> <div class="link-modal"> <div class="label placeholder-loader" style="height: 16px; width: 100%; max-width: 95px;"></div> </div> </div> <div class="column-tbf row-details kr-tasks-width" v-if="$resize && $mq.above(1030)"> <div class="link-modal"> <div class="label placeholder-loader" style="height: 16px; width: 100%; max-width: 95px;"></div> </div> </div> <div class="column-tbf item-value kr-value-width"> <div class="top-data"> <div class="current-value"> <div class="value placeholder-loader" style="height: 16px; width: 100%; max-width: 15px;"></div> </div> <div class="deadline placeholder-loader" style="height: 14px; width: 100%; max-width: 30px;"></div> </div> <div class="progress-bar-tbf placeholder-loader"></div> </div> </div> </div> <div class="space-right"> <div class="dots-edit"> <div class="dropdown edit-item-dropdown"> <div class="edit-item-button"> <icon-edit-dots /> </div> </div> </div> </div> </div> </section> </div> </div> <!-- END placeholder list --> </template> <script type="text/javascript"> import NotAllowed from '../General/NotAllowed' import NotPaid from '../General/NotPaid' import NotFound from '../Pages/NotFound' import IconEmail from '../Icons/Email' import IconArrow from '../Icons/Arrow' import IconList from '../Icons/List' import IconInfo from '../Icons/Info' import IconPlus from '../Icons/Plus' import IconEditDots from '../Icons/EditDots' import IconObjectiveSingle from '../Icons/ObjectiveSingle' import IconObjectivesList from '../Icons/ObjectivesList' import IconCheckPrimary from "../Icons/CheckPrimary" import IconCheck from "../Icons/Check" import IconClose from "../Icons/Close" import IconFilter from '../Icons/Filter' import IconUserSettings from '../Icons/UserSettings' import Lottie from 'vue-lottie'; import * as animationData from '../Animations/tbfdigital_sleep.json'; export default { data() { return { defaultOptions: { animationData: animationData.default }, loaded: false, notAllowed: false, notFound: false, notPaid: false, data_timeline: {}, active_day: false, user: {}, activetab: 'keyresults', hoverkeyResult: '', hoverObjective: '', user_slug: '', arrayQuarters: [], activeQuarter: { quarter: moment().quarter(), year: moment().format('YYYY'), start_quarter: moment().startOf('quarter').format('YYYY-MM-DD'), end_quarter: moment().endOf('quarter').format('YYYY-MM-DD') }, timeline_offset: 4, default_timeline_offset: 4, weekNumbers: 6, dayWidth: 0, firstLoadedTimeline: false, optionsUnits: { "€": 'Euro', "$": 'Dolar', "%": 'Procent', }, dateRemain: '', timeRemain: '00:00:00', krStatusList: [], activeStatusKr: 'active', objStatusList: [], activeStatusObj: 'active', arrayTranslations: [ 'calendar.small_days.friday', 'calendar.small_days.monday', 'calendar.small_days.saturday', 'calendar.small_days.sunday', 'calendar.small_days.thursday', 'calendar.small_days.tuesday', 'calendar.small_days.wednesday', 'daily_plan.add-promise', 'daily_plan.time-remain', 'daily_promise.count_key_results', 'daily_promise.evaluate', 'daily_promise.free_day', 'daily_promise.not_key_results', 'daily_promise.unstable', 'filter_key-results.active', 'filter_key-results.all', 'filter_key-results.finished', 'filter_key-results.overdue', 'filter_key-results.upcoming', 'filter_objectives.active', 'filter_objectives.all', 'filter_objectives.finished', 'filter_objectives.overdue', 'filter_objectives.upcoming', 'general.today', 'key-result-promises.completed', 'key-result.tooltip-promises', 'key-result.tooltip-promises-cant', 'key-result.tooltip-promises-evaluate', 'key-result.tooltip-update-cant', 'key-result.tooltip-update-future', 'key-result.tooltip-update-past', 'key-result.tooltip-update-today', 'key-result.tooltip-updates-view', 'navbar.dashboard', 'navbar.people', 'objectives.deadline', 'objectives.key-results', 'objectives.key-results-progress', 'objectives.quarter', 'objectives.quarter_short', 'objectives.start_on', 'progress_type_text.above', 'progress_type_text.current_value', 'progress_type_text.decrease', 'progress_type_text.grow', 'progress_type_text.under', 'progress_type_text.value', 'set-promise.contribute-to', 'show-user.days', 'show-user.days-ago', 'show-user.delete', 'show-user.desc-no-key-results', 'show-user.desc-no-objective', 'show-user.edit', 'show-user.key-results', 'show-user.last-value', 'show-user.no-key-results', 'show-user.no-objective', 'show-user.no-updates', 'show-user.objectives', 'show-user.outdated', 'show-user.promise', 'show-user.promises', 'show-user.start_evaluation', 'show-user.status-pending', 'show-user.timeline.filter', 'show-user.timeline.promise-not-set', 'show-user.timeline.promise-without-key-result', 'show-user.timeline.reason', 'show-user.timeline.title', 'show-user.updates', 'show-user.working-days.desc', 'show-user.working-days.title', 'status.completed', 'timeline_status.completed', 'timeline_status.not_completed', 'timeline_status.not_set', 'timeline_status.pending', 'timeline_status.state_title', 'tutorial-promise.desc-box', 'tutorial-promise.title-box', 'users.role-name-admin', 'users.role-name-employee', 'users.role-name-manager' ] }; }, components: { IconUserSettings, IconCheckPrimary, NotAllowed, NotFound, IconEmail, IconArrow, IconList, IconPlus, IconInfo, IconFilter, IconEditDots, IconObjectiveSingle, IconObjectivesList, NotPaid, IconCheck, IconClose, Lottie }, watch:{ $route (to, from){ if(this.$route.name == 'homepage' \|\| this.$route.name == 'dashboard'){ var title = 'Dashboard'; var backRoute = '' }else{ var title = 'Oameni'; var backRoute = 'users' } this.$root.$emit("navbar_title", title, backRoute) if(this.$route.name == 'homepage' \|\| this.$route.name == 'dashboard'){ this.user_slug = this.$auth.user().slug this.getUser() this.getTimeline() } } }, created() { window.addEventListener('resize', this.handleResize) }, destroyed() { window.removeEventListener('resize', this.handleResize) }, beforeDestroy () { this.$root.$off('refreshUserPage') }, computed: { filteredKrs(){ return getByStatus(getByQuarter(this.user.key_results, this.activeQuarter), this.activeStatusKr) }, filteredObjs(){ return getByStatus(getByQuarter(this.user.objectives, this.activeQuarter), this.activeStatusObj) } }, async mounted() { //Create array of quarters var awaitArray = true var currentQuarter = moment(this.$auth.user().instance_created_at) while(awaitArray){ this.arrayQuarters.push({ quarter: currentQuarter.quarter(), year: currentQuarter.format('YYYY'), start_quarter: currentQuarter.startOf('quarter').format('YYYY-MM-DD'), end_quarter: currentQuarter.endOf('quarter').format('YYYY-MM-DD') }) if(currentQuarter.endOf('quarter') < moment().add(1,'year')){ currentQuarter = currentQuarter.endOf('quarter').add(1, 'day') }else{ awaitArray = false } } this.arrayQuarters.reverse() //END Create array of quarters this.user_slug = this.$route.params.slug; if(this.$route.name == 'homepage' \|\| this.$route.name == 'dashboard'){ this.user_slug = this.$auth.user().slug } if(this.$resize && this.$mq.between([1031,1300])){ this.weekNumbers = 5 this.timeline_offset = 3 this.default_timeline_offset = 3 } if(this.$resize && this.$mq.between([771,1030])){ this.weekNumbers = 4 this.timeline_offset = 2 this.default_timeline_offset = 2 } if(this.$resize && this.$mq.below(770)){ this.weekNumbers = 3 this.timeline_offset = 1 this.default_timeline_offset = 1 } if(this.user_slug != ''){ if(this.$auth.user().status == 'unpaid' \|\| this.$auth.user().status == 'new'){ this.loaded = true this.notPaid = true setTimeout(() => { $('.opacity-page').addClass('show') if(this.$route.name == 'homepage' \|\| this.$route.name == 'dashboard'){ var title = this.$t('navbar.dashboard'); var backRoute = '' }else{ var title = this.$t('navbar.people'); var backRoute = 'users' } this.$root.$emit("navbar_title", title, backRoute) }, 0) }else{ await this.getKrStatusList() await this.getObjStatusList() await this.getUser() await this.getTimeline() } }else{ this.$router.push({ name: 'page-404'}) } this.$root.$on("refreshUserPage", () => { this.getUser() this.getTimeline() }); }, methods: { async getUser(){ await axios.get('/people/'+this.user_slug) .then(({data}) => { this.user = data.data this.dateRemain = this.user.promise_time this.startCountdown() }).catch(error => { var status = error.response.data.status this.notAllowed = status == 'not allowed' this.notFound = status == 'not found' this.notPaid = status == 'payment_failed' \|\| status == 'first_registration' if(status == 'error' && error.response.data.message == 'Unauthorized'){ this.$auth.refresh() setTimeout(() => { if(this.$auth.check()){ location.reload() } }, 300) } }).then(() => { setTimeout(()=>{ if(this.$route.name == 'homepage' \|\| this.$route.name == 'dashboard'){ var title = this.$t('navbar.dashboard'); var backRoute = '' }else{ var title = this.$t('navbar.people'); var backRoute = 'users' } this.$root.$emit("navbar_title", title, backRoute) setTimeout(() => { $('.opacity-page').addClass('show') }, 0) }, 300) }) }, async getTimeline(){ await axios.get('/people/'+ this.user_slug +'/timeline?offset=' + this.timeline_offset + '&week_numbers=' + this.weekNumbers) .then(({data}) => { this.data_timeline = data.data.array_of_promises_with_index // this.active_day = moment().format('YYYY-MM-DD'); }).catch(error => { var status = error.response.data.status this.notFound = status == 'not found' if(status == 'error' && error.response.data.message == 'Unauthorized'){ this.$auth.refresh() } }).then(() => { this.loaded = true setTimeout(() => { $('.opacity-page').addClass('show') }, 0) if(this.firstLoadedTimeline){ this.calculateDayWidth() }else{ setTimeout(() => { this.calculateDayWidth() }, 500) } }) }, async getKrStatusList(){ await axios.get('/key-results/status-list').then(({data}) => { this.krStatusList = data.data this.krStatusList.unshift("all"); }) }, async getObjStatusList(){ await axios.get('/objectives/status/list').then(({data}) => { this.objStatusList = data.data this.objStatusList.unshift("all"); }) }, changeOffset(val = false, reset = false){ this.timeline_offset = reset == 'default' ? this.default_timeline_offset : this.timeline_offset + val if(!reset){ var widthTotalDays = $('.timeline-bar .current-weeks').width() var widthMove = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 7 $('.timeline-bar .current-weeks').animate({ scrollLeft: (val > 0 ? 0 : (widthMove * 2)) }, 300) } setTimeout(() => { this.getTimeline() }, 300) }, showModal(type, model = false, requiredData = false, userData = false){ this.$root.$emit('open_modal', type, model, requiredData, userData, 'show_user'); this.hideDropdown() this.hideDropdownObj() }, showEvaluate(promise = false){ this.$root.$emit('evaluate_promise_modal', promise, 'show_user'); }, openModalV2(type, model = false, typeDelete = false, fromDelete = false){ this.hideDropdown() this.hideDropdownObj() this.$root.$emit('open_modal_v2', type, model, typeDelete, fromDelete); }, showModalKR(model, uuid, type){ this.hideDropdown() this.hideDropdownObj() this.$root.$emit('open_key_result_modals', model, uuid, type, 'show_user'); }, showObjective(objectiveSlug){ this.$router.push({ name: 'show-objective', params: { slug: objectiveSlug }}) }, diffDays(end_date) { var a = moment().startOf('day'); var b = moment(end_date).startOf('day'); return b.diff(a, 'days'); }, diffDaysFrom(update_date){ var a = moment(update_date).startOf('day'); var b = moment().startOf('day'); return b.diff(a, 'days'); }, activateTab(tab_name){ this.activetab = tab_name; }, checkDiffUnity(unity){ var inlineUnits = ['€', '$', 'RON'] return inlineUnits.includes(unity) }, showDropdown(itemId){ if(itemId == this.hoverkeyResult){ $('#dropdownEdit' + this.hoverkeyResult).dropdown('toggle'); setTimeout(() => { this.hoverkeyResult = '' }, 0) }else{ this.hoverkeyResult = itemId setTimeout(() => { $('#dropdownEdit' + this.hoverkeyResult).dropdown('toggle'); }, 0) } }, hideDropdown(){ if(this.hoverkeyResult != ''){ $('#dropdownEdit' + this.hoverkeyResult).dropdown('toggle'); setTimeout(() => { this.hoverkeyResult = '' }, 0) } }, showDropdownObj(itemId){ if(itemId == this.hoverObjective){ $('#dropdownEditObjective' + this.hoverObjective).dropdown('toggle'); setTimeout(() => { this.hoverObjective = '' }, 0) }else{ this.hoverObjective = itemId setTimeout(() => { $('#dropdownEditObjective' + this.hoverObjective).dropdown('toggle'); }, 0) } }, hideDropdownObj(){ if(this.hoverObjective != ''){ $('#dropdownEditObjective' + this.hoverObjective).dropdown('toggle'); setTimeout(() => { this.hoverObjective = '' }, 0) } }, calculateDayWidth(){ var widthTotalDays = $('.timeline-bar .current-weeks').width() this.dayWidth = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 100 / widthTotalDays var widthMove = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 7 $('.timeline-bar .current-weeks .day').css('opacity', 1) if(!this.firstLoadedTimeline){ setTimeout(() => { $('.timeline-bar .current-weeks').scrollLeft(widthMove) }, 100) }else{ $('.timeline-bar .current-weeks').scrollLeft(widthMove) } this.firstLoadedTimeline = true }, displayKeyResultCurrentValue(keyResult) { var text = ""; var value = keyResult.last_key_result_log ? keyResult.last_key_result_log.value : keyResult.start_value; return value.includes('.00') ? parseInt(value).toString() : parseFloat(value).toString(); }, needsDecimal(keyResult){ var needsDecimal = false; var value = keyResult.last_key_result_log ? keyResult.last_key_result_log.value : keyResult.start_value; if(displayType == 'short'){ needsDecimal = parseFloat(value) % 1 != 0 ? true : false; } return needsDecimal; }, handleResize(){ if(this.$mq.above(1301) && this.weekNumbers != 6){ this.weekNumbers = 6 this.timeline_offset = 4 this.default_timeline_offset = 4 this.getTimeline() }else if(this.$mq.between([1031,1300]) && this.weekNumbers != 5){ this.weekNumbers = 5 this.timeline_offset = 3 this.default_timeline_offset = 3 this.getTimeline() }else if(this.$mq.between([771,1030]) && this.weekNumbers != 4){ this.weekNumbers = 4 this.timeline_offset = 2 this.default_timeline_offset = 2 this.getTimeline() }else if(this.$mq.below(770) && this.weekNumbers != 3){ this.weekNumbers = 3 this.timeline_offset = 1 this.default_timeline_offset = 1 this.getTimeline() }else{ var widthTotalDays = $('.timeline-bar .current-weeks').width() this.dayWidth = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 100 / widthTotalDays var widthMove = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 7 $('.timeline-bar .current-weeks .day').css('opacity', 1) $('.timeline-bar .current-weeks').scrollLeft(widthMove) } }, changeActiveQuarter(quarter){ this.activeQuarter = quarter; }, changeActiveStatus(type, status){ if(type == 'kr') this.activeStatusKr = status; else if(type == 'objective') this.activeStatusObj = status; }, handleAnimation(anim){ this.anim = anim; this.anim.setSpeed(1); }, startCountdown(){ let progressBar = document.querySelector('.e-c-progress'); let length = Math.PI * 2 * 100; let intervalTimer; let timeLeft; var startTime = moment(); var endTime = moment(this.dateRemain+":00", "HH:mm:ss"); let wholeTime = endTime.diff(startTime, 'seconds'); var app = this; function timer (){ intervalTimer = setInterval(function(){ var startTime = moment(); var endTime = moment(app.dateRemain+":00", "HH:mm:ss"); timeLeft = endTime.diff(startTime, 'seconds'); // timeLeft = moment(app.dateRemain).diff(moment(), 'seconds'); if(timeLeft < 0){ clearInterval(intervalTimer); app.timeRemain = '00:00' return ; } displayTimeLeft(timeLeft); }, 1000); } function displayTimeLeft (timeLeft){ let seconds = timeLeft % 60; let hours = Math.floor(timeLeft / 60); let minutes = hours % 60; hours = Math.floor(hours / 60); let displayString = `${(hours < 10 && hours >= 1) ? '0' : ''}${hours >= 1 ? hours + ':' : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; app.timeRemain = displayString; } timer() } } }; function getByQuarter(list, quarter) { var quarterStart = moment(quarter.start_quarter) var quarterEnd = moment(quarter.end_quarter) return list.filter(item => (moment(item.start_date) >= quarterStart && moment(item.start_date) <= quarterEnd) \|\| (moment(item.end_date) >= quarterStart && moment(item.end_date) <= quarterEnd) \|\| (moment(item.start_date) < quarterStart && moment(item.end_date) > quarterEnd)) } function getByStatus(list, status) { if (status == 'all') return list return list.filter(item => item.status == status) } </script> Back

Edit File : ShowUser.vue | Size : 52.58 KB

<template>
	<div v-if="loaded" class="opacity-page">
		<div class="fe-btn-translation" @click="$root.$emit('open_modal_translation', 'Show User', arrayTranslations)" v-if="globalTranslate">OPEN TRANSLATION</div>

<div class="item-page" v-if="notPaid">
			<not-paid></not-paid>
		</div>
		<div class="item-page" v-else-if="notAllowed">
			<not-allowed></not-allowed>
		</div>
		<div class="item-page" v-else-if="notFound">
			<not-found></not-found>
		</div>
		<div class="item-page" v-else>
			<section class="header-user-section">
				<div class="space-left"></div>
				<div class="content-section">
					<div class="primary-boxes-user">
						<div class="row-data-user">
							<div class="box-data-user">
								<div class="col-50">
									<div class="user-image">
										<img :src="user.avatar" v-if="user.avatar">
										<div class="user-circle" v-else>
											<icon-user-settings/>
										</div>
									</div>
									<div class="user-name">
										<h1 class="name">{{ user.first_name + ' ' + user.last_name }}</h1>
										<p class="email">{{ user.email }}</p>
										<p class="role">{{ $t('users.role-name-' + user.role_name) }}</p>
									</div>
								</div>
								<div class="col-50 working-days-col" v-if="$resize && $mq.above(600)">
									<h1>{{ $t('show-user.working-days.title') }}</h1>
									<span class="subtitle">{{ user.working_days.length }} {{ $t('show-user.working-days.desc') }}</span>
									<div class="select-workdays">
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('monday')}">
											<span class="checkmark">{{ $t('calendar.small_days.monday') }}</span>
										</label>
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('tuesday')}">
											<span class="checkmark">{{ $t('calendar.small_days.tuesday') }}</span>
										</label>
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('wednesday')}">
											<span class="checkmark">{{ $t('calendar.small_days.wednesday') }}</span>
										</label>
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('thursday')}">
											<span class="checkmark">{{ $t('calendar.small_days.thursday') }}</span>
										</label>
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('friday')}">
											<span class="checkmark">{{ $t('calendar.small_days.friday') }}</span>
										</label>
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('saturday')}">
											<span class="checkmark">{{ $t('calendar.small_days.saturday') }}</span>
										</label>
										<label class="checkbox-workdays" v-bind:class="{active: user.working_days.includes('sunday')}">
											<span class="checkmark">{{ $t('calendar.small_days.sunday') }}</span>
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="row-data-promises" v-if="user.key_results_count > 0">
							
							
							<div class="box-data-promises" v-if="user.has_daily_promise != 'person_not_working_today'">
								<div class="text-promise-tutorial">
									<div class="title">{{ $t('tutorial-promise.title-box') }} {{ user.has_daily_promise != 'promise_not_set' ? '' : $t('daily_promise.unstable') }}</div>
									<div class="description" v-html="user.has_daily_promise == 'has_promise' ? user.promise.name : $t('tutorial-promise.desc-box')"></div>
									<div class="contribute-to" v-if="user.has_daily_promise == 'has_promise'">{{ $t('set-promise.contribute-to') }}: {{ $tc("daily_promise.count_key_results", user.daily_promise.key_results_involved) }}</div>
								</div>
								
								<div class="button-action" v-if="$auth.user().slug == user.slug">
									<div class="with-timer" v-if="user.has_daily_promise == 'has_promise' && user.daily_promise.status == 'pending'">
										<button class="button-tbf-blue" @click="user.has_daily_promise == 'has_promise' ? (user.daily_promise.status == 'pending' ? showEvaluate(user.daily_promise) : '') : showModal('add_promise')">
											{{ $t('daily_promise.evaluate') }}
										</button>
										<span>{{ $t('show-user.start_evaluation') }}</span>
									</div>
									<div class="failed" v-else-if="user.has_daily_promise == 'has_promise' && user.daily_promise.status == 'not_completed'"><icon-close/></div>
									<div class="realized" v-else-if="user.has_daily_promise == 'has_promise' && user.daily_promise.status == 'completed'"><icon-check/></div>
									<div class="with-timer" v-else>
										<button class="button-tbf-blue" @click="user.has_daily_promise == 'has_promise' ? (user.daily_promise.status == 'pending' ? showEvaluate(user.daily_promise) : '') : showModal('add_promise')" >
											{{ $t('daily_plan.add-promise') }}
										</button>
										<span>{{ $t('daily_plan.time-remain') }}: {{timeRemain}}</span>
									</div>
								</div>
								<div class="button-action only-svg" v-else>
									<img src="/build/icons/promises.svg">
								</div>
							</div>
							<div class="box-data-promises" v-else>
								<div class="text-promise-tutorial">
									<div class="title">{{ $t('tutorial-promise.title-box') }} {{ user.has_daily_promise ? '' : $t('daily_promise.unstable') }}</div>
									<div class="description" v-if="$auth.user().slug == user.slug">{{ $t('daily_promise.free_day') }}</div>
									<div class="description" v-else>{{ $t('daily_promise.free_day') }}</div>
								</div>
								<div class="button-action with-lottie">
							        <lottie :options="defaultOptions" :height="85" :width="85" v-on:animCreated="handleAnimation"/>
								</div>
							</div>
							
						</div>
						<div  class="row-data-promises" v-else>
							<div class="box-data-promises">
								<div class="text-promise-tutorial">
									<div class="title">{{ $t('tutorial-promise.title-box') }}</div>
									<div class="description">{{ $t('daily_promise.not_key_results') }}</div>
								</div>
								<div class="button-action with-lottie">
							        <lottie :options="defaultOptions" :height="85" :width="85" v-on:animCreated="handleAnimation"/>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="space-right"></div>
			</section>

<section class="subheader-page-section timeline">
				<div class="space-left"><icon-list class="icon-list" /></div>
				<div class="content-section">
					<div class="header-table">
						<div class="title">{{$t('show-user.timeline.title')}}</div>
						<div class="right-part">
							<div class="action-header filter-date">
								<button class="btn-default-tbf" @click="default_timeline_offset == timeline_offset ? '' : changeOffset(false, 'default')" v-bind:class="{disabled: default_timeline_offset == timeline_offset}" :disabled="default_timeline_offset == timeline_offset">{{$t('show-user.timeline.filter')}} <icon-arrow class="icon-arrow right"/></button>
							</div>
						</div>
					</div>
				</div>
				<div class="space-right"></div>
			</section>

<section class="timeline-bar-section">
				<div class="space-left"></div>
				<div class="content-section">
					<div class="timeline-bar">
						<div class="prev-week" @click="moment(data_timeline[6].created_at) < moment(user.created_at) ? '' : changeOffset(+1)" v-bind:class="{disabled: moment(data_timeline[6].created_at) < moment(user.created_at) }">
							<icon-arrow class="icon-arrow left" />
						</div>
						<div class="hider-left"></div>
						<div class="current-weeks">
							<div class="day" v-for="(day, index) in data_timeline" :data-week="moment(day.created_at).week()" v-bind:class="{'start-week': moment(day.created_at).format('d') == 1, 'end-week': moment(day.created_at).format('d') == 0}" :style="'width:' +dayWidth+ '%;'">
								<div class="promises-status">
									<div class="title">{{$t('show-user.promise')}}</div>
									<div class="status">{{ $t('timeline_status.' + day.status) }}</div>
								</div>
								<div class="num-week">{{ moment(day.created_at).format('d') == 1 ? 'Sapt. '+ moment(day.created_at).format('W') : '' }}</div>
								<v-popover offset="0" trigger="hover" placement="top" popoverBaseClass="popover-tbf" popoverClass="description-popover" :delay="{show: 0, hide: 0}" :disabled="day.status == 'not_exist'">
									<div class="space-box-day" @click="day.status == 'pending' ? showEvaluate(day) : ''">
										<div class="box-day"

v-bind:class="{
											completed: day.status == 'completed', 
											not_set: day.status == 'not_completed' || day.status == 'not_set', 
											warning: day.status == 'pending' || (moment(day.created_at).isSame(moment().format('YYYY-MM-DD')) && user.has_daily_promise == 'promise_not_set'),
											blue: day.status == 'pending' && moment(day.created_at).isSame(moment().format('YYYY-MM-DD')),
											disabled: day.status == 'not_exist' }"
										></div>
									</div>
									<template slot="popover">

<div class="label" v-if="day && day.key_results_names != null"><icon-list class="icon-list" /> {{day.key_results_names}}</div>
										
										<div class="description" v-if="day.name">{{day.name}}</div>

<div class="description" v-else-if="day.status == 'not_working'">{{ $t('show-user.timeline.promise-not-need') }}</div>

<div class="description" v-else-if="day.status == 'no_key_result'">{{ $t('show-user.timeline.promise-without-key-result') }}</div>
										<div class="description" v-else>{{ $t('show-user.timeline.promise-not-set') }}</div>

<div class="reason" v-if="day.why_not"><span>{{ $t('show-user.timeline.reason') }}:</span> {{ day.why_not }}</div>
									</template>
								</v-popover>
								<div class="date" v-if="$resize && $mq.above(600)">{{ moment(day.created_at).isSame(moment().format('YYYY-MM-DD')) ? $t('general.today') : moment(day.created_at).format('MMM DD') }}</div>
								<div class="date" v-else>{{ moment(day.created_at).format('ddd') }}</div>
							</div>
						</div>
						<div class="hider-right"></div>
						<div class="next-week" @click="timeline_offset <= default_timeline_offset ? '' : changeOffset(-1)" v-bind:class="{disabled: timeline_offset <= default_timeline_offset}">
							<icon-arrow class="icon-arrow right" />
						</div>
					</div>
				</div>
				<div class="space-right"></div>
			</section>

<section class="header-list-section">
				<div class="space-left like-subtitle"><icon-list class="list-icon" /></div>
				<div class="content-section">
					<div class="header-table">
						<div class="tabs">
							<div class="tab-item" v-bind:class="activetab == 'keyresults' ? 'active' : ''" @click="activateTab('keyresults')">
								<span class="like-subtitle">{{$t('show-user.key-results')}} ({{filteredKrs.length}})</span>
							</div>
							<div class="tab-item" v-bind:class="activetab == 'objectives' ? 'active' : ''" @click="activateTab('objectives')">
								<span class="like-subtitle">{{$t('show-user.objectives')}} ({{filteredObjs.length}})</span>
							</div>
						</div>

<div class="action-header filter-date dropdown-tbf" v-if="activetab == 'keyresults'">
							<button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-if="$resize && $mq.above(600)">
								{{ $t('filter_key-results.' + activeStatusKr) }} <icon-arrow class="icon-arrow"/>
							</button>

<button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-else><icon-filter /></button>
							<div class="dropdown-menu" aria-labelledby="dropdownFilter">
								<div v-for="krStatus in krStatusList" 
								class="dropdown-item" 
								@click="changeActiveStatus('kr', krStatus)" 
								v-bind:class="{active: activeStatusKr == krStatus}">
								{{ $t('filter_key-results.'+krStatus) }}
								</div>
							</div>
						</div>
						<div class="action-header filter-date dropdown-tbf" v-else-if="activetab == 'objectives'">
							<button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-if="$resize && $mq.above(600)">
								{{ $t('filter_objectives.' + activeStatusObj) }} <icon-arrow class="icon-arrow"/>
							</button>

<div class="action-header filter-quarter solo dropdown-tbf" v-if="$resize && $mq.above(600)">
							<button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<div class="quarter-no">{{ $t('objectives.quarter') }} {{ activeQuarter.quarter }}, {{activeQuarter.year }}</div> <icon-arrow class="icon-arrow"/>
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownFilter">
								<div class="dropdown-item" v-for="quarterItem in arrayQuarters" @click="changeActiveQuarter(quarterItem)" v-bind:class="{active: activeQuarter == quarterItem, 'bor-top': quarterItem.quarter == 4 }">
									<div class="quarter-no">{{ $t('objectives.quarter_short') }}{{ quarterItem.quarter }} {{ quarterItem.year }}</div>  <div class="quarter-period">{{ quarterItem.start_quarter | moment('MMMM') }} - {{ quarterItem.end_quarter | moment('MMMM') }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="space-right"></div>
			</section>
			
			<section class="list-items-section tab-container" v-bind:class="{active: activetab == 'keyresults'}" v-if="filteredKrs.length">
				<div class="group_items" v-for="key_result in filteredKrs">
					<div class="space-left">
						<icon-arrow class="icon-arrow right"/>
					</div>
					<div class="content-row">
						<div class="row-tbf action-row" @click="showModalKR(parseInt(key_result.id).toString(), key_result.uuid, 'updates')" v-bind:class="{upcoming: key_result.status == 'upcoming'}">
							
							<div class="column-tbf icon-title kr-icon-width" v-if="$resize && $mq.above(770)">
								<icon-list />
							</div>

<div class="column-tbf row-title with-icon kr-name-width">
								
								<v-popover offset="10" trigger="hover click" placement="bottom" popoverBaseClass="popover-tbf" popoverClass="description-popover" :delay="{show: 200, hide: 0}" :disabled="$resize && $mq.below(1030)">
									<div class="text"><img class="attention-update" src="/build/icons/attention-square.svg" v-if="$resize && $mq.below(769) && (key_result.needs_an_update == 'today' || key_result.needs_an_update == 'past')"> {{ key_result.name.charAt(0).toUpperCase() + key_result.name.slice(1) }}</div>
									<div class="subtitle">Obiectiv: {{ key_result.objective.name }}</div>
									
									<template slot="popover">
										<div class="description">{{ key_result.description }}</div>
									</template>
								</v-popover>
							</div>

<div class="column-tbf column-value kr-promises-width" v-if="$resize && $mq.above(1030)" @click.stop="showModalKR(parseInt(key_result.id).toString(), key_result.uuid, 'promises')">
								<v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}">
									<div class="label">{{$t('show-user.promises')}}</div>
									<div class="value" v-if="key_result.need_evaluate_promise"><img class="circle-info" src="/build/icons/circle-info-orange.svg"> {{ $t('show-user.status-pending') }}</div>
									<div class="value" v-else>{{ key_result.promises_completed }}/{{ key_result.promises_count }} {{ $t('key-result-promises.completed')}}</div>

<template slot="popover">
										<div class="simple-text" v-if="key_result.status == 'upcoming'">{{ $tc('key-result.tooltip-promises-cant') }}</div>
										<div class="simple-text" v-else>{{ key_result.need_evaluate_promise ? $t('key-result.tooltip-promises-evaluate') : $t('key-result.tooltip-promises') }}</div>
									</template>
								</v-popover>
							</div>

<div class="column-tbf column-value kr-updates-width" v-if="$resize && $mq.above(1030)" @click.stop="showModalKR(parseInt(key_result.id).toString(), key_result.uuid, 'updates')">
								<v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}">
									<div class="label">{{$t('show-user.updates')}}</div>

<div class="value" v-if="key_result.needs_an_update == 'today' || key_result.needs_an_update == 'past'"><img class="circle-info" src="/build/icons/circle-info-orange.svg"> {{ $t('show-user.status-pending') }}</div>
									<div class="value" v-else-if="key_result.last_key_result_log"><img class="circle-info" src="/build/icons/circle-check-green.svg"> {{ $tc('show-user.days-ago',  diffDaysFrom(key_result.last_key_result_log.created_at)) }}</div>
									<div class="value" v-else>{{ $t('show-user.no-updates') }}</div>

<template slot="popover">
										<div class="simple-text" v-if="key_result.needs_an_update == 'today'">{{ $t('key-result.tooltip-update-today') }}</div>
										<div class="simple-text" v-else-if="key_result.needs_an_update == 'past'">{{ $t('key-result.tooltip-update-past') }}</div>
										<div class="simple-text" v-else-if="key_result.needs_an_update">{{ $tc('key-result.tooltip-update-future', key_result.needs_an_update) }}</div>
										<div class="simple-text" v-else-if="key_result.status == 'upcoming'">{{ $t('key-result.tooltip-update-cant') }}</div>
										<div class="simple-text" v-else>{{ $tc('key-result.tooltip-updates-view') }}</div>
									</template>
								</v-popover>
							</div>

<div class="column-tbf column-value kr-deadline-width" v-if="$resize && $mq.above(1030)">
								<v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}">
									<div class="label">{{ moment(key_result.start_date) >= moment() ? $t('objectives.start_on') : $t('objectives.deadline')}}</div>

<div class="value" v-if="key_result.percent >= 100"><img class="circle-info" src="/build/icons/circle-check-green.svg"> {{ $t('status.completed') }}</div>
									<div class="value" v-else-if="diffDays(key_result.end_date) < 0"><img class="circle-info" src="/build/icons/circle-info-red.svg"> {{ $t('show-user.outdated') }}</div>
									<div class="value" v-else>{{ diffDays(key_result.end_date)+" "+$t('show-user.days') }}</div>

<template slot="popover">
										<div class="simple-text">{{ key_result.end_date | moment('D MMMM YYYY') }}</div>
									</template>
								</v-popover>
							</div>

<div class="column-tbf column-value kr-last-value-width" v-if="$resize && $mq.above(770)">
								<v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}">
									<div class="label">{{ $t('show-user.last-value') }}</div>

<div class="value" v-if="displayKeyResultCurrentValue(key_result) % 1 != 0">{{ displayKeyResultCurrentValue(key_result) | numeral('0.00a') }}{{ optionsUnits[key_result.unity] ? key_result.unity : ''}} {{ !optionsUnits[key_result.unity] ? key_result.unity : optionsUnits[key_result.unity]}}</div>
									<div class="value" v-else>{{ displayKeyResultCurrentValue(key_result) | numeral('0a') }}{{ optionsUnits[key_result.unity] ? key_result.unity : ''}} {{ !optionsUnits[key_result.unity] ? key_result.unity : "("+optionsUnits[key_result.unity]+")"}}</div>
									
									<template slot="popover">
										<div class="simple-text">{{ $t('progress_type_text.' + key_result.progress_type, { to: key_result.target % 1 != 0 ? $options.filters.numeral(key_result.target ,  '0,0.00') : $options.filters.numeral(key_result.target ,  '0,0'), unit: key_result.unity, from: key_result.start_value % 1 != 0 ? $options.filters.numeral(key_result.start_value ,  '0,0.00') : $options.filters.numeral(key_result.start_value ,  '0,0')}) }}</div>
									</template>
								</v-popover>

</div>

<div class="column-tbf item-value kr-value-width" v-if="$resize && $mq.above(600)">
								<v-popover offset="10" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}" :disabled="$resize && $mq.below(1030)">
									<div class="top-data">
										<div class="current-value" v-if="moment(key_result.start_date) >= moment()">
											<div class="value">0</div>
										</div>
										<div class="current-value" v-else>
											<div class="value">{{ parseInt(key_result.percent).toString()+'%' }}</div>
										</div>
										<div class="info"><icon-info class="icon-info"/></div>
									</div>
									<div class="progress-bar-tbf" v-bind:class="{disabled: moment(key_result.start_date) > moment()}">
										<div class="complete-progress-tbf" v-bind:class="{pink: diffDays(key_result.end_date) < 1 && key_result.percent < 100, green: key_result.percent >= 100}" :style="'width: calc(2px + ' + (parseInt(key_result.percent) < 1 ? '2px' : (key_result.percent < 100 ? key_result.percent + '%' : '100%')) + ');'"></div>
									</div>

<template slot="popover">
										<div class="simple-text">
											{{ $t('progress_type_text.' + key_result.progress_type, { to: key_result.target % 1 != 0 ? $options.filters.numeral(key_result.target ,  '0,0.00') : $options.filters.numeral(key_result.target ,  '0,0'), unit: key_result.unity, from: key_result.start_value % 1 != 0 ? $options.filters.numeral(key_result.start_value ,  '0,0.00') : $options.filters.numeral(key_result.start_value ,  '0,0')}) }}. 
											{{ $t('progress_type_text.current_value') }}: {{ displayKeyResultCurrentValue(key_result) % 1 != 0 ? $options.filters.numeral(displayKeyResultCurrentValue(key_result), '0,0.00') : $options.filters.numeral(displayKeyResultCurrentValue(key_result), '0,0')}} {{ key_result.unity }}
										</div>
									</template>
								</v-popover>
							</div>
							
						</div>
					</div>
					<div class="space-right">
						<div class="dots-edit" :id="'edit-key-result-' + key_result.id" v-click-outside="hideDropdown" v-if="key_result.rights.edit || key_result.rights.delete">
							<div class="dropdown edit-item-dropdown">
								<div class="overlay-button" @click.stop="showDropdown(key_result.id)"></div>
								<div class="edit-item-button" :id="'dropdownEdit'+key_result.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<icon-edit-dots />
								</div>
								<div class="dropdown-menu dropdown-menu-right" :id="'dropdownMenu'+ key_result.id " :aria-labelledby="'dropdownEdit'+key_result.id">
									<div class="dropdown-item" @click.stop="showModal('key_result', parseInt(key_result.id).toString(), key_result.objective)" v-if="key_result.rights.edit">{{$t('show-user.edit')}}</div>
									<div class="dropdown-item" @click.stop="openModalV2('delete', key_result, 'kr', 'show_user')" v-if="key_result.rights.delete">{{$t('show-user.delete')}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			
			
			<section class="list-items-section tab-container" v-bind:class="{active: activetab == 'keyresults'}" v-else>
				<div class="group_items">
					<div class="space-left"></div>
					<div class="empty-row mrgn">
						<div class="title single" v-html="$t('show-user.no-key-results', { name: user.first_name.charAt(0).toUpperCase() + user.first_name.slice(1) })">
						</div>
						<div class="description wide" v-html="$t('show-user.desc-no-key-results')">
						</div>
					</div>
					<div class="space-right"></div>
				</div>
			</section>

<section class="list-items-section tab-container" v-bind:class="{active: activetab == 'objectives'}" v-if="filteredObjs.length">
				<div class="group_items" v-for="objective in filteredObjs">
					<div class="space-left" @click="showObjective(objective.slug)">
						<icon-arrow class="icon-arrow right"/>
					</div>
					<div class="content-row" @click="showObjective(objective.slug)">
						<div class="row-tbf action-row">
							<div class="column-tbf icon-title obj obj-icon-width" v-if="$resize && $mq.above(770)">
								<icon-objectives-list />
							</div>

<div class="column-tbf row-title obj-user-name-width">
								<div class="text"><img class="attention-update" src="/build/icons/attention-square.svg" v-if="$resize && $mq.below(769) && (objective.needs_an_update == 'today' || objective.needs_an_update == 'past')">{{ objective.name }}</div>
							</div>

<div class="column-tbf column-value obj-user-kr-width" v-if="$resize && $mq.above(1030)">
								<div class="label">{{ $t('objectives.key-results')}}</div>
								<div class="value"><img class="circle-info" src="/build/icons/circle-info-orange.svg" v-if="objective.needs_an_update == 'today' || objective.needs_an_update == 'past' || objective.need_evaluate_promise"> {{  $t('objectives.key-results-progress', {n: objective.key_results_in_progress, total: objective.key_results_count }) }}</div>
							</div>

<div class="column-tbf column-value obj-user-deadline-width" v-if="$resize && $mq.above(770)">
								<v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}">
									<div class="label">{{ moment(objective.start_date) >= moment() ? $t('objectives.start_on') : $t('objectives.deadline')}}</div>

<div class="value" v-if="objective.percent >= 100"><img class="circle-info" src="/build/icons/circle-check-green.svg"> {{ $t('status.completed') }}</div>
									<div class="value" v-else-if="diffDays(objective.end_date) < 0"><img class="circle-info" src="/build/icons/circle-info-red.svg"> {{ $t('show-user.outdated') }}</div>
									<div class="value" v-else-if="moment(objective.start_date) >= moment()">{{ objective.start_date | moment('DD/MM/YYYY') }}</div>
									<div class="value" v-else>{{ diffDays(objective.end_date) }} zile</div>

<template slot="popover">
										<div class="simple-text">
											{{ objective.end_date | moment('D MMMM YYYY') }}
										</div>
									</template>
								</v-popover>
							</div>

<div class="column-tbf item-value obj-user-progress-width" v-if="$resize && $mq.above(600)">
								<div class="top-data">
									<div class="current-value">
										<div class="value" v-if="moment(objective.start_date) >= moment()">0</div>
										<div class="value" v-else>{{ parseInt(objective.percent).toString() + '%' }}</div>
									</div>
									<div class="info"><icon-info class="icon-info"/></div>
								</div>
								<div class="progress-bar-tbf" v-bind:class="{disabled: moment(objective.start_date) > moment()}">
									<div class="complete-progress-tbf" v-bind:class="{pink: (diffDays(objective.end_date) < 1 && objective.percent != 100), green: objective.percent >= 100}" :style="'width: calc(2px + ' + (parseInt(objective.percent) < 1 ? '2px' : objective.percent + '%') + ');'"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="space-right">
						<div class="dots-edit" :id="'edit-objective-' + objective.id" v-click-outside="hideDropdownObj" v-if="objective.rights.edit || objective.rights.delete">
							<div class="dropdown edit-item-dropdown">
								<div class="overlay-button" @click.stop="showDropdownObj(objective.id)"></div>
								<div class="edit-item-button" :id="'dropdownEditObjective'+objective.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<icon-edit-dots />
								</div>
								<div class="dropdown-menu dropdown-menu-right" :id="'dropdownMenuObjective'+ objective.id " :aria-labelledby="'dropdownEditObjective'+objective.id">
									<div class="dropdown-item" @click.stop="showModal('objective', objective.slug)" v-if="objective.rights.edit">{{$t('show-user.edit')}}</div>
									<div class="dropdown-item" @click.stop="openModalV2('delete', objective, 'objective', 'show_user')" v-if="objective.rights.delete">{{$t('show-user.delete')}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>

<section class="list-items-section tab-container" v-bind:class="{active: activetab == 'objectives'}" v-else>
				<div class="group_items">
					<div class="space-left"></div>
					<div class="empty-row mrgn">
						<div class="title single" v-html="$t('show-user.no-objective', { name: user.first_name.charAt(0).toUpperCase() + user.first_name.slice(1) })">
						</div>
						<div class="description wide" v-html="$t('show-user.desc-no-objective')">
						</div>
					</div>
					<div class="space-right"></div>
				</div>
			</section>
			
		</div>
	</div>
		
	<div v-else>
		<div class="item-page">
			<section class="header-user-section">
				<div class="space-left"></div>
				<div class="content-section">
					<div class="primary-boxes-user">
						<div class="row-data-user">
							<div class="box-data-user placeholder-loader" style="height: 169px;">
							</div>
						</div>
						<div class="row-data-promises">
							<div class="box-data-promises placeholder-loader" style="height: 169px;">
							</div>
						</div>
					</div>
				</div>
				<div class="space-right"></div>
			</section>
			<section class="subheader-page-section timeline">
				<div class="space-left"><icon-list class="icon-list" /></div>
				<div class="content-section">
					<div class="header-table">
						<div class="title placeholder-loader" style="height: 21px; max-width: 170px; width: 100%;"></div>
						<div class="placeholder-loader" style="margin-left: auto; height: 37px; width: 100%; max-width: 140px;"></div>
					</div>
				</div>
				<div class="space-right"></div>
			</section>

export default {
		data() {
			return {
                defaultOptions: {
                    animationData: animationData.default
                },
				loaded: false,
				notAllowed: false,
				notFound: false,
				notPaid: false,
				data_timeline: {},
				active_day: false,
				user: {},
				activetab: 'keyresults',
				hoverkeyResult: '',
				hoverObjective: '',
				user_slug: '',
				arrayQuarters: [],
				activeQuarter: { 
					quarter: moment().quarter(), 
					year: moment().format('YYYY'), 
					start_quarter: moment().startOf('quarter').format('YYYY-MM-DD'), 
					end_quarter: moment().endOf('quarter').format('YYYY-MM-DD') 
				},
				timeline_offset: 4,
				default_timeline_offset: 4,
				weekNumbers: 6,
				dayWidth: 0,
				firstLoadedTimeline: false,
                optionsUnits: {
                	"€": 'Euro',
                	"$": 'Dolar',
                	"%": 'Procent',
                },
                dateRemain: '',
                timeRemain: '00:00:00',
                krStatusList: [],
                activeStatusKr: 'active',
                objStatusList: [],
                activeStatusObj: 'active',
                arrayTranslations: [
	                'calendar.small_days.friday',
	                'calendar.small_days.monday',
	                'calendar.small_days.saturday',
	                'calendar.small_days.sunday',
	                'calendar.small_days.thursday',
	                'calendar.small_days.tuesday',
	                'calendar.small_days.wednesday',
	                'daily_plan.add-promise',
	                'daily_plan.time-remain',
	                'daily_promise.count_key_results',
	                'daily_promise.evaluate',
	                'daily_promise.free_day',
	                'daily_promise.not_key_results',
	                'daily_promise.unstable',
	                'filter_key-results.active',
	                'filter_key-results.all',
	                'filter_key-results.finished',
	                'filter_key-results.overdue',
	                'filter_key-results.upcoming',
	                'filter_objectives.active',
	                'filter_objectives.all',
	                'filter_objectives.finished',
	                'filter_objectives.overdue',
	                'filter_objectives.upcoming',
	                'general.today',
	                'key-result-promises.completed',
	                'key-result.tooltip-promises',
	                'key-result.tooltip-promises-cant',
	                'key-result.tooltip-promises-evaluate',
	                'key-result.tooltip-update-cant',
	                'key-result.tooltip-update-future',
	                'key-result.tooltip-update-past',
	                'key-result.tooltip-update-today',
	                'key-result.tooltip-updates-view',
	                'navbar.dashboard',
	                'navbar.people',
	                'objectives.deadline',
	                'objectives.key-results',
	                'objectives.key-results-progress',
	                'objectives.quarter',
	                'objectives.quarter_short',
	                'objectives.start_on',
	                'progress_type_text.above',
	                'progress_type_text.current_value',
	                'progress_type_text.decrease',
	                'progress_type_text.grow',
	                'progress_type_text.under',
	                'progress_type_text.value',
	                'set-promise.contribute-to',
	                'show-user.days',
	                'show-user.days-ago',
	                'show-user.delete',
	                'show-user.desc-no-key-results',
	                'show-user.desc-no-objective',
	                'show-user.edit',
	                'show-user.key-results',
	                'show-user.last-value',
	                'show-user.no-key-results',
	                'show-user.no-objective',
	                'show-user.no-updates',
	                'show-user.objectives',
	                'show-user.outdated',
	                'show-user.promise',
	                'show-user.promises',
	                'show-user.start_evaluation',
	                'show-user.status-pending',
	                'show-user.timeline.filter',
	                'show-user.timeline.promise-not-set',
	                'show-user.timeline.promise-without-key-result',
	                'show-user.timeline.reason',
	                'show-user.timeline.title',
	                'show-user.updates',
	                'show-user.working-days.desc',
	                'show-user.working-days.title',
	                'status.completed',
	                'timeline_status.completed',
	                'timeline_status.not_completed',
	                'timeline_status.not_set',
	                'timeline_status.pending',
	                'timeline_status.state_title',
	                'tutorial-promise.desc-box',
	                'tutorial-promise.title-box',
	                'users.role-name-admin',
	                'users.role-name-employee',
	                'users.role-name-manager'
                ]
			};
		},
		components: {
			IconUserSettings,
			IconCheckPrimary,
			NotAllowed,
			NotFound,
			IconEmail,
			IconArrow,
			IconList,
			IconPlus,
			IconInfo,
			IconFilter,
			IconEditDots,
			IconObjectiveSingle,
			IconObjectivesList,
			NotPaid,
			IconCheck,
			IconClose,
			Lottie
		},
		watch:{
            $route (to, from){
            	if(this.$route.name == 'homepage' || this.$route.name == 'dashboard'){
            		var title = 'Dashboard';
            		var backRoute = '' 
            	}else{
            		var title = 'Oameni';
            		var backRoute = 'users' 
            	}
            	this.$root.$emit("navbar_title", title, backRoute)

if(this.$route.name == 'homepage' || this.$route.name == 'dashboard'){
            		this.user_slug = this.$auth.user().slug
            		this.getUser()
            		this.getTimeline()
            	}
            }
        },
        created() {
        	window.addEventListener('resize', this.handleResize)
        },
        destroyed() {
        	window.removeEventListener('resize', this.handleResize)
        },
        beforeDestroy () {
			this.$root.$off('refreshUserPage')
		},
        computed: {
			filteredKrs(){
				return getByStatus(getByQuarter(this.user.key_results, this.activeQuarter), this.activeStatusKr)
			},
			filteredObjs(){
				return getByStatus(getByQuarter(this.user.objectives, this.activeQuarter), this.activeStatusObj)
			}
		},
		async mounted() {
			//Create array of quarters
			var awaitArray = true
			var currentQuarter = moment(this.$auth.user().instance_created_at)

while(awaitArray){
				this.arrayQuarters.push({ quarter: currentQuarter.quarter(), year: currentQuarter.format('YYYY'), start_quarter: currentQuarter.startOf('quarter').format('YYYY-MM-DD'), end_quarter: currentQuarter.endOf('quarter').format('YYYY-MM-DD') })

if(currentQuarter.endOf('quarter') < moment().add(1,'year')){
					currentQuarter = currentQuarter.endOf('quarter').add(1, 'day')
				}else{
					awaitArray = false
				}
			}
			this.arrayQuarters.reverse()
			//END Create array of quarters

this.user_slug = this.$route.params.slug;

if(this.$route.name == 'homepage' || this.$route.name == 'dashboard'){
				this.user_slug = this.$auth.user().slug
			}

if(this.$resize && this.$mq.between([1031,1300])){
				this.weekNumbers = 5
				this.timeline_offset = 3
				this.default_timeline_offset = 3
			}

if(this.$resize && this.$mq.between([771,1030])){
				this.weekNumbers = 4
				this.timeline_offset = 2
				this.default_timeline_offset = 2
			}

if(this.$resize && this.$mq.below(770)){
				this.weekNumbers = 3
				this.timeline_offset = 1
				this.default_timeline_offset = 1
			}

if(this.user_slug != ''){
				if(this.$auth.user().status == 'unpaid' || this.$auth.user().status == 'new'){
					this.loaded = true
					this.notPaid = true
					setTimeout(() => {
						$('.opacity-page').addClass('show')
						if(this.$route.name == 'homepage' || this.$route.name == 'dashboard'){
							var title = this.$t('navbar.dashboard');
							var backRoute = '' 
						}else{
							var title = this.$t('navbar.people');
							var backRoute = 'users' 
						}
						this.$root.$emit("navbar_title", title, backRoute)
					}, 0)
				}else{
					await this.getKrStatusList()
					await this.getObjStatusList()
					await this.getUser()
					await this.getTimeline()
				}
			}else{
				this.$router.push({ name: 'page-404'})
			}

this.$root.$on("refreshUserPage", () => {
				this.getUser()
				this.getTimeline()
            });
		},
		methods: {
			async getUser(){
				await axios.get('/people/'+this.user_slug)
				.then(({data}) => {
					this.user = data.data
					this.dateRemain = this.user.promise_time
					this.startCountdown()
				}).catch(error => {
					var status = error.response.data.status
					this.notAllowed = status == 'not allowed'
					this.notFound = status == 'not found'
					this.notPaid = status == 'payment_failed' || status == 'first_registration'

if(status == 'error' && error.response.data.message == 'Unauthorized'){
						this.$auth.refresh()

setTimeout(() => {
							if(this.$auth.check()){
								location.reload()
							}
						}, 300)
					}

}).then(() => {
					setTimeout(()=>{
						if(this.$route.name == 'homepage' || this.$route.name == 'dashboard'){
							var title = this.$t('navbar.dashboard');
							var backRoute = '' 
						}else{
							var title = this.$t('navbar.people');
							var backRoute = 'users' 
						}
						this.$root.$emit("navbar_title", title, backRoute)

setTimeout(() => {
							$('.opacity-page').addClass('show')
						}, 0)
					}, 300)
				})
			},
			async getTimeline(){
				await axios.get('/people/'+ this.user_slug +'/timeline?offset=' + this.timeline_offset + '&week_numbers=' + this.weekNumbers)
				.then(({data}) => {
					this.data_timeline = data.data.array_of_promises_with_index
					// this.active_day = moment().format('YYYY-MM-DD');
				}).catch(error => {
					var status = error.response.data.status
					this.notFound = status == 'not found'

if(status == 'error' && error.response.data.message == 'Unauthorized'){
						this.$auth.refresh()
					}
				}).then(() => {
					this.loaded = true
					setTimeout(() => {
						$('.opacity-page').addClass('show')
					}, 0)

if(this.firstLoadedTimeline){
						this.calculateDayWidth()
					}else{
						setTimeout(() => {
							this.calculateDayWidth()
						}, 500)
					}
				})
			},
			async getKrStatusList(){
				await axios.get('/key-results/status-list').then(({data}) => {
					this.krStatusList = data.data
					this.krStatusList.unshift("all");
				})
			},
			async getObjStatusList(){
				await axios.get('/objectives/status/list').then(({data}) => {
					this.objStatusList = data.data
					this.objStatusList.unshift("all");
				})
			},
			changeOffset(val = false, reset = false){
				this.timeline_offset = reset == 'default' ? this.default_timeline_offset : this.timeline_offset + val
				if(!reset){
					var widthTotalDays = $('.timeline-bar .current-weeks').width()
					var widthMove = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 7

$('.timeline-bar .current-weeks').animate({
						scrollLeft: (val > 0 ? 0 : (widthMove * 2))
					}, 300)
				}

setTimeout(() => {
					this.getTimeline()
				}, 300)
			},
			showModal(type, model = false, requiredData = false, userData = false){
				this.$root.$emit('open_modal', type, model, requiredData, userData, 'show_user');
				this.hideDropdown()
				this.hideDropdownObj()
			},
			showEvaluate(promise = false){
				this.$root.$emit('evaluate_promise_modal', promise, 'show_user');
			},
			openModalV2(type, model = false, typeDelete = false, fromDelete = false){
				this.hideDropdown()
				this.hideDropdownObj()
				this.$root.$emit('open_modal_v2', type, model, typeDelete, fromDelete);
			},
			showModalKR(model, uuid, type){
				this.hideDropdown()
				this.hideDropdownObj()
				this.$root.$emit('open_key_result_modals', model, uuid, type, 'show_user');
			},
			showObjective(objectiveSlug){
				this.$router.push({ name: 'show-objective', params: { slug: objectiveSlug }})
			},
			diffDays(end_date) {
				var a = moment().startOf('day');
				var b = moment(end_date).startOf('day');
				return b.diff(a, 'days');  
			},
			diffDaysFrom(update_date){
				var a = moment(update_date).startOf('day');
				var b = moment().startOf('day');
				return b.diff(a, 'days');  
			},
			activateTab(tab_name){
				this.activetab = tab_name;
			},
			checkDiffUnity(unity){
				var inlineUnits = ['€', '$', 'RON']
				return inlineUnits.includes(unity)
			},
			showDropdown(itemId){
				if(itemId == this.hoverkeyResult){
					$('#dropdownEdit' + this.hoverkeyResult).dropdown('toggle');
					setTimeout(() => {
						this.hoverkeyResult = ''
					}, 0)
				}else{
					this.hoverkeyResult = itemId
					setTimeout(() => {
						$('#dropdownEdit' + this.hoverkeyResult).dropdown('toggle');
					}, 0)
				}
			},
			hideDropdown(){
				if(this.hoverkeyResult != ''){
					$('#dropdownEdit' + this.hoverkeyResult).dropdown('toggle');
					
					setTimeout(() => {
						this.hoverkeyResult = ''
					}, 0)
				}
			},

showDropdownObj(itemId){
				if(itemId == this.hoverObjective){
					$('#dropdownEditObjective' + this.hoverObjective).dropdown('toggle');
					setTimeout(() => {
						this.hoverObjective = ''
					}, 0)
				}else{
					this.hoverObjective = itemId
					setTimeout(() => {
						$('#dropdownEditObjective' + this.hoverObjective).dropdown('toggle');
					}, 0)
				}
			},
			hideDropdownObj(){
				if(this.hoverObjective != ''){
					$('#dropdownEditObjective' + this.hoverObjective).dropdown('toggle');
					
					setTimeout(() => {
						this.hoverObjective = ''
					}, 0)
				}
			},
			calculateDayWidth(){
				var widthTotalDays = $('.timeline-bar .current-weeks').width()

this.dayWidth = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 100 / widthTotalDays
				var widthMove = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 7
				$('.timeline-bar .current-weeks .day').css('opacity', 1)

if(!this.firstLoadedTimeline){
					setTimeout(() => {
						$('.timeline-bar .current-weeks').scrollLeft(widthMove)
					}, 100)
				}else{
					$('.timeline-bar .current-weeks').scrollLeft(widthMove)
				}

this.firstLoadedTimeline = true
			},
			displayKeyResultCurrentValue(keyResult) {
				var text = "";
				var value = keyResult.last_key_result_log ? keyResult.last_key_result_log.value : keyResult.start_value;		
				return value.includes('.00') ? parseInt(value).toString() : parseFloat(value).toString();
			},
			needsDecimal(keyResult){
				var needsDecimal = false;
				var value = keyResult.last_key_result_log ? keyResult.last_key_result_log.value : keyResult.start_value;
				if(displayType == 'short'){
					needsDecimal = parseFloat(value) % 1 != 0 ? true : false;
				}			
				return needsDecimal;
			},
			handleResize(){
				if(this.$mq.above(1301) && this.weekNumbers != 6){
					this.weekNumbers = 6
					this.timeline_offset = 4
					this.default_timeline_offset = 4
					this.getTimeline()
				}else if(this.$mq.between([1031,1300]) && this.weekNumbers != 5){
					this.weekNumbers = 5
					this.timeline_offset = 3
					this.default_timeline_offset = 3
					this.getTimeline()
				}else if(this.$mq.between([771,1030]) && this.weekNumbers != 4){
					this.weekNumbers = 4
					this.timeline_offset = 2
					this.default_timeline_offset = 2
					this.getTimeline()
				}else if(this.$mq.below(770) && this.weekNumbers != 3){
					this.weekNumbers = 3
					this.timeline_offset = 1
					this.default_timeline_offset = 1
					this.getTimeline()
				}else{
					var widthTotalDays = $('.timeline-bar .current-weeks').width()
					this.dayWidth = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 100 / widthTotalDays
					var widthMove = (widthTotalDays / ((this.weekNumbers - 2) * 7)) * 7
					$('.timeline-bar .current-weeks .day').css('opacity', 1)
					$('.timeline-bar .current-weeks').scrollLeft(widthMove)
				}

},
			changeActiveQuarter(quarter){
				this.activeQuarter = quarter;
			},
			changeActiveStatus(type, status){
				if(type == 'kr') this.activeStatusKr = status;
				else if(type == 'objective') this.activeStatusObj = status;
			},
            handleAnimation(anim){
                this.anim = anim;
                this.anim.setSpeed(1);
            },
			startCountdown(){
				let progressBar = document.querySelector('.e-c-progress');
				let length = Math.PI * 2 * 100;
				let intervalTimer;
				let timeLeft;
				var startTime = moment();
				var endTime = moment(this.dateRemain+":00", "HH:mm:ss");
				let wholeTime = endTime.diff(startTime, 'seconds');

var app = this;

function timer (){
					intervalTimer = setInterval(function(){
							var startTime = moment();
							var endTime = moment(app.dateRemain+":00", "HH:mm:ss");
							timeLeft = endTime.diff(startTime, 'seconds');
							// timeLeft = moment(app.dateRemain).diff(moment(), 'seconds');
							if(timeLeft < 0){
								clearInterval(intervalTimer);
								app.timeRemain = '00:00'
								return ;
							}

displayTimeLeft(timeLeft);
					}, 1000);
				}

function displayTimeLeft (timeLeft){
					let seconds = timeLeft % 60;
					let hours = Math.floor(timeLeft / 60);
					let minutes = hours % 60;
					hours = Math.floor(hours / 60);

let displayString = `${(hours < 10 && hours >= 1) ? '0' : ''}${hours >= 1 ? hours + ':' : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
					app.timeRemain = displayString;
				}

timer()
			}
		}
	};

function getByQuarter(list, quarter) {
		var quarterStart = moment(quarter.start_quarter)
		var quarterEnd = moment(quarter.end_quarter)

return list.filter(item => (moment(item.start_date) >= quarterStart && moment(item.start_date) <= quarterEnd) || (moment(item.end_date) >= quarterStart && moment(item.end_date) <= quarterEnd) || (moment(item.start_date) < quarterStart && moment(item.end_date) > quarterEnd))
	}

function getByStatus(list, status) {
		if (status == 'all') return list
		
		return list.filter(item => item.status == status)
	}
</script>

Back