Form group readonly and disabled feature added

resources/assets/js/components/AkauntingDate.vue

@@ -1,18 +1,25 @@
 <template>
     <base-input :label="title"
-            :name="name"
-            :class="formClasses"
-            :error="formError"
-            :prependIcon="icon"
-            >
+        :name="name"
+        :class="[
+            {'readonly': readonly},
+            {'disabled': disabled},
+            formClasses
+        ]"
+        :error="formError"
+        :prependIcon="icon"
+        :readonly="readonly"
+        :disabled="disabled"
+        >
         <flat-picker slot-scope="{focus, blur}"
-                     @on-open="focus"
-                     @on-close="blur"
-                     :config="config"
-                     class="form-control datepicker"
-                     v-model="real_model"
-                     @input="change"
-                     :disabled="disabled">
+            @on-open="focus"
+            @on-close="blur"
+            :config="config"
+            class="form-control datepicker"
+            v-model="real_model"
+            @input="change"
+            :readonly="readonly"
+            :disabled="disabled">
         </flat-picker>
     </base-input>
 </template>
@@ -39,6 +46,11 @@ export default {
             default: '',
             description: "Modal header title"
         },
+        readonly: {
+            type: Boolean,
+            default: false,
+            description: "Input readonly status"
+        },
         disabled: {
             type: Boolean,
             default: false,

resources/assets/js/components/AkauntingModal.vue

@@ -49,6 +49,8 @@ import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
 import AkauntingSelect from './AkauntingSelect';
 import AkauntingDate from './AkauntingDate';
 import AkauntingRecurring from './AkauntingRecurring';
+import {VMoney} from 'v-money';
+
 
 export default {
     name: 'akaunting-modal',
@@ -63,6 +65,10 @@ export default {
         AkauntingRecurring
     },
 
+    directives: {
+        money: VMoney
+    },
+
     props: {
         show: Boolean,
         title: {

resources/assets/js/components/AkauntingModalAddNew.vue

@@ -57,6 +57,7 @@ import AkauntingRecurring from './AkauntingRecurring';
 
 import Form from './../plugins/form';
 import { Alert, ColorPicker } from 'element-ui';
+import {VMoney} from 'v-money';
 
 export default {
     name: 'akaunting-modal-add-new',
@@ -71,6 +72,10 @@ export default {
         [ColorPicker.name]: ColorPicker,
     },
 
+    directives: {
+        money: VMoney
+    },
+
     props: {
         show: Boolean,
         modalDialogClass: '',
@@ -120,6 +125,14 @@ export default {
 
             display: this.show,
             component:'',
+            money: {
+                decimal: '.',
+                thousands: ',',
+                prefix: '$ ',
+                suffix: '',
+                precision: 2,
+                masked: false /* doesn't work with directive */
+            },
         };
     },
 
@@ -138,6 +151,10 @@ export default {
                         [ColorPicker.name]: ColorPicker,
                     },
 
+                    directives: {
+                        money: VMoney
+                    },
+
                     created: function() {
                         this.form = new Form('form-create');
                     },
@@ -151,6 +168,14 @@ export default {
                     data: function () {
                         return {
                             form: {},
+                            money: {
+                                decimal: '.',
+                                thousands: ',',
+                                prefix: '$ ',
+                                suffix: '',
+                                precision: 2,
+                                masked: false /* doesn't work with directive */
+                            },
                             color: '#55588b',
                             predefineColors: [
                                 '#3c3f72',

resources/assets/js/components/AkauntingSelect.vue

@@ -1,10 +1,17 @@
 <template>
-    <base-input :label="title"
-            :name="name"
-            :class="formClasses"
-            :error="formError">
+    <base-input
+        :label="title"
+        :name="name"
+        :readonly="readonly"
+        :disabled="disabled"
+        :class="[
+            {'readonly': readonly},
+            {'disabled': disabled},
+            formClasses
+        ]"
+        :error="formError">
 
-        <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled && !multiple && !collapse"
+        <el-select v-model="real_model" @input="change" :disabled="disabled" filterable v-if="(disabled) && !multiple && !collapse"
             :placeholder="placeholder">
             <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
                 <p class="el-select-dropdown__empty">
@@ -351,7 +358,7 @@
 
         <component v-bind:is="add_new_html" @submit="onSubmit"></component>
 
-        <select :name="name" class="d-none" v-model="real_model">
+        <select :name="name" v-model="real_model" class="d-none">
             <option v-for="(label, value) in selectOptions" :value="value">{{ label }}</option>
         </select>
     </base-input>
@@ -450,6 +457,11 @@ export default {
             default: false,
             description: "Multible feature status"
         },
+        readonly: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
         disabled: {
             type: Boolean,
             default: false,
@@ -590,7 +602,7 @@ export default {
     watch: {
         options: function (options) {
             // update options
-            //this.selectOptions = options;
+            this.selectOptions = options;
         }
     },
 }