From 32d076a3a615664b16073beafb65d529eaf1596a Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Mon, 31 Aug 2020 15:40:48 +0200
Subject: [PATCH]  MDL-69454 core_search: consistent capability search

---
 .../moodle-tool_capability-search-debug.js    | 31 ++++++++++++++++---
 .../moodle-tool_capability-search-min.js      |  2 +-
 .../moodle-tool_capability-search.js          | 31 ++++++++++++++++---
 .../capability/yui/src/search/js/search.js    | 31 ++++++++++++++++---
 4 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-debug.js b/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-debug.js
index 1c0553405bc..ed3d79cd36e 100644
--- a/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-debug.js
+++ b/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-debug.js
@@ -53,6 +53,13 @@ SEARCH.prototype = {
      * @protected
      */
     button: null,
+    /**
+     * The cancel button for the form.
+     * @property button
+     * @type Node
+     * @protected
+     */
+    cancel: null,
     /**
      * The last search node if there is one.
      * If there is a last search node then the last search term will be persisted between requests.
@@ -76,17 +83,28 @@ SEARCH.prototype = {
         this.button = this.form.all('input[type=submit]');
         this.lastsearch = this.form.one('input[name=search]');
 
-        var div = Y.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),
-            label = Y.Node.create('<label for="capabilitysearch">' + this.get('strsearch') + '</label>');
-        this.input = Y.Node.create('<input type="text" id="capabilitysearch" />');
+        var div = Y.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"' +
+            'data-fieldtype="text"></div>'),
+            label = Y.Node.create('<label for="capabilitysearch"><span class="sr-only"' +
+                this.get('strsearch') + '</span></label>');
+        this.cancel = Y.Node.create('<a class="btn btn-clear d-none icon-no-margin">' +
+                '<i class="icon fa fa-times fa-fw " aria-hidden="true"></i>' +
+                '</a>');
+        this.input = Y.Node.create('<input type="text" class="form-control withclear" placeholder="' +
+            this.get('strsearch') + '"id="capabilitysearch" />');
 
-        div.append(label).append(this.input);
+        div.append(label).append(this.input).append(this.cancel);
 
         this.select.insert(div, 'before');
 
         this.input.on('keyup', this.typed, this);
         this.select.on('change', this.validate, this);
 
+        this.cancel.on('click', function() {
+            this.input.set('value', '');
+            this.typed();
+        }, this);
+
         if (this.lastsearch) {
             this.input.set('value', this.lastsearch.get('value'));
             this.typed();
@@ -133,6 +151,11 @@ SEARCH.prototype = {
                 last.set('selected', true);
             }
         }
+        if (search !== '') {
+            this.cancel.removeClass("d-none");
+        } else {
+            this.cancel.addClass("d-none");
+        }
         this.validate();
     }
 };
diff --git a/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-min.js b/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-min.js
index 6520ca28100..30e97fccc72 100644
--- a/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-min.js
+++ b/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search-min.js
@@ -1 +1 @@
-YUI.add("moodle-tool_capability-search",function(i,t){var e=function(){e.superclass.constructor.apply(this,arguments)};e.prototype={form:null,select:null,selectoptions:{},input:null,button:null,lastsearch:null,initializer:function(){this.form=i.one("#capability-overview-form"),this.select=this.form.one("select[data-search=capability]"),this.select.setStyle("minWidth",this.select.get("offsetWidth")),this.select.get("options").each(function(t){var e=t.get("value");this.selectoptions[e]=t},this),this.button=this.form.all("input[type=submit]"),this.lastsearch=this.form.one("input[name=search]");var t=i.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),e=i.Node.create('<label for="capabilitysearch">'+this.get("strsearch")+"</label>");this.input=i.Node.create('<input type="text" id="capabilitysearch" />'),t.append(e).append(this.input),this.select.insert(t,"before"),this.input.on("keyup",this.typed,this),this.select.on("change",this.validate,this),this.lastsearch&&(this.input.set("value",this.lastsearch.get("value")),this.typed(),this.select.one("option[selected]")&&this.select.set("scrollTop",this.select.one("option[selected]").get("getX"))),this.validate()},validate:function(){this.button.set("disabled",""===this.select.get("value"))},typed:function(){var t,e=this.input.get("value"),i=0,s=null;for(t in this.lastsearch&&this.lastsearch.set("value",e),this.select.all("option").remove(),this.selectoptions)0<=t.indexOf(e)&&(i++,s=this.selectoptions[t],this.select.append(this.selectoptions[t]));0===i?this.input.addClass("error"):(this.input.removeClass("error"),1===i&&s.set("selected",!0)),this.validate()}},i.extend(e,i.Base,e.prototype,{NAME:"tool_capability-search",ATTRS:{strsearch:{}}}),M.tool_capability=M.tool_capability||{},M.tool_capability.init_capability_search=function(t){new e(t)}},"@VERSION@",{requires:["base","node"]});
\ No newline at end of file
+YUI.add("moodle-tool_capability-search",function(s,t){var e=function(){e.superclass.constructor.apply(this,arguments)};e.prototype={form:null,select:null,selectoptions:{},input:null,button:null,cancel:null,lastsearch:null,initializer:function(){this.form=s.one("#capability-overview-form"),this.select=this.form.one("select[data-search=capability]"),this.select.setStyle("minWidth",this.select.get("offsetWidth")),this.select.get("options").each(function(t){var e=t.get("value");this.selectoptions[e]=t},this),this.button=this.form.all("input[type=submit]"),this.lastsearch=this.form.one("input[name=search]");var t=s.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"data-fieldtype="text"></div>'),e=s.Node.create('<label for="capabilitysearch"><span class="sr-only"'+this.get("strsearch")+"</span></label>");this.cancel=s.Node.create('<a class="btn btn-clear d-none icon-no-margin"><i class="icon fa fa-times fa-fw " aria-hidden="true"></i></a>'),this.input=s.Node.create('<input type="text" class="form-control withclear" placeholder="'+this.get("strsearch")+'"id="capabilitysearch" />'),t.append(e).append(this.input).append(this.cancel),this.select.insert(t,"before"),this.input.on("keyup",this.typed,this),this.select.on("change",this.validate,this),this.cancel.on("click",function(){this.input.set("value",""),this.typed()},this),this.lastsearch&&(this.input.set("value",this.lastsearch.get("value")),this.typed(),this.select.one("option[selected]")&&this.select.set("scrollTop",this.select.one("option[selected]").get("getX"))),this.validate()},validate:function(){this.button.set("disabled",""===this.select.get("value"))},typed:function(){var t,e=this.input.get("value"),s=0,i=null;for(t in this.lastsearch&&this.lastsearch.set("value",e),this.select.all("option").remove(),this.selectoptions)0<=t.indexOf(e)&&(s++,i=this.selectoptions[t],this.select.append(this.selectoptions[t]));0===s?this.input.addClass("error"):(this.input.removeClass("error"),1===s&&i.set("selected",!0)),""!==e?this.cancel.removeClass("d-none"):this.cancel.addClass("d-none"),this.validate()}},s.extend(e,s.Base,e.prototype,{NAME:"tool_capability-search",ATTRS:{strsearch:{}}}),M.tool_capability=M.tool_capability||{},M.tool_capability.init_capability_search=function(t){new e(t)}},"@VERSION@",{requires:["base","node"]});
\ No newline at end of file
diff --git a/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search.js b/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search.js
index 1c0553405bc..ed3d79cd36e 100644
--- a/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search.js
+++ b/admin/tool/capability/yui/build/moodle-tool_capability-search/moodle-tool_capability-search.js
@@ -53,6 +53,13 @@ SEARCH.prototype = {
      * @protected
      */
     button: null,
+    /**
+     * The cancel button for the form.
+     * @property button
+     * @type Node
+     * @protected
+     */
+    cancel: null,
     /**
      * The last search node if there is one.
      * If there is a last search node then the last search term will be persisted between requests.
@@ -76,17 +83,28 @@ SEARCH.prototype = {
         this.button = this.form.all('input[type=submit]');
         this.lastsearch = this.form.one('input[name=search]');
 
-        var div = Y.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),
-            label = Y.Node.create('<label for="capabilitysearch">' + this.get('strsearch') + '</label>');
-        this.input = Y.Node.create('<input type="text" id="capabilitysearch" />');
+        var div = Y.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"' +
+            'data-fieldtype="text"></div>'),
+            label = Y.Node.create('<label for="capabilitysearch"><span class="sr-only"' +
+                this.get('strsearch') + '</span></label>');
+        this.cancel = Y.Node.create('<a class="btn btn-clear d-none icon-no-margin">' +
+                '<i class="icon fa fa-times fa-fw " aria-hidden="true"></i>' +
+                '</a>');
+        this.input = Y.Node.create('<input type="text" class="form-control withclear" placeholder="' +
+            this.get('strsearch') + '"id="capabilitysearch" />');
 
-        div.append(label).append(this.input);
+        div.append(label).append(this.input).append(this.cancel);
 
         this.select.insert(div, 'before');
 
         this.input.on('keyup', this.typed, this);
         this.select.on('change', this.validate, this);
 
+        this.cancel.on('click', function() {
+            this.input.set('value', '');
+            this.typed();
+        }, this);
+
         if (this.lastsearch) {
             this.input.set('value', this.lastsearch.get('value'));
             this.typed();
@@ -133,6 +151,11 @@ SEARCH.prototype = {
                 last.set('selected', true);
             }
         }
+        if (search !== '') {
+            this.cancel.removeClass("d-none");
+        } else {
+            this.cancel.addClass("d-none");
+        }
         this.validate();
     }
 };
diff --git a/admin/tool/capability/yui/src/search/js/search.js b/admin/tool/capability/yui/src/search/js/search.js
index 1e4b96c9d91..71bd1525766 100644
--- a/admin/tool/capability/yui/src/search/js/search.js
+++ b/admin/tool/capability/yui/src/search/js/search.js
@@ -51,6 +51,13 @@ SEARCH.prototype = {
      * @protected
      */
     button: null,
+    /**
+     * The cancel button for the form.
+     * @property button
+     * @type Node
+     * @protected
+     */
+    cancel: null,
     /**
      * The last search node if there is one.
      * If there is a last search node then the last search term will be persisted between requests.
@@ -74,17 +81,28 @@ SEARCH.prototype = {
         this.button = this.form.all('input[type=submit]');
         this.lastsearch = this.form.one('input[name=search]');
 
-        var div = Y.Node.create('<div id="capabilitysearchui" data-fieldtype="text"></div>'),
-            label = Y.Node.create('<label for="capabilitysearch">' + this.get('strsearch') + '</label>');
-        this.input = Y.Node.create('<input type="text" id="capabilitysearch" />');
+        var div = Y.Node.create('<div id="capabilitysearchui" class="input-group simplesearchform mb-2"' +
+            'data-fieldtype="text"></div>'),
+            label = Y.Node.create('<label for="capabilitysearch"><span class="sr-only"' +
+                this.get('strsearch') + '</span></label>');
+        this.cancel = Y.Node.create('<a class="btn btn-clear d-none icon-no-margin">' +
+                '<i class="icon fa fa-times fa-fw " aria-hidden="true"></i>' +
+                '</a>');
+        this.input = Y.Node.create('<input type="text" class="form-control withclear" placeholder="' +
+            this.get('strsearch') + '"id="capabilitysearch" />');
 
-        div.append(label).append(this.input);
+        div.append(label).append(this.input).append(this.cancel);
 
         this.select.insert(div, 'before');
 
         this.input.on('keyup', this.typed, this);
         this.select.on('change', this.validate, this);
 
+        this.cancel.on('click', function() {
+            this.input.set('value', '');
+            this.typed();
+        }, this);
+
         if (this.lastsearch) {
             this.input.set('value', this.lastsearch.get('value'));
             this.typed();
@@ -131,6 +149,11 @@ SEARCH.prototype = {
                 last.set('selected', true);
             }
         }
+        if (search !== '') {
+            this.cancel.removeClass("d-none");
+        } else {
+            this.cancel.addClass("d-none");
+        }
         this.validate();
     }
 };