Merge pull request #245 from atk4/feature/autocomplete-field

Feature/autocomplete field

CHANGELOG.md

@@ -1,3 +1,24 @@
+## 1.3
+
+We have included a pretty important new component called "Loader". It is designed to load parts of your
+page dynamically and with super-easy setup. Here is how to use it:
+
+``` php
+$loader = $app->add('Loader');
+$loader->set(function($p) {
+    sleep(2);  // or any other slow-loading code.
+    $p->add('LoremIpsum');
+});
+```
+
+Your page will load instantly except for the LoremIpsum, which will take some moment.
+
+ - [Loader Documentation](http://agile-ui.readthedocs.io/en/latest/virtualpage.html?highlight=loader#loader)
+ - [Loader Demo](http://ui.agiletoolkit.org/demos/loader.php), [and another demo](http://ui.agiletoolkit.org/demos/loader2.php)
+
+Another addition is 'jsNotify' class 
+
+
 
 ## 1.2
 
@@ -28,7 +49,7 @@ This release was possible thanks to our new contributors:
    - Callbacks and Virtual pages #200 (http://agile-ui.readthedocs.io/en/latest/core.html#callbacks-and-virtual-pages)
    - README file #196
    - Add documentation for icon, image, label, loremipsum, message, tablecolumn, text, decorators. #218
- - Fixed problem with Checkbox on a form #130
+ - Fixed problem with CheckBox on a form #130
  - Fixed form submission with Enter #173
  - Improved form validation #191
  - Fix label display when it's 0 #198
@@ -69,7 +90,7 @@ of Agile Data that allows you to actually build nice apps with it.
 - Added QuickSearch #107 
 - Added Paginator
 - Added Form Model, Validation support
-- Added Form Fields: Textarea, Dropdown
+- Added Form Fields: TextArea, DropDown
 - Added Automated multi-column layout FormLayout\Columns
 - Added support for stickyGet #131
 - Added jsModal() for dialogs #124 #71

README.md

@@ -324,7 +324,7 @@ While many UI toolkits focus on giving you ready-to-use advance components, we p
 3.  Composite Views - This allows View object to implement itself by relying on other Views.
 4.  JavaScript actions - This technique is designed to bind PHP Views with generic JavaScript routines and also to eliminate the need for you to write custom JavaScript code (e.g. `('#myid').dropdown();`).
 5.  JavaScript events - JS actions can be asigned to events. For instance, you can instruct a "Button" object to refresh your "Grid" object in a single line of PHP.
-6.  Buttons, Fields, Dropdown, Boxes, Panels, Icons, Messages - All those basic Views can be used 'out-of-the-box' and are utilising principles described above to remain flexible and configurable.
+6.  Buttons, Fields, DropDown, Boxes, Panels, Icons, Messages - All those basic Views can be used 'out-of-the-box' and are utilising principles described above to remain flexible and configurable.
 7.  Callbacks - A concept where a client-side component's rendering can execute an AJAX request to its PHP code triggering a server-side event. Agile UI ensures full isolation and robustness with this approach.
 8.  Agile Data - Integration with data and business logic framework allows you to structure your growing PHP application's business logic properly and conforming to best practices of web development.
 9.  Form - Culmination of concepts "callbacks", "composite views" and reliance on a dozen basic views creates a very simple way to create a modern and flexible Form implementation. Capable of rendering, submitting it's own data back, handling errors and server-side validation just in a few lines of PHP code - Form is the most elegant "Form Builder" you will find for PHP.

demos/autocomplete.php

@@ -0,0 +1,62 @@
+<?php
+
+require 'init.php';
+require 'database.php';
+
+// create header
+$layout->add(['Header', 'Database-driven form with an enjoyable layout']);
+
+// create form
+$form = $layout->add(new \atk4\ui\Form(['segment']));
+$form->add(['Label', 'Input new country information here', 'top attached'], 'AboveFields');
+
+$m = new \atk4\data\Model($db, 'test');
+
+// Without AutoComplete
+$m->hasOne('country1', new Country());
+
+// With AutoComplete
+$m->hasOne('country2', [new Country(), 'ui' => ['form' => [
+    'AutoComplete',
+    'plus' => true,
+]]]);
+
+$form->setModel($m);
+
+$form->addField('country3', [
+    'AutoComplete',
+    'model'       => new Country($db),
+    'placeholder' => 'Search for country by code, LV or UK',
+    'search'      => ['name', 'iso', 'iso3'],
+]);
+
+//$acc = $form->getField('country_id');
+//$acc->actionRight = ['Button', 'Hello htere'];
+
+$form->onSubmit(function ($f) {
+    return $f->model->ref('country_id')['name'];
+});
+
+return;
+
+$layout->add(new \atk4\ui\FormField\AutoComplete(['placeholder' => 'Search users', 'left' => true, 'icon' => 'users']));
+
+$layout->add(new \atk4\ui\Header(['Labels', 'size' => 2]));
+
+$layout->add(new \atk4\ui\FormField\AutoComplete(['placeholder' => 'Search users', 'label' => 'http://']));
+$layout->add(new \atk4\ui\FormField\AutoComplete(['placeholder' => 'Weight', 'labelRight' => new \atk4\ui\Label(['kg', 'basic'])]));
+$layout->add(new \atk4\ui\FormField\AutoComplete(['label' => '$', 'labelRight' => new \atk4\ui\Label(['.00', 'basic'])]));
+
+$layout->add(new \atk4\ui\FormField\AutoComplete([
+    'iconLeft'   => 'tags',
+    'labelRight' => new \atk4\ui\Label(['Add Tag', 'tag']),
+]));
+
+// left/right corner is not supported, but here is work-around:
+$label = new \atk4\ui\Label();
+$label->addClass('left corner');
+$label->add(new \atk4\ui\Icon('asterisk'));
+
+$layout->add(new \atk4\ui\FormField\AutoComplete([
+    'label' => $label,
+]))->addClass('left corner');

demos/button.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Demonstrates how to use layouts.
+ * Demonstrates how to use buttons.
  */
 require 'init.php';
 use atk4\ui\Button;

demos/checkbox.php

@@ -2,30 +2,17 @@
 /**
  * Testing fields.
  */
-require '../vendor/autoload.php';
+require 'init.php';
 
-try {
-    $layout = new \atk4\ui\Layout\App(['defaultTemplate' => './templates/layout2.html']);
+    $app->add(new \atk4\ui\Header(['CheckBoxes', 'size' => 2]));
 
-    $layout->add(new \atk4\ui\Header(['Checkboxes', 'size' => 2]));
+    $app->add(new \atk4\ui\FormField\CheckBox('Make my profile visible'));
 
-    $layout->add(new \atk4\ui\FormField\Checkbox('Make my profile visible'));
+    $app->add(new \atk4\ui\View(['ui' => 'divider']));
+    $app->add(new \atk4\ui\FormField\CheckBox(['Accept terms and conditions', 'slider']));
 
-    $layout->add(new \atk4\ui\View(['ui' => 'divider']));
-    $layout->add(new \atk4\ui\FormField\Checkbox(['Accept terms and conditions', 'slider']));
+    $app->add(new \atk4\ui\View(['ui' => 'divider']));
+    $app->add(new \atk4\ui\FormField\CheckBox(['Subscribe to weekly newsletter', 'toggle']));
 
-    $layout->add(new \atk4\ui\View(['ui' => 'divider']));
-    $layout->add(new \atk4\ui\FormField\Checkbox(['Subscribe to weekly newsletter', 'toggle']));
-
-    $layout->add(new \atk4\ui\View(['ui' => 'divider']));
-    $layout->add(new \atk4\ui\FormField\Checkbox(['Custom setting?']))->js(true)->checkbox('set indeterminate');
-
-    echo $layout->render();
-} catch (\atk4\core\Exception $e) {
-    var_dump($e->getMessage());
-
-    var_dump($e->getParams());
-    var_dump($e->getTrace());
-
-    throw $e;
-}
+    $app->add(new \atk4\ui\View(['ui' => 'divider']));
+    $app->add(new \atk4\ui\FormField\CheckBox(['Custom setting?']))->js(true)->checkbox('set indeterminate');

demos/database.php

@@ -73,7 +73,7 @@ public function init()
             //$this->addField('description', ['ui'=>['form'=>['FormField/TextArea', 'rows'=>5]]]);
             $this->addField('description', ['type' => 'text']);
             $this->addField('client_name', ['type' => 'string']);
-            $this->addField('client_address', ['type' => 'string', 'ui' => ['form' => [new \atk4\ui\FormField\Textarea(), 'rows' => 4]]]);
+            $this->addField('client_address', ['type' => 'string', 'ui' => ['form' => [new \atk4\ui\FormField\TextArea(), 'rows' => 4]]]);
 
             $this->hasOne('client_country_iso', [
             new Country(),

demos/field.php

@@ -23,7 +23,7 @@
 $app->add(new \atk4\ui\FormField\Line(['placeholder' => 'Search users', 'label' => 'http://']));
 
 // dropdown example
-$dd = new \atk4\ui\Dropdown('.com');
+$dd = new \atk4\ui\DropDown('.com');
 $dd->setSource(['.com', '.net', '.org']);
 $app->add(new \atk4\ui\FormField\Line([
     'placeholder' => 'Find Domain',
@@ -65,12 +65,12 @@
 
 $app->add(new \atk4\ui\FormField\Line(['iconLeft' => 'search',  'action' => 'Search']));
 
-$dd = new \atk4\ui\DropdownButton(['This Page', 'basic']);
+$dd = new \atk4\ui\DropDownButton(['This Page', 'basic']);
 $dd->setSource(['This Organisation', 'Entire Site']);
 $app->add(new \atk4\ui\FormField\Line(['iconLeft' => 'search',  'action' => $dd]));
 
 // double actions are not supported but you can add them yourself
-$dd = new \atk4\ui\Dropdown(['Articles', 'compact selection']);
+$dd = new \atk4\ui\DropDown(['Articles', 'compact selection']);
 $dd->setSource(['All', ['name' => 'Articles', 'active' => true], 'Products']);
 $app->add(new \atk4\ui\FormField\Line(['iconLeft' => 'search',  'action' => $dd]))
     ->add(new \atk4\ui\Button('Search'), 'AfterAfterInput');

demos/field2.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Demonstrates how to use fields with form.
+ */
+require 'init.php';
+
+$app->add(['Header', 'Stand Alone Line']);
+// you can pass values to button
+$field = $app->add(new \atk4\ui\FormField\Line());
+
+$field->set('hello world');
+
+$button = $app->add(['Button', 'check value']);
+$button->on('click', new \atk4\ui\jsExpression('alert("field value is: "+[])', [$field->jsInput()->val()]));
+
+$app->add(['Header', 'Line in a Form']);
+$form = $app->add('Form');
+$field = $form->addField('name', new \atk4\ui\FormField\Line());
+$form->onSubmit(function ($f) {
+    return $f->model['name'];
+});
+
+$app->add(['Header', 'Multiple Form Layouts']);
+
+$form = $app->add('Form');
+$tabs = $form->add('Tabs', 'AboveFields');
+$form->add(['ui' => 'divider'], 'AboveFields');
+
+$form_page = $tabs->addTab('Basic Info')->add(['FormLayout\Generic', 'form' => $form]);
+$form_page->addField('name', new \atk4\ui\FormField\Line());
+
+$form_page = $tabs->addTab('Other Info')->add(['FormLayout\Generic', 'form' => $form]);
+$form_page->addField('age', new \atk4\ui\FormField\Line());
+
+$form->onSubmit(function ($f) {
+    return $f->model['name'].' has age '.$f->model['age'];
+});

demos/form.php

@@ -36,7 +36,7 @@
 $g = $form->addGroup(['width' => 'three']);
 $g->addField('name');
 $g->addField('surname');
-$g->addField('gender', ['Dropdown', 'values' => ['Female', 'Male']]);
+$g->addField('gender', ['DropDown', 'values' => ['Female', 'Male']]);
 
 $tab->add(['Header', 'Comparing Field type vs Decorator class']);
 $form = $app->add('Form');

demos/form5.php

@@ -20,13 +20,13 @@
 $f->addField('three', ['caption' => 'Caption2']);
 
 // Use zeroth argument of the seed to specify standard class
-$f->addField('four', ['Checkbox', 'caption' => 'Caption2']);
+$f->addField('four', ['CheckBox', 'caption' => 'Caption2']);
 
 // Use explicit object for user-defined or 3rd party field
-$f->addField('five', new \atk4\ui\FormField\Checkbox());
+$f->addField('five', new \atk4\ui\FormField\CheckBox());
 
 // Objects still accept seed
-$f->addField('six', new \atk4\ui\FormField\Checkbox(['caption' => 'Caption3']));
+$f->addField('six', new \atk4\ui\FormField\CheckBox(['caption' => 'Caption3']));
 
 $a = [];
 $m = new \atk4\data\Model(new \atk4\data\Persistence_Array($a));
@@ -40,14 +40,14 @@
 // ui can also specify caption which is a form-specific
 $m->addField('three', ['ui' => ['form' => ['caption' => 'Caption']]]);
 
-// type is converted into Checkbox form field with caption as a seed
+// type is converted into CheckBox form field with caption as a seed
 $m->addField('four', ['type' => 'boolean', 'ui' => ['form' => ['caption' => 'Caption2']]]);
 
 // Can specify class for a checkbox explicitly
-$m->addField('five', ['ui' => ['form' => ['Checkbox', 'caption' => 'Caption3']]]);
+$m->addField('five', ['ui' => ['form' => ['CheckBox', 'caption' => 'Caption3']]]);
 
 // Form-specific caption overrides general caption of a field. Also you can specify object instead of seed
-$m->addField('six', ['caption' => 'badcaption', 'ui' => ['form' => new \atk4\ui\FormField\Checkbox(['caption' => 'Caption4'])]]);
+$m->addField('six', ['caption' => 'badcaption', 'ui' => ['form' => new \atk4\ui\FormField\CheckBox(['caption' => 'Caption4'])]]);
 
 $f = $cc->addColumn()->add(new \atk4\ui\Form());
 $f->setModel($m);
@@ -63,13 +63,13 @@
 $f->addField('two', 'Caption2');
 
 // We can override type, but seed from model will still be respected
-$f->addField('three', ['Checkbox']);
+$f->addField('three', ['CheckBox']);
 
 // We override type and caption here
 $f->addField('four', ['Line', 'caption' => 'CaptionX']);
 
 // We can specify form field object. It's still seeded with caption from model.
-$f->addField('five', new \atk4\ui\FormField\Checkbox());
+$f->addField('five', new \atk4\ui\FormField\CheckBox());
 
 // can add field that does not exist in a model
-$f->addField('nine', new \atk4\ui\FormField\Checkbox(['caption' => 'Caption3']));
+$f->addField('nine', new \atk4\ui\FormField\CheckBox(['caption' => 'Caption3']));

demos/menu.php

@@ -8,7 +8,7 @@
 $m->addItem('foo', 'foo.php');
 $m->addItem('bar');
 $m->addItem('baz');
-$m->add(['Dropdown', 'huhhuh', 'js' => ['on' => 'hover']])->setSource(['a', 'b', 'c']);
+$m->add(['DropDown', 'huhhuh', 'js' => ['on' => 'hover']])->setSource(['a', 'b', 'c']);
 
 $sm = $m->addMenu('Sub-menu');
 $sm->addItem('one', 'one.php');

demos/reloading.php

@@ -24,20 +24,22 @@
 $app->add(['Header', 'Make sure nested JS bindings are applied too']);
 $seg = $app->add(['View', 'ui' => 'segment']);
 
-// Re-usable component implementing counter
-class Counter extends \atk4\ui\FormField\Line
-{
-    public $content = 20; // default
-
-    public function init()
+if (!class_exists('Counter')) {
+    // Re-usable component implementing counter
+    class Counter extends \atk4\ui\FormField\Line
     {
-        parent::init();
+        public $content = 20; // default
+
+        public function init()
+        {
+            parent::init();
 
-        $this->actionLeft = new \atk4\ui\Button(['icon' => 'minus']);
-        $this->action = new \atk4\ui\Button(['icon' => 'plus']);
+            $this->actionLeft = new \atk4\ui\Button(['icon' => 'minus']);
+            $this->action = new \atk4\ui\Button(['icon' => 'plus']);
 
-        $this->actionLeft->js('click', $this->jsInput()->val(new \atk4\ui\jsExpression('parseInt([])-1', [$this->jsInput()->val()])));
-        $this->action->js('click', $this->jsInput()->val(new \atk4\ui\jsExpression('parseInt([])+1', [$this->jsInput()->val()])));
+            $this->actionLeft->js('click', $this->jsInput()->val(new \atk4\ui\jsExpression('parseInt([])-1', [$this->jsInput()->val()])));
+            $this->action->js('click', $this->jsInput()->val(new \atk4\ui\jsExpression('parseInt([])+1', [$this->jsInput()->val()])));
+        }
     }
 }