Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
membru.tbf.ro
/
src
/
components
/
Reports
/
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 :
DailyPromise.vue
| Size :
10.94
KB
Copy
<template> <div class="report-page" v-if="loaded"> <div class="fe-btn-translation" @click="$root.$emit('open_modal_translation', 'Reports', arrayTranslations)" v-if="globalTranslate">OPEN TRANSLATION</div> <section class="principal-info-section"> <div class="space-left"> </div> <div class="content-section"> <div class="cards-info carousel" v-if="$resize && $mq.below(1030)"> <carousel-3d :autoplay="false" :loop="true" :display="3" :perspective="0" :border="0" :height="130" :space="$mq.below(780) ? 'auto' : 380"> <slide :index="0"> <div class="info-card responsabled-card"> <div class="data-image"> <div class="user-circle"> <icon-user-settings/> </div> </div> <div class="data-card"> <div class="value">{{ $tc('reports.people_work_today', people_working) }}</div> <div class="description"> <span class="label"><button class="button-tbf-link" @click="showModal('report_people')">{{ $t('reports.people_report') }}</button></span> </div> </div> </div> </slide> <slide :index="0"> <div class="info-card progress-card"> <div class="data-icon"> <img src="/build/icons/promises.svg"> </div> <div class="data-card"> <div class="value">{{ $tc('reports.promises_established', reportData.set_promises) }}</div> <div class="description"> <span class="label">{{ $t('reports.promises_established_from_total', {established: reportData.set_promises, total: reportData.set_promises + reportData.remained_promises}) }}</span> </div> </div> </div> </slide> <slide :index="2"> <div class="info-card progress-card"> <div class="data-icon"> <img src="/build/icons/progress.svg"> </div> <div class="data-card"> <div class="value">{{ $tc("reports.completed_promises", reportData.completed_promises) }}</div> <div class="description"> <span class="label">{{ $tc("reports.completed_promises", reportData.completed_promises) }} {{ $tc("reports.remained_completed_promises", reportData.completed_promises + reportData.uncompleted_promises) }}</span> </div> </div> </div> </slide> </carousel-3d> </div> <div class="cards-info" v-else> <div class="info-card responsabled-card"> <div class="data-image"> <div class="user-circle"> <icon-user-settings/> </div> </div> <div class="data-card"> <div class="value">{{ $tc('reports.people_work_today', reportData.people_working) }}</div> <div class="description"> <span class="label"><button class="button-tbf-link" @click="showModal('report_people')">{{ $t('reports.people_report') }}</button></span> </div> </div> </div> <div class="info-card progress-card"> <div class="data-icon"> <img src="/build/icons/promises.svg"> </div> <div class="data-card"> <div class="value">{{ $tc('reports.promises_established', reportData.set_promises) }}</div> <div class="description"> <span class="label">{{ $t('reports.promises_established_from_total', {established: reportData.set_promises, total: reportData.set_promises + reportData.remained_promises}) }}</span> </div> </div> </div> <div class="info-card progress-card"> <div class="data-icon"> <img src="/build/icons/progress.svg"> </div> <div class="data-card"> <div class="value">{{ $tc("reports.completed_promises", reportData.completed_promises) }}</div> <div class="description"> <span class="label">{{ $tc("reports.completed_promises", reportData.completed_promises) }} {{ $tc("reports.remained_completed_promises", reportData.completed_promises + reportData.uncompleted_promises) }}</span> </div> </div> </div> </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="title">{{$t('general.promises')}}</div> <div class="filter-btns"> <date-range-picker ref="picker" class="calendar-filter" opens="left" :locale-data="calendarFilterSettings" :singleDatePicker="$mq.below(650) ? 'range' : false" :showWeekNumbers="false" :showDropdowns="false" :ranges="false" :autoApply="true" :linkedCalendars="true" :maxDate="maxDateCalendar" v-model="dateRange" @update="updateRangeFilter" > <template v-slot:input="picker"> <div class="input-picker"> <icon-calendar class="icon-calendar"/> <div class="date" v-if="picker.startDate == picker.endDate">{{ picker.startDate | moment('DD MMM YYYY') }}</div> <div class="date" v-else>{{ picker.startDate | moment('DD MMM YYYY') }} - {{ picker.endDate | moment('DD MMM YYYY') }}</div> <icon-arrow class="icon-arrow right"/> </div> </template> </date-range-picker> </div> </div> </div> <div class="space-right"></div> </section> <section class="list-items-section list-promises-rows" v-if="reportData.promises.length > 0"> <div class="group_items" v-for="promise in reportData.promises"> <div class="space-left"></div> <div class="content-row"> <div class="row-tbf"> <div class="column-tbf user-img obj-user-width" v-if="$resize && $mq.above(780)"> <v-popover offset="0" trigger="hover" placement="bottom" popoverBaseClass="popover-tbf" popoverClass="description-popover" :delay="{show: 0, hide: 0}" > <img :src="promise.user.avatar" v-if="promise.user.avatar"> <div class="user-circle" v-else> <icon-user-settings/> </div> <template slot="popover"> <div class="simple-text">{{ promise.user.first_name+" "+promise.user.last_name }}</div> </template> </v-popover> </div> <!-- Promise 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: 0, hide: 0}" v-if="promise.status != 'not_set'"> <div class="text">{{ promise.name }}</div> <div class="subtitle" v-if="promise.key_results_names != null">{{ $t('key-result-promises.contribute-to') }}: {{ promise.key_results_names }}</div> <template slot="popover"> <div class="simple-text">{{ promise.name }}</div> <div class="reason" v-if="promise.why_not"><span>{{ $t('show-user.timeline.reason') }}:</span> {{ promise.why_not }}</div> </template> </v-popover> <div class="text not-set-promise" v-else>{{ $t('reports.user_promise_not_set', {user_name: promise.user.first_name}) }}</div> </div> <div class="column-tbf column-value"> <div class="column-status-promise"> <img src="/build/icons/updated.svg" v-if="promise.status == 'completed'"> <img src="/build/icons/upcoming.svg" class="upcoming" v-if="promise.status == 'pending'"> <img src="/build/icons/attention-square.svg" v-if="promise.status == 'not_set'"> <img src="/build/icons/failed.svg" v-if="promise.status == 'not_completed'"> </div> </div> </div> </div> <div class="space-right"></div> </div> </section> <section class="list-items-section" v-else> <div class="group_items"> <div class="space-left"></div> <div class="empty-row full"> <div class="icon"> <icon-reports-empty /> </div> <div class="title"> {{$t('reports.no-user-is-working-today')}} </div> <div class="description narrow"> {{$t('reports.no-user-is-working-today-desc')}} </div> </div> <div class="space-right"></div> </div> </section> </div> </template> <script type="text/javascript"> import EmptyPage from '../General/EmptyPage' import IconPlus from '../Icons/Plus' import IconArrow from '../Icons/Arrow' import IconFilter from '../Icons/Filter' import IconCalendar from '../Icons/Date' import IconList from '../Icons/List' import IconKeyResults from "../Icons/KeyResults" import IconObjectivesList from '../Icons/ObjectivesList' import IconUserSettings from '../Icons/UserSettings' import IconCheck from "../Icons/Check" import IconClose from "../Icons/Close" import IconNotice from "../Icons/Notice" import IconReportsEmpty from "../Icons/ReportsEmpty" import { Carousel3d, Slide } from 'vue-carousel-3d'; export default { data() { return { loaded: false, reportData: {}, maxDateCalendar: moment().format('YYYY-MM-DD'), dateRange: { startDate: new Date, endDate: new Date }, calendarFilterSettings: { firstDay: 1, format: 'DD-MM-YYYY', daysOfWeek: moment.weekdaysMin(), monthNames: moment.monthsShort() }, activeStatus: 'active', selectedTags: [], arrayTranslations: [ 'reports.people_work_today', 'reports.people_established_today', 'reports.promises_established', 'reports.promises_established_from_total', 'reports.completed_promises', 'reports.remained_completed_promises', 'reports.people_work_today', 'reports.people_established_today', 'general.promises', 'key-result-promises.contribute-to', 'show-user.timeline.reason', 'reports.user_promise_not_set', 'reports.no-user-is-working-today', 'reports.no-user-is-working-today-desc' ] }; }, components: { Carousel3d, Slide, EmptyPage, IconPlus, IconArrow, IconFilter, IconList, IconKeyResults, IconCalendar, IconObjectivesList, IconUserSettings, IconCheck, IconClose, IconNotice, IconReportsEmpty, }, computed: { }, async mounted() { await this.getDailyReport() }, methods: { async getDailyReport(){ await axios.get('/reports/' + this.$auth.user().instance_id + '/daily-promises',{ params: { start_date: this.dateRange.startDate, end_date: this.dateRange.endDate } }) .then(({data}) => { this.reportData = data.data }) .then(() => { this.loaded = true setTimeout(() => { $('.opacity-page').addClass('show') var title = this.$t('navbar.reports'); this.$root.$emit("navbar_title", title); }, 0) }) }, updateRangeFilter(obiec){ this.getDailyReport() }, selectTag(tagName){ if(this.selectedTags.indexOf(tagName) >= 0){ this.selectedTags.splice(this.selectedTags.indexOf(tagName), 1) }else{ this.selectedTags.push(tagName) } }, showModal(type, model = false, requiredData = false, userData = false){ var dataSend = { start_date: this.dateRange.startDate, end_date: this.dateRange.endDate } this.$root.$emit('open_modal', type, model, dataSend, userData, 'reports'); }, } }; </script>
Back