PHP Classes

File: public/js/frontend/components/Summary.vue

Recommend this page to a friend!
  Classes of Istvan Dobrentei   PHP Timesheet Management System   public/js/frontend/components/Summary.vue   Download  
File: public/js/frontend/components/Summary.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Timesheet Management System
Manage project tasks and the respective work times
Author: By
Last change:
Date: 5 years ago
Size: 11,247 bytes
 

Contents

Class file image Download
<template> <div id="summary" class="container"> <form @submit.prevent="onSubmit" action="#"> <div class="row"> <div class="col-md-6"> <div class="form-group form-group-sm"> <table class="project-inputs"> <tr> <td> <label class="control-label">Project:</label> </td> <td colspan="5"> <select class="project" v-model="project_id"> <option value="0">Please select a project!</option> <option v-for="(project, index) in projects" :value="project.id">{{ project.name }}</option> </select> </td> </tr> <tr> <td> <label class="control-label">From date:</label> </td> <td> <datepicker v-model="date_from" format="yyyy-MM-dd"></datepicker> </td> <td> <label for="hour_from" class="control-label">From hour:</label> </td> <td> <select id="hour_from" v-model="hour_from"> <option v-for="idx in 24" :value="idx-1">{{ idx-1 }}</option> </select> </td> <td> <label for="min_from" class="control-label">From minutes:</label> </td> <td> <select id="min_from" v-model="min_from"> <option v-for="idx in [0,15,30,45]" :value="idx">{{ idx }}</option> </select> </td> </tr> <tr> <td> <label class="control-label">To date:</label> </td> <td> <datepicker v-model="date_to" format="yyyy-MM-dd"></datepicker> </td> <td> <label for="hour_to" class="control-label">To hour:</label> </td> <td> <select v-model="hour_to" id="hour_to"> <option v-for="idx in 24" :value="idx-1">{{ idx-1 }}</option> </select> </td> <td> <label for="min_to" class="control-label">To minutes:</label> </td> <td> <select v-model="min_to" id="min_to"> <option v-for="idx in [0,15,30,45]" :value="idx">{{ idx }}</option> </select> </td> </tr> </table> </div> <button type="submit" class="btn btn-default">Filter</button> <button @click="onExport" type="button" class="btn btn-default">Export</button> <select v-model="language"> <option value="en_US">English</option> <option value="hu_HU">Hungarian</option> <option value="de_DE">German</option> </select> </div> <div class="col-md-6"> <table class="today-workings"> <caption>Working times</caption> <tr> <th class="th-name">Description</th> <th class="th-date">From</th> <th class="th-date">To</th> <th class="th-hours">Hours</th> <th class="th-action">Project</th> <th class="th-invoice">Invoice</th> </tr> <tr v-for="(wtime, index) in wtimes"> <td>{{ wtime.description }}</td> <td>{{ wtime.from_hour }}:{{ wtime.from_min }}</td> <td>{{ wtime.to_hour }}:{{ wtime.to_min }}</td> <td>{{ wtime.hours }}</td> <td class="td-action">{{ wtime.name }}</td> <td>{{ wtime.invoice_no }}</td> </tr> <tr class="summary"> <td>Summary:</td> <td></td> <td></td> <td>{{ summaryHours }}</td> <td></td> <td></td> </tr> </table> <div v-if="showInvoicing"> <input placeholder="Invoice number" type="text" v-model="invoice_number" /> <button @click="onInvoicing" type="button">Invoicing</button> </div> </div> </div> </form> </div> </template> <script type="text/ecmascript-6"> import axios from 'axios' import Datepicker from 'vuejs-datepicker' export default { data(){ return { project_id: '', date_from: '', hour_from: '', min_from: '', date_to: '', hour_to: '', min_to: '', projects: [], wtimes: [], summaryHours: 0, language: 'en_US', invoice_number: '' } }, computed:{ showInvoicing(){ var show = true for(var i=0;i<this.wtimes.length ;i++){ if(this.wtimes[i].invoice_no != ''){ show = false } } return this.wtimes.length > 0 && show } }, methods:{ getAllActiveProject(){ axios.get('/api/project/getAll/' + this.$store.state.userId) .then(res => { for(var i=0;i< res.data.result.length;i++){ var active = res.data.result[i].active if(active){ this.projects.push(res.data.result[i]) } } }) .catch(error => { console.log(error) }) }, getWorkingTimes(){ var dates = this.getDates() if(dates.from != '' && dates.to != ''){ axios.get('/api/workingtime/getFiltered/' + dates.from + '/' + dates.to + '/' + this.project_id) .then(res => { this.wtimes = [] this.summaryHours = 0 for(var i=0;i< res.data.result.length;i++){ this.summaryHours += parseFloat(res.data.result[i].hours) this.wtimes.push(res.data.result[i]) } }) .catch(error => { console.log(error) }) } }, onSubmit(){ this.getWorkingTimes(); }, onExport(){ console.log('Export') var dates = this.getDates() if(dates.from != '' && dates.to != '') { axios('/api/workingtime/export/' + dates.from + '/' + dates.to + '/' + this.project_id + '/' + this.language + '/pdf', { method: 'GET', responseType: 'blob' }) .then(response => { /* const file = new Blob([response.data], {type: 'application/pdf'}) const fileUrl = URL.createObjectURL(file) window.open(fileUrl) */ const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'summary.pdf'); document.body.appendChild(link); link.click(); }) .catch(error => { console.log(error) }) } }, onInvoicing(){ var ids = [] for(var i=0;i<this.wtimes.length;i++){ ids.push(this.wtimes[i].id) } axios.post('/api/workingtime/attachInvoice', { wt_ids: ids, invoice_no: this.invoice_number }).then(response => { this.getWorkingTimes(); }).catch(error => { console.log(error) }) }, getDates(){ var fromISO = ''; var toISO = ''; if(this.date_from != ''){ fromISO = this.date_from.toISOString().substring(0,10) + ' ' + this.hour_from + ':' + this.min_from + ':00' } if(this.date_to != ''){ toISO = this.date_to.toISOString().substring(0,10) + ' ' + this.hour_to + ':' + this.min_to + ':00' } return {from: fromISO, to: toISO} } }, mounted(){ this.getAllActiveProject() }, components: { Datepicker } } </script> <style> #summary .today-workings, #summary .project{ width: 100%; } #summary .summary{ border-top: 1px solid; } #summary .project-inputs td{ padding-bottom: 5px; } </style>