MDL-69454 core_search: consistent template library search
authorBas Brands <bas@moodle.com>
Mon, 31 Aug 2020 13:55:51 +0000 (15:55 +0200)
committerBas Brands <bas@moodle.com>
Mon, 21 Sep 2020 09:54:52 +0000 (11:54 +0200)
admin/tool/templatelibrary/amd/build/search.min.js
admin/tool/templatelibrary/amd/build/search.min.js.map
admin/tool/templatelibrary/amd/src/search.js
admin/tool/templatelibrary/templates/list_templates_page.mustache
lib/templates/search_input_auto.mustache [new file with mode: 0644]

index ea1aac5..74f8c50 100644 (file)
Binary files a/admin/tool/templatelibrary/amd/build/search.min.js and b/admin/tool/templatelibrary/amd/build/search.min.js differ
index 1611c7e..0245bb8 100644 (file)
Binary files a/admin/tool/templatelibrary/amd/build/search.min.js.map and b/admin/tool/templatelibrary/amd/build/search.min.js.map differ
index 18623df..9caf344 100644 (file)
@@ -45,8 +45,13 @@ define(['jquery', 'core/ajax', 'core/log', 'core/notification', 'core/templates'
      */
     var refreshSearch = function(themename) {
         var componentStr = $('[data-field="component"]').val();
-        var searchStr = $('[data-field="search"]').val();
+        var searchStr = $('[data-region="list-templates"] [data-region="input"]').val();
 
+        if (searchStr !== '') {
+            $('[data-region="list-templates"] [data-action="clearsearch"]').removeClass('d-none');
+        } else {
+            $('[data-region="list-templates"] [data-action="clearsearch"]').addClass('d-none');
+        }
         // Trigger the search.
         document.location.hash = searchStr;
 
@@ -84,9 +89,14 @@ define(['jquery', 'core/ajax', 'core/log', 'core/notification', 'core/templates'
     };
     // Add change handlers to refresh the list.
     $('[data-region="list-templates"]').on('change', '[data-field="component"]', changeHandler);
-    $('[data-region="list-templates"]').on('input', '[data-field="search"]', changeHandler);
+    $('[data-region="list-templates"]').on('input', '[data-region="input"]', changeHandler);
+    $('[data-action="clearsearch"]').on('click', function() {
+        $('[data-region="input"]').val('');
+        refreshSearch(config.theme);
+        $(this).addClass('d-none');
+    });
 
-    $('[data-field="search"]').val(document.location.hash.replace('#', ''));
+    $('[data-region="input"]').val(document.location.hash.replace('#', ''));
     refreshSearch(config.theme);
     return {};
 });
index 0526c94..c5a454e 100644 (file)
     Context variables required for this template:
     * allcomponents - array of components containing templates. Each component has a name and a component attribute.
 
+}}
+{{!
+    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/>.
+}}
+{{!
+    @template tool_templatelibrary/list_templates_page
+
+    Moodle template to the template library
+
+    The purpose of this template is build the entire page for the template library (by including smaller templates).
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-region, data-field
+
+    Context variables required for this template:
+    * allcomponents - array of components containing templates. Each component has a name and a component attribute.
+
 }}
 <div data-region="list-templates">
     <form class="form-horizontal">
-        <div class="control-group">
-            <label for="selectcomponent" class="control-label">{{#str}}component, tool_templatelibrary{{/str}}</label>
-            <div class="controls">
-                <select id="selectcomponent" data-field="component">
-                    <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
-                    {{#allcomponents}}
-                        <option value="{{component}}">{{name}}</option>
-                    {{/allcomponents}}
-                </select>
-            </div>
-        </div>
-        <div class="control-group">
-            <label for="search" class="control-label">{{#str}}search, tool_templatelibrary{{/str}}</label>
-            <div class="controls">
-                <input type="text" id="search" data-field="search"/>
-            </div>
-        </div>
+    {{< core_form/element-template }}
+        {{$label}}
+            <div class="col-form-label">{{#str}}component, tool_templatelibrary{{/str}}</div>
+        {{/label}}
+
+        {{$element}}
+            <select id="selectcomponent" class="form-control" data-field="component">
+                <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
+                {{#allcomponents}}
+                    <option value="{{component}}">{{name}}</option>
+                {{/allcomponents}}
+            </select>
+        {{/element}}
+    {{/ core_form/element-template }}
+
+    {{< core_form/element-template }}
+        {{$element}}
+            {{< core/search_input_auto }}
+                {{$label}}{{{ searchstring }}}{{/label}}
+                {{$placeholder}}{{#str}}
+                    search, core
+                {{/str}}{{/placeholder}}
+            {{/ core/search_input_auto }}
+        {{/element}}
+    {{/ core_form/element-template }}
     </form>
     <hr/>
     {{> tool_templatelibrary/search_results }}
diff --git a/lib/templates/search_input_auto.mustache b/lib/templates/search_input_auto.mustache
new file mode 100644 (file)
index 0000000..7e89b09
--- /dev/null
@@ -0,0 +1,63 @@
+{{!
+    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/>.
+}}
+{{!
+    @template core/search_input_auto
+
+    Search input that auto searches.
+
+    Example context (json):
+    {
+        "action": "https://moodle.local/admin/search.php",
+        "extraclasses": "my-2",
+        "inputname": "search",
+        "searchstring": "Search settings",
+        "sesskey": "sesskey",
+        "value": "policy",
+        "btnclass": "primary",
+        "hiddenfields": [
+            {
+                "name": "course",
+                "value": "11"
+            }
+        ]
+    }
+}}
+<div id="searchform-auto-{{uniqid}}" class="form-inline simplesearchform">
+    <div class="input-group searchbar" role="search">
+        <label for="searchinput">
+            <span class="sr-only">{{$label}}{{#str}} search, core {{/str}}{{/label}}</span>
+        </label>
+        <input
+           type="text"
+           data-region="input"
+           data-action="search"
+           id="searchinput"
+           class="form-control withclear"
+           placeholder="{{$placeholder}}{{#str}} search, core {{/str}}{{/placeholder}}"
+           name="search"
+           autocomplete="off"
+        >
+        <button
+            class="btn btn-clear d-none"
+            data-action="clearsearch"
+            type="button"
+        >
+           {{#pix}} e/cancel, core {{/pix}}
+            <span class="sr-only">{{#str}} clearsearch, core {{/str}}</span>
+        </button>
+    </div>
+</div>