From b6d471001e28158ea4191b7ba7f9e1c6ae2456e2 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 Apr 2020 18:44:08 +0300
Subject: [PATCH] close #1414 Fixed: Re-sort select options.

---
 .../assets/js/components/AkauntingSelect.vue  | 136 ++++++++++++++----
 1 file changed, 105 insertions(+), 31 deletions(-)

diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index 6e17406fa..2ecdcc4fc 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -51,14 +51,15 @@
                 </span>
             </template>
 
-            <el-option v-if="!group" v-for="(label, value) in selectOptions"
-               :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 v-if="!group" v-for="(option, key) in selectOptions"
+               :key="key"
+               :label="option.value"
+               :value="option.key">
+                <span class="float-left">{{ option.value }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
             </el-option>
 
+            <!-- Todo sortable -->
             <el-option-group
                 v-if="group"
                 v-for="(options, name) in selectOptions"
@@ -124,12 +125,12 @@
                 </span>
             </template>
 
-            <el-option v-if="!group" v-for="(label, value) in selectOptions"
-               :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 v-if="!group" v-for="(option, key) in selectOptions"
+               :key="key"
+               :label="option.value"
+               :value="option.key">
+                <span class="float-left">{{ option.value }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
             </el-option>
 
             <el-option-group
@@ -197,14 +198,15 @@
                 </span>
             </template>
 
-            <el-option v-if="!group" v-for="(label, value) in selectOptions"
-               :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 v-if="!group" v-for="(option, key) in selectOptions"
+               :key="key"
+               :label="option.value"
+               :value="option.key">
+                <span class="float-left">{{ option.value }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
             </el-option>
 
+            <!-- Todo sortable -->
             <el-option-group
                 v-if="group"
                 v-for="(options, name) in selectOptions"
@@ -270,14 +272,15 @@
                 </span>
             </template>
 
-            <el-option v-if="!group" v-for="(label, value) in selectOptions"
-               :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 v-if="!group" v-for="(option, key) in selectOptions"
+               :key="key"
+               :label="option.value"
+               :value="option.key">
+                <span class="float-left">{{ option.value }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
             </el-option>
 
+            <!-- Todo sortable -->
             <el-option-group
                 v-if="group"
                 v-for="(options, name) in selectOptions"
@@ -343,14 +346,15 @@
                 </span>
             </template>
 
-            <el-option v-if="!group" v-for="(label, value) in selectOptions"
-               :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 v-if="!group" v-for="(option, key) in selectOptions"
+               :key="key"
+               :label="option.value"
+               :value="option.key">
+                <span class="float-left">{{ option.value }}</span>
+                <span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ new_text }}</span>
             </el-option>
 
+            <!-- Todo sortable -->
             <el-option-group
                 v-if="group"
                 v-for="(options, name) in selectOptions"
@@ -451,6 +455,12 @@ export default {
         },
         options: null,
 
+        option_sortable: {
+            type: String,
+            default: 'value',
+            description: "Option Sortable type (key|value)"
+        },
+
         model: {
             type: [String, Number, Array, Object],
             default: '',
@@ -478,7 +488,7 @@ export default {
             description: "Selectbox Add New Item Feature"
         },
 
-        group:  {
+        group: {
             type: Boolean,
             default: false,
             description: "Selectbox option group status"
@@ -537,6 +547,37 @@ export default {
     },
 
     created() {
+        if (this.group != true && Object.keys(this.options).length) {
+            let sortable = [];
+            let option_sortable = this.option_sortable;
+
+            for (var option_key in this.options) {
+                sortable.push({
+                    'key' : option_key,
+                    'value': this.options[option_key]
+                });
+            }
+
+            if (option_sortable == 'value') {
+                sortable.sort(function(a, b) {
+                    var sortableA = a[option_sortable].toUpperCase();
+                    var sortableB = b[option_sortable].toUpperCase();
+
+                    let comparison = 0;
+
+                    if (sortableA > sortableB) {
+                        comparison = 1;
+                    } else if (sortableA < sortableB) {
+                        comparison = -1;
+                    }
+
+                    return comparison;
+                });
+            }
+
+            this.options = sortable;
+        }
+
         this.new_options = {};
     },
 
@@ -744,6 +785,39 @@ export default {
             }
         },
 
+        selectOptions: function (options) {
+            if (this.group != true && Object.keys(options).length) {
+                let sortable = [];
+                let option_sortable = this.option_sortable;
+
+                for (var option_key in options) {
+                    sortable.push({
+                        'key' : option_key,
+                        'value': options[option_key]
+                    });
+                }
+
+                if  (this.option_sortable == 'value') {
+                    sortable.sort(function(a, b) {
+                        var sortableA = a[option_sortable].toUpperCase();
+                        var sortableB = b[option_sortable].toUpperCase();
+
+                        let comparison = 0;
+
+                        if (sortableA > sortableB) {
+                            comparison = 1;
+                        } else if (sortableA < sortableB) {
+                            comparison = -1;
+                        }
+
+                        return comparison;
+                    });
+                }
+
+                this.selectOptions = sortable;
+            }
+        },
+
         real_model: function (value) {
             if (this.multiple) {
                 return;