From 728970f4038d4db8a1424c8e92d2cd93e10c7d98 Mon Sep 17 00:00:00 2001 From: Juan Ferrer Toribio Date: Thu, 12 Jan 2017 13:15:46 +0100 Subject: [PATCH] Popover como directiva --- .../src/components/searchbar/searchbar.html | 18 +- .../app/src/components/searchbar/searchbar.js | 29 ++-- @salix/app/src/run.js | 4 +- @salix/app/src/styles/layout.css | 4 +- @salix/core/src/check/check.js | 1 + @salix/core/src/combo/combo.js | 1 + @salix/core/src/core.js | 8 +- @salix/core/src/date-picker/date-picker.js | 1 + @salix/core/src/password/password.js | 1 + @salix/core/src/popover/popover.js | 156 +++++++++--------- @salix/core/src/popover/popover.mdl.html | 5 - @salix/core/src/popover/popover.mdl.js | 12 -- @salix/core/src/popover/style.css | 3 +- @salix/core/src/subtitle/subtitle.html | 2 - @salix/core/src/subtitle/subtitle.js | 5 +- @salix/core/src/subtitle/template.html | 2 + @salix/core/src/switch/switch.js | 1 + @salix/core/src/textfield/textfield.js | 1 + @salix/core/src/title/template.html | 2 + @salix/core/src/title/title.html | 2 - @salix/core/src/title/title.js | 9 +- @salix/crud/src/client/index/index.html | 14 +- @salix/crud/src/client/index/index.js | 29 ++-- @salix/crud/src/client/index/item-client.html | 2 +- .../src/client/search-panel/search-panel.html | 8 +- .../src/client/search-panel/search-panel.js | 2 +- db.json | 6 +- 27 files changed, 164 insertions(+), 164 deletions(-) delete mode 100644 @salix/core/src/popover/popover.mdl.html delete mode 100644 @salix/core/src/popover/popover.mdl.js delete mode 100644 @salix/core/src/subtitle/subtitle.html create mode 100644 @salix/core/src/subtitle/template.html create mode 100644 @salix/core/src/title/template.html delete mode 100644 @salix/core/src/title/title.html diff --git a/@salix/app/src/components/searchbar/searchbar.html b/@salix/app/src/components/searchbar/searchbar.html index 2f11a5998..102ff6cce 100644 --- a/@salix/app/src/components/searchbar/searchbar.html +++ b/@salix/app/src/components/searchbar/searchbar.html @@ -1,8 +1,12 @@ +
- - - - - - - \ No newline at end of file + + + + + +
\ No newline at end of file diff --git a/@salix/app/src/components/searchbar/searchbar.js b/@salix/app/src/components/searchbar/searchbar.js index 574924c34..e2a4a3afd 100644 --- a/@salix/app/src/components/searchbar/searchbar.js +++ b/@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, - transclude: true, - controllerAs: 'searchbar', - controller: function($element) { - this.onClick = function(event) { - var popover = $element.find('vn-popover'); - popover.controller('vnPopover').show($element); - }; - } + template: require('./searchbar.html'), + bindings: { + model: '<', + search: '&', + advanced: '=', + popover: '@' + }, + 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(); + }; +} diff --git a/@salix/app/src/run.js b/@salix/app/src/run.js index 8a230d8e9..4641c9785 100644 --- a/@salix/app/src/run.js +++ b/@salix/app/src/run.js @@ -1,9 +1,7 @@ import {module} from './module'; export const run = function($rootScope) { - $rootScope.$on('$viewContentLoaded',()=>{ - componentHandler.upgradeAllRegistered(); - }) + $rootScope.$on('$viewContentLoaded', () => {}) } run.$inject = ['$rootScope']; module.run(run); diff --git a/@salix/app/src/styles/layout.css b/@salix/app/src/styles/layout.css index e93d58b8e..c10a88a86 100644 --- a/@salix/app/src/styles/layout.css +++ b/@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] { diff --git a/@salix/core/src/check/check.js b/@salix/core/src/check/check.js index a9f8a2c6a..adbe8280e 100644 --- a/@salix/core/src/check/check.js +++ b/@salix/core/src/check/check.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/combo/combo.js b/@salix/core/src/combo/combo.js index 356c51723..6e292ebee 100644 --- a/@salix/core/src/combo/combo.js +++ b/@salix/core/src/combo/combo.js @@ -21,6 +21,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/core.js b/@salix/core/src/core.js index f70bb48e4..eda3a7094 100644 --- a/@salix/core/src/core.js +++ b/@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 {NAME as SUBTITLE, COMPONENT as SUBTITLE_COMPONENT} from './subtitle/subtitle'; +export {directive as Popover} from './popover/popover'; +export {COMPONENT as Title} from './title/title'; +export {COMPONENT as Subtitle} from './subtitle/subtitle'; diff --git a/@salix/core/src/date-picker/date-picker.js b/@salix/core/src/date-picker/date-picker.js index c8470e257..22e8f2c3a 100644 --- a/@salix/core/src/date-picker/date-picker.js +++ b/@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); } }; } diff --git a/@salix/core/src/password/password.js b/@salix/core/src/password/password.js index 8b46973f3..33867e874 100644 --- a/@salix/core/src/password/password.js +++ b/@salix/core/src/password/password.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } } } diff --git a/@salix/core/src/popover/popover.js b/@salix/core/src/popover/popover.js index 5b27cbe5a..0a6b37942 100644 --- a/@salix/core/src/popover/popover.js +++ b/@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', - transclude: true, - controllerAs: 'popover', - template: function(_, attrs) { - return resolver.getTemplate(_NAME, attrs); - }, -/* link: function(scope, element, attrs, ctrl) { - var nativeElement = element[0]; - nativeElement.addEventListener('click', function(ev) { - ev.preventDefault(); - ctrl.show(); + restrict: 'A', + link: function($scope, $element, $attrs, $ctrl) { + $element.on('click', function(event) { + var child = $document[0].createElement($attrs.vnPopover); + $compile(child)($scope); + popover.show($element, child); + event.preventDefault(); }); - }, -*/ 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;}); diff --git a/@salix/core/src/popover/popover.mdl.html b/@salix/core/src/popover/popover.mdl.html deleted file mode 100644 index 2aec07e0f..000000000 --- a/@salix/core/src/popover/popover.mdl.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
\ No newline at end of file diff --git a/@salix/core/src/popover/popover.mdl.js b/@salix/core/src/popover/popover.mdl.js deleted file mode 100644 index dda61bf20..000000000 --- a/@salix/core/src/popover/popover.mdl.js +++ /dev/null @@ -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); diff --git a/@salix/core/src/popover/style.css b/@salix/core/src/popover/style.css index 82fa1c8fa..536359a2f 100644 --- a/@salix/core/src/popover/style.css +++ b/@salix/core/src/popover/style.css @@ -1,5 +1,4 @@ -vn-popover { - display: none; +.vn-popover { position: fixed; box-shadow: 0 0 .4em rgba(1,1,1,.4); background-color: white; diff --git a/@salix/core/src/subtitle/subtitle.html b/@salix/core/src/subtitle/subtitle.html deleted file mode 100644 index c3acdabf7..000000000 --- a/@salix/core/src/subtitle/subtitle.html +++ /dev/null @@ -1,2 +0,0 @@ -
-
\ No newline at end of file diff --git a/@salix/core/src/subtitle/subtitle.js b/@salix/core/src/subtitle/subtitle.js index 658ac5acb..6b4b87c65 100644 --- a/@salix/core/src/subtitle/subtitle.js +++ b/@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); diff --git a/@salix/core/src/subtitle/template.html b/@salix/core/src/subtitle/template.html new file mode 100644 index 000000000..ac00ac0c2 --- /dev/null +++ b/@salix/core/src/subtitle/template.html @@ -0,0 +1,2 @@ +
+
\ No newline at end of file diff --git a/@salix/core/src/switch/switch.js b/@salix/core/src/switch/switch.js index 506d7c5ca..c0d7a5607 100644 --- a/@salix/core/src/switch/switch.js +++ b/@salix/core/src/switch/switch.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/textfield/textfield.js b/@salix/core/src/textfield/textfield.js index f05a41d28..05f86ebd5 100644 --- a/@salix/core/src/textfield/textfield.js +++ b/@salix/core/src/textfield/textfield.js @@ -20,6 +20,7 @@ export function directive(resolve, normalizer) { if (mdlField) mdlField.updateClasses_(); }); + componentHandler.upgradeElement(element[0].firstChild); } }; } diff --git a/@salix/core/src/title/template.html b/@salix/core/src/title/template.html new file mode 100644 index 000000000..e8ab561ed --- /dev/null +++ b/@salix/core/src/title/template.html @@ -0,0 +1,2 @@ +

+

\ No newline at end of file diff --git a/@salix/core/src/title/title.html b/@salix/core/src/title/title.html deleted file mode 100644 index 7649bccbf..000000000 --- a/@salix/core/src/title/title.html +++ /dev/null @@ -1,2 +0,0 @@ -

-

\ No newline at end of file diff --git a/@salix/core/src/title/title.js b/@salix/core/src/title/title.js index 8de6aad4d..dd933cb56 100644 --- a/@salix/core/src/title/title.js +++ b/@salix/core/src/title/title.js @@ -1,9 +1,8 @@ -import template from './title.html'; -import {module as _module} from '../module'; +import {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); diff --git a/@salix/crud/src/client/index/index.html b/@salix/crud/src/client/index/index.html index 733fc935b..594eae3ff 100644 --- a/@salix/crud/src/client/index/index.html +++ b/@salix/crud/src/client/index/index.html @@ -2,12 +2,18 @@
-
- - + + + -
{ - this.clients = json.data; - }, - json => console.error(json.data.error.message) - ); - this.submit = function() { - var query = {where: model}; - var self = this; - $http.get(`/client/api/Clients/findOne?filter=${JSON.stringify(query)}`).then( - function(response) { - self.clients = []; - self.clients.push(response.data); - }, - function(response) { - console.log(response); - } + this.find = function() { + var queryStr = '/client/api/Clients'; + var search = this.filter.search; + if(search) { + let json = JSON.stringify({where: {name: {ilike: search}}}); + var queryStr = `${queryStr}?filter=${json}`; + } + $http.get(queryStr).then( + json => this.clients = json.data, + json => console.error(json.data.error.message) ); }; + this.filter = {}; + this.find(); } }; COMPONENT.controller.$inject = ['$http']; diff --git a/@salix/crud/src/client/index/item-client.html b/@salix/crud/src/client/index/item-client.html index c76ba350a..da06f7427 100644 --- a/@salix/crud/src/client/index/item-client.html +++ b/@salix/crud/src/client/index/item-client.html @@ -1,4 +1,4 @@
{{itemClient.client.name}}
-
{{itemClient.client.id}}
+
{{itemClient.client.id}}
 \ No newline at end of file diff --git a/@salix/crud/src/client/search-panel/search-panel.html b/@salix/crud/src/client/search-panel/search-panel.html index 272bc1618..79d79c98a 100644 --- a/@salix/crud/src/client/search-panel/search-panel.html +++ b/@salix/crud/src/client/search-panel/search-panel.html @@ -1,4 +1,4 @@ -
+
@@ -8,7 +8,7 @@ - + @@ -18,7 +18,9 @@ - + + +
diff --git a/@salix/crud/src/client/search-panel/search-panel.js b/@salix/crud/src/client/search-panel/search-panel.js index 73e2a9e39..5c5ea48a9 100644 --- a/@salix/crud/src/client/search-panel/search-panel.js +++ b/@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 diff --git a/db.json b/db.json index 8cd96700a..178307e40 100644 --- a/db.json +++ b/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}", - "64": "{\"street\":\"Aaa\",\"consignee\":\"aaa\",\"city\":\"aaa\",\"postcode\":\"11111\",\"phone\":\"963242100\",\"mobile\":\"11231241423\",\"id\":64}" + "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,\"enabled\":true}" }, "Country": { "1": "{\"id\":1,\"name\":\"Spain\"}",