Enhancements to ExpandRow and Boolean columns fix #912 fix #991 fix #…

…1004
kartik-v · Oct 26, 2021 · ea79a3f · ea79a3f
1 parent 2f9e8e8
commit ea79a3f
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 142 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -5,8 +5,10 @@ Change Log: `yii2-grid`
 
 **Date:** _under development_
 
+- (enh #1004): Enhancements to Boolean Column and its filter styling.
 - (enh #1003): NEW: Edited Highlighted Row Functionality.
-- (enh #996, #997): Fix compatibility with old php version .
+- (enh #996, #997): Fix compatibility with old php version.
+- (bug #991, enh #912): Enhancements and fixes to ExpandRowColumn.
 
 ## Version 3.3.6
 

diff --git a/src/BooleanColumn.php b/src/BooleanColumn.php
@@ -12,7 +12,10 @@
 use Exception;
 use Yii;
 use yii\base\InvalidConfigException;
+use yii\helpers\ArrayHelper;
 use yii\helpers\Html;
+use yii\helpers\Json;
+use yii\web\JsExpression;
 
 /**
  * A BooleanColumn will convert true/false values as user friendly indicators with an automated drop down filter for the
@@ -35,6 +38,7 @@
  */
 class BooleanColumn extends DataColumn
 {
+ public $width = '110px';
  /**
  * @inheritdoc
  */
@@ -67,6 +71,11 @@ class BooleanColumn extends DataColumn
  */
  public $showNullAsFalse = false;
 
+ /**
+ * @var bool whether to use Krajee Select2 widget as the filter
+ */
+ public $useSelect2Filter = false;
+
  /**
  * @inheritdoc
  * @throws InvalidConfigException
@@ -75,7 +84,7 @@ public function init()
  {
  $this->initColumnSettings([
  'hAlign' => GridView::ALIGN_CENTER,
- 'width' => '90px'
+ 'width' => '90px',
  ]);
  if (empty($this->trueLabel)) {
  $this->trueLabel = Yii::t('kvgrid', 'Active');
@@ -91,28 +100,80 @@ public function init()
  if (empty($this->falseIcon)) {
  $this->falseIcon = $this->getIconMarkup('false');
  }
+ $this->initColumnFilter();
  parent::init();
  }
 
+ /**
+ * Initialize column filter
+ */
+ protected function initColumnFilter()
+ {
+ $placeholder = Yii::t('kvgrid', 'Select...');
+ if (empty($this->useSelect2Filter)) {
+ if ($this->grid->isBs(5)) {
+ Html::removeCssClass($this->filterInputOptions, 'form-control');
+ Html::addCssClass($this->filterInputOptions, 'form-select');
+ }
+ if (!isset($this->filterInputOptions['prompt'])) {
+ $this->filterInputOptions['prompt'] = $placeholder;
+ }
+ return;
+ }
+ $this->filterType = GridView::FILTER_SELECT2;
+ $config = Json::encode([$this->getIconLabel('false'), $this->getIconLabel('true')]);
+ $format = <<< JS
+function(status) {
+ var cfg={$config}, out = cfg[status.id];
+ return !out || !out[0] ? status.text : '<span class="kv-bool-icon">' + out[0] + '</span> ' + out[1];
+}
+JS;
+ $format = new JsExpression($format);
+ $opts = [
+ 'pluginOptions' => [
+ 'templateResult' => $format,
+ 'templateSelection' => $format,
+ 'escapeMarkup' => new JsExpression('function(m){return m}'),
+ 'allowClear' => true,
+ ],
+ 'options' => ['placeholder' => $placeholder]
+ ];
+ $this->filterWidgetOptions = array_replace_recursive($opts, $this->filterWidgetOptions);
+ }
+
+ /**
+ * Gets the icon and label
+ * @param string $type
+ * @return array
+ * @throws Exception
+ */
+ protected function getIconLabel($type = 'true') {
+ $isTrue = $type === 'true';
+ $label = $isTrue ? $this->trueLabel : $this->falseLabel;
+ $notBs3 = !$this->grid->isBs(3);
+ $icon = $notBs3 ? GridView::ICON_INACTIVE_BS4 : GridView::ICON_INACTIVE;
+ if ($isTrue) {
+ $icon = $notBs3 ? GridView::ICON_ACTIVE_BS4 : GridView::ICON_ACTIVE;
+ }
+ return [$icon, $label];
+ }
+
  /**
  * Get icon HTML markup
- * @param string $type the type of markup `true` or `false`
+ * @param  string  $type  the type of markup `true` or `false`
  * @return string
  * @throws InvalidConfigException|Exception
  */
  protected function getIconMarkup($type = 'true')
  {
- $label = $type === 'false' ? $this->falseLabel: $this->trueLabel;
+ $label = $type === 'true' ? $this->trueLabel : $this->falseLabel;
  if (!$this->grid->bootstrap) {
  return $label;
  }
- $notBs3 = !$this->grid->isBs(3);
- if ($type === 'true') {
- return ($notBs3 ? GridView::ICON_ACTIVE_BS4 : GridView::ICON_ACTIVE) . 
- Html::tag('span', $this->trueLabel, ['class' => 'kv-grid-boolean']);
- }
- return ($notBs3 ? GridView::ICON_INACTIVE_BS4 : GridView::ICON_INACTIVE) . 
- Html::tag('span', $this->falseLabel, ['class' => 'kv-grid-boolean']);
+ $cfg = $this->getIconLabel($type);
+
+ return Html::tag('span', $cfg[0], ['class' => 'skip-export']).
+ Html::tag('span', $cfg[1], ['class' => 'kv-grid-boolean']);
  }
 
  /**
@@ -124,6 +185,8 @@ public function getDataCellValue($model, $key, $index)
  if ($value !== null) {
  return $value ? $this->trueIcon : $this->falseIcon;
  }
+
  return $this->showNullAsFalse ? $this->falseIcon : $value;
  }
 }
+?>
diff --git a/src/ExpandRowColumn.php b/src/ExpandRowColumn.php
@@ -220,12 +220,12 @@ class ExpandRowColumn extends DataColumn
  /**
  * Parses data for Closure and returns accordingly
  *
- * @param string|Closure $data the data to parse.
- * @param Model $model the data model.
- * @param string|object $key the key associated with the data model.
- * @param integer $index the zero-based index of the data model among the models array returned by
+ * @param  string|Closure  $data  the data to parse.
+ * @param  Model  $model  the data model.
+ * @param  string|object  $key  the key associated with the data model.
+ * @param  integer  $index  the zero-based index of the data model among the models array returned by
  * [[GridView::dataProvider]].
- * @param ExpandRowColumn $column the column object instance.
+ * @param  ExpandRowColumn  $column  the column object instance.
  *
  * @return mixed
  */
@@ -234,6 +234,7 @@ protected static function parseData($data, $model, $key, $index, $column)
  if ($data instanceof Closure) {
  $data = call_user_func($data, $model, $key, $index, $column);
  }
+
  return $data;
  }
 
@@ -303,12 +304,11 @@ public function init()
  'collapseAll' => false,
  'expandAll' => false,
  'extraData' => $this->extraData,
- 'msgDetailLoading' => $this->msgDetailLoading
+ 'msgDetailLoading' => $this->msgDetailLoading,
  ]
  );
- $this->_hashVar = 'kvExpandRow_' . hash('crc32', $clientOptions);
- $this->_colId = $this->grid->options['id'] . '_' . $this->columnKey;
- Html::addCssClass($this->contentOptions, $this->_colId);
+ $this->_hashVar = 'kvExpandRow_'.hash('crc32', $clientOptions);
+ $this->_colId = $this->grid->options['id'].'_'.$this->columnKey;
  Html::addCssClass($this->headerOptions, $this->_colId);
  $view->registerJs("var {$this->_hashVar} = {$clientOptions};\n", View::POS_HEAD);
  $view->registerJs("kvExpandRow({$this->_hashVar}, '{$this->_colId}');");
@@ -341,14 +341,16 @@ public function getDataCellValue($model, $key, $index)
  $detailOptions['data-key'] = GridView::parseKey($key);
  Html::addCssClass($detailOptions, ['kv-expanded-row', $this->_colId]);
  $content = Html::tag('div', $detail, $detailOptions);
- return <<< HTML
+ $out = <<< HTML
  <div class="kv-expand-row {$disabled}">
- <div class="kv-expand-icon kv-state-{$type}{$disabled}">{$icon}</div>
+ <div class="kv-expand-icon kv-state-init-{$type}{$disabled}">{$icon}</div>
  <div class="kv-expand-detail skip-export" style="display:none;">
  {$content}
  </div>
  </div>
 HTML;
+ return $out;
+ //die('<pre>' . Html::encode($out, false) . '</pre>');
  }
 
  /**
@@ -357,23 +359,24 @@ public function getDataCellValue($model, $key, $index)
  public function renderDataCell($model, $key, $index)
  {
  $options = $this->fetchContentOptions($model, $key, $index);
- $css = 'kv-expand-icon-cell';
+ $css = ['kv-expand-icon-cell', $this->_colId];
  $options['title'] = $this->expandTitle;
  if ($this->value === GridView::ROW_EXPANDED) {
  $options['title'] = $this->collapseTitle;
  }
  if (static::parseData($this->disabled, $model, $key, $index, $this)) {
- $css .= ' kv-state-disabled';
+ $css[] = 'kv-state-disabled';
  }
  Html::addCssClass($options, $css);
  $this->initPjax("kvExpandRow({$this->_hashVar}, '{$this->_colId}');");
+
  return Html::tag('td', $this->renderDataCellContent($model, $key, $index), $options);
  }
 
  /**
  * Get icon indicator
  *
- * @param string $type one of `expand` or `collapse`
+ * @param  string  $type  one of `expand` or `collapse`
  *
  * @return string the icon indicator markup
  * @throws InvalidConfigException|Exception
@@ -392,14 +395,15 @@ protected function getIcon($type)
  if ($type === 'collapse') {
  return $bs ? ($notBs3 ? GridView::ICON_COLLAPSE_BS4 : GridView::ICON_COLLAPSE) : '-';
  }
+
  return null;
  }
 
  /**
  * Sets property for the object instance if not set
  *
- * @param string $prop the property name
- * @param string $val the property value
+ * @param  string  $prop  the property name
+ * @param  string  $val  the property value
  */
  protected function setProp($prop, $val)
  {
@@ -422,6 +426,7 @@ protected function renderHeaderCellContent()
  $icon = $this->collapseIcon;
  $css = 'kv-expand-header-icon kv-state-collapsed';
  }
+
  return "<div class='{$css}'>{$icon}</div>";
  }
 }
diff --git a/src/GridView.php b/src/GridView.php
@@ -125,12 +125,12 @@ class GridView extends YiiGridView implements BootstrapInterface
  /**
  * @var string the Bootstrap 3.x **active** icon markup for [[BooleanColumn]]
  */
- const ICON_ACTIVE = '<span class="glyphicon glyphicon-ok text-success"></span>';
+ const ICON_ACTIVE = '<span class="glyphicon glyphicon-ok-sign text-success" style="font-weight:bold"></span>';
 
  /**
  * @var string the **inactive** icon markup for [[BooleanColumn]]
  */
- const ICON_INACTIVE = '<span class="glyphicon glyphicon-remove text-danger"></span>';
+ const ICON_INACTIVE = '<span class="glyphicon glyphicon-remove-sign text-danger" style="font-weight:bold"></span>';
 
  /**
  * @var string the Bootstrap 3.x **expanded** icon markup for [[ExpandRowColumn]]
@@ -145,12 +145,12 @@ class GridView extends YiiGridView implements BootstrapInterface
  /**
  * @var string the Bootstrap 4.x / 5.x **active** icon markup for [[BooleanColumn]]
  */
- const ICON_ACTIVE_BS4 = '<span class="fas fa-check text-success"></span>';
+ const ICON_ACTIVE_BS4 = '<span class="fas fa-check-circle text-success"></span>';
 
  /**
  * @var string the Bootstrap 4.x / 5.x **inactive** icon markup for [[BooleanColumn]]
  */
- const ICON_INACTIVE_BS4 = '<span class="fas fa-times text-danger"></span>';
+ const ICON_INACTIVE_BS4 = '<span class="fas fa-times-circle text-danger"></span>';
 
  /**
  * @var string the Bootstrap 4.x / 5.x **expanded** icon markup for [[ExpandRowColumn]]
@@ -1221,6 +1221,7 @@ protected function initEditedRow()
  unset($queryParams[$cfg['rowIdGetParam']], $queryParams[$cfg['gridIdGetParam']]);
  $session->set($filter, Json::encode($queryParams));
  }
+
  return ['row' => $row, 'grid' => $grid, 'css' => $cfg['highlightClass']];
  }
 

diff --git a/src/assets/css/kv-grid.css b/src/assets/css/kv-grid.css
@@ -423,4 +423,11 @@ td.kv-group-odd {
  .hide-resize .rc-handle-container {
  overflow: hidden;
  }
+}
+
+/**
+ * Boolean column Select2 filter
+ */
+.select2-results__option--highlighted .kv-bool-icon > * {
+ color: inherit !important;
 }