From cc8b0f7afa7d3311ebbe22206958450c82b008d8 Mon Sep 17 00:00:00 2001
From: Attila Fulop <1162360+fulopattila122@users.noreply.github.com>
Date: Tue, 18 Jul 2023 15:14:24 +0300
Subject: [PATCH] NiceSelect2 improvements

---
 src/resources/assets/js/nice-select2.js      | 40 ++++++++++++++------
 src/resources/views/widgets/filter.blade.php |  2 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/resources/assets/js/nice-select2.js b/src/resources/assets/js/nice-select2.js
index 77698ef..f0bb629 100644
--- a/src/resources/assets/js/nice-select2.js
+++ b/src/resources/assets/js/nice-select2.js
@@ -1,5 +1,3 @@
-import "../sass/nice-select2.scss";
-
 // utility functions
 function triggerClick(el) {
   var event = document.createEvent("MouseEvents");
@@ -59,11 +57,7 @@ function data(el, key) {
 }
 
 function hasClass(el, className) {
-  if (el){
-    return el.classList.contains(className);
-  }else{
-    return false;
-  }
+  return  el ? el.classList.contains(className) : false;
 }
 
 function addClass(el, className) {
@@ -89,6 +83,8 @@ export default function NiceSelect(element, options) {
   this.placeholder      = attr(this.el, "placeholder") || this.config.placeholder || "Select an option";
   this.searchtext       = attr(this.el, "searchtext") || this.config.searchtext || "Search";
   this.selectedtext     = attr(this.el, "selectedtext") || this.config.selectedtext || "selected";
+  this.emptyItemAsPlaceholder = !!attr(this.el, "empty-as-placeholder");
+  this.autoWidth        = !!attr(this.el, "auto-width");
 
   this.dropdown         = null;
   this.multiple         = attr(this.el, "multiple");
@@ -141,7 +137,7 @@ NiceSelect.prototype.extractData = function() {
         text: item.label,
         value: 'optgroup'
       };
-    }else{
+    } else {
       let text  = item.innerText;
       if(item.dataset.display != undefined){
         text  = item.dataset.display;
@@ -161,8 +157,12 @@ NiceSelect.prototype.extractData = function() {
 	    optgroup: item.tagName == 'OPTGROUP'
     };
 
-    data.push(itemData);
-    allOptions.push({ data: itemData, attributes: attributes });
+    if (this.emptyItemAsPlaceholder && !attributes.optgroup && (item.value === null || item.value === undefined || item.value === "")) {
+      this.placeholder = itemData.text;
+    } else {
+      data.push(itemData);
+      allOptions.push({ data: itemData, attributes: attributes });
+    }
   });
 
   this.data     = data;
@@ -184,11 +184,13 @@ NiceSelect.prototype.renderDropdown = function() {
     this.multiple ? "has-multiple" : ""
   ];
 
+  let style = this.autoWidth ? 'width: auto;' : '';
+
   let searchHtml = `<div class="nice-select-search-box">`;
     searchHtml  += `<input type="text" class="nice-select-search" placeholder="${this.searchtext}..." title="search"/>`;
   searchHtml  += `</div>`;
 
-  var html = `<div class="${classes.join(" ")}" tabindex="${this.disabled ? null : 0}">`;
+  var html = `<div class="${classes.join(" ")}" tabindex="${this.disabled ? null : 0}" style="${style}">`;
       html += `<span class="${this.multiple ? "multiple-options" : "current"}"></span>`;
       html += `<div class="nice-select-dropdown">`;
         html += `${this.config.searchable ? searchHtml : ""}`;
@@ -206,7 +208,7 @@ NiceSelect.prototype.renderDropdown = function() {
 NiceSelect.prototype._renderSelectedItems = function() {
   if (this.multiple) {
     var selectedHtml = "";
-    if(this.config.showSelectedItems || this.config.showSelectedItems || window.getComputedStyle(this.dropdown).width == 'auto' || this.selectedOptions.length < 2){
+    if(this._shouldShowSelectedItems()){
       this.selectedOptions.forEach(function(item) {
         selectedHtml += `<span class="current">${item.data.text}</span>`;
       });
@@ -224,6 +226,20 @@ NiceSelect.prototype._renderSelectedItems = function() {
   }
 };
 
+NiceSelect.prototype._shouldShowSelectedItems = function() {
+  if (this.config.showSelectedItems || this.dropdown.style.width === 'auto' || this.selectedOptions.length < 2) {
+    return true;
+  }
+
+  var itemsWidth = 0;
+  this.selectedOptions.forEach(function(item) {
+    itemsWidth += 8 * item.data.text.length; // rough estimate
+  });
+
+  return parseInt(window.getComputedStyle(this.dropdown).width, 10) > itemsWidth;
+};
+
+
 NiceSelect.prototype._renderItems = function() {
   var ul = this.dropdown.querySelector("ul");
   this.options.forEach(item => {
diff --git a/src/resources/views/widgets/filter.blade.php b/src/resources/views/widgets/filter.blade.php
index 382fc1a..57c38dd 100644
--- a/src/resources/views/widgets/filter.blade.php
+++ b/src/resources/views/widgets/filter.blade.php
@@ -11,7 +11,7 @@
 
     @case('multiselect')
         <select name="{{ $id . '[]' }}" class="form-control form-control-sm" @if($searchable ?? false)searchable="true"@endif
-                multiple multiselect-select-all="true" size="1" placeholder="{{ $placeholder }}">
+                multiple size="1" placeholder="{{ $placeholder }}">
             @foreach($options as $value => $label)
                 <option value="{{ $value }}"@if(in_array($value, $criteria ?? [])) selected @endif>{{ $label }}</option>
             @endforeach