MDL-70632 tool_langimport: search for available language packs.

admin/tool/langimport/amd/src/search.js

@@ -0,0 +1,100 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Add search filtering of available language packs
+ *
+ * @module      tool_langimport/search
+ * @package     tool_langimport
+ * @copyright   2021 Paul Holden <[email protected]>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import Pending from 'core/pending';
+import {debounce} from 'core/utils';
+
+const SELECTORS = {
+    AVAILABLE_LANG_SELECT: 'select',
+    AVAILABLE_LANG_SEARCH: '[data-action="search"]',
+};
+
+const DEBOUNCE_TIMER = 250;
+
+/**
+ * Initialize module
+ *
+ * @param {Element} form
+ */
+const init = (form) => {
+    const availableLangsElement = form.querySelector(SELECTORS.AVAILABLE_LANG_SELECT);
+
+    const availableLangsFilter = (event) => {
+        const pendingPromise = new Pending('tool_langimport/search:filter');
+
+        // Remove existing options.
+        availableLangsElement.querySelectorAll('option').forEach((option) => {
+            option.remove();
+        });
+
+        // Filter for matching languages.
+        const searchTerm = event.target.value.toLowerCase();
+        const availableLanguages = JSON.parse(availableLangsElement.dataset.availableLanguages);
+        const filteredLanguages = Object.keys(availableLanguages).reduce((matches, langcode) => {
+            if (availableLanguages[langcode].toLowerCase().includes(searchTerm)) {
+                matches[langcode] = availableLanguages[langcode];
+            }
+            return matches;
+        }, []);
+
+        // Re-create filtered options.
+        Object.entries(filteredLanguages).forEach(([langcode, langname]) => {
+            const option = document.createElement('option');
+            option.value = langcode;
+            option.innerText = langname;
+            availableLangsElement.append(option);
+        });
+
+        pendingPromise.resolve();
+    };
+
+    // Cache initial available language options.
+    const availableLanguages = {};
+    availableLangsElement.querySelectorAll('option').forEach((option) => {
+        availableLanguages[option.value] = option.text;
+    });
+    availableLangsElement.dataset.availableLanguages = JSON.stringify(availableLanguages);
+
+    // Register event listeners on the search element.
+    const availableLangsSearch = form.querySelector(SELECTORS.AVAILABLE_LANG_SEARCH);
+    availableLangsSearch.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+        }
+    });
+
+    // Debounce the event listener to allow the user to finish typing.
+    availableLangsSearch.addEventListener('keyup', (event) => {
+        const pendingPromise = new Pending('tool_langimport/search:keyup');
+
+        debounce(availableLangsFilter, DEBOUNCE_TIMER)(event);
+        setTimeout(() => {
+            pendingPromise.resolve();
+        }, DEBOUNCE_TIMER);
+    });
+};
+
+export default {
+    init: init,
+};

admin/tool/langimport/lang/en/tool_langimport.php

@@ -45,6 +45,7 @@
 $string['nolangupdateneeded'] = 'All your language packs are up to date, no update is needed';
 $string['pluginname'] = 'Language packs';
 $string['purgestringcaches'] = 'Purge string caches';
+$string['search'] = 'Search available language packs';
 $string['selectlangs'] = 'Select languages to uninstall';
 $string['uninstall'] = 'Uninstall selected language pack(s)';
 $string['uninstallconfirm'] = 'You are about to completely uninstall these language packs: <strong>{$a}</strong>. Are you sure?';

admin/tool/langimport/styles.css

@@ -3,3 +3,8 @@
     float: none;
     width: 100%;
 }
+
+#page-admin-tool-langimport-index #menuuninstalllang,
+#page-admin-tool-langimport-index #menupack {
+    height: 300px;
+}

admin/tool/langimport/templates/langimport.mustache

@@ -105,6 +105,13 @@
                                 {{/toinstalloptions}}
                             </select>
                         </div>
+                        <div class="mb-3">
+                            {{< core/search_input_auto }}
+                                {{$label}}
+                                    {{#str}} search, tool_langimport {{/str}}
+                                {{/label}}
+                            {{/ core/search_input_auto }}
+                        </div>
                         <div class="form-group">
                             <input type="hidden" name="sesskey" value="{{sesskey}}">
                             <input type="submit" value="{{#str}}install, tool_langimport{{/str}}" class="btn btn-secondary">
@@ -115,3 +122,8 @@
         {{/caninstall}}
     </div>
 </div>
+{{#js}}
+    require(['tool_langimport/search'], function(search) {
+        search.init(document.querySelector('#installform'));
+    });
+{{/js}}

admin/tool/langimport/tests/behat/manage_langpacks.feature

@@ -20,6 +20,16 @@ Feature: Manage language packs
     And I should see "The language pack 'en_ar' was installed."
     And I log out
 
+  @javascript
+  Scenario: Search for available language pack
+    Given I log in as "admin"
+    And I navigate to "Language > Language packs" in site administration
+    When I set the field "Search available language packs" to "pirate"
+    Then the "Available language packs" select box should not contain "es"
+    And I set the field "Available language packs" to "en_ar"
+    And I press "Install selected language pack(s)"
+    And I should see "Language pack 'en_ar' was successfully installed"
+
   Scenario: Update language pack
     Given outdated langpack 'en_ar' is installed
     And I log in as "admin"