verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

Popover como directiva

This commit is contained in:
Juan Ferrer Toribio 2017-01-12 13:15:46 +01:00
parent a52ffbc9a3
commit 728970f403
27 changed files with 164 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
@salix/app/src/components/searchbar/searchbar.html
View File

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

29
@salix/app/src/components/searchbar/searchbar.js
View File

@ -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();
};
}

4
@salix/app/src/run.js
View File

@ -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);

4
@salix/app/src/styles/layout.css
View File

@ -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] {

1
@salix/core/src/check/check.js
View File

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

1
@salix/core/src/combo/combo.js
View File

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

8
@salix/core/src/core.js
View File

@ -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';

1
@salix/core/src/date-picker/date-picker.js
View File

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

1
@salix/core/src/password/password.js
View File

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

156
@salix/core/src/popover/popover.js
View File

@ -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;});

5
@salix/core/src/popover/popover.mdl.html
View File

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

12
@salix/core/src/popover/popover.mdl.js
View File

@ -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);

3
@salix/core/src/popover/style.css
View File

@ -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;

2
@salix/core/src/subtitle/subtitle.html
View File

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

5
@salix/core/src/subtitle/subtitle.js
View File

@ -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);

2
@salix/core/src/subtitle/template.html Normal file
View File

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

1
@salix/core/src/switch/switch.js
View File

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

1
@salix/core/src/textfield/textfield.js
View File

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

2
@salix/core/src/title/template.html Normal file
View File

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

2
@salix/core/src/title/title.html
View File

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

9
@salix/core/src/title/title.js
View File

@ -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);

14
@salix/crud/src/client/index/index.html
View File

@ -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>
<vn-searchbar vn-auto></vn-searchbar>
<vn-horizontal pad-medium>
<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

29
@salix/crud/src/client/index/index.js
View File

@ -8,25 +8,20 @@ export const COMPONENT = {
controllerAs: 'search',
controller: function($http) {
this.clients = [];
$http.get('/client/api/Clients').then(
json => {
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'];

2
@salix/crud/src/client/index/item-client.html
View File

@ -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>

8
@salix/crud/src/client/search-panel/search-panel.html
View File

@ -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>

2
@salix/crud/src/client/search-panel/search-panel.js
View File

@ -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

6
db.json
View File

@ -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\"}",