From partial element re-factoring

akaunting · Jan 20, 2020 · 8562223 · 8562223
1 parent f0a9c18
commit 8562223
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 74 deletions.
diff --git a/resources/assets/js/components/AkauntingSearch.vue b/resources/assets/js/components/AkauntingSearch.vue
@@ -1,68 +1,86 @@
 <template>
-    <component class="dropdown col-md-11 pl-0"
-               :is="tag"
-               :class="[{show: isOpen}, {'dropdown': direction === 'down'}, {'dropup': direction ==='up'}]"
-               aria-haspopup="true"
-               :aria-expanded="isOpen"
-               @click="toggleDropDown"
-               v-click-outside="closeDropDown">
-        <input
-               autocomplete="off"
-               placeholder="Type to search.."
-               name="search"
-               type="text"
-               class="form-control form-control-sm w-100">
-        <div class="dropdown-menu"
-             ref="menu"
-             :class="[{'dropdown-menu-right': position === 'right'}, {show: isOpen}, menuClasses]"
-        >
-            <a class="dropdown-item d-none" href="#about">About</a>
-        </div>
-    </component>
+
+    <base-input :label="title"
+        :name="name"
+        :class="formClasses"
+        :error="formError">
+
+        <el-select  @input="change" filterable :placeholder="placeholder">
+
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+                :key="value"
+                :label="label"
+                :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+
+        </el-select>
+
+    </base-input>
+
 </template>
 
 <script>
+import { Select, Option, OptionGroup } from 'element-ui';
+
 export default {
+    components: {
+        [Select.name]: Select,
+        [Option.name]: Option,
+        [OptionGroup.name]: OptionGroup,
+    },
+
     props: {
-        direction: {
-            type: String,
-            default: "down"
-        },
         title: {
             type: String,
-            description: "Dropdown title"
+            default: '',
+            description: "Modal header title"
         },
-        icon: {
+        placeholder: {
             type: String,
-            description: "Icon for dropdown title"
+            default: '',
+            description: "Modal header title"
         },
-        position: {
+        formClasses: null,
+        formError: null,
+        name: null,
+        value: null,
+        options: null,
+        model: null,
+        icon: {
             type: String,
-            description: "Position of dropdown menu (e.g right|left)"
-        },
-        menuClasses: {
-            type: [String, Object],
-            description: "Dropdown menu classes"
+            description: "Prepend icon (left)"
         },
-        hideArrow: {
-            type: Boolean,
-            description: "Whether dropdown arrow should be hidden"
-        },
-        appendToBody: {
-            type: Boolean,
-            default: true,
-            description: "Whether dropdown should be appended to document body"
-        },
-        tag: {
-            type: String,
-            default: "div",
-            description: "Dropdown html tag (e.g div, li etc)"
-        }
+
+        group: false,
+        multiple:false,
+        disabled:false,
+        collapse: false
     },
 
     data() {
         return {
-            isOpen: false
+            isOpen: false,
+            selectOptions: this.options,
+            real_model: this.model,
         }
     },
 

diff --git a/resources/views/partials/form/date_group.blade.php b/resources/views/partials/form/date_group.blade.php
@@ -2,7 +2,14 @@
 
 <akaunting-date
     class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-    :form-classes="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]"
+
+    @if (!empty($attributes['v-error']))
+    :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+    @else
+    :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+    @endif
+
+    :icon="'fa fa-{{ $icon }}'"
     :title="'{{ $text }}'"
     :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
     :name="'{{ $name }}'"
@@ -16,10 +23,21 @@ class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
         @if (!empty($attributes['date-format']))
         dateFormat: '{{ $attributes['date-format'] }}'
         @endif
-     }"
-    :icon="'fa fa-{{ $icon }}'"
-    @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : (!empty($attributes['data-field'])  ? 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' : 'form.' . $name . ' = $event') }}"
-    :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
-></akaunting-date>
+    }"
+
+    @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
+
+    @if(isset($attributes['v-error-message']))
+    :form-error="{{ $attributes['v-error-message'] }}"
+    @else
+    :form-error="form.errors.get('{{ $name }}')"
+    @endif
+    ></akaunting-date>
 
 @stack($name . '_input_end')
diff --git a/resources/views/partials/form/email_group.blade.php b/resources/views/partials/form/email_group.blade.php
@@ -13,6 +13,7 @@ class="form-group {{ $col }} {{ isset($attributes['required']) ? 'required' : ''
                 <i class="fa fa-{{ $icon }}"></i>
             </span>
         </div>
+
         {!! Form::email($name, $value, array_merge([
             'class' => 'form-control',
             'data-name' => $name,

diff --git a/resources/views/partials/form/multi_select_add_new_group.blade.php b/resources/views/partials/form/multi_select_add_new_group.blade.php
@@ -2,13 +2,19 @@
 
 <akaunting-select
     class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-    :form-classes="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]"
+
+    @if (!empty($attributes['v-error']))
+    :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+    @else
+    :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+    @endif
+
+    :icon="'{{ $icon }}'"
     :title="'{{ $text }}'"
     :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
     :name="'{{ $name }}'"
     :options="{{ json_encode($values) }}"
     :value="{{ json_encode(old($name, $selected)) }}"
-    :icon="'{{ $icon }}'"
     :multiple="true"
     :add-new="{{ json_encode([
         'status' => true,
@@ -29,18 +35,29 @@ class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
             ]
         ]
     ])}}"
+
     @if (!empty($attributes['collapse']))
     :collapse="true"
     @endif
-    @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : (!empty($attributes['data-field'])  ? 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' : 'form.' . $name . ' = $event') }}"
+
+    @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
+
     @if (!empty($attributes['change']))
     @change="{{ $attributes['change'] }}($event)"
     @endif
+
     @if(isset($attributes['v-error-message']))
     :form-error="{{ $attributes['v-error-message'] }}"
     @else
     :form-error="form.errors.get('{{ $name }}')"
     @endif
+
     :no-data-text="'{{ trans('general.no_data') }}'"
     :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
 ></akaunting-select>

diff --git a/resources/views/partials/form/multi_select_group.blade.php b/resources/views/partials/form/multi_select_group.blade.php
@@ -2,28 +2,45 @@
 
 <akaunting-select
     class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-    :form-classes="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]"
+
+    @if (!empty($attributes['v-error']))
+    :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+    @else
+    :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+    @endif
+
+    :icon="'{{ $icon }}'"
     :title="'{{ $text }}'"
     :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
     :name="'{{ $name }}'"
     :options="{{ json_encode($values) }}"
     :value="{{ json_encode(old($name, $selected)) }}"
-    :icon="'{{ $icon }}'"
     :multiple="true"
+
     @if (!empty($attributes['collapse']))
     :collapse="true"
     @endif
-    @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : (!empty($attributes['data-field'])  ? 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' : 'form.' . $name . ' = $event') }}"
+
+    @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
+
     @if (!empty($attributes['change']))
     @change="{{ $attributes['change'] }}($event)"
     @endif
+
     @if(isset($attributes['v-error-message']))
     :form-error="{{ $attributes['v-error-message'] }}"
     @else
     :form-error="form.errors.get('{{ $name }}')"
+    @endif
+
     :no-data-text="'{{ trans('general.no_data') }}'"
     :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
-    @endif
 ></akaunting-select>
 
 @stack($name . '_input_end')
diff --git a/resources/views/partials/form/select_add_new_group.blade.php b/resources/views/partials/form/select_add_new_group.blade.php
@@ -1,13 +1,19 @@
 @stack($name . '_input_start')
     <akaunting-select
         class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-        :form-classes="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]"
+
+        @if (!empty($attributes['v-error']))
+        :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+        @else
+        :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+        @endif
+
+        :icon="'{{ $icon }}'"
         :title="'{{ $text }}'"
         :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
         :name="'{{ $name }}'"
         :options="{{ json_encode($values) }}"
         :value="'{{ old($name, $selected) }}'"
-        :icon="'{{ $icon }}'"
         :add-new="{{ json_encode([
             'status' => true,
             'text' => trans('general.form.add_new', ['field' => $text]),
@@ -27,11 +33,25 @@ class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
                 ]
             ]
         ])}}"
-        @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : (!empty($attributes['data-field'])  ? 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' : 'form.' . $name . ' = $event') }}"
+
+        @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
+
         @if (!empty($attributes['change']))
         @change="{{ $attributes['change'] }}($event)"
         @endif
-        :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
+
+        @if(isset($attributes['v-error-message']))
+        :form-error="{{ $attributes['v-error-message'] }}"
+        @else
+        :form-error="form.errors.get('{{ $name }}')"
+        @endif
+
         :no-data-text="'{{ trans('general.no_data') }}'"
         :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
     ></akaunting-select>

diff --git a/resources/views/partials/form/select_group_add_new_group.blade.php b/resources/views/partials/form/select_group_add_new_group.blade.php
@@ -2,13 +2,19 @@
 
 <akaunting-select
     class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-    :form-classes="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]"
+
+    @if (!empty($attributes['v-error']))
+    :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+    @else
+    :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+    @endif
+
+    :icon="'{{ $icon }}'"
     :title="'{{ $text }}'"
     :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
     :name="'{{ $name }}'"
     :options="{{ json_encode($values) }}"
     :value="'{{ old($name, $selected) }}'"
-    :icon="'{{ $icon }}'"
     :add-new="{{ json_encode([
         'status' => true,
         'text' => trans('general.form.add_new', ['field' => $text]),
@@ -29,11 +35,25 @@ class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
         ]
     ])}}"
     :group="true"
-    @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : (!empty($attributes['data-field'])  ? 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' : 'form.' . $name . ' = $event') }}"
+
+    @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
+
     @if (!empty($attributes['change']))
     @change="{{ $attributes['change'] }}($event)"
     @endif
-    :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
+
+    @if(isset($attributes['v-error-message']))
+    :form-error="{{ $attributes['v-error-message'] }}"
+    @else
+    :form-error="form.errors.get('{{ $name }}')"
+    @endif
+
     :no-data-text="'{{ trans('general.no_data') }}'"
     :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
 ></akaunting-select>