From 60af4764e61cb3db5d3fea37acb0d79a3885e527 Mon Sep 17 00:00:00 2001
From: Olayinka Azeez <44491331+zeezo887@users.noreply.github.com>
Date: Tue, 15 Oct 2024 01:01:27 +0100
Subject: [PATCH] feat: added clearable method to select form field (#2581)

---------

Co-authored-by: Quentin Renard <quentin@area17.com>
---
 frontend/js/components/VSelect.vue                 |  5 +++++
 frontend/js/components/VSelect/ExtendedVSelect.vue |  5 -----
 frontend/scss/vendor/_vselect.scss                 |  9 +++++++--
 src/Services/Forms/Fields/Select.php               | 13 +++++++++++++
 src/View/Components/Fields/FieldWithOptions.php    |  1 +
 src/View/Components/Fields/Select.php              |  2 ++
 views/partials/form/_select.blade.php              |  1 +
 7 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/js/components/VSelect.vue b/frontend/js/components/VSelect.vue
index 989151314..71e4260a3 100755
--- a/frontend/js/components/VSelect.vue
+++ b/frontend/js/components/VSelect.vue
@@ -13,6 +13,7 @@
               :searchable="searchable"
               :selectable="selectable"
               :clearSearchOnSelect="clearSearchOnSelect"
+              :clearable="clearable"
               :label="optionsLabel"
               :taggable="taggable"
               :pushTags="pushTags"
@@ -81,6 +82,10 @@
         type: Boolean,
         default: false
       },
+      clearable: {
+        type: Boolean,
+        default: false
+      },
       selectable: {
         type: Function,
         default: option => option.selectable ?? true,
diff --git a/frontend/js/components/VSelect/ExtendedVSelect.vue b/frontend/js/components/VSelect/ExtendedVSelect.vue
index e61bd07f2..d6cf2e3d7 100644
--- a/frontend/js/components/VSelect/ExtendedVSelect.vue
+++ b/frontend/js/components/VSelect/ExtendedVSelect.vue
@@ -38,11 +38,6 @@
         mutableValue: this.value
       }
     },
-    computed: {
-      showClearButton () {
-        return false
-      }
-    },
     methods: {
       /**
        * Delete the value on Delete keypress when there is no
diff --git a/frontend/scss/vendor/_vselect.scss b/frontend/scss/vendor/_vselect.scss
index cae596933..526dd7392 100644
--- a/frontend/scss/vendor/_vselect.scss
+++ b/frontend/scss/vendor/_vselect.scss
@@ -132,6 +132,11 @@ $multiSelectHeight: 45px;
       padding-left: 0;
     }
 
+    .vs__clear {
+      margin-right: 35px;
+      margin-top: 2px;
+    }
+
     .vs__selected-options {
       padding: 0 30px 0 15px;
     }
@@ -414,11 +419,11 @@ $multiSelectHeight: 45px;
           transform: none;
           background-color:transparent;
           background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNhNmE2YTYiIGQ9Ik0yIDJsNiA2TTggMkwyIDgiLz48L3N2Zz4=);
-          color:$color__fborder--hover;
+          color: $color__fborder--hover;
 
           span,
           svg {
-            display:none
+            display: none
           }
         }
       }
diff --git a/src/Services/Forms/Fields/Select.php b/src/Services/Forms/Fields/Select.php
index a2163b26e..e52ffcba9 100644
--- a/src/Services/Forms/Fields/Select.php
+++ b/src/Services/Forms/Fields/Select.php
@@ -6,6 +6,8 @@
 use A17\Twill\Services\Forms\Fields\Traits\HasPlaceholder;
 use A17\Twill\Services\Forms\Fields\Traits\IsTranslatable;
 use A17\Twill\Services\Forms\Fields\Traits\Unpackable;
+use A17\Twill\Services\Forms\Option;
+use A17\Twill\Services\Forms\Options;
 
 class Select extends BaseFormField
 {
@@ -15,6 +17,7 @@ class Select extends BaseFormField
     use Unpackable;
 
     protected bool $searchable = false;
+    protected bool $clearable = false;
 
     public static function make(): static
     {
@@ -33,4 +36,14 @@ public function searchable(bool $searchable = true): static
 
         return $this;
     }
+
+    /**
+     * If the field should be clearable.
+     */
+    public function clearable(bool $clearable = true): static
+    {
+        $this->clearable = $clearable;
+
+        return $this;
+    }
 }
diff --git a/src/View/Components/Fields/FieldWithOptions.php b/src/View/Components/Fields/FieldWithOptions.php
index 9ce2d3e00..cd0b525de 100644
--- a/src/View/Components/Fields/FieldWithOptions.php
+++ b/src/View/Components/Fields/FieldWithOptions.php
@@ -30,6 +30,7 @@ public function __construct(
         public bool $unpack = false,
         public int $columns = 0,
         public bool $searchable = false,
+        public bool $clearable = false,
         public ?string $placeholder = null,
         public bool $addNew = false,
         public ?string $moduleName = null,
diff --git a/src/View/Components/Fields/Select.php b/src/View/Components/Fields/Select.php
index de28ab856..3317684a6 100644
--- a/src/View/Components/Fields/Select.php
+++ b/src/View/Components/Fields/Select.php
@@ -26,6 +26,7 @@ public function __construct(
         bool $unpack = false,
         int $columns = 0,
         bool $searchable = false,
+        bool $clearable = false,
         ?string $placeholder = '',
         bool $addNew = false,
         ?string $moduleName = null,
@@ -51,6 +52,7 @@ public function __construct(
             $unpack,
             $columns,
             $searchable,
+            $clearable,
             $placeholder,
             $addNew,
             $moduleName,
diff --git a/views/partials/form/_select.blade.php b/views/partials/form/_select.blade.php
index 14e1868ed..cf6244013 100644
--- a/views/partials/form/_select.blade.php
+++ b/views/partials/form/_select.blade.php
@@ -63,6 +63,7 @@
         @if ($addNew) add-new='{{ $storeUrl }}' @elseif ($note) note='{{ $note }}' @endif
         :has-default-store="true"
         @if ($searchable) :searchable="true" @endif
+        @if ($clearable) :clearable="true" @endif
         size="large"
         in-store="inputValue"
     >