Form::keyValue

resources/views/form/keyvalue.blade.php

@@ -0,0 +1,98 @@
+<div class="{{$viewClass['form-group']}}">
+
+    <label class="{{$viewClass['label']}} control-label">{{$label}}</label>
+
+    <div class="{{$viewClass['field']}}">
+        <table class="table table-hover">
+            <thead>
+            <tr>
+                <th>{{ __('Key') }}</th>
+                <th>{{ __('Value') }}</th>
+                <th style="width: 75px;"></th>
+            </tr>
+            </thead>
+            <tbody class="kv-{{$column}}-table">
+
+            @foreach(old("{$column}.keys", ($value ?: [])) as $k => $v)
+
+                @php($keysErrorKey = "{$column}.keys.{$loop->index}")
+                @php($valsErrorKey = "{$column}.values.{$loop->index}")
+
+                <tr>
+                    <td>
+                        <div class="form-group {{ $errors->has($keysErrorKey) ? 'has-error' : '' }}">
+                            <div class="col-sm-12">
+                                <input name="{{ $column }}[keys][]" value="{{ old("{$column}.keys.{$k}", $k) }}" class="form-control" required/>
+
+                                @if($errors->has($keysErrorKey))
+                                    @foreach($errors->get($keysErrorKey) as $message)
+                                        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                                    @endforeach
+                                @endif
+                            </div>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="form-group {{ $errors->has($valsErrorKey) ? 'has-error' : '' }}">
+                            <div class="col-sm-12">
+                                <input name="{{ $column }}[values][]" value="{{ old("{$column}.values.{$k}", $v) }}" class="form-control" />
+                                @if($errors->has($valsErrorKey))
+                                    @foreach($errors->get($valsErrorKey) as $message)
+                                        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$message}}</label><br/>
+                                    @endforeach
+                                @endif
+                            </div>
+                        </div>
+                    </td>
+
+                    <td class="form-group">
+                        <div>
+                            <div class="{{$column}}-remove btn btn-warning btn-sm pull-right">
+                                <i class="fa fa-trash">&nbsp;</i>{{ __('admin.remove') }}
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            @endforeach
+            </tbody>
+            <tfoot>
+            <tr>
+                <td></td>
+                <td></td>
+                <td>
+                    <div class="{{ $column }}-add btn btn-success btn-sm pull-right">
+                        <i class="fa fa-save"></i>&nbsp;{{ __('admin.new') }}
+                    </div>
+                </td>
+            </tr>
+            </tfoot>
+        </table>
+    </div>
+</div>
+
+<template class="{{$column}}-tpl">
+    <tr>
+        <td>
+            <div class="form-group  ">
+                <div class="col-sm-12">
+                    <input name="{{ $column }}[keys][]" class="form-control" required/>
+                </div>
+            </div>
+        </td>
+        <td>
+            <div class="form-group  ">
+                <div class="col-sm-12">
+                    <input name="{{ $column }}[values][]" class="form-control" />
+                </div>
+            </div>
+        </td>
+
+        <td class="form-group">
+            <div>
+                <div class="{{$column}}-remove btn btn-warning btn-sm pull-right">
+                    <i class="fa fa-trash">&nbsp;</i>{{ __('admin.remove') }}
+                </div>
+            </div>
+        </td>
+    </tr>
+</template>

src/Form.php

@@ -75,6 +75,7 @@ use Dcat\Admin\Form\Concerns;
  * @method Field\Table          table($column, $callback)
  * @method Field\ListField      list($column, $label = '')
  * @method Field\Timezone       timezone($column, $label = '')
+ * @method Field\KeyValue       keyValue($column, $label = '')
  *
  * @method Field\BootstrapFile          bootstrapFile($column, $label = '')
  * @method Field\BootstrapImage         bootstrapImage($column, $label = '')
@@ -146,6 +147,7 @@ class Form implements Renderable
         'table'          => Field\Table::class,
         'list'           => Field\ListField::class,
         'timezone'       => Field\Timezone::class,
+        'keyValue'       => Field\KeyValue::class,
 
         'bootstrapFile'          => Field\BootstrapFile::class,
         'bootstrapImage'         => Field\BootstrapImage::class,

src/Form/Field/KeyValue.php

@@ -0,0 +1,90 @@
+<?php
+
+namespace Dcat\Admin\Form\Field;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Form\Field;
+use Illuminate\Support\Arr;
+
+class KeyValue extends Field
+{
+    /**
+     * @var array
+     */
+    protected $value = ['' => ''];
+
+    /**
+     * Fill data to the field.
+     *
+     * @param array $data
+     *
+     * @return mixed
+     */
+    public function formatAttributeFromQuery($data)
+    {
+        $this->data = $data;
+
+        return Arr::get($data, $this->column, $this->value);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getValidator(array $input)
+    {
+        if ($this->validator) {
+            return $this->validator->call($this, $input);
+        }
+
+        if (!is_string($this->column)) {
+            return false;
+        }
+
+        $rules = $attributes = [];
+
+        if (!$fieldRules = $this->getRules()) {
+            return false;
+        }
+
+        if (!Arr::has($input, $this->column)) {
+            return false;
+        }
+
+        $rules["{$this->column}.keys.*"] = 'distinct';
+        $rules["{$this->column}.values.*"] = $fieldRules;
+        $attributes["{$this->column}.keys.*"] = __('Key');
+        $attributes["{$this->column}.values.*"] = __('Value');
+
+        return validator($input, $rules, $this->getValidationMessages(), $attributes);
+    }
+
+    protected function setupScript()
+    {
+        $this->script = <<<JS
+
+$('.{$this->column}-add').on('click', function () {
+    var tpl = $('template.{$this->column}-tpl').html();
+    $('tbody.kv-{$this->column}-table').append(tpl);
+});
+
+$('tbody').on('click', '.{$this->column}-remove', function () {
+    $(this).closest('tr').remove();
+});
+
+JS;
+    }
+
+    public function prepare($value)
+    {
+        return array_combine($value['keys'], $value['values']);
+    }
+
+    public function render()
+    {
+        $this->setupScript();
+
+        Admin::style('td .form-group {margin-bottom: 0 !important;}');
+
+        return parent::render();
+    }
+}

src/Form/Field/ListField.php

@@ -75,26 +75,34 @@ class ListField extends Field
         if ($this->validator) {
             return $this->validator->call($this, $input);
         }
+
         if (!is_string($this->column)) {
             return false;
         }
+
         $rules = $attributes = [];
         if (!$fieldRules = $this->getRules()) {
             return false;
         }
+
         if (!Arr::has($input, $this->column)) {
             return false;
         }
+
         $rules["{$this->column}.values.*"] = $fieldRules;
         $attributes["{$this->column}.values.*"] = __('Value');
         $rules["{$this->column}.values"][] = 'array';
+
         if (!is_null($this->max)) {
             $rules["{$this->column}.values"][] = "max:$this->max";
         }
+
         if (!is_null($this->min)) {
             $rules["{$this->column}.values"][] = "min:$this->min";
         }
+
         $attributes["{$this->column}.values"] = $this->label;
+
         return validator($input, $rules, $this->getValidationMessages(), $attributes);
     }
 
@@ -103,7 +111,7 @@ class ListField extends Field
      */
     protected function setupScript()
     {
-        $this->script = <<<SCRIPT
+        $this->script = <<<JS
 $('.{$this->column}-add').on('click', function () {
     var tpl = $('template.{$this->column}-tpl').html();
     $('tbody.list-{$this->column}-table').append(tpl);
@@ -111,7 +119,7 @@ $('.{$this->column}-add').on('click', function () {
 $('tbody').on('click', '.{$this->column}-remove', function () {
     $(this).closest('tr').remove();
 });
-SCRIPT;
+JS;
     }
 
     /**
@@ -128,7 +136,9 @@ SCRIPT;
     public function render()
     {
         $this->setupScript();
+
         Admin::style('td .form-group {margin-bottom: 0 !important;}');
+
         return parent::render();
     }
 }

src/Widgets/Form.php

@@ -60,6 +60,7 @@ use Illuminate\Support\Str;
  * @method Field\Table          table($column, $callback)
  * @method Field\ListField      list($column, $label = '')
  * @method Field\Timezone       timezone($column, $label = '')
+ * @method Field\KeyValue       keyValue($column, $label = '')
  *
  * @method Field\BootstrapFile          bootstrapFile($column, $label = '')
  * @method Field\BootstrapImage         bootstrapImage($column, $label = '')