print template color feature added

This commit is contained in:
batuhanbas 2020-01-08 17:17:37 +03:00
parent e547ee7dbe
commit 49630ae8e9
10 changed files with 73 additions and 30 deletions

View File

@ -11,7 +11,6 @@ use App\Traits\Media;
use App\Traits\Recurring;
use App\Traits\Sales;
use Bkwld\Cloner\Cloneable;
use Date;
class Invoice extends Model
{

View File

@ -678,7 +678,7 @@ table .align-items-center td span.badge {
.print-edge
{
width: 147px;
width: 140px;
}
/*--------Print Template Finish--------*/

View File

@ -15326,8 +15326,7 @@
.el-color-dropdown.el-color-picker__panel
{
top: 360px !important;
left: 580px !important;
left: 341px !important;
}
.el-color-picker__color
@ -15394,7 +15393,6 @@
margin-top: 10px !important;
}
/*--------El Select Icon--------*/
.select-icon-position
{

View File

@ -41,7 +41,7 @@ const app = new Vue({
return {
form: new Form('category'),
bulk_action: new BulkAction('categories'),
color: '#6DA252',
color: '#55588b',
predefineColors: [
'#3c3f72',
'#55588b',

View File

@ -15,9 +15,10 @@ import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
import HtmlEditor from './../../components/Inputs/HtmlEditor';
import {ColorPicker} from 'element-ui';
// plugin setup
Vue.use(DashboardPlugin);
Vue.use(DashboardPlugin, ColorPicker);
const app = new Vue({
el: '#app',
@ -27,7 +28,13 @@ const app = new Vue({
],
components: {
HtmlEditor
HtmlEditor,
[ColorPicker.name]: ColorPicker,
},
mounted() {
this.onChangeProtocol(this.form.protocol);
this.color = this.form.color;
},
data: function () {
@ -42,6 +49,7 @@ const app = new Vue({
smtpPassword:true,
smtpEncryption:true,
},
invoice_form: new Form('template'),
template: {
modal: false,
@ -49,17 +57,24 @@ const app = new Vue({
message: '',
html: '',
errors: new Error()
}
},
color: '#55588b',
predefineColors:[
'#3c3f72',
'#55588b',
'#e5e5e5',
'#328aef',
'#efad32',
'#ef3232',
'#efef32'
],
}
},
mounted(){
this.onChangeProtocol(this.form.protocol);
},
methods:{
onChangeProtocol(protocol){
switch(protocol){
onChangeProtocol(protocol) {
switch(protocol) {
case "smtp":
this.email.sendmailPath = true;
this.email.smtpHost = false;
@ -68,6 +83,7 @@ const app = new Vue({
this.email.smtpPassword = false;
this.email.smtpEncryption = false;
break;
case "sendmail":
this.email.sendmailPath = false;
this.email.smtpHost = true;
@ -76,6 +92,7 @@ const app = new Vue({
this.email.smtpPassword = true;
this.email.smtpEncryption = true;
break;
default:
this.email.sendmailPath = true;
this.email.smtpHost = true;
@ -97,6 +114,7 @@ const app = new Vue({
addTemplate() {
if (this.invoice_form.template != 1) {
this.invoice_form.submit();
this.template.errors = this.invoice_form.errors;
@ -111,5 +129,13 @@ const app = new Vue({
errors: this.invoice_form.errors
};
},
onChangeColor() {
this.form.color = this.color;
},
onChangeColorInput() {
this.color = this.form.color;
}
}
});

View File

@ -11,7 +11,7 @@
'novalidate' => true
]) !!}
<div class="row">
<div class="col-md-4 text-center px-0">
<div class="col-md-4 text-center">
<div class="bg-print border-radius-default print-edge choose" @click="invoice_form.template='default'">
<img src="{{ asset('public/img/invoice_templates/default.png') }}" class="mb-1 mt-3" height="200" alt="Default"/>
<label>
@ -21,7 +21,7 @@
</div>
</div>
<div class="col-md-4 text-center px-0">
<div class="col-md-4 text-center px-2">
<div class="bg-print border-radius-default print-edge choose" @click="invoice_form.template='classic'">
<img src="{{ asset('public/img/invoice_templates/classic.png') }}" class="mb-1 mt-3" height="200" alt="Classic"/>
<label>
@ -42,6 +42,24 @@
</div>
</div>
<div class="row mt-4">
@stack('color_input_start')
<div class="form-group col-md-12 {{ $errors->has('color') ? 'has-error' : ''}}">
{!! Form::label('color', trans('general.color'), ['class' => 'form-control-label']) !!}
<div class="input-group input-group-merge" id="invoice-color-picker">
<div class="input-group-prepend">
<span class="input-group-text">
<el-color-picker v-model="invoice_form.color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
</span>
</div>
{!! Form::text('color', $setting['color'], ['v-model' => 'invoice_form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
</div>
{!! $errors->first('color', '<p class="help-block">:message</p>') !!}
</div>
@stack('color_input_end')
</div>
{!! Form::hidden('_template', $setting['template']) !!}
{!! Form::hidden('_prefix', 'invoice') !!}
{!! Form::close() !!}

View File

@ -35,8 +35,8 @@
<div class="row mt-2">
<div class="col-33">
<hr class="bg-default invoice-classic-line mb-1 mt-4">
<hr class="bg-default invoice-classic-line">
<hr class="invoice-classic-line mb-1 mt-4" style="background-color:{{ setting('invoice.color') }};">
<hr class="invoice-classic-line" style="background-color:{{ setting('invoice.color') }};">
</div>
<div class="col-33">
@ -53,8 +53,8 @@
</div>
<div class="col-33">
<hr class="bg-default invoice-classic-line mb-1 mt-4">
<hr class="bg-default invoice-classic-line">
<hr class="invoice-classic-line mb-1 mt-4" style="background-color:{{ setting('invoice.color') }};">
<hr class="invoice-classic-line" style="background-color:{{ setting('invoice.color') }};">
</div>
</div>

View File

@ -114,7 +114,9 @@
<div class="col-100">
<div class="text">
<table class="lines">
<thead class="bg-default">
@foreach($invoice as $item)
<thead style="background-color:{{ setting('invoice.color') }};">
@endforeach
<tr>
@stack('name_th_start')
<th class="item text-white">{{ trans_choice($text_override['items'], 2) }}</th>

View File

@ -3,7 +3,7 @@
@section('title', trans_choice('general.invoices', 1) . ': ' . $invoice->invoice_number)
@section('content')
<div class="row bg-primary">
<div class="row" style="background-color:{{ setting('invoice.color') }};">
<div class="col-58 m-first-column">
<div class="text company pl-2 m-fc-left">
<img src="{{ $logo }}" class="m-logo" alt="{{ setting('company.name') }}"/>
@ -12,7 +12,7 @@
<strong class="text-white">{{ setting('company.name') }}</strong>
</div>
</div>
<div class="col-42">
<div class="text company">
<br>
@ -43,7 +43,7 @@
@stack('name_input_start')
<strong>{{ $invoice->contact_name }}</strong><br><br>
@stack('name_input_end')
@stack('address_input_start')
{!! nl2br($invoice->contact_address) !!}<br><br>
@stack('address_input_end')
@ -53,7 +53,7 @@
{{ trans('general.tax_number') }}: {{ $invoice->contact_tax_number }}<br><br>
@endif
@stack('tax_number_input_end')
@stack('phone_input_start')
@if ($invoice->contact_phone)
{{ $invoice->contact_phone }}<br><br>
@ -105,7 +105,7 @@
<div class="col-100">
<div class="text">
<table class="m-lines">
<thead class="bg-default">
<thead style="background-color:{{ setting('invoice.color') }};">
<tr>
@stack('name_th_start')
<th class="item text-white">{{ trans_choice($text_override['items'], 2) }}</th>
@ -168,7 +168,7 @@
@stack('notes_input_end')
</div>
</div>
<div class="col-42 text-right">
<div class="text company pr-2">
@foreach ($invoice->totals as $total)
@ -194,7 +194,7 @@
@if ($invoice->footer)
<div class="row mt-7">
<div class="col-100 bg-default py-2">
<div class="col-100 py-2" style="background-color:{{ setting('invoice.color') }};">
<div class="text company pl-2">
<strong class="text-white">{!! $invoice->footer !!}</strong>
</div>

View File

@ -30,7 +30,7 @@
<el-color-picker v-model="color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
</span>
</div>
{!! Form::text('color', '#6DA252', ['v-model' => 'form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
{!! Form::text('color', '#55588b', ['v-model' => 'form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
</div>
{!! $errors->first('color', '<p class="help-block">:message</p>') !!}
</div>