Akaunting money vue component added for all create/ edit formGroup

akaunting · Feb 9, 2020 · 6695c76 · 6695c76
1 parent 29782c1
commit 6695c76
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 61 deletions.
diff --git a/resources/assets/js/components/AkauntingMoney.vue b/resources/assets/js/components/AkauntingMoney.vue
@@ -0,0 +1,132 @@
+<template>
+    <div class="form-group"
+        :class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
+        <label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
+
+        <div class="input-group input-group-merge" :class="group_class">
+            <div v-if="icon" class="input-group-prepend">
+                <span class="input-group-text">
+                    <i class="fa fa-" :class="icon"></i>
+                </span>
+            </div>
+
+            <money :name="name" :placeholder="placeholder" v-model="model" v-bind="money" class="form-control"></money>
+        </div>
+
+        <div class="invalid-feedback d-block" v-if="error" v-html="error"></div>
+    </div>
+</template>
+
+<script>
+import {Money} from 'v-money';
+
+export default {
+    name: "akaunting-money",
+
+    components: {
+        Money
+    },
+
+    props: {
+        title: {
+            type: String,
+            default: '',
+            description: "Selectbox label text"
+        },
+        placeholder: {
+            type: String,
+            default: '',
+            description: "Selectbox input placeholder text"
+        },
+        name: {
+            type: String,
+            default: null,
+            description: "Selectbox attribute name"
+        },
+        value: {
+            type: String,
+            default: null,
+            description: "Selectbox selected value"
+        },
+        icon: {
+            type: String,
+            description: "Prepend icon (left)"
+        },
+        group_class: {
+            type: String,
+            default: null,
+            description: "Selectbox disabled status"
+        },
+        col: {
+            type: String,
+            default: null,
+            description: "Selectbox disabled status"
+        },
+        error: {
+            type: String,
+            default: null,
+            description: "Selectbox disabled status"
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
+        currency: {
+            type: Object,
+            default: function () {
+                return {
+                    decimal_mark: '.',
+                    thousands_separator: ',',
+                    symbol_first: 1,
+                    symbol: '$',
+                    precision: '2',
+                };
+            },
+            description: "Default currency"
+        },
+        masked: {
+            type: Boolean,
+            default: false,
+            description: "Money result value"
+        },
+    },
+
+    data() {
+        return {
+            model: this.value,
+            money: {
+                decimal: this.currency.decimal_mark,
+                thousands: this.currency.thousands_separator,
+                prefix: (this.currency.symbol_first) ? this.currency.symbol : '',
+                suffix: (!this.currency.symbol_first) ? this.currency.symbol : '',
+                precision: this.currency.precision,
+                masked: this.masked
+            }
+        }
+    },
+
+    mounted() {
+        this.$emit('interface', this.model);
+    },
+
+    methods: {
+        change() {
+            this.$emit('change', this.model);
+            this.$emit('interface', this.model);
+        },
+    },
+
+    watch: {
+        model: function (options) {
+
+            this.$emit('interface', this.model);
+        }
+    },
+}
+</script>
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 
 import AkauntingSearch from './../components/AkauntingSearch';
 import AkauntingModal from './../components/AkauntingModal';
+import AkauntingMoney from './../components/AkauntingMoney';
 import AkauntingModalAddNew from './../components/AkauntingModalAddNew';
 import AkauntingRadioGroup from './../components/forms/AkauntingRadioGroup';
 import AkauntingSelect from './../components/AkauntingSelect';
@@ -13,7 +14,6 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import NProgressAxios from './../plugins/nprogress-axios';
 
-import {VMoney} from 'v-money';
 import { Select, Option, Steps, Step, Button } from 'element-ui';
 
 import Form from './../plugins/form';
@@ -24,6 +24,7 @@ export default {
         AkauntingRadioGroup,
         AkauntingSelect,
         AkauntingSelectRemote,
+        AkauntingMoney,
         AkauntingModal,
         AkauntingModalAddNew,
         AkauntingDate,
@@ -37,32 +38,16 @@ export default {
 
     data: function () {
         return {
-            money: {
-                decimal: '.',
-                thousands: ',',
-                prefix: '$ ',
-                suffix: '',
-                precision: 2,
-                masked: false /* doesn't work with directive */
-            },
             component: '',
         }
     },
 
     directives: {
-        money: VMoney
+        //money: VMoney
     },
 
     mounted() {
         this.checkNotify();
-
-        if (aka_currency) {
-            this.money.decimal = aka_currency.decimal_mark;
-            this.money.thousands = aka_currency.thousands_separator;
-            this.money.prefix = (aka_currency.symbol_first) ? aka_currency.symbol : '';
-            this.money.suffix = !(aka_currency.symbol_first) ? aka_currency.symbol : '';
-            this.money.precision = aka_currency.precision;
-        }
     },
 
     methods: {

diff --git a/resources/views/partials/admin/head.blade.php b/resources/views/partials/admin/head.blade.php
@@ -43,8 +43,6 @@
             'csrfToken' => csrf_token(),
         ]); ?>;
 
-        var aka_currency = {!! !empty($currency) ? $currency : 'false' !!};
-
         var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!};
     //--></script>
 

diff --git a/resources/views/partials/auth/head.blade.php b/resources/views/partials/auth/head.blade.php
@@ -38,8 +38,6 @@
             'csrfToken' => csrf_token(),
         ]); ?>;
 
-        var aka_currency = 'false';
-
         var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!};
     //--></script>
 

diff --git a/resources/views/partials/form/money_group.blade.php b/resources/views/partials/form/money_group.blade.php
@@ -1,38 +1,35 @@
 @stack($name . '_input_start')
 
-    <div
-        class="form-group {{ $col }}{{ isset($attributes['required']) ? ' required' : '' }}{{ isset($attributes['readonly']) ? ' readonly' : '' }}{{ isset($attributes['disabled']) ? ' disabled' : '' }}"
-        :class="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]">
-        @if (!empty($text))
-            {!! Form::label($name, $text, ['class' => 'form-control-label'])!!}
+    <akaunting-money :col="'{{ $col }}'"
+        :required="{{ isset($attributes['required']) ? true : false }}"
+
+        @if (isset($attributes['readonly']))
+        :readonly="'{{ $attributes['readonly'] }}'"
+        @endif
+
+        @if (isset($attributes['disabled']))
+        :disabled="'{{ $attributes['disabled'] }}'"
         @endif
 
-        <div class="input-group input-group-merge {{ $group_class }}">
-            <div class="input-group-prepend">
-                <span class="input-group-text">
-                    <i class="fa fa-{{ $icon }}"></i>
-                </span>
-            </div>
-            @php
-                if ($attributes['currency']) {
-                    $value = number_format($value, $attributes['currency']->precision, $attributes['currency']->decimal_mark, $attributes['currency']->thousands_separator);
-                } else {
-                    $value = number_format($value, 2);
-                }
-            @endphp
-            {!! Form::text($name, $value, array_merge([
-                'class' => 'form-control',
-                'data-name' => $name,
-                'data-value' => $value,
-                'v-model.lazy' => !empty($attributes['v-model']) ? $attributes['v-model'] : (!empty($attributes['data-field']) ? 'form.' . $attributes['data-field'] . '.'. $name : 'form.' . $name),
-                'v-money' => 'money',
-            ], $attributes)) !!}
-        </div>
+        @if (isset($attributes['masked']))
+        :masked="'{{ $attributes['masked'] }}'"
+        @endif
+
+        :error="{{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }}"
+        :name="'{{ $name }}'"
+        :title="'{{ $text }}'"
+        :group_class="'{{ $group_class }}'"
+        :icon="'{{ $icon }}'"
+        :currency="{{ json_encode($attributes['currency']) }}"
+        :value="{{ $value }}"
 
-        <div class="invalid-feedback d-block"
-            v-if="{{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.has("' . $name . '")' }}"
-            v-html="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}">
-        </div>
-    </div>
+        @if (!empty($attributes['v-model']))
+        @interface="{{ $attributes['v-model'] . ' = $event' }}"
+        @elseif (!empty($attributes['data-field']))
+        @interface="{{ 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' }}"
+        @else
+        @interface="form.{{ $name }} = $event"
+        @endif
+    ></akaunting-money>
 
 @stack($name . '_input_end')
diff --git a/resources/views/partials/modules/head.blade.php b/resources/views/partials/modules/head.blade.php
@@ -41,8 +41,6 @@
             'csrfToken' => csrf_token(),
         ]); ?>;
 
-        var aka_currency = {!! !empty($currency) ? $currency : 'false' !!};
-
         var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!};
     //--></script>
 

diff --git a/resources/views/partials/portal/head.blade.php b/resources/views/partials/portal/head.blade.php
@@ -40,8 +40,6 @@
             'csrfToken' => csrf_token(),
         ]); ?>;
 
-        var aka_currency = {!! !empty($currency) ? $currency : 'false' !!};
-
         var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!};
     //--></script>
 

diff --git a/resources/views/partials/signed/head.blade.php b/resources/views/partials/signed/head.blade.php
@@ -40,8 +40,6 @@
             'csrfToken' => csrf_token(),
         ]); ?>;
 
-        var aka_currency = {!! !empty($currency) ? $currency : 'false' !!};
-
         var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!};
     //--></script>
 

diff --git a/resources/views/partials/wizard/head.blade.php b/resources/views/partials/wizard/head.blade.php
@@ -40,8 +40,6 @@
             'csrfToken' => csrf_token(),
         ]); ?>;
 
-        var aka_currency = {!! !empty($currency) ? $currency : 'false' !!};
-
         var flash_notification = {!! (session()->has('flash_notification')) ? json_encode(session()->get('flash_notification')) : 'false' !!};
     //--></script>