selectbox add new new style

resources/assets/js/components/AkauntingSelect.vue

@@ -55,6 +55,8 @@
                :key="value"
                :label="label"
                :value="value">
+                <span class="float-left">{{ label }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -67,6 +69,8 @@
                     :key="value"
                     :label="label"
                     :value="value">
+                    <span class="float-left">{{ label }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -124,6 +128,8 @@
                :key="value"
                :label="label"
                :value="value">
+                <span class="float-left">{{ label }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -136,6 +142,8 @@
                     :key="value"
                     :label="label"
                     :value="value">
+                    <span class="float-left">{{ label }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -193,6 +201,8 @@
                :key="value"
                :label="label"
                :value="value">
+                <span class="float-left">{{ label }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -205,6 +215,8 @@
                     :key="value"
                     :label="label"
                     :value="value">
+                    <span class="float-left">{{ label }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -262,6 +274,8 @@
                :key="value"
                :label="label"
                :value="value">
+                <span class="float-left">{{ label }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -274,6 +288,8 @@
                     :key="value"
                     :label="label"
                     :value="value">
+                    <span class="float-left">{{ label }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -331,6 +347,8 @@
                :key="value"
                :label="label"
                :value="value">
+                <span class="float-left">{{ label }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -343,6 +361,8 @@
                     :key="value"
                     :label="label"
                     :value="value">
+                    <span class="float-left">{{ label }}</span>
+                    <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
                 </el-option>
             </el-option-group>
 
@@ -356,7 +376,9 @@
             </el-option>
         </el-select>
 
-        <component v-bind:is="add_new_html" @submit="onSubmit"></component>
+        <component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
+
+        <span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>
 
         <select :name="name" v-model="real_model" class="d-none">
             <option v-for="(label, value) in selectOptions" :value="value">{{ label }}</option>
@@ -447,6 +469,7 @@ export default {
                     path: null,
                     type: 'modal', // modal, inline
                     field: 'name',
+                    new_text: 'New',
                     buttons: {}
                 };
             },
@@ -493,15 +516,28 @@ export default {
 
     data() {
         return {
-            add_new: this.addNew,
+            add_new: {
+                text: this.addNew.text,
+                show: false,
+                path: this.addNew.path,
+                type: this.addNew.type, // modal, inline
+                field: this.addNew.name,
+                buttons: this.addNew.buttons
+            },
             add_new_text: this.addNew.text,
+            new_text: this.addNew.new_text,
             selectOptions: this.options,
             real_model: this.model,
             add_new_html: '',
             form: {},
+            new_options: false,
         }
     },
 
+    created() {
+        this.new_options = {};
+    },
+
     mounted() {
         this.real_model = this.value;
 
@@ -534,14 +570,14 @@ export default {
 
             axios.get(this.add_new.path)
             .then(response => {
-                add_new.status = true;
+                add_new.show = true;
                 add_new.html = response.data.html;
 
                 this.$children[0].$children[0].visible = false;
 
                 this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
                     resolve({
-                        template: '<div><akaunting-modal-add-new :show="add_new.status" @submit="onSubmit" @cancel="add_new.status = false" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
+                        template: '<div><akaunting-modal-add-new :show="add_new.show" @submit="onSubmit" @cancel="onCancel" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
 
                         components: {
                             AkauntingModalAddNew,
@@ -562,6 +598,10 @@ export default {
                         methods: {
                             onSubmit(event) {
                                 this.$emit('submit', event);
+                            },
+
+                            onCancel(event) {
+                                this.$emit('cancel', event);
                             }
                         }
                     })
@@ -584,11 +624,15 @@ export default {
 
                 if (response.data.success) {
                     this.selectOptions[response.data.data.id] = response.data.data['name'];
+                    this.new_options[response.data.data.id] = response.data.data.id;
                     this.real_model = response.data.data.id.toString();
 
                     this.change();
 
-                    //this.add_new.status = false;
+                    this.add_new.show = false;
+
+                    this.add_new.html = '';
+                    this.add_new_html = null;
                 }
             })
             .catch(error => {
@@ -600,6 +644,12 @@ export default {
             });
         },
 
+        onCancel() {
+            this.add_new.show = false;
+            this.add_new.html = null;
+            this.add_new_html = null;
+        },
+
         addModal() {
 
         },
@@ -667,4 +717,11 @@ export default {
     .el-select__footer div span {
         margin-left: 5px;
     }
+
+    .badge-resize {
+        float: right;
+        margin-top: -32px;
+        margin-right: 35px;
+        position: relative;
+    }
 </style>

resources/views/partials/form/multi_select_add_new_group.blade.php

@@ -31,6 +31,7 @@
             'path' => isset($attributes['path']) ? $attributes['path']: false,
             'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
             'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+            'new_text' => trans('modules.new'),
             'buttons' => [
                 'cancel' => [
                     'text' => trans('general.cancel'),

resources/views/partials/form/select_add_new_group.blade.php

@@ -6,7 +6,7 @@
         @if (!empty($attributes['v-error']))
         :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
         @else
-        :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+        :form-classes="[{'has-error': form.errors.has('{{ $name }}') }]"
         @endif
 
         icon="{{ $icon }}"
@@ -29,6 +29,7 @@
             'path' => isset($attributes['path']) ? $attributes['path']: false,
             'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
             'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+            'new_text' => trans('modules.new'),
             'buttons' => [
                 'cancel' => [
                     'text' => trans('general.cancel'),
@@ -46,7 +47,7 @@
         @elseif (!empty($attributes['data-field']))
         @interface="{{ 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' }}"
         @else
-        @interface="form.{{ $name }} = $event"
+        @interface="form.{{ $name }} = $event; form.errors.clear('{{ $name }}');"
         @endif
 
         @if (!empty($attributes['change']))

resources/views/partials/form/select_group_add_new_group.blade.php

@@ -6,7 +6,7 @@
         @if (!empty($attributes['v-error']))
         :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
         @else
-        :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+        :form-classes="[{'has-error': form.errors.has('{{ $name }}') }]"
         @endif
 
         icon="{{ $icon }}"
@@ -29,6 +29,7 @@
             'path' => isset($attributes['path']) ? $attributes['path']: false,
             'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
             'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+            'new_text' => trans('modules.new'),
             'buttons' => [
                 'cancel' => [
                     'text' => trans('general.cancel'),
@@ -48,7 +49,7 @@
         @elseif (!empty($attributes['data-field']))
         @interface="{{ 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' }}"
         @else
-        @interface="form.{{ $name }} = $event"
+        @interface="form.{{ $name }} = $event; form.errors.clear('{{ $name }}');"
         @endif
 
         @if (!empty($attributes['change']))