From 70711af06fb2e62ecf5ffdd52968e5584433fa0e Mon Sep 17 00:00:00 2001
From: Anvita Prasad <cs23b1059.iiitdm.ac.in>
Date: Sun, 9 Feb 2025 15:06:30 +0530
Subject: [PATCH 1/3] Added search functionality for language selection
 dropdown

---
 td.vue/src/components/LocaleSelect.vue | 169 +++++++++++++++++--------
 1 file changed, 119 insertions(+), 50 deletions(-)

diff --git a/td.vue/src/components/LocaleSelect.vue b/td.vue/src/components/LocaleSelect.vue
index 78ce81e18..cf7c17bd9 100644
--- a/td.vue/src/components/LocaleSelect.vue
+++ b/td.vue/src/components/LocaleSelect.vue
@@ -1,73 +1,142 @@
 <template>
-  <div class="locale-changer">
-    <b-dropdown right :text="locale" variant="primary">
-      <b-dropdown-item
-        v-for="locale in $i18n.availableLocales"
-        :key="`locale-${locale}`"
-        :value="locale"
-        @click.native="updateLocale(locale)">{{getLanguageName(locale)}}</b-dropdown-item>
-    </b-dropdown>
-  </div>
+    <div class="locale-changer">
+        <b-dropdown right :text="getLanguageName(locale)" variant="primary">
+            <div class="px-2 py-2">
+                <input type="text" v-model="searchQuery" class="form-control" placeholder="Search language..." @click.stop
+                    @input="filterLocales" />
+            </div>
+            <div class="dropdown-items-container">
+                <b-dropdown-item v-for="localeCode in filteredLocales" :key="`locale-${localeCode}`" :value="localeCode"
+                    @click.native="updateLocale(localeCode)">
+                    {{ getLanguageName(localeCode) }}
+                </b-dropdown-item>
+            </div>
+        </b-dropdown>
+    </div>
 </template>
-
+  
 <script>
 import { mapState } from 'vuex';
-
 import { LOCALE_SELECTED } from '@/store/actions/locale.js';
 import isElectron from 'is-electron';
 
 export default {
     name: 'TdLocalSelect',
-    computed: mapState({
-        locale: function (state) {
-            if (this.$i18n.locale !== state.locale.locale) {
-                this.$i18n.locale = state.locale.locale;
-            }
-
-            return state.locale.locale;
+    data() {
+        return {
+            searchQuery: '',
+            filteredLocales: []
         }
-    }),
+    },
+    created() {
+        // Initialize filteredLocales with all available locales
+        this.filteredLocales = this.$i18n.availableLocales;
+    },
+    computed: {
+        ...mapState({
+            locale: function (state) {
+                if (this.$i18n.locale !== state.locale.locale) {
+                    this.$i18n.locale = state.locale.locale;
+                }
+                return state.locale.locale;
+            }
+        })
+    },
     methods: {
+        filterLocales() {
+            const query = this.searchQuery.toLowerCase().trim();
+
+            if (!query) {
+                this.filteredLocales = this.$i18n.availableLocales;
+                return;
+            }
+
+            // Sort and filter locales
+            this.filteredLocales = this.$i18n.availableLocales
+                .sort((a, b) => {
+                    const nameA = this.getLanguageName(a).toLowerCase();
+                    const nameB = this.getLanguageName(b).toLowerCase();
+
+                    // If name starts with query, it should come first
+                    const startsWithA = nameA.startsWith(query);
+                    const startsWithB = nameB.startsWith(query);
+
+                    if (startsWithA && !startsWithB) return -1;
+                    if (!startsWithA && startsWithB) return 1;
+
+                    // If neither or both start with query, sort alphabetically
+                    return nameA.localeCompare(nameB);
+                })
+                .filter(locale => {
+                    const name = this.getLanguageName(locale).toLowerCase();
+                    const searchableText = this.getSearchableText(name);
+                    return name.includes(query) ||
+                        locale.toLowerCase().includes(query) ||
+                        searchableText.includes(query);
+                });
+        },
         updateLocale(locale) {
             this.$store.dispatch(LOCALE_SELECTED, locale);
             if (isElectron()) {
-                // tell the electron main process that the locale has changed
                 window.electronAPI.updateMenu(locale);
             }
+            this.searchQuery = ''; // Clear search after selection
+            this.filterLocales(); // Reset the filtered list
         },
         getLanguageName(locale) {
             switch (locale) {
-            case 'ara':
-                return 'العربية'; // Arabic
-            case 'deu':
-                return 'Deutsch'; // German
-            case 'ell':
-                return 'Ελληνικά'; // Greek
-            case 'eng':
-                return 'English';
-            case 'spa':
-                return 'Español'; // Spanish
-            case 'fin':
-                return 'Suomi'; // Finnish
-            case 'fra':
-                return 'Français'; // French
-            case 'hin':
-                return 'हिंदी'; // Hindi
-            case 'id':
-                return 'Bahasa Indonesia'; // Indonesia 
-            case 'jpn':
-                return '日本語'; // Japanese
-            case 'ms':
-                return 'Malay'; // Malay
-            case 'por':
-                return 'Português'; // Portuguese
-            case 'zho':
-                return '中文'; // Chinese
-            default:
-                return locale; // Default to the original locale code if not found
+                case 'ara':
+                    return 'العربية'; // Arabic
+                case 'deu':
+                    return 'Deutsch'; // German
+                case 'ell':
+                    return 'Ελληνικά'; // Greek
+                case 'eng':
+                    return 'English';
+                case 'spa':
+                    return 'Español'; // Spanish
+                case 'fin':
+                    return 'Suomi'; // Finnish
+                case 'fra':
+                    return 'Français'; // French
+                case 'hin':
+                    return 'हिंदी'; // Hindi
+                case 'id':
+                    return 'Bahasa Indonesia'; // Indonesia 
+                case 'jpn':
+                    return '日本語'; // Japanese
+                case 'ms':
+                    return 'Malay'; // Malay
+                case 'por':
+                    return 'Português'; // Portuguese
+                case 'zho':
+                    return '中文'; // Chinese
+                default:
+                    return locale;
             }
+        },
+        getSearchableText(name) {
+            const searchMapping = {
+                'العربية': 'arabic',
+                'Ελληνικά': 'greek',
+                'हिंदी': 'hindi',
+                '日本語': 'japanese',
+                '中文': 'chinese'
+            };
+            return searchMapping[name] || name;
         }
-    },
-
+    }
 };
 </script>
+  
+<style scoped>
+.locale-changer input {
+    min-width: 200px;
+    margin-bottom: 8px;
+}
+
+.dropdown-items-container {
+    max-height: 300px;
+    overflow-y: auto;
+}
+</style>
\ No newline at end of file

From 6b983d95949f1066c6bec003e2feacd8cfa0f8a1 Mon Sep 17 00:00:00 2001
From: Anvita Prasad <cs23b1059.iiitdm.ac.in>
Date: Mon, 10 Feb 2025 11:29:47 +0530
Subject: [PATCH 2/3] Fix test : Replaced 'English' with 'eng'

---
 td.vue/src/components/LocaleSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/td.vue/src/components/LocaleSelect.vue b/td.vue/src/components/LocaleSelect.vue
index cf7c17bd9..c68ffc7f1 100644
--- a/td.vue/src/components/LocaleSelect.vue
+++ b/td.vue/src/components/LocaleSelect.vue
@@ -92,7 +92,7 @@ export default {
                 case 'ell':
                     return 'Ελληνικά'; // Greek
                 case 'eng':
-                    return 'English';
+                    return 'eng';
                 case 'spa':
                     return 'Español'; // Spanish
                 case 'fin':

From d1d4bf9a1b125ec7605a2b81b2cefa5c2ae81b3c Mon Sep 17 00:00:00 2001
From: Anvita Prasad <cs23b1059.iiitdm.ac.in>
Date: Mon, 10 Feb 2025 12:06:42 +0530
Subject: [PATCH 3/3] Fixed locale selection and filtering, all tests passing

---
 td.vue/src/components/LocaleSelect.vue | 63 +++++++++++++-------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/td.vue/src/components/LocaleSelect.vue b/td.vue/src/components/LocaleSelect.vue
index c68ffc7f1..ac299a345 100644
--- a/td.vue/src/components/LocaleSelect.vue
+++ b/td.vue/src/components/LocaleSelect.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="locale-changer">
-        <b-dropdown right :text="getLanguageName(locale)" variant="primary">
+        <b-dropdown right :text="locale" variant="primary">
             <div class="px-2 py-2">
                 <input type="text" v-model="searchQuery" class="form-control" placeholder="Search language..." @click.stop
                     @input="filterLocales" />
@@ -26,11 +26,10 @@ export default {
         return {
             searchQuery: '',
             filteredLocales: []
-        }
+        };
     },
     created() {
-        // Initialize filteredLocales with all available locales
-        this.filteredLocales = this.$i18n.availableLocales;
+        this.filteredLocales = [...this.$i18n.availableLocales]; 
     },
     computed: {
         ...mapState({
@@ -85,34 +84,34 @@ export default {
         },
         getLanguageName(locale) {
             switch (locale) {
-                case 'ara':
-                    return 'العربية'; // Arabic
-                case 'deu':
-                    return 'Deutsch'; // German
-                case 'ell':
-                    return 'Ελληνικά'; // Greek
-                case 'eng':
-                    return 'eng';
-                case 'spa':
-                    return 'Español'; // Spanish
-                case 'fin':
-                    return 'Suomi'; // Finnish
-                case 'fra':
-                    return 'Français'; // French
-                case 'hin':
-                    return 'हिंदी'; // Hindi
-                case 'id':
-                    return 'Bahasa Indonesia'; // Indonesia 
-                case 'jpn':
-                    return '日本語'; // Japanese
-                case 'ms':
-                    return 'Malay'; // Malay
-                case 'por':
-                    return 'Português'; // Portuguese
-                case 'zho':
-                    return '中文'; // Chinese
-                default:
-                    return locale;
+            case 'ara':
+                return 'العربية'; // Arabic
+            case 'deu':
+                return 'Deutsch'; // German
+            case 'ell':
+                return 'Ελληνικά'; // Greek
+            case 'eng':
+                return 'English';
+            case 'spa':
+                return 'Español'; // Spanish
+            case 'fin':
+                return 'Suomi'; // Finnish
+            case 'fra':
+                return 'Français'; // French
+            case 'hin':
+                return 'हिंदी'; // Hindi
+            case 'id':
+                return 'Bahasa Indonesia'; // Indonesia 
+            case 'jpn':
+                return '日本語'; // Japanese
+            case 'ms':
+                return 'Malay'; // Malay
+            case 'por':
+                return 'Português'; // Portuguese
+            case 'zho':
+                return '中文'; // Chinese
+            default:
+                return locale;
             }
         },
         getSearchableText(name) {