Merge pull request #16 from Praznik/add-clear-button

Added clear button
nathancox · Feb 19, 2020 · 4fce857 · 4fce857
2 parents 72e864e + d47b1ac
commit 4fce857
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 3 deletions.
diff --git a/_config/config.yml b/_config/config.yml
@@ -3,4 +3,5 @@ name: hasoneautocompletefield
 ---
 
 NathanCox\HasOneAutocompleteField\Forms\HasOneAutocompleteField:
+  clearButtonEnabled: false
   autocompleteDelay: 300
diff --git a/client/dist/css/hasoneautocompletefield.css b/client/dist/css/hasoneautocompletefield.css
@@ -25,7 +25,8 @@
     display: inline-block;
 }
 .hasoneautocomplete.showsearch .hasoneautocomplete-currenttext,
-.hasoneautocomplete.showsearch .hasoneautocomplete-editbutton {
+.hasoneautocomplete.showsearch .hasoneautocomplete-editbutton,
+.hasoneautocomplete.showsearch .hasoneautocomplete-clearbutton {
     display: none;
 }
 

diff --git a/client/dist/js/hasoneautocompletefield.js b/client/dist/js/hasoneautocompletefield.js
@@ -17,6 +17,38 @@
             }
         });
 
+        $(".hasoneautocomplete-clearbutton").entwine({
+            onclick: function() {
+                var defaultText = String(this.closest('.hasoneautocomplete').data('default-text')).trim();
+                var $currentText = this.closest('.hasoneautocomplete').find('.hasoneautocomplete-currenttext').first();
+                var $idField = this.closest('.hasoneautocomplete').find('.hasoneautocomplete-id').first();
+                if ($currentText.length && $idField.length) {
+                    if (defaultText === '') {
+                        defaultText = '(none)';
+                    }
+
+                    $currentText.html(defaultText);
+                    $idField.val(0).change();
+                }
+			},
+			onmatch: function() {
+                $idField = this.closest('.hasoneautocomplete').find('.hasoneautocomplete-id').first();
+                if ($idField.length) {
+                    $idField.change(function(event) {
+                        var $clearButton = $(this).closest('.hasoneautocomplete').find('.hasoneautocomplete-clearbutton').first();
+                        if ($clearButton.length) {
+                            var newValue = String($(this).val()).trim();
+                            if (newValue === '' || newValue === '0') {
+                                $clearButton.hide();
+                            } else {
+                                $clearButton.show();
+                            }
+                        }
+                    });
+                }
+			}
+		});
+
         $(".hasoneautocomplete-search").entwine({
             onmatch: function (event) {
                 var t = this;

diff --git a/src/forms/HasOneAutocompleteField.php b/src/forms/HasOneAutocompleteField.php
@@ -62,6 +62,8 @@ class HasOneAutocompleteField extends FormField
      */
     protected $searchFields = false;
 
+    protected $clearButtonEnabled = false;
+
     /**
      * Variable that sets the autocomplete delay
      *
@@ -79,12 +81,13 @@ public function __construct($name, $title = null, $sourceObject, $labelField = '
     {
         $this->sourceObject = $sourceObject;
         $this->labelField   = $labelField;
+        $this->clearButtonEnabled = Config::inst()->get(HasOneAutocompleteField::class, 'clearButtonEnabled');
 
         $configAutocompleteDelay = intval(Config::inst()->get(HasOneAutocompleteField::class, 'autocompleteDelay'));
         if ($configAutocompleteDelay > 0) {
             $this->autocompleteDelay = $configAutocompleteDelay;
         }
-
+      
         parent::__construct($name, $title);
     }
 
@@ -273,6 +276,29 @@ public function setResultsLimit($limit)
         return $this;
     }
 
+    public function enableClearButton()
+    {
+        $this->setClearButtonEnabled(true);
+        return $this;
+    }
+
+    public function disableClearButton()
+    {
+        $this->setClearButtonEnabled(false);
+        return $this;
+    }
+
+    private function getClearButtonEnabled()
+    {
+        return $this->clearButtonEnabled;
+    }
+
+    private function setClearButtonEnabled(bool $enabled = true)
+    {
+        $this->clearButtonEnabled = $enabled;
+        return $this;
+    }
+
     public function getAutocompleteDelay()
     {
         return $this->autocompleteDelay;
@@ -317,6 +343,17 @@ public function Field($properties = array())
         $cancelField->setButtonContent('Cancel');
         $cancelField->addExtraClass('edit hasoneautocomplete-cancelbutton btn-outline-secondary');
 
+        if ($this->getClearButtonEnabled() === true) {
+            $fields->push($clearField = FormAction::create($this->name.'Clear', ''));
+            $clearField->setUseButtonTag(true);
+            $clearField->setButtonContent('Clear');
+            $clearField->addExtraClass('clear hasoneautocomplete-clearbutton btn-outline-danger btn-hide-outline action--delete btn-sm');
+
+            if (intval($this->value) === 0) {
+                $clearField->setAttribute('style', 'display:none;');
+            }
+        }
+
         return $fields;
     }
 

diff --git a/templates/NathanCox/HasOneAutocompleteField/Forms/HasOneAutocompleteField_holder.ss b/templates/NathanCox/HasOneAutocompleteField/Forms/HasOneAutocompleteField_holder.ss
@@ -1,4 +1,4 @@
-<div id="$HolderID" class="form-group field<% if $extraClass %> $extraClass<% end_if %>" data-autocomplete-delay="$getAutocompleteDelay">
+<div id="$HolderID" class="form-group field<% if $extraClass %> $extraClass<% end_if %>"  data-default-text="$defaultText" data-autocomplete-delay="$getAutocompleteDelay">
     <% if $Title %>
         <label for="$ID" id="title-$ID" class="form__field-label">$Title</label>
     <% end_if %>