Finally implementing Grid

demos/grid.php

@@ -0,0 +1,20 @@
+<?php
+
+require 'init.php';
+require 'database.php';
+
+$m = $layout->add(['Grid']);
+$m->setModel(new Country($db));
+$m->addQuickSearch();
+
+$m->menu->addItem(['Add Country', 'icon'=>'add square'], new \atk4\ui\jsExpression('alert(123)'));
+$m->menu->addItem(['Re-Import', 'icon'=>'power']);
+$m->menu->addItem(['Delete All', 'icon'=>'trash', 'red active']);
+
+$m->addAction('Say HI', new \atk4\ui\jsExpression('alert("hi")'));
+$m->addAction(['icon'=>'pencil'], new \atk4\ui\jsExpression('alert($(this).closest("tr").data("id"))'));
+
+$sel = $m->addSelection();
+$m->menu->addItem('show selection')->on('click', new \atk4\ui\jsExpression(
+    'alert("Selected: "+[].join(", "))', [$sel->jsChecked()]
+));

demos/init.php

@@ -22,7 +22,7 @@
     $form = $layout->leftMenu->addGroup(['Grid and Table', 'icon'=>'table']);
     $form->addItem('Data table with formatted columns', ['table']);
     $form->addItem('Table interractions', ['multitable']);
-    $form->addItem('Grid - Table+Bar+Search+Paginator', ['table']);
+    $form->addItem('Grid - Table+Bar+Search+Paginator', ['grid']);
     $form->addItem('Interactivity - Modals and Expanders', ['expander']);
 
     $basic = $layout->leftMenu->addGroup(['Basics', 'icon'=>'cubes']);

docs/misc.rst

@@ -103,6 +103,8 @@ with the button, it will add 'labeled' class.
 Label
 =====
 
+.. php:class:: Icon
+
 Implementing http://semantic-ui.com/elements/label.html for Agile UI, Label is a very basic view,
 that can be used on it's own or as part of another UI view (such as menu item).
 
@@ -128,11 +130,11 @@ Label has the following propetries:
 All the above can be string, array (passed to Icon, Image or View class) or an object.
 
 
-.. php:class:: HelloWorld
-
 HelloWorld
 ==========
 
+.. php:class:: HelloWorld
+
 A very basic class that says hello world. This is a manefistation of our component concept. If using
 other PHP frameworks may require you to create multiple files and spend considerable time creating even
 a "Hello, World!" app, then we do it in a single line::

src/App.php

@@ -303,14 +303,37 @@ public function getTag($tag = null, $attr = null, $value = null)
         if ($tag === null) {
             $tag = 'div';
         } elseif (is_array($tag)) {
-            $value = $attr;
-            $attr = $tag;
+            $tmp = $tag;
+
             $tag = 'div';
+            $value = '';
+
+            if (isset($tmp[0])) {
+                $tag = $tmp[0];
+                unset($tmp[0]);
+            }
+
+            if (isset($tmp[1])) {
+                $value = $tmp[1];
+                unset($tmp[1]);
+            }
+
+            $attr = $tmp;
+        }
+        if ($tag[0] === '<') {
+            return $tag;
         }
         if (is_string($attr)) {
             $value = $attr;
             $attr = null;
         }
+
+        if (is_string($value)) {
+            $value = $this->encodeHTML($value);
+        } elseif (is_array($value)) {
+            $value = $this->getTag($value);
+        }
+
         if (!$attr) {
             return "<$tag>".($value ? ($value)."</$tag>" : '');
         }

src/Button.php

@@ -70,24 +70,4 @@ public function renderView()
 
         parent::renderView();
     }
-
-    /**
-     * Makes button into a "<a>" element with a link.
-     *
-     * @param string $url
-     *
-     * @return $this
-     */
-    public function link($url)
-    {
-        $this->element = 'a';
-        if (is_string($url)) {
-            $this->setAttr('href', $url);
-
-            return $this;
-        }
-        $this->setAttr('href', $this->app->url($url));
-
-        return $this;
-    }
 }

src/Grid.php

@@ -0,0 +1,82 @@
+<?php
+
+// vim:ts=4:sw=4:et:fdm=marker:fdl=0
+
+namespace atk4\ui;
+
+/**
+ * Implements a more sophisticated and interractive Data-Table component.
+ */
+class Grid extends View
+{
+    public $menu = null;
+
+    public $quickSearch = null;
+
+    public $table = null;
+
+    public $buttons = null;
+
+    public $actions = null;
+
+    public $defaultTemplate = 'grid.html';
+
+    public $ipp = 20;
+
+    public $paginator = null;
+
+    public $selection = null;
+
+    public function init()
+    {
+        parent::init();
+
+        if (!$this->menu) {
+            $this->menu = $this->add(['Menu', 'activate_on_click'=>false], 'Menu');
+        }
+
+        if (!$this->table) {
+            $this->table = $this->add(['Table', 'very compact'], 'Table');
+        }
+    }
+
+    public function addButton($text)
+    {
+        return $this->menu->addItem()->add(new Button($text));
+    }
+
+    public function addQuickSearch($fields = [])
+    {
+        if (!$fields) {
+            $fields = [$this->model->title_field];
+        }
+
+        $x = $this->menu->addMenuRight();
+        $this->quickSearch = $x->addItem()->setElement('div')->add(new \atk4\ui\FormField\Input(['placeholder'=>'Search', 'icon'=>'search']))->addClass('transparent');
+    }
+
+    public function addAction($label, $action)
+    {
+        if (!$this->actions) {
+            $this->actions = $this->table->addColumn('TableColumn/Actions');
+        }
+
+        $this->actions->addAction($label, $action);
+    }
+
+    public function setModel(\atk4\data\Model $model, $columns = null)
+    {
+        return $this->model = $this->table->setModel($model, $columns)->setLimit($this->ipp);
+    }
+
+    public function addSelection()
+    {
+        $this->selection = $this->table->addColumn('TableColumn/Checkbox');
+
+        // Move element to the beginning
+        $k = array_search($this->selection, $this->table->columns);
+        $this->table->columns = [$k => $this->table->columns[$k]] + $this->table->columns;
+
+        return $this->selection;
+    }
+}

src/Menu.php

@@ -17,11 +17,16 @@ class Menu extends View
 
     public function addItem($name = null, $action = null)
     {
-        $item = $this->add(new Item(['element'=>'a']));
-        if (!is_null($name)) {
-            $item->set($name);
+        if (is_object($name)) {
+            $item = $name;
+        } elseif ($name) {
+            $item = new Item($name);
+        } else {
+            $item = new Item();
         }
 
+        $item = $this->add($item)->setElement('a');
+
         if (is_array($action)) {
             $action = $this->app->url($action);
         }
@@ -30,6 +35,10 @@ public function addItem($name = null, $action = null)
             $item->setAttr('href', $action);
         }
 
+        if ($action instanceof jsExpressionable) {
+            $item->js('click', $action);
+        }
+
         return $item;
     }
 
@@ -77,6 +86,14 @@ public function addGroup($title)
         return $group;
     }
 
+    public function addMenuRight()
+    {
+        $menu = $this->add(new self(), ['RightMenu', 'ui'=>false]);
+        $menu->removeClass('item')->addClass('right menu');
+
+        return $menu;
+    }
+
     public function add($object, $region = null)
     {
         $item = parent::add($object, $region);

src/Table.php

@@ -104,19 +104,21 @@ class Table extends Lister
      *
      * @param string         $name      Data model field name
      * @param Column\Generic $columnDef
-     * @param array          $fieldDef  Array of defaults for new Model field
      *
      * @return Column\Generic
      */
-    public function addColumn($name, $columnDef = null, $fieldDef = [])
+    public function addColumn($name, $columnDef = null)
     {
         if (!$this->model) {
             $this->model = new \atk4\ui\misc\ProxyModel();
         }
 
-        $field = $this->model->hasElement($name);
-        if (!$field) {
-            $field = $this->model->addField($name, $fieldDef);
+        if ($name !== null) {
+            $field = $this->model->hasElement($name);
+            if (!$field) {
+                $columnDef = $name;
+                $name = null;
+            }
         }
 
         if ($columnDef === null) {
@@ -132,7 +134,16 @@ public function addColumn($name, $columnDef = null, $fieldDef = [])
         }
 
         $columnDef->table = $this;
-        $this->columns[$name] = $columnDef;
+        if (is_null($name)) {
+            $this->columns[] = $columnDef;
+        } elseif (isset($this->columns[$name])) {
+            if (!is_array($this->columns[$name])) {
+                $this->columns[$name] = [$this->columns[$name]];
+            }
+            $this->columns[$name][] = $columnDef;
+        } else {
+            $this->columns[$name] = $columnDef;
+        }
 
         return $columnDef;
     }
@@ -336,9 +347,19 @@ public function renderHeaderCells()
     {
         $output = [];
         foreach ($this->columns as $name => $column) {
-            $field = $this->model->getElement($name);
 
-            $output[] = $column->getHeaderCell($field);
+            // If multiple formatters are defined, use the first for the header cell
+            if (is_array($column)) {
+                $column = $column[0];
+            }
+
+            if (!is_int($name)) {
+                $field = $this->model->getElement($name);
+
+                $output[] = $column->getHeaderCell($field);
+            } else {
+                $output[] = $column->getHeaderCell();
+            }
         }
 
         return implode('', $output);
@@ -384,9 +405,19 @@ public function getRowTemplate()
     {
         $output = [];
         foreach ($this->columns as $name => $column) {
-            $field = $this->model->getElement($name);
 
-            $output[] = $column->getCellTemplate($field);
+            // If multiple formatters are defined, use the first for the header cell
+            if (is_array($column)) {
+                $column = $column[0];
+            }
+
+            if (!is_int($name)) {
+                $field = $this->model->getElement($name);
+
+                $output[] = $column->getCellTemplate($field);
+            } else {
+                $output[] = $column->getCellTemplate();
+            }
         }
 
         return implode('', $output);

src/TableColumn/Actions.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace atk4\ui\TableColumn;
+
+/**
+ * Formatting money.
+ */
+class Actions extends Generic
+{
+    public $actions = [];
+
+    public function addAction($button, $callback)
+    {
+        $name = 'action_'.(count($this->actions) + 1);
+
+        if (!is_object($button)) {
+            $button = new \atk4\ui\Button($button);
+        }
+        $button->app = $this->table->app;
+
+        $this->actions[$name] = $button;
+        $button->addClass('b_'.$name);
+        $button->addClass('compact');
+        $this->table->on('click', '.b_'.$name, $callback);
+    }
+
+    public function getCellTemplate(\atk4\data\Field $f = null)
+    {
+        $output = '';
+
+        // render our actions
+        foreach ($this->actions as $action) {
+            $output .= $action->getHTML();
+        }
+
+        return $this->getTag('td', 'body', [$output]);
+    }
+
+    // rest will be implemented for crud
+}