Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
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
close
Edit File :
Objectives.vue
| Size :
20.81
KB
Copy
<template> <div v-if="loaded" class="opacity-page"> <div class="fe-btn-translation" @click="$root.$emit('open_modal_translation', 'Objectives', 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 v-else-if="objectives.length && !notAllowed"> <div class="list-page-tbf goals-page"> <section class="header-list-page-section"> <div class="space-left"> <img src="/build/icons/search-disabled.svg" /> </div> <div class="content-section"> <div class="header-table"> <div class="left-part"> <input type="text" name="search" :placeholder="$t('objectives.search_by_name')" id="inputSearch" v-model="search_text" autocomplete="off" class="search-box"> </div> <div class="right-part"> <div class="action-header filter-date dropdown-tbf"> <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(objStatus)" v-bind:class="{active: activeStatusObj == objStatus}"> {{ $t('filter_objectives.'+objStatus) }} </div> </div> </div> <div class="action-header filter-quarter dropdown-tbf"> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-if="$resize && $mq.above(600)"> <div class="quarter-no">{{ $t('objectives.quarter') }} {{ activeQuarter.quarter }}, {{activeQuarter.year }}</div> <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 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 class="action-header add-button" v-if="$auth.user().rights.can_create"> <button class="button-tbf-blue" @click="$auth.user().rights.can_create_objective ? showModal('objective') : openModalV2('cant_create_more_objective', false, 'objectives')"><icon-plus class="white" /> {{ $resize && $mq.above(600) ? $t('objectives.add') : '' }}</button> </div> </div> </div> </div> <div class="space-right"></div> </section> <section class="list-items-section" v-if="filteredObjectives.length"> <div class="group_items" v-for="objective in filteredObjectives"> <div class="space-left"> <icon-arrow :id="'arrow-key-result-' + objective.id" class="icon-arrow right"/> </div> <div class="content-row"> <div class="row-tbf action-row" @click="showObjective(objective)"> <div class="column-tbf obj-icon" v-if="$resize && $mq.above(600)"> <icon-objectives-list /> </div> <div class="column-tbf row-title obj-name-width"> <div class="name" v-html="highlight((objective.name.charAt(0).toUpperCase() + objective.name.slice(1)), search_text)"></div> <div class="description">{{ objective.description.charAt(0).toUpperCase() + objective.description.slice(1) }}</div> </div> <div class="column-tbf column-value obj-key-results-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-deadline-width" v-if="$resize && $mq.above(780)"> <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="moment(objective.start_date) >= moment()">{{ objective.start_date | moment('DD/MM/YYYY') }}</div> <div class="value" v-else>{{ $tc('days', diffDays(objective.end_date)) }}</div> </div> <div class="column-tbf item-value obj-column-right" 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 class="column-tbf user-img obj-user-width" v-if="$resize && $mq.above(780)"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 200, hide: 0}"> <img :src="objective.user.avatar" v-if="objective.user.avatar"> <div class="user-circle" v-else> <icon-user-settings/> </div> <template slot="popover"> <div class="simple-text">{{ objective.user.first_name + ' ' + objective.user.last_name }}</div> </template> </v-popover> </div> </div> </div> <div class="space-right"> <div class="dots-edit" :id="'edit-key-result-' + objective.id" v-click-outside="hideDropdown" v-if="objective.rights.edit || objective.rights.delete"> <div class="dropdown edit-item-dropdown"> <div class="overlay-button" @click.stop="showDropdown(objective.id)"></div> <div class="edit-item-button" :id="'dropdownEdit'+objective.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <icon-edit-dots /> </div> <div class="dropdown-menu dropdown-menu-right" :id="'dropdownMenu'+ objective.id " :aria-labelledby="'dropdownEdit'+objective.id"> <div class="dropdown-item" @click.stop="showModal('objective', objective.slug)" v-if="objective.rights.edit">{{ $t('objectives.edit')}}</div> <div class="dropdown-item" @click.stop="openModalV2('delete', objective, 'objective', 'objectives')" v-if="objective.rights.delete">{{ $t('objectives.delete')}}</div> </div> </div> </div> </div> </div> </section> <section class="list-items-section empty" v-else> <div class="group_items"> <div class="space-left"></div> <div class="empty-row full"> <div class="icon"> <img src="/build/icons/no-results-found.svg"> </div> <div class="title"> {{ $t('objectives.empty.you')}} </div> <div class="description narrow" v-html="$t('objectives.empty.desc')"> {{ }} </div> <div class="add-button" v-if="$auth.user().rights.can_create"> <button class="button-tbf-blue" @click="$auth.user().rights.can_create_objective ? showModal('objective') : openModalV2('cant_create_more_objective', false, 'objectives')"><icon-plus class="white" />{{ $t('objectives.add')}}</button> </div> </div> <div class="space-right"></div> </div> </section> </div> </div> <div v-else> <section class="list-items-section"> <div class="group_items"> <div class="space-left"></div> <div class="empty-row full"> <div class="icon"> <icon-objective-empty /> </div> <div class="title"> {{ $t('objectives.empty.title')}} </div> <div class="description narrow" v-html="$t('objectives.empty.desc')"> </div> <div class="add-button" v-if="$auth.user().rights.can_create"> <button class="button-tbf-blue" @click="showModal('objective')"><icon-plus class="white" />{{ $t('objectives.add')}}</button> </div> </div> <div class="space-right"></div> </div> </section> </div> </div> <div v-else> <div class="list-page-tbf goals-page"> <section class="header-list-page-section"> <div class="space-left"> <img src="/build/icons/search-disabled.svg" /> </div> <div class="content-section"> <div class="header-table"> <div class="left-part"> <div class="placeholder-loader" style="width: 150px; height: 24px"></div> </div> <div class="right-part"> <div class="placeholder-loader" style="width: 130px; height: 35px; margin-right: 20px;"></div> <div class="placeholder-loader" style="width: 35px; height: 35px"></div> </div> </div> </div> <div class="space-right"></div> </section> <section class="list-items-section"> <div class="group_items" v-for="n in 5"> <div class="space-left"> <icon-arrow class="icon-arrow right"/> </div> <div class="content-row"> <div class="row-tbf"> <div class="column-tbf row-title obj-name-width"> <div class="name placeholder-loader" style="height: 19px; width: 100px;"></div> <div class="description placeholder-loader" style="height: 16px; width: 150px;"></div> </div> <div class="column-tbf item-value obj-column-right" v-if="$resize && $mq.above(600)"> <div class="top-data"> <div class="current-value"> <div class="value placeholder-loader" style="height: 16px; width: 15px;"></div> </div> <div class="deadline placeholder-loader" style="height: 14px; width: 15px;"></div> </div> <div class="progress-bar-tbf placeholder-loader"></div> </div> <div class="column-tbf user-img obj-user-width" v-if="$resize && $mq.above(600)"> <div class="placeholder-loader user" style="height: 38px; width: 38px;"></div> </div> </div> </div> <div class="space-right"> <div class="dots-edit"> <div class="dropdown edit-item-dropdown"> <div class="overlay-button"></div> <div class="edit-item-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <icon-edit-dots /> </div> </div> </div> </div> </div> </section> </div> </div> </template> <script type="text/javascript"> import EmptyPage from '../General/EmptyPage' import NotAllowed from '../General/NotAllowed' import NotPaid from '../General/NotPaid' import IconObjectiveEmpty from '../Icons/ObjectivesEmpty' import IconPlus from '../Icons/Plus' import IconArrow from '../Icons/Arrow' import IconEditDots from '../Icons/EditDots' import IconFilter from '../Icons/Filter' import IconInfo from '../Icons/Info' import IconUserSettings from '../Icons/UserSettings' import IconObjectivesList from '../Icons/ObjectivesList' export default { data() { return { loaded: false, search_text: '', objectives: [], notAllowed: '', notPaid: false, hoverObjective: '', 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') }, acceptedStatuses: ['all','active','overdue','finished','upcoming'], lengthMaxValue: 0, arrayQuarters: [], objStatusList: [], activeStatusObj: 'active', arrayTranslations: [ 'objectives.search_by_name', 'filter_objectives.active', 'filter_objectives.all', 'filter_objectives.finished', 'filter_objectives.overdue', 'filter_objectives.upcoming', 'objectives.quarter', 'objectives.quarter_short', 'objectives.add', 'objectives.key-results', 'objectives.key-results-progress', 'objectives.start_on', 'objectives.deadline', 'status.completed', 'days', 'objectives.edit', 'objectives.delete', 'objectives.empty.you', 'objectives.empty.desc', 'objectives.empty.title', 'navbar.objectives', ], }; }, components: { EmptyPage, NotAllowed, NotPaid, IconObjectiveEmpty, IconPlus, IconArrow, IconEditDots, IconFilter, IconUserSettings, IconObjectivesList, IconInfo }, computed: { filteredObjectives(){ return getByStatus(getByQuarter(getByKeyword(this.objectives, this.search_text), this.activeQuarter), this.activeStatusObj) } }, watch: { search_text: function(val) { var data = Object.assign({}, this.$route.query); data['name'] = this.search_text; if(this.$route.query.name != this.search_text){ this.$router.push({query : data }); } } }, beforeDestroy () { this.$root.$off('refreshObjectivesList') }, 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 if(this.$auth.user().status == 'unpaid' || this.$auth.user().status == 'new'){ this.loaded = true this.notPaid = true setTimeout(() => { $('.opacity-page').addClass('show') var title = this.$t('navbar.objectives'); this.$root.$emit("navbar_title", title); }, 0) }else{ await this.getObjStatusList() await this.getObjectives() } // filters if(this.$route.query.q && this.$route.query.year && this.$route.query.q != '' && this.$route.query.year != ''){ this.activeQuarter = this.arrayQuarters.find(el => el.year == this.$route.query.year && el.quarter == this.$route.query.q) } if(this.$route.query.name && this.$route.query.name != ""){ this.search_text = this.$route.query.name; } // End filters this.$root.$on("refreshObjectivesList", () => { this.notPaid = false this.getObjectives() }); }, methods: { async getObjectives(){ await axios.get('/' + this.$auth.user().instance_id + '/objectives') .then(({data}) => { this.objectives = data.data }).catch(error => { var status = error.response.data.status this.notAllowed = status == 'not allowed'; 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(()=>{ this.loaded = true var title = this.$t('navbar.objectives'); this.$root.$emit("navbar_title", title); setTimeout(() => { $('.opacity-page').addClass('show') }, 0) }, 300) }) }, async getObjStatusList(){ await axios.get('/objectives/status/list').then(({data}) => { this.objStatusList = data.data this.objStatusList.unshift("all"); }) }, showModal(type, model = false, requiredData = false, userData = false){ if(model){ this.hideDropdown() } this.$root.$emit('open_modal', type, model, requiredData, userData, 'objectives'); }, showObjective(objective){ this.$router.push({ name: 'show-objective', params: { slug: objective.slug }}) var title = objective.name; var backRoute = 'objectives' this.$root.$emit("navbar_title", title, backRoute, objective.description) }, diffDays(end_date) { var a = moment().startOf('day'); var b = moment(end_date).startOf('day'); return b.diff(a, 'days'); }, showDropdown(itemId){ if(itemId == this.hoverObjective){ $('#dropdownEdit' + this.hoverObjective).dropdown('toggle'); setTimeout(() => { this.hoverObjective = '' }, 0) }else{ this.hoverObjective = itemId setTimeout(() => { $('#dropdownEdit' + this.hoverObjective).dropdown('toggle'); }, 0) } }, hideDropdown(){ if(this.hoverObjective != ''){ $('#dropdownEdit' + this.hoverObjective).dropdown('toggle'); setTimeout(() => { this.hoverObjective = '' }, 0) } }, openModalV2(type, model = false, typeDelete = false, fromDelete = false){ this.hideDropdown() this.$root.$emit('open_modal_v2', type, model, typeDelete, fromDelete); }, highlight(text, query){ String.prototype.replaceBetween = function(start, end, what) { return this.substring(0, start) + what + this.substring(end); }; if(query != ''){ var regex = new RegExp( query ,'ig'); var new_text = text var match = '' var match_obj = [] while ((match = regex.exec(text)) != null) { match_obj.push({ text_replace: text.substring(match.index, match.index+query.length), start_position: match.index, end_position: match.index+query.length }) } match_obj.reverse() if(match_obj.length){ match_obj.forEach(element => { new_text = new_text.replaceBetween(element.start_position, element.end_position, '<mark class="highlight">' + element.text_replace + '</mark>') }) } return new_text }else{ return text } }, viewKeyResult(keyResult){ this.viewAllDescription = false if(this.keyResultSelected == keyResult){ this.keyResultSelected = '' }else{ this.keyResultSelected = keyResult if(this.keyResultSelected.key_result_logs.length){ let data = [] this.keyResultSelected.key_result_logs.map( el => { // data.push([new Date(this.moment(el.related_to_date)).getTime(), el.key_result_percent ]) data.push(el.key_result_percent) }) if(this.keyResultSelected.key_result_logs[this.keyResultSelected.key_result_logs.length -1].related_to_date != this.keyResultSelected.start_date){ // data.push([new Date(this.keyResultSelected.start_date).getTime(), 0]) data.push(0) } this.series = [ {data: data.reverse()}, ] } } // axios.get('/key-results/'+keyResult.id) // .then(({data}) => { // this.keyResultSelected = data.data // }) }, checkDiffUnity(unity){ var inlineUnits = ['€', '$', 'RON'] return inlineUnits.includes(unity) }, changeActiveQuarter(quarter){ this.activeQuarter = quarter; var data = Object.assign({}, this.$route.query); data['q'] = quarter.quarter; data['year'] = quarter.year; if(this.$route.query.q != quarter.quarter || this.$route.query.year != quarter.year){ this.$router.push({name: 'objectives', query : data }).catch(err => {}) } }, changeActiveStatus(status){ this.activeStatusObj = status; } } }; function getByKeyword(list, keyword) { const search = keyword.trim() if (!search.length) return list return list.filter(item => item.name.toLowerCase().indexOf(search.toLowerCase()) > -1) } 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