Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
membru.tbf.ro
/
src
/
components
/
Modals
/
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 :
KeyResultTasks.vue
| Size :
11.06
KB
Copy
<template> <div class="container-modal"> <div class="header-modal"> <div class="tabs-title" v-if="$resize && $mq.above(660)"> <div class="tab-item" @click="activateTab('updates')"> <span>{{ $t('general.updates') }}</span> </div> <div class="tab-item" @click="activateTab('promises')"> <span>{{ $t('general.promises') }}</span> </div> <div class="tab-item active" @click="activateTab('tasks')"> <span>{{ $t('general.tasks') }}</span> </div> <div class="tab-item" @click="activateTab('comments')"> <span>{{ $t('key-result-comments.title') }}</span> </div> <div class="tab-item"> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" :delay="{show: 0, hide: 0}"> <icon-info /> <template slot="popover"> <div class="kr-title">{{ keyResult.name }}</div> <div class="kr-description">{{ keyResult.description }}</div> <div class="kr-info"> <div class="label">{{ $t('key-result-summary.progress-type') }}</div> <div class="label-desc">{{ $t('progress_type_text_simple.' + keyResult.progress_type, { to: ($options.filters.numeral(parseFloat(keyResult.target), '0a')), unit: keyResult.unity, from: $options.filters.numeral(parseFloat(keyResult.start_value), '0a')}) }}</div> </div> <div class="kr-info"> <div class="label">{{ $t('key-result-summary.frequency-interval') }}</div> <div class="label-desc">{{ $t('key-result-updates.interval-update-desc') }} {{ $tc('days', keyResult.measurement) }}</div> </div> <div class="kr-info"> <div class="label">{{ $t('key-result-summary.period') }}</div> <div class="label-desc"><span class="date">{{ keyResult.start_date | moment('DD MMM') }}</span> {{ $t('key-result-summary.period-to') }} <span class="date">{{ keyResult.end_date | moment('DD MMM')}}</span></div> </div> </template> </v-popover> </div> </div> <div class="mobile-tabs" v-else> <button class="btn-default-tbf" id="dropdownFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{ $t('general.tasks') }} <icon-arrow class="icon-arrow"/> </button> <div class="dropdown-menu" aria-labelledby="dropdownFilter"> <div class="dropdown-item" @click="activateTab('updates')">{{ $t('general.updates') }}</div> <div class="dropdown-item" @click="activateTab('promises')">{{ $t('general.promises') }}</div> <div class="dropdown-item" @click="activateTab('tasks')">{{ $t('general.tasks') }}</div> <div class="dropdown-item" @click="activateTab('comments')">{{ $t('key-result-comments.title') }}</div> </div> </div> <div class="actions"> <div class="btn-blue-tbf add-btn btn-space-mr" @click="showAddTask" v-if="$route.name != 'public-master-goal' && keyResult.rights.can_create"><icon-plus class="icon-plus" /></div> <v-popover offset="5" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" class="btn-space-mr" :delay="{show: 500, hide: 0}" v-if="$route.name != 'public-master-goal' && keyResult.rights.can_create && parseInt(keyResult.percent) >= 100"> <button class="btn-default-tbf finish-kr" v-bind:class="{finished: keyResult.status == 'finished'}" @click="completeKr"><icon-check /></button> <template slot="popover"> <div class="simple-text">{{ keyResult.status == 'finished' ? $t('key-result.tooltip-not-finish-kr') : $t('key-result.tooltip-finish-kr') }}</div> </template> </v-popover> <div class="btn-default-tbf close-btn" @click="closeModal"><icon-plus class="icon-close" /></div> </div> </div> <div class="info-content"> <div class="container-content-modal opacity-page" v-if="loaded"> <div class="list-tasks"> <div class="item-task new-task" @keyup.enter="createTask" v-bind:class="{active: showAddTaskInput}"> <div class="checkbox-task"> <div class="pending"></div> </div> <div class="name-input"> <input id="inputNewTask" type="text" v-model="newTaskName" :placeholder="$t('key-result-tasks.new-task')"> </div> <div class="edit-task"> <div class="actions-edit"> <button id="buttonCreateTask" class="btn-default-tbf btn-save" @click="createTask"> {{$t('key-result-tasks.save')}} </button> <button class="btn-delete" @click="showAddTaskInput = false"><icon-delete /></button> </div> </div> </div> <div class="item-task" v-bind:class="{complete: task.done, edit: editedTask == task.id}" v-for="task in tasks"> <div class="checkbox-task" @click="$route.name != 'public-master-goal' ? updateTask(task, true) : ''"> <div class="complete"><img src="/build/icons/check.svg"></div> <div class="pending"></div> </div> <div class="name-input"> <input type="text" :id="'task_' + task.id" v-model="task.name" :placeholder="$t('key-result-tasks.new-task')" :disabled="editedTask == task.id ? false : true" @keyup.enter="editedTask == task.id ? updateTask(task, false) : ''"> </div> <div class="edit-task" v-if="$route.name != 'public-master-goal' && ($resize && $mq.above(660))"> <button class="edit-btn" @click="editItem(task.id)"><icon-edit/></button> <div class="actions-edit"> <button class="btn-default-tbf btn-save" @click="updateTask(task, false)"> {{$t('key-result-tasks.save')}} </button> <button class="btn-delete" @click="deleteItem('confirm_delete', task.id)"><icon-delete /></button> </div> </div> </div> </div> <div class="empty-box" v-if="tasks.length == 0 && !showAddTaskInput"> <div class="empty-row"> <div class="title"> {{ $t('key-result.no-tasks') }} </div> <div class="description" v-html="$t('key-result.no-tasks-description')"> </div> </div> </div> </div> <div class="container-content-modal" v-else> <div class="list-tasks"> <div class="item-task" v-for="n in 3"> <div class="checkbox-task"> <div class="pending"></div> </div> <div class="name-input"> <div class="placeholder-loader" style="height: 21px; width: 135px;"></div> </div> </div> </div> </div> </div> <div class="submodal-container" v-if="subModalShow"> <confirm-delete v-if="show_subm_modal.confirm_delete" nameItem="task" @cancel_delete="closeDelete('confirm_delete')" @delete_item="confirmDelete('confirm_delete')"></confirm-delete> </div> </div> </template> <script type="text/javascript"> import ConfirmDelete from "../SubModals/ConfirmDelete" import IconPlus from "../Icons/Plus" import IconEdit from "../Icons/Edit" import IconArrow from "../Icons/Arrow" import IconInfo from "../Icons/Info" import IconDelete from "../Icons/Delete" import IconList from '../Icons/List' import IconCheck from "../Icons/Check" export default { data() { return { loaded: false, tasks: {}, subModalShow: false, show_subm_modal: { confirm_delete: false }, deleteItemId: '', newTaskName: '', hoverTask: '', editedTask: '', completed_tasks: 0, showAddTaskInput: false }; }, props: { keyResult: Object, keyResultId: String, Uuid: String }, components: { ConfirmDelete, IconPlus, IconEdit, IconCheck, IconArrow, IconDelete, IconList, IconInfo }, async mounted() { await this.getTasks() this.$root.$on("reload_modal_key_result", () => { this.getTasks() }); }, methods: { async getTasks(){ await axios.get('/key-results/public/' + this.Uuid + '/tasks') .then(({data}) => { this.tasks = data.data this.completed_tasks = this.tasks.reduce(function(n, val) { return n + (val.done === 1); }, 0); }) .then(() => { setTimeout(()=>{ this.loaded = true setTimeout(() => { $('.opacity-page').addClass('show') }, 0) }, 300) }) }, deleteItem(type, itemId){ this.deleteItemId = itemId this.subModalShow = true this.show_subm_modal[type] = true setTimeout(() => { $('.submodal-container').addClass('active'); setTimeout(() => { $('#submodal_' + type).addClass('active'); }, 200); }, 0); }, closeDelete(type){ this.deleteItemId = '' $("#submodal_" + type).removeClass("active") setTimeout(() => { $('.submodal-container').removeClass('active') setTimeout(() => { this.subModalShow = false; this.show_subm_modal[type] = false }, 200); }, 200); }, confirmDelete(type){ axios.delete('/tasks/' + this.deleteItemId) .then(() => { this.deleteItemId = '' $("#submodal_" + type).removeClass("active") this.getTasks() this.$emit('refreshModalData') setTimeout(() => { $('.submodal-container').removeClass('active') setTimeout(() => { this.subModalShow = false; this.show_subm_modal[type] = false }, 200); }, 200); }) }, createTask(e){ var btnSubmit = $('#buttonCreateTask') btnSubmit.attr('disabled', 'disabled') axios.post('/' + this.keyResultId + '/tasks/store', { name: this.newTaskName, key_result_id: this.keyResultId }).then(({data}) => { this.getTasks() this.newTaskName = '' this.$emit('refresh') this.$emit('refreshModalData') }) .finally(() => { btnSubmit.attr('disabled', false) }) }, updateTask(task, checkTask){ if(checkTask){ var checkTaskValue = 0; if(task.done == 1){ this.completed_tasks -= 1 checkTaskValue = 0 this.tasks.find(el => el.id == task.id).done = checkTaskValue }else{ this.completed_tasks += 1 checkTaskValue = 1 this.tasks.find(el => el.id == task.id).done = checkTaskValue } }else{ var checkTaskValue = task.done } axios.patch('/tasks/' + task.id, { name: task.name, key_result_id: task.key_result_id, done: checkTaskValue }).then(() => { this.$emit('refresh') this.$emit('refreshModalData') }) this.editedTask = '' }, closeModal(){ this.$emit("toggle_modal_tab"); }, showAddTask(){ this.showAddTaskInput = true setTimeout(() => { $('#inputNewTask').focus() }, 100) }, editItem(taskId){ this.editedTask = taskId setTimeout(() => { $('#task_'+ taskId).focus() }, 100) }, activateTab(type){ this.$emit("changeTab", type); }, completeKr(e){ $(e.target).attr('disabled', 'disabled') var statusKr = this.keyResult.status == 'finished' ? 'active' : 'finished' axios.post(`/key-results/${this.keyResult.id}/update-status`, { status: statusKr }) .then(({data}) => { $(e.target).addClass('completed') setTimeout(() => { $(e.target).removeClass('completed') this.$emit('refreshModalData') this.$emit('refresh') }, 1500) }) .finally(() => { setTimeout(() => { $(e.target).attr('disabled', false) }, 2000) }) } } }; </script>
Back