chris
e1f579c7fd
All checks were successful
Build project image / Build-and-release-image (push) Successful in 3m9s
682 lines
40 KiB
PHP
682 lines
40 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
|
{{ __('invoice.Edit invoice') }}
|
|
</h2>
|
|
</x-slot>
|
|
|
|
@if($invoice->status === 'created')
|
|
<div class="py-12" x-data="invoiceForm()">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
|
|
|
<!-- Create invoice for customer or project -->
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="max-w">
|
|
<section>
|
|
<header class="grid grid-cols-2 gap-12">
|
|
<div>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('invoice.Select invoice basis') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("invoice.Should this invoice be created for customer or project?") }}
|
|
</p>
|
|
</div>
|
|
<label for="toggleInfo"
|
|
class="inline-flex min-w-[14rem] cursor-pointer items-center justify-between gap-3 rounded-md border border-neutral-300 bg-neutral-50 px-4 py-1.5 dark:border-neutral-700 dark:bg-neutral-900">
|
|
<input id="toggleInfo" type="checkbox" class="peer sr-only" role="switch"
|
|
:checked="from_project" x-model="from_project"
|
|
x-on:change="invoice.customer_id = 0; selected_customer = {}; invoice.project_id = 0; selected_project = {};"/>
|
|
<span
|
|
class="trancking-wide text-sm font-medium text-neutral-600 peer-checked:text-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-neutral-300 dark:peer-checked:text-white">{{ __('customer.Customer') }}</span>
|
|
<div
|
|
class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-neutral-300 bg-neutral-50 after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-neutral-600 after:transition-all after:content-[''] peer-checked:bg-sky-500 peer-checked:after:bg-white peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-neutral-800 peer-focus:peer-checked:outline-sky-500 peer-active:outline-offset-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:border-neutral-700 dark:bg-neutral-900 dark:after:bg-neutral-300 dark:peer-checked:bg-sky-500 dark:peer-checked:after:bg-white dark:peer-focus:outline-neutral-300 dark:peer-focus:peer-checked:outline-sky-500"
|
|
aria-hidden="true"></div>
|
|
<span
|
|
class="trancking-wide text-sm font-medium text-neutral-600 peer-checked:text-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-neutral-300 dark:peer-checked:text-white">{{ __('project.Project') }}</span>
|
|
</label>
|
|
</header>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer data -->
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-show="!from_project">
|
|
<div class="max-w">
|
|
<section>
|
|
<header class="grid grid-cols-2 gap-12 pb-8">
|
|
<div>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('invoice.Select customer') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("invoice.Select your customer and address") }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-row items-center gap-8">
|
|
<x-input-label for="search_customer" :value="__('common.Search')"/>
|
|
<x-text-input id="search_customer" name="search_customer" type="text"
|
|
class="mt-1 block w-full"
|
|
x-ref="search_customer"
|
|
autofocus
|
|
placeholder="{{ __('invoice.Search customer') }}"
|
|
x-on:keydown.window.prevent.slash="$refs.search_customer.focus()"
|
|
x-model="customer_search"/>
|
|
</div>
|
|
</header>
|
|
|
|
<div>
|
|
<template x-for="(customer, index) in getFilteredCustomer()">
|
|
<div class="cursor-pointer grid grid-cols-4 even:bg-gray-100 odd:bg-white"
|
|
:class="customer.id == invoice.customer_id ? 'font-bold' : ''"
|
|
@click="invoice.customer_id = customer.id; selected_customer = customer; getCustomerAddresses(); if(customer.address != null) { invoice.address_id = customer.address.id; selected_address = customer.address; } else { invoice.address_id = 0; selected_address = {}; } if(customer.delivery != null) { invoice.delivery_id = customer.delivery.id; selected_delivery = customer.delivery; } else { invoice.delivery_id = null; selected_delivery = {}; }">
|
|
<div x-text="customer.name"></div>
|
|
<div x-text="customer.email"></div>
|
|
<div x-text="(customer.address) ? customer.address.address : ''"></div>
|
|
<div x-text="(customer.address) ? customer.address.city : ''"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project data -->
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-show="from_project">
|
|
<div class="max-w">
|
|
<section>
|
|
<header class="grid grid-cols-2 gap-12 pb-8">
|
|
<div>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('invoice.Select project') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("invoice.Select your project") }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-row gap-8 items-center">
|
|
<x-input-label for="search_project" :value="__('common.Search')"/>
|
|
<x-text-input id="search_project" name="search_project" type="text"
|
|
class="mt-1 block w-full"
|
|
x-ref="search_project"
|
|
autofocus
|
|
placeholder="{{ __('invoice.Search project') }}"
|
|
x-on:keydown.window.prevent.slash="$refs.search_project.focus()"
|
|
x-model="project_search"/>
|
|
</div>
|
|
</header>
|
|
|
|
<div>
|
|
<template x-for="(project, index) in getFilteredProject()">
|
|
<div class="cursor-pointer grid grid-cols-4 even:bg-gray-100 odd:bg-white"
|
|
:class="project.id == invoice.project_id ? 'font-bold' : ''"
|
|
@click="invoice.project_id = project.id; selected_project = project; invoice.customer_id = project.customer.id; selected_customer = project.customer; getCustomerAddresses();">
|
|
<div x-text="project.name"></div>
|
|
<div x-text="project.project_number"></div>
|
|
<div x-text="project.customer_name"></div>
|
|
<div x-text="project.customer_email"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address data -->
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg"
|
|
x-show="Object.keys(selected_customer).length > 0">
|
|
<div class="max-w">
|
|
<section>
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('invoice.Select address') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("invoice.Select your customer's address") }}
|
|
</p>
|
|
</header>
|
|
|
|
<div class="flex flex-row my-8">
|
|
<!-- Invoice address -->
|
|
<div class="w-1/2">
|
|
<div class="flex flex-row">
|
|
<div
|
|
class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('customer.Invoice Address') }}</div>
|
|
<x-danger-button class="ml-4 px-0 py-0" x-show="invoice.address_id != 0">
|
|
<x-trash-icon class="h-5 p-0"
|
|
x-on:click="invoice.address_id = 0; selected_address = {}"/>
|
|
</x-danger-button>
|
|
</div>
|
|
<select
|
|
class="absolute z-10 bg-white border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm mt-1"
|
|
id="select_address_id" x-show="invoice.address_id == 0"
|
|
x-on:click="setInvoiceAddress();">
|
|
<template x-for="addr in addresses[invoice.customer_id]">
|
|
<option :value="addr.id"
|
|
x-text="addr.name + '; ' + addr.address + '; ' + addr.zip + ' ' + addr.city + '; ' + addr.phone + '; ' + addr.email"></option>
|
|
</template>
|
|
</select>
|
|
<div x-text="selected_address.name"></div>
|
|
<div x-text="selected_address.address"></div>
|
|
<div class="flex flex-row">
|
|
<div class="mr-2" x-text="selected_address.zip"></div>
|
|
<div x-text="selected_address.city"></div>
|
|
</div>
|
|
<div x-text="selected_address.phone"></div>
|
|
<div x-text="selected_address.email"></div>
|
|
</div>
|
|
|
|
<!-- Invoice delivery -->
|
|
<div class="w-1/2">
|
|
<div class="flex flex-row">
|
|
<div
|
|
class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('customer.Delivery Address') }}</div>
|
|
<x-danger-button class="ml-4 px-0 py-0" x-show="invoice.delivery_id != null">
|
|
<x-trash-icon class="h-5 p-0"
|
|
x-on:click="invoice.delivery_id = null; selected_delivery = {}"/>
|
|
</x-danger-button>
|
|
</div>
|
|
<select
|
|
class="absolute z-10 bg-white border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm mt-1"
|
|
id="select_delivery_id" x-show="invoice.delivery_id == null"
|
|
x-on:click="setDeliveryAddress()">
|
|
<template x-for="addr in addresses[invoice.customer_id]">
|
|
<option :value="addr.id"
|
|
x-text="addr.name + '; ' + addr.address + '; ' + addr.zip + ' ' + addr.city + '; ' + addr.phone + '; ' + addr.email"></option>
|
|
</template>
|
|
</select>
|
|
<div x-text="selected_delivery.name"></div>
|
|
<div x-text="selected_delivery.address"></div>
|
|
<div class="flex flex-row">
|
|
<div class="mr-2" x-text="selected_delivery.zip"></div>
|
|
<div x-text="selected_delivery.city"></div>
|
|
</div>
|
|
<div x-text="selected_delivery.phone"></div>
|
|
<div x-text="selected_delivery.email"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoice options -->
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg"
|
|
x-show="Object.keys(selected_address).length > 0">
|
|
<div class="max-w">
|
|
<section>
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('invoice.Invoice options') }}
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("invoice.Select the options for this invoice.") }}
|
|
</p>
|
|
</header>
|
|
<div class="flex flex-row gap-4">
|
|
|
|
<div class="flex flex-col w-1/2">
|
|
<div class="flex flex-row items-center">
|
|
<x-input-label class="w-1/3" for="type" :value="__('invoice.Type code')"/>
|
|
<select
|
|
class="w-2/3 bg-white border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm mt-1"
|
|
id="type" x-model="invoice.type">
|
|
|
|
@foreach(App\Enum\InvoiceTypeCode::options() as $key => $value)
|
|
<option value="{{ $key }}">{{ $value }}</option>
|
|
@endforeach
|
|
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-row items-center"
|
|
x-show="invoice.type === '326' || invoice.type === '875'">
|
|
<x-input-label class="w-1/3" for="project_count"
|
|
:value="__('invoice.Partial invoice number')"/>
|
|
<x-text-input id="project_count" name="project_count" type="text"
|
|
class="mt-1 w-2/3"
|
|
autofocus
|
|
x-model="invoice.project_count"/>
|
|
|
|
</div>
|
|
<div class="flex flex-row items-center">
|
|
<x-input-label class="w-1/3" for="due_date"
|
|
:value="__('invoice.Payment terms')"/>
|
|
<x-text-input id="due_date" name="due_date" type="date"
|
|
class="mt-1 w-2/3"
|
|
autofocus
|
|
x-model="invoice.due_date"/>
|
|
|
|
</div>
|
|
<div class="flex flex-row items-center">
|
|
<x-input-label class="w-1/3" for="cash_discount"
|
|
:value="__('invoice.Cash discount')"/>
|
|
<x-text-input id="cash_discount" name="cash_discount" type="number" steps="0.01"
|
|
class="mt-1 w-2/3"
|
|
autofocus x-on:blur="calculateSum();"
|
|
x-model="invoice.cash_discount"/>
|
|
|
|
</div>
|
|
<div class="flex flex-row items-center" x-show="invoice.cash_discount != 0">
|
|
<x-input-label class="w-1/3" for="cash_discount_date"
|
|
:value="__('invoice.Cash discount until')"/>
|
|
<x-text-input id="cash_discount_date" name="cash_discount_date" type="date"
|
|
class="mt-1 w-2/3"
|
|
autofocus
|
|
x-model="invoice.cash_discount_date"/>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col w-1/2">
|
|
<div class="flex flex-row items-center">
|
|
<x-input-label class="w-1/3" for="net" :value="__('invoice.Net')"/>
|
|
<x-text-input id="net" name="net" type="number"
|
|
class="mt-1 w-2/3" step="0.01"
|
|
autofocus disabled
|
|
x-model="net"/>
|
|
</div>
|
|
<div class="flex flex-row items-center">
|
|
<x-input-label class="w-1/3" for="tax" :value="__('invoice.Tax')"/>
|
|
<x-text-input id="tax" name="tax" type="number"
|
|
class="mt-1 w-2/3" step="0.01"
|
|
autofocus disabled
|
|
x-model="invoice.tax"/>
|
|
</div>
|
|
<div class="flex flex-row items-center">
|
|
<x-input-label class="w-1/3" for="sum" :value="__('invoice.Sum')"/>
|
|
<x-text-input id="sum" name="sum" type="number"
|
|
class="mt-1 w-2/3" step="0.01"
|
|
autofocus disabled
|
|
x-model="invoice.sum"/>
|
|
</div>
|
|
<div class="flex flex-row items-center" x-show="invoice.cash_discount != 0">
|
|
<x-input-label class="w-1/3" for="discount" :value="__('invoice.Cash discount sum')"/>
|
|
<x-text-input id="discount" name="discount" type="number"
|
|
class="mt-1 w-2/3" step="0.01"
|
|
autofocus disabled
|
|
x-model="discount"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoice items -->
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg"
|
|
x-show="Object.keys(selected_address).length > 0">
|
|
<div class="max-w">
|
|
<section>
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 relative">
|
|
{{ __('invoice.Invoice items') }}
|
|
<x-primary-button x-on:click="addItem();" class="absolute right-0">+
|
|
</x-primary-button>
|
|
</h2>
|
|
</header>
|
|
|
|
<div class="flex flex-row items-end gap-2 w-full">
|
|
<x-input-label for="invoice_item.amount" :value="__('invoice.Amount')" class="w-1/12"/>
|
|
<x-input-label for="invoice_item.name"
|
|
:value="__('invoice.Name') . ' / ' . __('invoice.Article number') . ' / ' . __('invoice.Description')"
|
|
class="w-1/2"/>
|
|
<x-input-label for="invoice_item.price" :value="__('invoice.Price')" class="w-1/12"/>
|
|
<x-input-label for="invoice_item.discount" :value="__('invoice.Discount')"
|
|
class="w-1/12"/>
|
|
<x-input-label for="invoice_item.tax" :value="__('invoice.Tax')" class="w-1/12"/>
|
|
<x-input-label for="invoice_item.tax" :value="__('invoice.Net')" class="w-1/12"/>
|
|
<div class="w-1/12 relative h-10"></div>
|
|
</div>
|
|
|
|
<div x-sort="sortItems">
|
|
<template x-for="(item, index) in items">
|
|
<div x-sort:item="index">
|
|
<div class="flex flex-row items-end gap-2 w-full relative">
|
|
<x-text-input id="items[index].amount" name="items[index].amount"
|
|
type="number"
|
|
class="mt-1 block w-1/12"
|
|
autofocus x-on:blur="calculateItem(index);"
|
|
x-model="items[index].amount"/>
|
|
|
|
<x-text-input id="items[index].name" name="items[index].name" type="text"
|
|
class="mt-1 block w-1/2"
|
|
autofocus
|
|
placeholder="{{ __('invoice.Name') }}"
|
|
x-model="items[index].name"/>
|
|
|
|
<x-text-input id="items[index].price" name="items[index].price"
|
|
type="number"
|
|
class="mt-1 block w-1/12"
|
|
autofocus x-on:blur="calculateItem(index);"
|
|
x-model="items[index].price"/>
|
|
|
|
<x-text-input id="items[index].discount" name="items[index].discount"
|
|
type="number"
|
|
class="mt-1 block w-1/12"
|
|
autofocus x-on:blur="calculateItem(index);"
|
|
x-model="items[index].discount"/>
|
|
|
|
<select name="items[index].tax" x-model="items[index].tax"
|
|
x-on:change="calculateItem(index);"
|
|
class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm w-1/12">
|
|
<template x-for="tax in tax_rates">
|
|
<option x-bind:value="tax.rate" x-text="tax.rate_percentage"
|
|
:selected="items[index].tax == tax.rate"></option>
|
|
</template>
|
|
</select>
|
|
|
|
<x-text-input id="items[index].total" name="items[index].total"
|
|
type="number"
|
|
class="mt-1 block w-1/12"
|
|
autofocus disabled
|
|
x-model="items[index].total"/>
|
|
|
|
<div class="flex flex-row w-1/12 h-10 relative">
|
|
<x-sort-icon x-sort:handle class="cursor-move"/>
|
|
<x-danger-button x-on:click="deleteItem(index);"
|
|
class="absolute right-0">
|
|
-
|
|
</x-danger-button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex flex-row gap-2">
|
|
<div class="w-1/12"></div>
|
|
<div class="flex flex-col w-1/2 gap-2">
|
|
<x-text-input id="items[index].article_number"
|
|
name="items[index].article_number" type="text"
|
|
class="mt-1 block"
|
|
autofocus
|
|
placeholder="{{ __('invoice.Article number') }}"
|
|
x-model="items[index].article_number"/>
|
|
<textarea placeholder="{{ __('invoice.Description') }}"
|
|
name="items[index].description"
|
|
x-model="items[index].description"
|
|
x-text="items[index].description"
|
|
class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm mt-1 block w-full"></textarea>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<x-primary-button x-on:click="submit();" class="">{{ __('form.Save') }}</x-primary-button>
|
|
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="max-w">{!! __('invoice.Already sent') !!}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</x-app-layout>
|
|
|
|
<script>
|
|
let self;
|
|
|
|
function invoiceForm() {
|
|
return {
|
|
from_project: {!! ($invoice->project_id == null) ? 'false' : 'true' !!},
|
|
error: false,
|
|
message: '',
|
|
customer_search: '',
|
|
project_search: '',
|
|
|
|
projects: [],
|
|
customers: [],
|
|
tax_rates: [],
|
|
addresses: [],
|
|
items: {!! $invoice->items !!},
|
|
sort: [],
|
|
|
|
selected_project: {!! ($invoice->project) ? $invoice->project : '{}' !!},
|
|
selected_customer: {!! $invoice->customer !!},
|
|
selected_address: {!! $invoice->address !!},
|
|
selected_delivery: {!! ($invoice->delivery) ? $invoice->delivery : '{}' !!},
|
|
net: 0,
|
|
discount: 0,
|
|
|
|
invoice: {!! $invoice !!},
|
|
|
|
|
|
init() {
|
|
this.addresses[this.invoice.customer_id] = {!! $invoice->customer->addresses !!};
|
|
for (let i = 0; i < this.items.length; i++) {
|
|
this.sort.push(i);
|
|
}
|
|
this.getCustomers();
|
|
this.getProjects();
|
|
this.getTaxRates();
|
|
this.calculateSum();
|
|
self = this;
|
|
},
|
|
|
|
getCustomers() {
|
|
let vm = this;
|
|
axios.get('/customer')
|
|
.then(function (response) {
|
|
vm.customers = response.data;
|
|
})
|
|
.catch(function (error) {
|
|
vm.error = true;
|
|
vm.message = error.response.data.message;
|
|
})
|
|
},
|
|
|
|
getFilteredCustomer() {
|
|
if (this.customer_search === '') {
|
|
return this.customers;
|
|
}
|
|
return this.customers.filter((customer) => {
|
|
return customer.name
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.customer_search.replace(/ /g, '').toLowerCase())
|
|
||
|
|
customer.email
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.customer_search.replace(/ /g, '').toLowerCase())
|
|
||
|
|
customer.street
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.customer_search.replace(/ /g, '').toLowerCase())
|
|
||
|
|
customer.city
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.customer_search.replace(/ /g, '').toLowerCase())
|
|
})
|
|
},
|
|
|
|
getProjects() {
|
|
let vm = this;
|
|
axios.get('project')
|
|
.then(function (response) {
|
|
vm.projects = response.data;
|
|
})
|
|
.catch(function (error) {
|
|
vm.error = true;
|
|
vm.message = error.response.data.message;
|
|
})
|
|
},
|
|
|
|
getFilteredProject() {
|
|
if (this.project_search === '') {
|
|
return this.projects;
|
|
}
|
|
return this.projects.filter((project) => {
|
|
return project.name
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.project_search.replace(/ /g, '').toLowerCase())
|
|
||
|
|
project.project_number
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.project_search.replace(/ /g, '').toLowerCase())
|
|
||
|
|
project.customer_name
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.project_search.replace(/ /g, '').toLowerCase())
|
|
||
|
|
project.customer_email
|
|
.replace(/ /g, '')
|
|
.toLowerCase()
|
|
.includes(this.project_search.replace(/ /g, '').toLowerCase())
|
|
})
|
|
},
|
|
|
|
getTaxRates() {
|
|
let vm = this;
|
|
axios.get('/taxrate')
|
|
.then(function (response) {
|
|
vm.tax_rates = response.data;
|
|
})
|
|
},
|
|
|
|
getCustomerAddresses() {
|
|
if (typeof (this.addresses[this.invoice.customer_id]) == 'undefined') {
|
|
let vm = this;
|
|
axios.get('/customer/' + this.invoice.customer_id + '/address')
|
|
.then(function (response) {
|
|
vm.addresses[vm.invoice.customer_id] = response.data;
|
|
})
|
|
}
|
|
},
|
|
|
|
setInvoiceAddress() {
|
|
let id = document.querySelector('#select_address_id').value;
|
|
if (id === '') {
|
|
return;
|
|
}
|
|
this.invoice.address_id = id;
|
|
let address_key = Object.keys(this.addresses[this.invoice.customer_id]).find(key => (this.addresses[this.invoice.customer_id][key].id == id));
|
|
this.selected_address = this.addresses[this.invoice.customer_id][address_key];
|
|
},
|
|
|
|
setDeliveryAddress() {
|
|
let id = document.querySelector('#select_delivery_id').value;
|
|
if (id === '') {
|
|
return;
|
|
}
|
|
this.invoice.delivery_id = id;
|
|
let address_key = Object.keys(this.addresses[this.invoice.customer_id]).find(key => (this.addresses[this.invoice.customer_id][key].id == id));
|
|
this.selected_delivery = this.addresses[this.invoice.customer_id][address_key];
|
|
},
|
|
|
|
addItem() {
|
|
let item = {
|
|
name: '',
|
|
article_number: '',
|
|
description: '',
|
|
amount: 1,
|
|
discount: 0,
|
|
tax: 19,
|
|
price: 0,
|
|
total: 0
|
|
};
|
|
this.items.push(item);
|
|
this.sort.push(this.items.length - 1);
|
|
},
|
|
|
|
deleteItem(index) {
|
|
this.items.splice(index, 1);
|
|
let position = this.sort[index];
|
|
this.sort.splice(index, 1);
|
|
for (let i = 0; i < this.sort.length; i++) {
|
|
if (this.sort[i] > position) {
|
|
this.sort[i] = --this.sort[i];
|
|
}
|
|
}
|
|
},
|
|
|
|
calculateItem(index) {
|
|
this.items[index].total = (parseFloat(this.items[index].amount) * parseFloat(this.items[index].price) * (1 + parseFloat(this.items[index].tax) / 100) * (1 - parseFloat(this.items[index].discount / 100))).toFixed(2);
|
|
this.calculateSum();
|
|
},
|
|
|
|
calculateSum() {
|
|
let vm = this;
|
|
vm.invoice.tax = 0;
|
|
vm.invoice.sum = 0;
|
|
this.items.forEach(function (item) {
|
|
vm.invoice.tax += item.amount * item.price * (item.tax / 100) * (1 - item.discount / 100);
|
|
vm.invoice.sum += item.total * 1;
|
|
});
|
|
vm.invoice.tax = (vm.invoice.tax).toFixed(2)
|
|
vm.invoice.sum = (vm.invoice.sum).toFixed(2)
|
|
vm.net = (vm.invoice.sum - vm.invoice.tax).toFixed(2);
|
|
vm.discount = (vm.invoice.sum * (100 - vm.invoice.cash_discount) / 100).toFixed(2);
|
|
},
|
|
|
|
sortItems(item, position) {
|
|
if (position > self.sort[item]) {
|
|
for (let i = 0; i < self.sort.length; i++) {
|
|
if (self.sort[i] <= position && self.sort[i] > self.sort[item]) {
|
|
self.sort[i] = --self.sort[i];
|
|
}
|
|
}
|
|
self.sort[item] = position;
|
|
}
|
|
|
|
if (position < self.sort[item]) {
|
|
for (let i = 0; i < self.sort.length; i++) {
|
|
if (self.sort[i] >= position && self.sort[i] < self.sort[item]) {
|
|
self.sort[i] = ++self.sort[i];
|
|
}
|
|
}
|
|
self.sort[item] = position;
|
|
}
|
|
},
|
|
|
|
async submit() {
|
|
let sort_flipped = Object.entries(this.sort)
|
|
.reduce((obj, [key, value]) => ({...obj, [value]: key}), {});
|
|
const promises = [];
|
|
|
|
const main = axios.put('/invoice/' + this.invoice.id, this.invoice)
|
|
.catch(function (error) {
|
|
self.error = true;
|
|
self.message = error.response.data.message;
|
|
})
|
|
promises.push(main);
|
|
|
|
await Promise.all(promises);
|
|
for (let i = 0; i < self.items.length; i++) {
|
|
let pos = sort_flipped[i];
|
|
let item = self.items[pos];
|
|
const result = axios.post('invoice/' + self.invoice.id + '/item', item)
|
|
.catch(function (error) {
|
|
self.error = true;
|
|
self.message = error.response.data.message;
|
|
})
|
|
promises.push(result);
|
|
|
|
}
|
|
await Promise.all(promises);
|
|
|
|
if (!self.error) {
|
|
window.location.href = '/invoice/' + self.invoice.id;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|