Make invoices editable and build possibility to send them manually.
This commit is contained in:
@@ -7,91 +7,122 @@
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<!-- Customer data -->
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w" x-data="mailForm">
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('invoice.Mail') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Send email to your customer with attachments.") }}
|
||||
</p>
|
||||
</header>
|
||||
@if($invoice->status === 'created')
|
||||
<div class="py-12" x-data="mailForm">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6 mb-12">
|
||||
<!-- Customer data -->
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w">
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('invoice.Manual Mail') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Send email to your customer with attachments manually.") }}
|
||||
</p>
|
||||
</header>
|
||||
<div class="flex items-center gap-4 pt-8" x-show="!sent">
|
||||
<x-primary-button @click="updateState"><x-mail-icon class="size-5"/>{{ __('invoice.Sent menually') }}</x-primary-button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="mt-6 space-y-6" @submit.prevent="">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="w-1/4 flex flex-row items-center">
|
||||
<x-input-label for="To"
|
||||
:value="__('common.Email-To')"/>
|
||||
<x-tooltip>{!! __('common.Tooltip multiple email') !!}</x-tooltip>
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<!-- Customer data -->
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w" >
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('invoice.Mail') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Send email to your customer with attachments.") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form class="mt-6 space-y-6" @submit.prevent="">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="w-1/4 flex flex-row items-center">
|
||||
<x-input-label for="To"
|
||||
:value="__('common.Email-To')"/>
|
||||
<x-tooltip>{!! __('common.Tooltip multiple email') !!}</x-tooltip>
|
||||
</div>
|
||||
<x-text-input id="To" name="To" type="email" class="mt-1 block w-full"
|
||||
:value="old('To')" required multiple autocomplete="To"
|
||||
x-model="data.To"/>
|
||||
</div>
|
||||
<x-text-input id="To" name="To" type="email" class="mt-1 block w-full"
|
||||
:value="old('To')" required multiple autocomplete="To"
|
||||
x-model="data.To"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="w-1/4 flex flex-row items-center">
|
||||
<x-input-label for="Cc"
|
||||
:value="__('common.Email-Cc')"/>
|
||||
<x-tooltip>{!! __('common.Tooltip multiple email') !!}</x-tooltip>
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="w-1/4 flex flex-row items-center">
|
||||
<x-input-label for="Cc"
|
||||
:value="__('common.Email-Cc')"/>
|
||||
<x-tooltip>{!! __('common.Tooltip multiple email') !!}</x-tooltip>
|
||||
</div>
|
||||
<x-text-input id="Cc" name="Cc" type="email" class="mt-1 block w-full"
|
||||
:value="old('Cc')" multiple autocomplete="Cc"
|
||||
x-model="data.Cc"/>
|
||||
</div>
|
||||
<x-text-input id="Cc" name="Cc" type="email" class="mt-1 block w-full"
|
||||
:value="old('Cc')" multiple autocomplete="Cc"
|
||||
x-model="data.Cc"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="w-1/4 flex flex-row items-center">
|
||||
<x-input-label for="Bcc"
|
||||
:value="__('common.Email-Bcc')"/>
|
||||
<x-tooltip>{!! __('common.Tooltip multiple email') !!}</x-tooltip>
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="w-1/4 flex flex-row items-center">
|
||||
<x-input-label for="Bcc"
|
||||
:value="__('common.Email-Bcc')"/>
|
||||
<x-tooltip>{!! __('common.Tooltip multiple email') !!}</x-tooltip>
|
||||
</div>
|
||||
<x-text-input id="Bcc" name="Bcc" type="email" class="mt-1 block w-full"
|
||||
:value="old('Bcc')" multiple autocomplete="Bcc"
|
||||
x-model="data.Bcc"/>
|
||||
</div>
|
||||
<x-text-input id="Bcc" name="Bcc" type="email" class="mt-1 block w-full"
|
||||
:value="old('Bcc')" multiple autocomplete="Bcc"
|
||||
x-model="data.Bcc"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Subject" :value="__('common.Email-Subject')" class="w-1/4"/>
|
||||
<x-text-input id="Subject" name="Subject" type="text" class="mt-1 block w-full"
|
||||
:value="old('Subject')" required autocomplete="Subject"
|
||||
x-model="data.Subject"/>
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Subject" :value="__('common.Email-Subject')" class="w-1/4"/>
|
||||
<x-text-input id="Subject" name="Subject" type="text" class="mt-1 block w-full"
|
||||
:value="old('Subject')" required autocomplete="Subject"
|
||||
x-model="data.Subject"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Body" :value="__('common.Email-Body')" class="w-1/4"/>
|
||||
<textarea rows="10" id="Body" name="Body" 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"
|
||||
required autocomplete="Body"
|
||||
x-model="data.Body"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Body" :value="__('common.Email-Body')" class="w-1/4"/>
|
||||
<textarea rows="10" id="Body" name="Body" 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"
|
||||
required autocomplete="Body"
|
||||
x-model="data.Body"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Pdf" :value="__('invoice.Send Pdf')" class="w-1/4"/>
|
||||
<x-text-input id="Pdf" name="Pdf" x-model="data.Pdf" type="checkbox"/>
|
||||
<x-pdf-icon class="text-gray-800 cursor-pointer" onclick="window.open('/invoice/{{ $invoice->id }}/pdf-download', '_blank', 'popup=true')"/>
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Pdf" :value="__('invoice.Send Pdf')" class="w-1/4"/>
|
||||
<x-text-input id="Pdf" name="Pdf" x-model="data.Pdf" type="checkbox"/>
|
||||
<x-pdf-icon class="text-gray-800 cursor-pointer" onclick="window.open('/invoice/{{ $invoice->id }}/pdf-download', '_blank', 'popup=true')"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Xml" :value="__('invoice.Send Xml')" class="w-1/4"/>
|
||||
<x-text-input id="Xml" name="Xml" x-model="data.Xml" type="checkbox"/>
|
||||
<x-e-icon class="cursor-pointer" onclick="window.open('/invoice/{{ $invoice->id }}/xml-download', '_blank', 'popup=true')"/>
|
||||
</div>
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label for="Xml" :value="__('invoice.Send Xml')" class="w-1/4"/>
|
||||
<x-text-input id="Xml" name="Xml" x-model="data.Xml" type="checkbox"/>
|
||||
<x-e-icon class="cursor-pointer" onclick="window.open('/invoice/{{ $invoice->id }}/xml-download', '_blank', 'popup=true')"/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4" x-show="!sent">
|
||||
<x-primary-button @click="submit">{{ __('form.Send') }}</x-primary-button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4" x-show="!sent">
|
||||
<x-primary-button @click="submit"><x-mail-icon class="size-5"/>{{ __('form.Send') }}</x-primary-button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -114,11 +145,21 @@
|
||||
this.sent = true;
|
||||
axios.post('/sendInvoice', this.data)
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
window.location.href = '/invoice';
|
||||
}).catch(function(error) {
|
||||
console.log(error);
|
||||
})
|
||||
console.log(this.data);
|
||||
},
|
||||
|
||||
updateState() {
|
||||
this.sent = true;
|
||||
axios.put('/invoice/' + this.data.id + '/state', {status: 'sent'})
|
||||
.then(function (response) {
|
||||
window.location.href = '/invoice';
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user