Form Improvements

demos/database.php

@@ -79,7 +79,7 @@ public function init()
         $this->addFields(['start_date', 'finish_date'], ['type'=>'date']);
         $this->addField('finish_time', ['type'=>'time']);
 
-        $this->addFields(['created', 'updated'], ['type'=>'datetime']);
+        $this->addFields(['created', 'updated'], ['type'=>'datetime', 'ui'=>['form'=>['FormField/Line', 'disabled'=>true]]]);
     }
 }
 

demos/form3.php

@@ -31,8 +31,11 @@
 $form->onSubmit(function ($form) {
     $errors = [];
     foreach ($form->model->dirty as $field => $value) {
+        if ($form->model->getElement($field)->never_persist) {
+            continue;
+        }
         $errors[] = $form->error($field, 'Value was changed, '.json_encode($value).' to '.json_encode($form->model[$field]));
     }
 
-    return $errors ?: $form->success('No changed fields');
+    return $errors ?: 'No fields were changed';
 });

demos/grid.php

@@ -11,6 +11,9 @@
 $g->menu->addItem(['Re-Import', 'icon'=>'power'], new \atk4\ui\jsReload($g));
 $g->menu->addItem(['Delete All', 'icon'=>'trash', 'red active']);
 
+$g->addColumn(['Template', 'hello<b>world</b>']);
+$g->addFormatter('name', ['Link', 'page2']);
+
 $g->addAction('Say HI', function ($j, $id) use ($g) {
     return 'Loaded "'.$g->model->load($id)['name'].'" from ID='.$id;
 });

src/Form.php

@@ -336,6 +336,16 @@ public function _fieldFactory(\atk4\data\Field $f)
             return new FormField\Dropdown($arg);
         }
 
+        // Field values can be picked from the model.
+        if (isset($f->reference)) {
+            //$arg['values'] = $f->ref();
+
+            $dd = new FormField\Dropdown($arg);
+            $dd->setModel($f->reference->refModel());
+
+            return $dd;
+        }
+
         switch ($f->type) {
         case 'boolean':
             return new FormField\Checkbox($arg);
@@ -346,6 +356,25 @@ public function _fieldFactory(\atk4\data\Field $f)
         case 'password':
             return new FormField\Password($arg);
 
+        case 'datetime':
+            $arg['options']['ampm'] = false;
+
+            return new FormField\Calendar($arg);
+
+        case 'date':
+            $arg['type'] = 'date';
+
+            return new FormField\Calendar($arg);
+
+        case 'time':
+            $arg['type'] = 'time';
+            $arg['options']['ampm'] = false;
+
+            return new FormField\Calendar($arg);
+
+        case 'money':
+            return new FormField\Money($arg);
+
         case null:
             return new FormField\Line($arg);
 

src/FormField/Calendar.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace atk4\ui\FormField;
+
+use atk4\ui\Form;
+
+/**
+ * Input element for a form field.
+ */
+class Calendar extends Input
+{
+    /**
+     * Set this to 'date', 'time', 'month' or 'year'. Leaving this blank
+     * will show both date and time.
+     */
+    public $type = null;
+
+    /**
+     * Any other options you'd like to pass to calendar  JS.
+     */
+    public $options = [];
+
+    public function renderView()
+    {
+        if (!$this->icon) {
+            switch ($this->type) {
+            //case 'date': $this->icon = '
+            }
+        }
+
+        if ($this->type) {
+            $this->options['type'] = $this->type;
+        }
+
+        $this->js(true)->calendar($this->options);
+
+        parent::renderView();
+    }
+}

src/FormField/Dropdown.php

@@ -13,6 +13,8 @@ class Dropdown extends Input
 
     public $values = [];
 
+    public $empty = '...';
+
     public function init()
     {
         parent::init();
@@ -27,14 +29,31 @@ public function getInput()
         $value = isset($this->field) ? $this->app->ui_persistence->typecastSaveField($this->field, $this->field->get()) : $this->content ?: '';
 
         $options = [];
-        foreach ($this->values as $key=>$val) {
-            $item = ['option', 'value'=>(string) $key, $val];
-            if ($value == $val) {
-                $item['selected'] = true;
-            }
+        if ($this->empty) {
+            $item = ['option', 'value'=>'', $this->empty];
             $options[] = $item;
         }
 
+        if (isset($this->model)) {
+            foreach ($this->model as $key=>$row) {
+                $title = $row[$row->title_field];
+
+                $item = ['option', 'value'=>(string) $key, $title];
+                if ($value == $key) {
+                    $item['selected'] = true;
+                }
+                $options[] = $item;
+            }
+        } else {
+            foreach ($this->values as $key=>$val) {
+                $item = ['option', 'value'=>(string) $key, $val];
+                if ($value == $key) {
+                    $item['selected'] = true;
+                }
+                $options[] = $item;
+            }
+        }
+
         return $this->app->getTag('select', [
             'name'       => $this->short_name,
             'type'       => $this->inputType,

src/FormField/Input.php

@@ -51,6 +51,14 @@ public function jsInput($when = null, $action = null)
         return $this->js($when, $action, '#'.$this->id.'_input');
     }
 
+    /**
+     * Returns presentable value to be inserted into input tag.
+     */
+    public function getValue()
+    {
+        return isset($this->field) ? $this->app->ui_persistence->typecastSaveField($this->field, $this->field->get()) : $this->content ?: '';
+    }
+
     /**
      * returns <input .../> tag.
      */
@@ -61,7 +69,7 @@ public function getInput()
             'type'       => $this->inputType,
             'placeholder'=> $this->placeholder,
             'id'         => $this->id.'_input',
-            'value'      => isset($this->field) ? $this->app->ui_persistence->typecastSaveField($this->field, $this->field->get()) : $this->content ?: '',
+            'value'      => $this->getValue(),
         ]);
         //return '<input name="'.$this->short_name.'" type="'.$this->inputType.'" placeholder="'.$this->placeholder.'" id="'.$this->id.'_input"/>';
     }

src/FormField/Money.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace atk4\ui\FormField;
+
+use atk4\ui\Form;
+
+/**
+ * Input element for a form field.
+ */
+class Money extends Input
+{
+    public function getValue()
+    {
+        $v = $this->field ? $this->field->get() : ($this->content ?: null);
+
+        if (is_null($v)) {
+            return;
+        }
+
+        return number_format($v, 2);
+    }
+
+    public function renderView()
+    {
+        if ($this->label === null) {
+            $this->label = $this->app->ui_persistence->currency;
+        }
+
+        parent::renderView();
+    }
+}

src/Persistence/UI.php

@@ -17,11 +17,12 @@
  */
 class UI extends \atk4\data\Persistence
 {
-    public $date_format = 'd/m/Y';
+    public $date_format = 'M d, Y';
 
-    public $time_format = 'h:i:s';
+    public $time_format = 'H:i';
 
-    public $datetime_format = 'D, d M Y H:i:s O';
+    public $datetime_format = 'M d, Y H:i:s';
+        // 'D, d M Y H:i:s O';
 
     public $currency = '€';
 

src/TableColumn/Template.php

@@ -21,11 +21,18 @@ class Template extends Generic
      */
     public function __construct($template)
     {
-        $this->template = $template;
+        $this->template = is_object($template) ? $template : new \atk4\ui\Template($template);
     }
 
     public function getDataCellHTML(\atk4\data\Field $f = null)
     {
-        return $this->getTag('body', $this->template);
+        return $this->getTag('body', '{$c_'.$this->short_name.'}');
+    }
+
+    public function getHtmlTags($row, $field)
+    {
+        $this->table->add($this->template);
+
+        return ['c_'.$this->short_name => $this->template->set($row)->render()];
     }
 }

template/semantic-ui/html.html

@@ -3,10 +3,12 @@
   <head>
     <title>{title}Agile UI - Untitled Project{/}</title>{$meta}
     <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/0.0.8/dist/calendar.css">
+    <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/0.0.8/dist/calendar.min.js"></script>
     <script>
       $.fn.api.settings.successTest = function(response) {
         if(response && response.eval) {

template/semantic-ui/html.pug

@@ -4,10 +4,14 @@ html(lang="{lang}en{/}")
     title {title}Agile UI - Untitled Project{/}
     | {$meta}
     meta(charset='utf-8')
-    link(rel='stylesheet', type='text/css', href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css')
     script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js')
     script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js')
+
+    link(rel='stylesheet', type='text/css', href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css')
     script(src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js')
+
+    link(rel='stylesheet', type='text/css', href='https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/0.0.8/dist/calendar.css')
+    script(src='https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/0.0.8/dist/calendar.min.js')
     script.
         $.fn.api.settings.successTest = function(response) {
           if(response && response.eval) {