print template color feature added

resources/assets/js/views/settings/categories.js

@@ -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',

resources/assets/js/views/settings/settings.js

@@ -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;
+        }
     }
 });

resources/views/modals/settings/invoice_template.blade.php

@@ -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() !!}

resources/views/sales/invoices/print_classic.blade.php

@@ -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>
 

resources/views/sales/invoices/print_default.blade.php

@@ -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>

resources/views/sales/invoices/print_modern.blade.php

@@ -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>

resources/views/settings/categories/create.blade.php

@@ -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>