PHP Classes
elePHPant
Icontem

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: 7 months 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>