From 981cad8cb6f2896ee5d6aa39742b74ac003de1d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Sat, 18 Jan 2020 11:45:03 +0300
Subject: [PATCH] refs #1075 : Selectbox change style and added language text

---
 .../assets/js/components/AkauntingSelect.vue  | 190 +++++++++++++++---
 resources/lang/en-GB/general.php              |   3 +
 .../form/bulk_action_row_group.blade.php      |  14 +-
 .../form/multi_select_add_new_group.blade.php |   2 +
 .../form/multi_select_group.blade.php         |   2 +
 .../form/select_add_new_group.blade.php       |   2 +
 .../partials/form/select_group.blade.php      |   2 +
 .../form/select_group_add_new_group.blade.php |   2 +
 .../form/select_group_group.blade.php         |   2 +
 9 files changed, 185 insertions(+), 34 deletions(-)

diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 6a7738602..6d1e40989 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -7,13 +7,33 @@
         <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
             :placeholder="placeholder">
             <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
-                <span></span>
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingData }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
             </div>
 
             <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noData }}
+                </p>
                 <ul class="el-scrollbar__view el-select-dropdown__list">
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
                     </li>
                 </ul>
             </div>
@@ -43,21 +63,46 @@
                 </el-option>
             </el-option-group>
 
-            <li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
-                <span>{{ add_new_text }}</span>
-            </li>
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
         </el-select>
 
         <el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
             :placeholder="placeholder">
             <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
-                <span></span>
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingData }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
             </div>
 
             <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noData }}
+                </p>
                 <ul class="el-scrollbar__view el-select-dropdown__list">
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
                     </li>
                 </ul>
             </div>
@@ -87,21 +132,46 @@
                 </el-option>
             </el-option-group>
 
-            <li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
-                <span>{{ add_new_text }}</span>
-            </li>
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
         </el-select>
 
         <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
             :placeholder="placeholder">
             <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
-                <span></span>
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingData }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
             </div>
 
             <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noData }}
+                </p>
                 <ul class="el-scrollbar__view el-select-dropdown__list">
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
                     </li>
                 </ul>
             </div>
@@ -131,21 +201,46 @@
                 </el-option>
             </el-option-group>
 
-            <li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
-                <span>{{ add_new_text }}</span>
-            </li>
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
         </el-select>
 
         <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
             :placeholder="placeholder">
             <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
-                <span></span>
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingData }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
             </div>
 
             <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noData }}
+                </p>
                 <ul class="el-scrollbar__view el-select-dropdown__list">
-                    <li class="el-select-dropdown__item hover" @click="onAddItem">
-                        <span>{{ add_new_text }}</span>
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
                     </li>
                 </ul>
             </div>
@@ -175,9 +270,14 @@
                 </el-option>
             </el-option-group>
 
-            <li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
-                <span>{{ add_new_text }}</span>
-            </li>
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
         </el-select>
 
         <component v-bind:is="add_new_html" @submit="onSubmit"></component>
@@ -216,12 +316,12 @@ export default {
         title: {
             type: String,
             default: '',
-            description: "Modal header title"
+            description: "Selectbox label"
         },
         placeholder: {
             type: String,
             default: '',
-            description: "Modal header title"
+            description: "Selectbox input placeholder"
         },
         formClasses: null,
         formError: null,
@@ -252,7 +352,10 @@ export default {
         group: false,
         multiple:false,
         disabled:false,
-        collapse: false
+        collapse: false,
+
+        noData: '',
+        noMatchingData: ''
     },
 
     data() {
@@ -382,4 +485,37 @@ export default {
     .form-group .modal {
         z-index: 3050;
     }
+
+    .el-select-dropdown__empty {
+        padding: 10px 0 0 !important;
+    }
+
+    .el-select__footer {
+        text-align: center;
+        border-top: 1px solid #dee2e6;
+        padding: 0px;
+        cursor: pointer;
+        color: #3c3f72;
+        font-weight: bold;
+        height: 38px;
+        line-height: 38px;
+        margin-top: 5px;
+        margin-bottom: -6px;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+
+    .el-select__footer.el-select-dropdown__item.hover {
+        background-color: inherit !important;
+    }
+
+    .el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
+        background-color: #3c3f72 !important;
+        color: white !important;
+        border-top-color: #3c3f72;
+    }
+
+    .el-select__footer div span {
+        margin-left: 5px;
+    }
 </style>
diff --git a/resources/lang/en-GB/general.php b/resources/lang/en-GB/general.php
index 933e72c50..04116541d 100644
--- a/resources/lang/en-GB/general.php
+++ b/resources/lang/en-GB/general.php
@@ -147,6 +147,9 @@ return [
     'month'                => 'Month',
     'year'                => 'Year',
 
+    'no_data'           => 'No data',
+    'no_matching_data'  => 'No matching data',
+
     'card' => [
         'name'                  => 'Name on Card',
         'number'                => 'Card Number',
diff --git a/resources/views/partials/form/bulk_action_row_group.blade.php b/resources/views/partials/form/bulk_action_row_group.blade.php
index 1acd96f62..7990481bd 100644
--- a/resources/views/partials/form/bulk_action_row_group.blade.php
+++ b/resources/views/partials/form/bulk_action_row_group.blade.php
@@ -4,12 +4,12 @@
     <div class="mr-6">
         <span class="text-white d-none d-sm-block">
             <b v-text="bulk_action.count"></b>
-                <span v-if="bulk_action.count === 1">
-                    {{ strtolower(trans_choice($text, 1)) }}
-                </span>
-                <span  v-else-if="bulk_action.count > 1">
-                    {{ strtolower(trans_choice($text, 2)) }}
-                </span>
+            <span v-if="bulk_action.count === 1">
+                {{ strtolower(trans_choice($text, 1)) }}
+            </span>
+            <span v-else-if="bulk_action.count > 1">
+                {{ strtolower(trans_choice($text, 2)) }}
+            </span>
              {{ trans('bulk_actions.selected') }}
         </span>
     </div>
@@ -17,7 +17,7 @@
     <div class="w-25 mr-4" v-if="bulk_action.count">
         <div class="form-group mb-0">
             <select class="form-control form-control-sm" v-model="{{ !empty($attributes['v-model']) ? $attributes['v-model'] : 'bulk_action.value' }}" @change="onChange">
-                <option value="*">{{ trans_choice('bulk_actions.bulk_actions',2) }}</option>
+                <option value="*">{{ trans_choice('bulk_actions.bulk_actions', 2) }}</option>
                 @foreach($actions as $key => $action)
                     <option
                         value="{{ $key }}"
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
index 380ebb40b..3b7eb4c94 100644
--- a/resources/views/partials/form/multi_select_add_new_group.blade.php
+++ b/resources/views/partials/form/multi_select_add_new_group.blade.php
@@ -41,6 +41,8 @@
     @else
     :form-error="form.errors.get('{{ $name }}')"
     @endif
+    :no-data="'{{ trans('general.no_data') }}'"
+    :no-matching-data="'{{ trans('general.no_matching_data') }}'"
 ></akaunting-select>
 
 @stack($name . '_input_end')
diff --git a/resources/views/partials/form/multi_select_group.blade.php b/resources/views/partials/form/multi_select_group.blade.php
index 45be272ba..9f025213b 100644
--- a/resources/views/partials/form/multi_select_group.blade.php
+++ b/resources/views/partials/form/multi_select_group.blade.php
@@ -21,6 +21,8 @@
     :form-error="{{ $attributes['v-error-message'] }}"
     @else
     :form-error="form.errors.get('{{ $name }}')"
+    :no-data="'{{ trans('general.no_data') }}'"
+    :no-matching-data="'{{ trans('general.no_matching_data') }}'"
     @endif
 ></akaunting-select>
 
diff --git a/resources/views/partials/form/select_add_new_group.blade.php b/resources/views/partials/form/select_add_new_group.blade.php
index 31119f05d..ec2b6dffd 100644
--- a/resources/views/partials/form/select_add_new_group.blade.php
+++ b/resources/views/partials/form/select_add_new_group.blade.php
@@ -32,5 +32,7 @@
         @change="{{ $attributes['change'] }}($event)"
         @endif
         :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
+        :no-data="'{{ trans('general.no_data') }}'"
+        :no-matching-data="'{{ trans('general.no_matching_data') }}'"
     ></akaunting-select>
 @stack($name . '_input_end')
diff --git a/resources/views/partials/form/select_group.blade.php b/resources/views/partials/form/select_group.blade.php
index e00f3bb03..439918f27 100644
--- a/resources/views/partials/form/select_group.blade.php
+++ b/resources/views/partials/form/select_group.blade.php
@@ -20,5 +20,7 @@
         @else
         :form-error="form.errors.get('{{ $name }}')"
         @endif
+        :no-data="'{{ trans('general.no_data') }}'"
+        :no-matching-data="'{{ trans('general.no_matching_data') }}'"
     ></akaunting-select>
 @stack($name . '_input_end')
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
index 5488d78da..f3a04cc34 100644
--- a/resources/views/partials/form/select_group_add_new_group.blade.php
+++ b/resources/views/partials/form/select_group_add_new_group.blade.php
@@ -33,5 +33,7 @@
         @change="{{ $attributes['change'] }}($event)"
         @endif
         :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
+        :no-data="'{{ trans('general.no_data') }}'"
+        :no-matching-data="'{{ trans('general.no_matching_data') }}'"
     ></akaunting-select>
 @stack($name . '_input_end')
diff --git a/resources/views/partials/form/select_group_group.blade.php b/resources/views/partials/form/select_group_group.blade.php
index 1dbb80965..e5ad0257d 100644
--- a/resources/views/partials/form/select_group_group.blade.php
+++ b/resources/views/partials/form/select_group_group.blade.php
@@ -14,5 +14,7 @@
         @change="{{ $attributes['change'] }}($event)"
         @endif
         :form-error="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}"
+        :no-data="'{{ trans('general.no_data') }}'"
+        :no-matching-data="'{{ trans('general.no_matching_data') }}'"
     ></akaunting-select>
 @stack($name . '_input_end')