overview.html

{% extends "../main.html" %}

{% block title %}Betala ut{% endblock %}

{% block content %}
<div id="app">
    <p>Här kan du hitta alla kvitton som är redo att betalas ut ordnade efter användare.</p>
    <ul class="messages" v-if="error_message">
        <li v-text="error_message"></li>
    </ul>
    <div class="select" style="margin-left: 10px;float:right">
        <select v-model="cost_centre">
            <option :value="false">Filtrera på resultatställe</option>
            <option v-for="cost_centre in cost_centres" v-text="cost_centre + ' (' + expenses.filter(x => x.cost_centres.indexOf(cost_centre) > -1).length + ' + ' + invoices.filter(x => x.cost_centres.indexOf(cost_centre) > -1).length + ')'" :value="cost_centre"></option>
        </select>
    </div>
    <div class="clearfix"></div>

    <h2>Fakturor</h2>
    <table v-if="invoices.length > 0" style="margin-top: 20px;">
        <thead>
            <tr>
                <th>Beskrivning</th>
                <th>Resultatställen</th>
                <th>Belopp</th>
                <th>Förfallodatum</th>
            </tr>
        </thead>
        <tbody v-for="invoice, idx in invoices" v-if="cost_centre == false || invoices.filter(e => e.owner === invoice.owner && e.cost_centres.indexOf(cost_centre) > -1).length > 0">
            <tr v-if="cost_centre == false || invoice.cost_centres.indexOf(cost_centre) > -1">
                <td><a :href="'/invoices/' + invoice.id" v-text="invoice.description"></a></td>
                <td v-text="invoice.cost_centres.join(', ')"></td>
                <td v-text="invoice.amount + ' kr'"></td>
                <td v-text="invoice.due_date"></td>
            </tr>
        </tbody>
    </table>
    <p v-else><br><b>Du har inga fakturor att betala ut! Bra jobbat!</b></p>

    <h2>Utlägg</h2>
    <table v-if="expenses.length > 0" style="margin-top: 20px;">
        <tbody v-for="expense, idx in expenses" v-if="cost_centre == false || expenses.filter(e => e.owner === expense.owner && e.cost_centres.indexOf(cost_centre) > -1).length > 0">
            <tr class="title-row" v-if="idx == 0 || expenses[idx - 1].owner_username != expense.owner_username">
                <th colspan="3" v-text="expense.owner_first_name + ' ' + expense.owner_last_name"></th>
                <th><button class="btn theme-color pull-right" v-on:click="e => save(expense.owner, e)">Betala ut valda</button></th>
            </tr>
            <tr v-if="cost_centre == false || expense.cost_centres.indexOf(cost_centre) > -1">
                <td><a :href="'/expenses/' + expense.id" v-text="expense.description"></a></td>
                <td v-text="expense.cost_centres.join(', ')"></td>
                <td v-text="expense.amount + ' kr'"></td>
                <td>
                    <div style="float:right" class="checkbox">
                        <input :id="expense.id" class="select-expense" type="checkbox" :value="expense.id" :checked="expense.checked" name="expense" v-model="expense.checked">
                        <label :for="expense.id"></label>
                    </div>
                </td>
            </tr>
            <tr class="footer-row" v-if="idx == expenses.length - 1 || expenses[idx + 1].owner_username != expense.owner_username">
                <td colspan="2">Summa</td>
                <td v-text="expenses.filter(e => e.owner == expense.owner && (cost_centre == false || e.cost_centres.indexOf(cost_centre) > -1)).map(x => x.amount).reduce((a,b) => (a+b),0).toFixed(2) + ' kr'"></td>
                <td>
                    <div style="float:right" v-tooltip="{content:'Markera alla'}" class="checkbox">
                        <input :id="expense.owner" v-on:change="e => trim(expense.owner, e)" class="select-expense" type="checkbox" value="{{ expense.id }}" name="expense">
                        <label :for="expense.owner"></label>
                    </div>
                </td>
            </tr>
            <tr class="space-row" v-if="idx == expenses.length - 1 || expenses[idx + 1].owner_username != expense.owner_username">
                <td colspan="4"></td>
            </tr>
        </tbody>
    </table>
    <p v-else><b>Du har inga utlägg att betala ut! Bra jobbat!</b></p>

    <div id="cover" class="cover" v-on:click="payment = null" v-if="payment" style="display:none">
        <div class="dialog" v-on:click="e => e.stopPropagation()">
            <h1>Genomför nedanstående betalning</h1>
            <table>
                <tr>
                    <th style="text-align: right;">Clearingnummer + Kontonummer</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.receiver.bank_info.sorting_number + ' + ' + payment.receiver.bank_info.bank_account"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.receiver.bank_info.sorting_number + payment.receiver.bank_info.bank_account)">📋</button>
                    </td>
                </tr>
                <tr>
                    <th style="text-align: right;">Bank</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.receiver.bank_info.bank_name"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.receiver.bank_info.bank_name)">📋</button>
                    </td>
                </tr>
                <tr>
                    <th style="text-align: right;">Mottagare</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.receiver.first_name + ' ' + payment.receiver.last_name"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.receiver.first_name + ' ' + payment.receiver.last_name)">📋</button>
                    </td>
                </tr>
                
                <!--<tr>
                    <th style="text-align: right;">Clearingnummer</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.receiver.bank_info.sorting_number"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.receiver.bank_info.sorting_number)">📋</button>
                    </td>
                </tr>> 
                <tr>
                    <th style="text-align: right;">Kontonummer</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.receiver.bank_info.bank_account"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.receiver.bank_info.bank_account)">📋</button>
                    </td>
                </tr> !-->
                

                <tr>
                    <th style="text-align: right;">Summa</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.amount"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.amount)">📋</button>
                    </td>
                </tr>
                <tr>
                    <th style="text-align: right;">Meddelande</th>
                    <td style="color:#000 !important; display: flex; align-items: center">
                        <div v-text="payment.tag"></div>
                        <button style="background: none; padding: 4px; box-shadow: none; margin-left: auto" v-on:click="copy(payment.tag)">📋</button>
                    </td>
                </tr>
            </table>
            <br>
            <button class="pull-right theme-color btn-color" v-on:click="payment = null">Klar</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app', 
        data: function () {
            return {
                cost_centre: false,
                cost_centres: [],
                expenses: {% autoescape off %}{{ expenses }}{% endautoescape %},
                invoices: {% autoescape off %}{{ invoices }}{% endautoescape %},
                payment: null,
                error_message: '',
            }
        },
        methods: {
            save: function (user, e) {
                this.error_message = ''
                let exps = this.expenses.filter(x => x.checked && x.owner == user && (this.cost_centre == false || x.cost_centres.indexOf(this.cost_centre) > -1))
                if (exps.length < 1) {
                    console.log('Not enough expenses')
                    return
                }

                let form = new FormData()
                form.append('csrfmiddlewaretoken', '{{ csrf_token }}')
                exps.forEach(e => {
                    form.append('expense', e.id)
                })

                fetch('{% url 'expenses-api-payment-new' %}', {
                    method: 'POST',
                    credentials: 'same-origin',
                    body: form
                })
                .then(async res => {
                    const body = await res.text()
                    let parsed = null

                    if (body) {
                        try {
                            parsed = JSON.parse(body)
                        } catch (err) {
                            parsed = null
                        }
                    }

                    if (!res.ok) {
                        const message = (parsed && parsed.error) || body || 'Utbetalningen misslyckades.'
                        throw new Error(message)
                    }

                    return parsed || {}
                })
                .then(res => {
                    // Done
                    console.log(res)
                    this.payment = res.payment
                    res.expenses.forEach(x => {
                        let idx = this.expenses.map(x => x.id).indexOf(x.id)
                        if (idx > -1) {
                            this.expenses.splice(idx, 1)
                        }
                    })
                    this.sortExpensesByOwnerTotal()
                })
                .catch(err => {
                    this.error_message = err.message || 'Utbetalningen misslyckades.'
                })
                if (e) e.preventDefault()
            },
            trim(id, event) {
                this.expenses = this.expenses.map(e => {
                    if (e.owner == id && (this.cost_centre == false || e.cost_centres.indexOf(this.cost_centre) > -1)) {
                        e.checked = event.target.checked
                    }
                    return e
                })
                console.log(this.expenses)
            },
            sortExpensesByOwnerTotal() {
                const ownerTotals = this.expenses.reduce((accumulator, expense) => {
                    if (this.cost_centre == false || expense.cost_centres.indexOf(this.cost_centre) > -1) {
                        accumulator[expense.owner] = (accumulator[expense.owner] || 0) + Number(expense.amount)
                    }
                    return accumulator
                }, {})

                this.expenses.sort((a, b) => {
                    const totalDiff = (ownerTotals[b.owner] || 0) - (ownerTotals[a.owner] || 0)
                    if (totalDiff !== 0) {
                        return totalDiff
                    }

                    if (a.owner !== b.owner) {
                        return a.owner_username.localeCompare(b.owner_username, 'sv-SE')
                    }

                    return a.id - b.id
                })
            },
            copy(value) {
                navigator.clipboard.writeText(value).catch(console.error);
            },
        },
        watch: {
            cost_centre: function () {
                this.sortExpensesByOwnerTotal()
            },
        },
        created: function() {
            this.cost_centres = Array.from(new Set([
                ...this.expenses.flatMap(x => x.cost_centres),
                ...this.invoices.flatMap(x => x.cost_centres),
            ]))
            this.cost_centres.sort((a, b) => a.localeCompare(b, 'sv-SE'))
            this.sortExpensesByOwnerTotal()
            document.getElementById('cover').style.display = 'flex'

            document.addEventListener('keyup', (e) => {
                if (event.key === 'Escape' || event.keyCode === 27 || event.key === 'Enter' || event.keyCode === 13) {
                    this.payment = null
                }
            });
        },
    })
</script>
{% endblock %}