Merge branch 'sankam-nikolya-master'

CHANGELOG.md

@@ -1,6 +1,12 @@
 Yii2 multiple input change log
 ==============================
 
+2.6.0
+=====
+
+- PR#132: Implemented `Sortting` (sankam-nikolya)
+- PR#132: fixed if attribute is set and hasProperty return false (sankam-nikolya)
+
 2.5.0
 =====
 

README.md

@@ -8,7 +8,7 @@ Yii2 widget for handle multiple inputs for an attribute of model and tabular inp
 [![License](https://poser.pugx.org/unclead/yii2-multiple-input/license)](https://packagist.org/packages/unclead/yii2-multiple-input)
 
 ##Latest release
-The latest stable version of the extension is v2.5.0 Follow the [instruction](./UPGRADE.md) for upgrading from previous versions
+The latest stable version of the extension is v2.6.0 Follow the [instruction](./UPGRADE.md) for upgrading from previous versions
 
 ##Installation
 The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

composer.json

@@ -9,7 +9,7 @@
         "yii2 tabular input"
     ],
     "type": "yii2-extension",
-    "version": "2.5.0",
+    "version": "2.6.0",
     "license": "BSD-3-Clause",
     "support": {
         "issues": "https://github.com/unclead/yii2-multiple-input/issues?state=open",

docs/usage.md

@@ -24,7 +24,8 @@ use unclead\multipleinput\MultipleInput;
         'allowEmptyList'    => false,
         'enableGuessTitle'  => true,
         'min'               => 2, // should be at least 2 rows
-        'addButtonPosition' => MultipleInput::POS_HEADER // show add button in the header
+        'addButtonPosition' => MultipleInput::POS_HEADER, // show add button in the header
+        'sortable'          => true, // optional. user can change order of rows
     ])
     ->label(false);
 ?>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.multipleInput",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "jQuery multipleInput",
   "scripts": {
 	  "build": "npm install && (gulp || node node_modules/gulp/bin/gulp.js)"

src/MultipleInput.php

@@ -123,6 +123,12 @@ class MultipleInput extends InputWidget
      */
     public $form;
 
+    /**
+     * @var bool allow sorting.
+     * @internal this property is used when need to allow sorting rows.
+     */
+    public $sortable = false;
+
     /**
      * Initialization.
      *
@@ -155,7 +161,7 @@ protected function initData()
         }
 
         if ($this->model instanceof Model) {
-            $data = $this->model->hasProperty($this->attribute)
+            $data = ($this->model->hasProperty($this->attribute) || isset($this->model->{$this->attribute}))
                 ? ArrayHelper::getValue($this->model, $this->attribute, [])
                 : [];
 
@@ -207,6 +213,18 @@ public function run()
      */
     private function createRenderer()
     {
+        if($this->sortable) {
+            $drag = [
+                'name'  => 'drag',
+                'type'  => MultipleInputColumn::TYPE_DRAGCOLUMN,
+                'headerOptions' => [
+                    'style' => 'width: 20px;',
+                ]
+            ];
+
+            array_unshift($this->columns, $drag);
+        }
+
         $config = [
             'id'                => $this->getId(),
             'columns'           => $this->columns,
@@ -219,7 +237,8 @@ private function createRenderer()
             'addButtonPosition' => $this->addButtonPosition,
             'rowOptions'        => $this->rowOptions,
             'context'           => $this,
-            'form'              => $this->form
+            'form'              => $this->form,
+            'sortable'          => $this->sortable
         ];
 
         if ($this->removeButtonOptions !== null) {

src/TabularInput.php

@@ -109,6 +109,12 @@ class TabularInput extends Widget
      */
     public $form;
 
+    /**
+     * @var bool allow sorting.
+     * @internal this property is used when need to allow sorting rows.
+     */
+    public $sortable = false;
+
     /**
      * Initialization.
      *
@@ -158,7 +164,8 @@ private function createRenderer()
             'rowOptions'        => $this->rowOptions,
             'addButtonPosition' => $this->addButtonPosition,
             'context'           => $this,
-            'form'              => $this->form
+            'form'              => $this->form,
+            'sortable'          => $this->sortable
         ];
 
         if ($this->removeButtonOptions !== null) {

src/assets/MultipleInputAsset.php

@@ -17,7 +17,7 @@
 class MultipleInputAsset extends AssetBundle
 {
     public $css = [
-        'css/multiple-input.css'
+        YII_DEBUG ? 'css/multiple-input.css' : 'css/multiple-input.min.css'
     ];
 
     public $js = [];

src/assets/MultipleInputSortableAsset.php

@@ -0,0 +1,33 @@
+<?php
+
+/**
+ * @link https://github.com/unclead/yii2-multiple-input
+ * @copyright Copyright (c) 2014 unclead
+ * @license https://github.com/unclead/yii2-multiple-input/blob/master/LICENSE.md
+ */
+
+namespace unclead\multipleinput\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * Class MultipleInputAsset
+ * @package unclead\multipleinput\assets
+ */
+class MultipleInputSortableAsset extends AssetBundle
+{
+    public $sourcePath = __DIR__ . '/src/';
+
+    public $css = [
+            YII_DEBUG ? 'css/sorting.css' : 'css/sorting.min.css'
+        ];
+
+    public $js = [
+            YII_DEBUG ? 'js/jquery-sortable.js' : 'js/jquery-sortable.min.js'
+        ];
+
+    public $depends = [
+        'unclead\multipleinput\assets\MultipleInputAsset',
+    ];
+
+} 

src/assets/src/css/sorting.css

@@ -0,0 +1,42 @@
+.drag-handle,
+.dragging,
+.dragging * {
+    cursor: move !important;
+}
+
+.dragged {
+    position: absolute;
+    top: 0;
+    opacity: .5;
+    z-index: 2000;
+}
+
+.drag-handle {
+    opacity: .5;
+    padding: 7.5px;
+}
+
+.drag-handle:hover {
+    opacity: 1;
+}
+
+tr.placeholder {
+    display: block;
+    background: red;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+tr.placeholder:before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-left-color: red;
+    margin-top: -5px;
+    left: -5px;
+    border-right: none;
+}