MDL-70279 tool_templatelibrary: preserve component search field value.

admin/tool/templatelibrary/amd/build/search.min.js

@@ -1,2 +1,2 @@
-define ("tool_templatelibrary/search",["jquery","core/ajax","core/log","core/notification","core/templates","core/config"],function(a,b,c,d,e,f){var g=function(b){e.render("tool_templatelibrary/search_results",{templates:b}).done(function(b,c){e.replaceNode(a("[data-region=\"searchresults\"]"),b,c)}).fail(d.exception)},h=function(c){var e=a("[data-field=\"component\"]").val(),f=a("[data-region=\"list-templates\"] [data-region=\"input\"]").val();if(""!==f){a("[data-region=\"list-templates\"] [data-action=\"clearsearch\"]").removeClass("d-none")}else{a("[data-region=\"list-templates\"] [data-action=\"clearsearch\"]").addClass("d-none")}document.location.hash=f;b.call([{methodname:"tool_templatelibrary_list_templates",args:{component:e,search:f,themename:c},done:g,fail:d.exception}],!0,!1)},i=null,j=function(a,b){if(null!==i){window.clearTimeout(i)}i=window.setTimeout(function(){a();i=null},b)},k=function(){j(h.bind(this,f.theme),400)};a("[data-region=\"list-templates\"]").on("change","[data-field=\"component\"]",k);a("[data-region=\"list-templates\"]").on("input","[data-region=\"input\"]",k);a("[data-action=\"clearsearch\"]").on("click",function(){a("[data-region=\"input\"]").val("");h(f.theme);a(this).addClass("d-none")});a("[data-region=\"input\"]").val(document.location.hash.replace("#",""));h(f.theme);return{}});
+define ("tool_templatelibrary/search",["jquery","core/ajax","core/log","core/notification","core/templates","core/config"],function(a,b,c,d,e,f){var g=function(b){e.render("tool_templatelibrary/search_results",{templates:b}).done(function(b,c){e.replaceNode(a("[data-region=\"searchresults\"]"),b,c)}).fail(d.exception)},h=function(c){var e=a("[data-field=\"component\"]").val(),f=a("[data-region=\"list-templates\"] [data-region=\"input\"]").val();if(""!==f){a("[data-region=\"list-templates\"] [data-action=\"clearsearch\"]").removeClass("d-none")}else{a("[data-region=\"list-templates\"] [data-action=\"clearsearch\"]").addClass("d-none")}b.call([{methodname:"tool_templatelibrary_list_templates",args:{component:e,search:f,themename:c},done:g,fail:d.exception}],!0,!1)},i=null,j=function(a,b){if(null!==i){window.clearTimeout(i)}i=window.setTimeout(function(){a();i=null},b)},k=function(){j(h.bind(this,f.theme),400)};a("[data-region=\"list-templates\"]").on("change","[data-field=\"component\"]",k);a("[data-region=\"list-templates\"]").on("input","[data-region=\"input\"]",k);a("[data-action=\"clearsearch\"]").on("click",function(){a("[data-region=\"input\"]").val("");h(f.theme);a(this).addClass("d-none")});h(f.theme);return{}});
 //# sourceMappingURL=search.min.js.map

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

@@ -52,9 +52,8 @@ define(['jquery', 'core/ajax', 'core/log', 'core/notification', 'core/templates'
         } else {
             $('[data-region="list-templates"] [data-action="clearsearch"]').addClass('d-none');
         }
-        // Trigger the search.
-        document.location.hash = searchStr;
 
+        // Trigger the search.
         ajax.call([
             {methodname: 'tool_templatelibrary_list_templates',
               args: {component: componentStr, search: searchStr, themename: themename},
@@ -96,7 +95,6 @@ define(['jquery', 'core/ajax', 'core/log', 'core/notification', 'core/templates'
         $(this).addClass('d-none');
     });
 
-    $('[data-region="input"]').val(document.location.hash.replace('#', ''));
     refreshSearch(config.theme);
     return {};
 });

admin/tool/templatelibrary/classes/output/list_templates_page.php

@@ -40,6 +40,22 @@ use tool_templatelibrary\api;
  */
 class list_templates_page implements renderable, templatable {
 
+    /** @var string $component The currently selected component */
+    protected $component;
+    /** @var string $search The current search */
+    protected $search;
+
+    /**
+     * Template page constructor
+     *
+     * @param string $component
+     * @param string $search
+     */
+    public function __construct(string $component = '', string $search = '') {
+        $this->component = $component;
+        $this->search = $search;
+    }
+
     /**
      * Export this data so it can be used as the context for a mustache template.
      *
@@ -75,6 +91,7 @@ class list_templates_page implements renderable, templatable {
             $components[$type]->plugins[$component] = (object) [
                 'name' => $pluginname,
                 'component' => $component,
+                'selected' => ($component === $this->component),
             ];
         }
 
@@ -87,6 +104,7 @@ class list_templates_page implements renderable, templatable {
 
         return (object) [
             'allcomponents' => array_values($components),
+            'search' => $this->search,
         ];
     }
 }

admin/tool/templatelibrary/templates/list_templates_page.mustache

@@ -72,12 +72,12 @@
         {{/label}}
 
         {{$element}}
-            <select id="selectcomponent" class="form-control" data-field="component">
+            <select id="selectcomponent" name="component" class="form-control" data-field="component">
                 <option value="">{{#str}}all, tool_templatelibrary{{/str}}</option>
                 {{#allcomponents}}
                     <optgroup label="{{type}}">
                         {{#plugins}}
-                            <option value="{{component}}">{{name}}</option>
+                            <option value="{{component}}" {{#selected}}selected{{/selected}}>{{name}}</option>
                         {{/plugins}}
                     </optgroup>
                 {{/allcomponents}}
@@ -88,10 +88,10 @@
     {{< core_form/element-template }}
         {{$element}}
             {{< core/search_input_auto }}
-                {{$label}}{{{ searchstring }}}{{/label}}
-                {{$placeholder}}{{#str}}
-                    search, core
-                {{/str}}{{/placeholder}}
+                {{$label}}
+                    {{#str}} search, tool_templatelibrary {{/str}}
+                {{/label}}
+                {{$value}}{{ search }}{{/value}}
             {{/ core/search_input_auto }}
         {{/element}}
     {{/ core_form/element-template }}

lib/templates/search_input_auto.mustache

@@ -49,6 +49,7 @@
            class="form-control withclear"
            placeholder="{{$placeholder}}{{#str}} search, core {{/str}}{{/placeholder}}"
            name="search"
+           value="{{$value}}{{/value}}"
            autocomplete="off"
         >
         <button