Skip to content

Commit

Permalink
Added new feaature to save/restore un-saved form fields by enabling o…
Browse files Browse the repository at this point in the history 
…ption in the main options
  • Loading branch information
@buttflattery
buttflattery committed Apr 2, 2019
1 parent ae713ce commit cd75828
Show file tree
Hide file tree
Showing 10 changed files with 460 additions and 200 deletions.
160 changes: 99 additions & 61 deletions src/FormWizard.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
use yii\helpers\Json;
use yii\web\JsExpression;
use yii\web\View;
use yii\widgets\ActiveForm;


/**
* A Yii2 plugin used for creating stepped form or form wizard using
Expand Down Expand Up @@ -73,6 +73,13 @@ class FormWizard extends Widget
*/
private $_tabularEventJs;

/**
* Used for collecting user provided callback for the event formwizard.afterRestore
*
* @var mixed
*/
private $_persistenceEvents;

//options widget

/**
Expand Down Expand Up @@ -292,7 +299,7 @@ class FormWizard extends Widget

/**
* The icon for the Restore button you want to be shown inside the button.
* Default is `<i class="formwizard-restore-ico"></i>`.
* Default is `<i class="formwizard_restore-ico"></i>`.
*
* This can be an html string '<i class="fa fa-restore"></i>'
* in case you are using FA, Material or Glyph icons, or an
Expand All @@ -307,35 +314,35 @@ class FormWizard extends Widget
*
* @var string
*/
public $classNext = 'btn btn-info';
public $classNext = 'btn btn-info ';

/**
* The class for the Previous button , default is `btn btn-info`
*
* @var string
*/
public $classPrev = 'btn btn-info';
public $classPrev = 'btn btn-info ';

/**
* The class for the Finish button, default is `btn btn-success`
*
* @var string
*/
public $classFinish = 'btn btn-success';
public $classFinish = 'btn btn-success ';

/**
* The class for the Add Row button, default is btn btn-info
*
* @var string
*/
public $classAdd = 'btn btn-info';
public $classAdd = 'btn btn-info ';

/**
* The class for the Add Row button, default is btn btn-info
*
* @var string
*/
public $classRestore = 'btn btn-success';
public $classRestore = 'btn btn-success ';

/**ICONS */

Expand Down Expand Up @@ -527,7 +534,9 @@ classRestore:'{$this->classRestore}'
$pluginOptionsJson = Json::encode($pluginOptions);

$this->registerScripts();
//add tabular events call back js
$js = $this->_tabularEventJs;
$js .= $this->_persistenceEvents;

$jsOptionsPersistence = Json::encode($this->enablePersistence);

Expand Down Expand Up @@ -658,21 +667,8 @@ public function createStep($index, $step)
//get html tabs
$htmlTabs = $this->createTabs($index, $stepDescription, $stepTitle);

//html body
$htmlBody = '';

// //add retore button
// if ($this->enablePersistence) {
// $htmlBody = Html::button(
// $this->iconRestore.'&nbsp;'.$this->labelRestore,
// [
// 'class'=>$this->classRestore.' restore'
// ]
// );
// }

//get html body
$htmlBody .= $this->createBody($index, $formInfoText, $step);
$htmlBody = $this->createBody($index, $formInfoText, $step);

//return html
return [$htmlTabs, $htmlBody];
Expand Down Expand Up @@ -727,10 +723,16 @@ public function createBody($index, $formInfoText, $step)
$this->_checkTabularConstraints($step['model']);
}

//step data
$dataStep = [
'number'=>$index,
'type'=>$stepType
];

//start step wrapper div
$html .= Html::beginTag(
'div',
['id' => 'step-' . $index]
['id' => 'step-' . $index,'data'=>['step'=>Json::encode($dataStep)]]
);

$html .= Html::tag('div', $formInfoText, ['class' => 'border-bottom border-gray pb-2']);
Expand Down Expand Up @@ -846,47 +848,18 @@ function ($element) use ($model, $isTabularStep, $modelIndex) {
$htmlFields .= $this->createCustomInput(
$model, $attributeName, $fieldConfig[$attribute]
);
//id of the input
$attributeId = Html::getInputId($model, $attributeName);

//add tabular events
$this->_addTabularEvents($fieldConfig[$attribute], $isTabularStep, $modelIndex, $attributeId, $index);

//add the restore events
$this->_addRestoreEvents($fieldConfig[$attribute], $attributeId);
} else {
//default field population
$htmlFields .= $this->createDefaultInput($model, $attributeName);
}


if ($customConfigDefinedForField) {
//get the tabular events for the field
$tabularEvents = ArrayHelper::getValue($fieldConfig[$attribute], 'tabularEvents', false);

//check if tabular step and tabularEvents provided for field
if ($isTabularStep && is_array($tabularEvents) && $modelIndex == 0) {

//id of the form
$formId = $this->formOptions['id'];

//id of the input
$attributeId = Html::getInputId($model, $attributeName);

//iterate all events attached and bind them
foreach ($tabularEvents as $eventName=>$callback) {
//get the call back
$eventCallBack = new JsExpression($callback);

if ($eventName!=='afterInsert') {
//bind the call back to the field
$this->_tabularEventJs.=<<<JS
$(document).on("formwizard.{$eventName}","#{$formId} #step-{$index} #{$attributeId}",{$eventCallBack});
JS;
} else {

$this->_tabularEventJs.=<<<JS
$(document).on("formwizard.{$eventName}","#{$formId} #step-{$index} .fields_container>div[id^='row_']",{$eventCallBack});
JS;
}

}
}
}


}

//is tabular step
Expand All @@ -903,6 +876,69 @@ function ($element) use ($model, $isTabularStep, $modelIndex) {
return $htmlFields;
}

/**
* Adds the restore events for the fields
*
* @param array $attributeConfig the configurations for the attribute
* @param string $attributeId the field attribute id
*
* @return null
*/
private function _addRestoreEvents($attributeConfig, $attributeId)
{
$persistenceEvents = ArrayHelper::getValue($attributeConfig, 'persistencEvents', []);
$formId = $this->formOptions['id'];

foreach ($persistenceEvents as $eventName=>$callback) {
$eventCallBack = new JsExpression($callback);
$this->_persistenceEvents.=<<<JS
$(document).on("formwizard.{$formId}.{$eventName}","#{$formId} #{$attributeId}",{$eventCallBack});
JS;
}
}

/**
* Adds tabular events for the attribute
*
* @param array $attributeConfig attribute configurations passed
* @param boolean $isTabularStep boolean if current step is tabular
* @param int $modelIndex the index of the current model
* @param string $attributeId the id of the current field
* @param int $index the index of the current step
*
* @return null
*/
private function _addTabularEvents($attributeConfig, $isTabularStep, $modelIndex, $attributeId, $index)
{
//get the tabular events for the field
$tabularEvents = ArrayHelper::getValue($attributeConfig, 'tabularEvents', false);

//check if tabular step and tabularEvents provided for field
if ($isTabularStep && is_array($tabularEvents) && $modelIndex == 0) {

//id of the form
$formId = $this->formOptions['id'];

//iterate all events attached and bind them
foreach ($tabularEvents as $eventName=>$callback) {
//get the call back
$eventCallBack = new JsExpression($callback);

if ($eventName!=='afterInsert') {
//bind the call back to the field
$this->_tabularEventJs.=<<<JS
$(document).on("formwizard.{$eventName}","#{$formId} #step-{$index} #{$attributeId}",{$eventCallBack});
JS;
} else {

$this->_tabularEventJs.=<<<JS
$(document).on("formwizard.{$eventName}","#{$formId} #step-{$index} .fields_container>div[id^='row_']",{$eventCallBack});
JS;
}
}
}
}

/**
* Adds closing tags for the tabular fields row and the remove icon if necessary
*
Expand Down Expand Up @@ -1031,8 +1067,10 @@ function ($item) use ($disabledFields) {
*/
public function createCustomInput($model, $attribute, $fieldConfig)
{

//options
$options = ArrayHelper::getValue($fieldConfig, 'options', []);

//is multi field name
$isMultiField = Arrayhelper::getValue($fieldConfig, 'multifield', false);

Expand Down Expand Up @@ -1078,7 +1116,7 @@ public function createCustomInput($model, $attribute, $fieldConfig)
$field= $field->widget($widget, $options)->label($label, $labelOptions);
return (!$hintText) ? $field : $field->hint($hintText);
}

//remove the type and itemList from options
unset($options['type']);
unset($options['itemsList']);
Expand Down Expand Up @@ -1108,7 +1146,7 @@ public function createCustomInput($model, $attribute, $fieldConfig)
$label = $params['label'];
$labelOptions = $params['labelOptions'];
$itemsList = $params['itemsList'];

if (is_array($itemsList)) {
return $field->radioList($itemsList, $options)
->label($label, $labelOptions);
Expand Down
2 changes: 1 addition & 1 deletion src/assets/css/ie7/ie7.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.formwizard-restore-ico {
.formwizard_restore-ico {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xea2e;');
}
.formwizard-checkmark-ico {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/css/ie7/ie7.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
el.innerHTML = '<span style="font-family: \'formwizard\'">' + entity + '</span>' + html;
}
var icons = {
'formwizard-restore-ico': '&#xea2e;',
'formwizard_restore-ico': '&#xea2e;',
'formwizard-checkmark-ico': '&#xe900;',
'formwizard-check-alt-ico': '&#xe901;',
'formwizard-x-ico': '&#xe902;',
Expand Down
Loading

0 comments on commit cd75828

Please sign in to comment.