Popover como directiva

@salix/app/src/components/searchbar/searchbar.html

@@ -1,8 +1,12 @@
+<form ng-submit="$ctrl.search()">
 <vn-horizontal>
-     <vn-textfield vn-one label="Search" model="$ctrl.search"></vn-textfield>
+    <vn-textfield vn-one label="Search" model="$ctrl.model.search"></vn-textfield>
-     <vn-icon icon="keyboard_arrow_down" ng-click="searchbar.onClick($event)" style="cursor: pointer;"></vn-icon>
+    <vn-icon
-     <vn-icon-button icon="search"></vn-icon-button>
+        ng-if="$ctrl.advanced"
-     <vn-popover id="popover">
+        ng-click="$ctrl.onClick($event)"
-        <vn-search-panel></vn-search-panel>
+        icon="keyboard_arrow_down"
-     </vn-popover>
+        style="cursor: pointer;">
-</vn-horizontal>
+    </vn-icon>
+    <vn-icon-button icon="search"></vn-icon-button>
+</vn-horizontal>
+</form>

@salix/app/src/components/searchbar/searchbar.js

@@ -1,18 +1,25 @@
-import template from './searchbar.html';
 import {module} from '../../module';
 require('./style.css');
 
 export const NAME = 'vnSearchbar'
 export const COMPONENT = {
-    template: template,
+    template: require('./searchbar.html'),
-    transclude: true,
+    bindings: {
-    controllerAs: 'searchbar',
+        model: '<',
-    controller: function($element) {
+        search: '&',
-        this.onClick = function(event) {
+        advanced: '=',
-            var popover = $element.find('vn-popover');
+        popover: '@'
-            popover.controller('vnPopover').show($element);
+    },
-        };
+    controller: controller
-    }
 };
-COMPONENT.controller.$inject = ['$element'];
 module.component(NAME, COMPONENT);
+
+controller.$inject = ['$element', '$scope', '$document', '$compile', 'vnPopover'];
+function controller($element, $scope, $document, $compile, popover) {
+    this.onClick = function(event) {
+        var child = $document[0].createElement(this.popover);
+        $compile(child)($scope);
+        popover.show($element, child);
+        event.preventDefault();
+    };
+}

@salix/app/src/run.js

@@ -1,9 +1,7 @@
 import {module} from './module';
 
 export const run = function($rootScope) {
-    $rootScope.$on('$viewContentLoaded',()=>{
+    $rootScope.$on('$viewContentLoaded', () => {})
-        componentHandler.upgradeAllRegistered();
-    })
 }
 run.$inject = ['$rootScope'];
 module.run(run);

@salix/app/src/styles/layout.css

@@ -21,13 +21,13 @@ html [vn-vertical], vn-vertical, .vn-vertical {
 html [vn-horizontal], vn-horizontal, .vn-horizontal {
     flex-direction: row;
 }
-vn-horizontal [reverse] {
+vn-horizontal[reverse] {
     flex-direction: row-reverse;
 }
 html [vn-vertical], vn-vertical, .vn-vertical {
     flex-direction: column;
 }
-vn-vertical [reverse] {
+vn-vertical[reverse] {
     flex-direction: column-reverse;
 }
 html [wrap] {

@salix/core/src/check/check.js

@@ -20,6 +20,7 @@ export function directive(resolve, normalizer) {
                 if (mdlField)
                     mdlField.updateClasses_();
             });
+            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }

@salix/core/src/combo/combo.js

@@ -21,6 +21,7 @@ export function directive(resolve, normalizer) {
                 if (mdlField)
                     mdlField.updateClasses_();
             });
+            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }

@salix/core/src/core.js

@@ -44,11 +44,9 @@ export {NAME as CARD, directive as CardDirective} from './card/card';
 export {NAME as CARD_MDL, factory as cardMdl} from './card/card.mdl';
 export {NAME as SWITCH, directive as SwitchDirective} from './switch/switch';
 export {NAME as SWITCH_MDL, factory as switchdMdl} from './switch/switch.mdl';
-
-export {directive as Popover} from './popover/popover';
-export {factory as PopoverMdl} from './popover/popover.mdl';
 export {directive as Icon} from './icon/icon';
 export {factory as IconMdl} from './icon/icon.mdl';
 
-export {NAME as TITLE, COMPONENT as TITLE_COMPONENT} from './title/title';
+export {directive as Popover} from './popover/popover';
-export {NAME as SUBTITLE, COMPONENT as SUBTITLE_COMPONENT} from './subtitle/subtitle';
+export {COMPONENT as Title} from './title/title';
+export {COMPONENT as Subtitle} from './subtitle/subtitle';

@salix/core/src/date-picker/date-picker.js

@@ -20,6 +20,7 @@ export function directive(resolve, normalizer) {
                 if (mdlField)
                     mdlField.updateClasses_();
             });
+            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }

@salix/core/src/password/password.js

@@ -20,6 +20,7 @@ export function directive(resolve, normalizer) {
                 if (mdlField)
                     mdlField.updateClasses_();
             });
+            componentHandler.upgradeElement(element[0].firstChild);
         }
     }
 }

@salix/core/src/popover/popover.js

@@ -2,87 +2,91 @@ import {module} from '../module';
 import * as resolveFactory from '../resolveDefaultComponents';
 require('./style.css');
 
-const _NAME = 'popover';
 export const NAME = 'vnPopover';
 
-export function directive(resolver) {
+directive.$inject = ['$compile', '$document', 'vnPopover'];
+export function directive($compile, $document, popover) {
     return {
-        restrict: 'E',
+        restrict: 'A',
-        transclude: true,
+        link: function($scope, $element, $attrs, $ctrl) {
-        controllerAs: 'popover',
+            $element.on('click', function(event) {
-        template: function(_, attrs) {
+                var child = $document[0].createElement($attrs.vnPopover);
-            return resolver.getTemplate(_NAME, attrs);
+                $compile(child)($scope);
-        },
+                popover.show($element, child);
-/*      link: function(scope, element, attrs, ctrl) {
+                event.preventDefault();
-            var nativeElement = element[0];
-            nativeElement.addEventListener('click', function(ev) {
-                ev.preventDefault();
-                ctrl.show();
             });
-        },
-*/      controller: function($element) {
-            var self = this;
-            var doc = angular.element(document);
-            function docMouseDownHandler(event) {
-                if (event != self.lastEvent)
-                    self.hide();
-            }
-            this.onMouseDown = function(event) {
-                this.lastEvent = event;
-            };
-            this.hide = function ()
-            {
-                $element[0].style.display = 'none';
-                doc.off('mousedown', docMouseDownHandler);
-            }
-            this.show = function(parent) {
-                var node = $element[0];
-                var style = node.style;
-    
-                var spacing = 0;
-                var margin = 20;
-                var dblMargin = margin * 2;
-    
-                var width = node.offsetWidth;
-                var height = node.offsetHeight;
-                var innerWidth = window.innerWidth;
-                var innerHeight = window.innerHeight;
-
-                if(width + dblMargin > innerWidth) {
-                    width = innerWidth - dblMargin;
-                    style.width = width +'px';
-                }
-                if(height + dblMargin > innerHeight) {
-                    height = innerHeight - dblMargin;
-                    style.height = height +'px';
-                }
-
-                if(parent) {
-                    var parentNode = parent[0];
-                    var rect = parentNode.getBoundingClientRect();
-                    var left = rect.left;
-                    var top = rect.top + spacing + parentNode.offsetHeight;
-
-                    if(left + width > innerWidth)
-                        left -= (left + width) - innerWidth + margin;
-                    if(top + height > innerHeight)
-                        top -= height + parentNode.offsetHeight + spacing * 2;
-
-                    if(left < 0)
-                        left = margin;
-                    if(top < 0)
-                        top = margin;
-
-                    style.top = (top) +'px';
-                    style.left = (left) +'px';
-                }
-
-                style.display = 'block';
-                doc.on('mousedown', docMouseDownHandler);
-            };
         }
     }
 }
-directive.$inject = [resolveFactory.NAME];
-
 module.directive(NAME, directive);
+
+$get.$inject = ['$document'];
+function $get($document) {
+    var lastEvent;
+    var popover;
+    var self = {
+        onDocMouseDown: function(event) {
+            if (event != lastEvent)
+                self.hide();
+        },
+        onPopoverMouseDown: function(event) {
+            lastEvent = event;
+        },
+        hide: function() {
+            $document.off('mousedown', this.onDocMouseDown);
+            $document[0].body.removeChild (popover);
+            popover = null;
+        },
+        show: function(parent, child) {
+            popover = $document[0].createElement('div');
+            popover.className = 'vn-popover';
+            popover.addEventListener('mousedown', this.onPopoverMouseDown);
+            popover.appendChild (child);
+
+            var style = popover.style;
+
+            var spacing = 0;
+            var margin = 20;
+            var dblMargin = margin * 2;
+
+            var width = popover.offsetWidth;
+            var height = popover.offsetHeight;
+            var innerWidth = window.innerWidth;
+            var innerHeight = window.innerHeight;
+
+            if(width + dblMargin > innerWidth) {
+                width = innerWidth - dblMargin;
+                style.width = width +'px';
+            }
+            if(height + dblMargin > innerHeight) {
+                height = innerHeight - dblMargin;
+                style.height = height +'px';
+            }
+
+            if(parent) {
+                var parentNode = parent[0];
+                var rect = parentNode.getBoundingClientRect();
+                var left = rect.left;
+                var top = rect.top + spacing + parentNode.offsetHeight;
+
+                if(left + width > innerWidth)
+                    left -= (left + width) - innerWidth + margin;
+                if(top + height > innerHeight)
+                    top -= height + parentNode.offsetHeight + spacing * 2;
+
+                if(left < 0)
+                    left = margin;
+                if(top < 0)
+                    top = margin;
+
+                style.top = (top) +'px';
+                style.left = (left) +'px';
+            }
+
+            $document[0].body.appendChild (popover);
+            $document.on('mousedown', this.onDocMouseDown);
+        }
+    };
+    return self;
+}
+module.provider('vnPopover', function() {this.$get = $get;});

@salix/core/src/popover/popover.mdl.html

@@ -1,5 +0,0 @@
-<div
-    ng-mousedown="popover.onMouseDown($event)"
-    ng-transclude
-    *[foo]*>
-</div>

@salix/core/src/popover/popover.mdl.js

@@ -1,12 +0,0 @@
-import {module} from '../module';
-import template from './popover.mdl.html';
-
-export const NAME = 'vnPopoverMdlFactory';
-export function factory() {
-    return {
-        template: template,
-        default: {}
-    }
-}
-
-module.factory(NAME, factory);

@salix/core/src/popover/style.css

@@ -1,5 +1,4 @@
-vn-popover {
+.vn-popover {
-    display: none;
     position: fixed;
     box-shadow: 0 0 .4em rgba(1,1,1,.4);
     background-color: white;

@salix/core/src/subtitle/subtitle.html

@@ -1,2 +0,0 @@
-<h5 style="margin-top: 0;" class="border-dashed-top pad-medium-v" level="*[level]*" ng-transclude>
-</h5>

@salix/core/src/subtitle/subtitle.js

@@ -1,9 +1,8 @@
-import template from './subtitle.html';
 import {module} from '../module';
 
-export const NAME = "vnSubtitle";
+export const NAME = 'vnSubtitle';
 export const COMPONENT = {
-    template: template,
+    template: require('./template.html'),
     transclude: true
 };
 module.component(NAME, COMPONENT);

@salix/core/src/subtitle/template.html

@@ -0,0 +1,2 @@
+<h5 style="margin-top: 0;" class="margin-medium-bottom" ng-transclude>
+</h5>

@salix/core/src/switch/switch.js

@@ -20,6 +20,7 @@ export function directive(resolve, normalizer) {
                 if (mdlField)
                     mdlField.updateClasses_();
             });
+            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }

@salix/core/src/textfield/textfield.js

@@ -20,6 +20,7 @@ export function directive(resolve, normalizer) {
                 if (mdlField)
                     mdlField.updateClasses_();
             });
+            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }

@salix/core/src/title/template.html

@@ -0,0 +1,2 @@
+<h3 style="margin-top: 0;" class="margin-medium-bottom" ng-transclude>
+</h3>

@salix/core/src/title/title.html

@@ -1,2 +0,0 @@
-<h3 style="margin-top: 0;" class="margin-medium-bottom" level="*[level]*" ng-transclude>
-</h3>

@salix/core/src/title/title.js

@@ -1,9 +1,8 @@
-import template from './title.html';
+import {module} from '../module';
-import {module as _module} from '../module';
 
-export const NAME = "vnTitle";
+export const NAME = 'vnTitle';
 export const COMPONENT = {
-    template: template,
+    template: require('./template.html'),
     transclude: true
 };
-_module.component(NAME, COMPONENT);
+module.component(NAME, COMPONENT);

@salix/crud/src/client/index/index.html

@@ -2,12 +2,18 @@
     <vn-topbar></vn-topbar>
     <div style="max-width: 45em; margin: 0 auto;">
         <vn-card margin-medium>
-            <form pad-medium ng-submit="search.submit()">
+            <vn-horizontal pad-medium>
-            <vn-horizontal>
+                <vn-searchbar
-                <vn-searchbar vn-auto></vn-searchbar>
+                    vn-auto
+                    model="search.filter"
+                    search="search.find()"
+                    advanced="true"
+                    popover="vn-client-search-panel"
+                    params="search.filter"
+                    return="search.find()">
+                </vn-searchbar>
                 <a vn-empty ui-sref="create"><vn-button label="New client"></vn-button></a>
             </vn-horizontal>
-            </form>
         </vn-card>
         <vn-card margin-medium>
             <vn-item-client

@salix/crud/src/client/index/index.js

@@ -8,25 +8,20 @@ export const COMPONENT = {
     controllerAs: 'search',
     controller: function($http) {
         this.clients = [];
-        $http.get('/client/api/Clients').then(
+        this.find = function() {
-            json => {
+            var queryStr = '/client/api/Clients';
-                this.clients = json.data;
+            var search = this.filter.search;
-            },
+            if(search) {
-            json => console.error(json.data.error.message)
+                let json = JSON.stringify({where: {name: {ilike: search}}});
-        );
+                var queryStr = `${queryStr}?filter=${json}`;
-        this.submit = function() {
+            }
-            var query = {where: model};
+            $http.get(queryStr).then(
-            var self = this;
+                json => this.clients = json.data,
-            $http.get(`/client/api/Clients/findOne?filter=${JSON.stringify(query)}`).then(
+                json => console.error(json.data.error.message)
-                function(response) {
-                    self.clients = [];
-                    self.clients.push(response.data);
-                },
-                function(response) {
-                    console.log(response);
-                }
             );
         };
+        this.filter = {};
+        this.find();
     }
 };
 COMPONENT.controller.$inject = ['$http'];

@salix/crud/src/client/index/item-client.html

@@ -1,4 +1,4 @@
 <a ui-sref="clientCard.basicData({ id: {{itemClient.client.id}} })" pad-medium border-solid-bottom>
     <div class="vn-item-client-name">{{itemClient.client.name}}</div>
-    <div>{{itemClient.client.id}} </div>
+    <div>{{itemClient.client.id}}</div>
 </a>

@salix/crud/src/client/search-panel/search-panel.html

@@ -1,4 +1,4 @@
-<div pad-large style="width: 600px;">
+<div pad-large style="min-width: 30em;">
 <form name="form" ng-submit="form.$valid && search.submit()">
     <vn-horizontal>
         <vn-textfield vn-one label="Id Cliente" field="search.model.id"></vn-textfield>
@@ -8,7 +8,7 @@
         <vn-textfield vn-one label="Alias" field="search.model.alias"></vn-textfield>
     </vn-horizontal>
     <vn-horizontal>
-        <vn-textfield vn-two label="Razon Social" field="search.model.name"></vn-textfield>
+        <vn-textfield vn-one label="Razon Social" field="search.model.name"></vn-textfield>
     </vn-horizontal>
     <vn-horizontal>
         <vn-textfield vn-one label="Población" field="search.model.city"></vn-textfield>
@@ -18,7 +18,9 @@
         <vn-textfield vn-one label="Email" field="search.model.email"></vn-textfield>
         <vn-textfield vn-one label="Teléfono" field="search.model.phone"></vn-textfield>
     </vn-horizontal>
-    <vn-button label="Search"></vn-button>
+    <vn-horizontal margin-large-top>
+        <vn-button label="Search"></vn-button>
+    </vn-horizontal>
 </form>
 </div>
 

@salix/crud/src/client/search-panel/search-panel.js

@@ -1,7 +1,7 @@
 import template from './search-panel.html';
 import {module} from '../../module';
 
-export const NAME = "vnSearchPanel";
+export const NAME = 'vnClientSearchPanel';
 export const COMPONENT = {
     controllerAs: 'search',
     template: template

db.json

@@ -18,7 +18,7 @@
       "NUf7o684TmteojFX9KmPOpaDLthjP5Def4wuy83Yjv31i43HHiWgV3FyBp6pX8Ue": "{\"id\":\"NUf7o684TmteojFX9KmPOpaDLthjP5Def4wuy83Yjv31i43HHiWgV3FyBp6pX8Ue\",\"ttl\":1209600,\"created\":\"2016-11-21T11:06:11.113Z\",\"userId\":1}"
     },
     "Client": {
-      "12": "{\"name\":\"Verdnatura\",\"id\":12,\"fi\":\"B97367486\",\"salesPerson\":\"2\",\"telefono\":\"963242100\",\"socialName\":\"Verdnatura Levante SL\",\"active\":true,\"user\":\"verdnatura\",\"fax\":\"963242100\",\"phone\":\"963242100\",\"email\":\"informatica@verdnatura.es\",\"surcharge\":true,\"cyc\":2345,\"credit\":1000,\"iban\":\"2352345234523452345\",\"street\":\"Avenida Espioca, 100\",\"city\":\"Silla\",\"postcode\":\"46680\",\"mobile\":\"654654654\",\"dueDay\":4,\"gestdoc\":23452343}",
+      "12": "{\"name\":\"Verdnatura\",\"id\":12,\"fi\":\"B97367486\",\"salesPerson\":\"2\",\"telefono\":\"963242100\",\"socialName\":\"Verdnatura Levante SL\",\"active\":true,\"user\":\"verdnatura\",\"fax\":\"963242100\",\"phone\":\"96324210\",\"email\":\"informatica@verdnatura.es\",\"surcharge\":true,\"cyc\":2345,\"credit\":1000,\"iban\":\"2352345234523452345\",\"street\":\"Avenida Espioca, 100\",\"city\":\"Silla\",\"postcode\":\"46680\",\"mobile\":\"654654654\",\"dueDay\":4,\"gestdoc\":23452343,\"province\":1,\"country\":\"1\"}",
       "14": "{\"name\":\"Cliente 1\",\"id\":14,\"street\":\"Aaaaaaaaaa\",\"fi\":\"1234567890A\",\"socialName\":\"Cliente 1\",\"fax\":\"963242100\",\"dischargeDate\":\"01/01/2017\",\"telefono\":\"963242100\",\"salesPerson\":\"2\",\"email\":\"informatica@verdnatura.es\",\"city\":\"asdf\",\"postcode\":\"asdf\",\"phone\":\"asdf\",\"mobile\":\"asdf\",\"credit\":2345,\"cyc\":123,\"iban\":\"asdf\",\"dueDay\":345,\"gestdoc\":2435,\"surcharge\":true}"
     },
     "PaymentMethod": {
@@ -32,8 +32,8 @@
       "3": "{\"name\":\"Carlos Zambrano\",\"id\":3}"
     },
     "Address": {
-      "63": "{\"street\":\"Avd. Espioca nº 100\",\"consignee\":\"Verndatura Silla\",\"city\":\"Silla\",\"postcode\":\"46460\",\"phone\":\"66666666\",\"mobile\":\"989898888\",\"id\":63,\"province\":\"2\",\"agency\":\"3\",\"default\":true,\"enabled\":true}",
+      "63": "{\"street\":\"Avd. Espioca nº 100\",\"consignee\":\"Verndatura Silla\",\"city\":\"Silla\",\"postcode\":\"46460\",\"phone\":\"66666666\",\"mobile\":\"989898888\",\"id\":63,\"province\":\"2\",\"agency\":\"2\",\"default\":true,\"enabled\":true}",
-      "64": "{\"street\":\"Aaa\",\"consignee\":\"aaa\",\"city\":\"aaa\",\"postcode\":\"11111\",\"phone\":\"963242100\",\"mobile\":\"11231241423\",\"id\":64}"
+      "64": "{\"street\":\"Aaa\",\"consignee\":\"aaa\",\"city\":\"aaa\",\"postcode\":\"11111\",\"phone\":\"963242100\",\"mobile\":\"11231241423\",\"id\":64,\"enabled\":true}"
     },
     "Country": {
       "1": "{\"id\":1,\"name\":\"Spain\"}",