Merge branch 'dev' of ssh://git.verdnatura.es:/var/lib/git/salix into dev

This commit is contained in:
Dani Herrero 2017-05-25 07:21:43 +02:00
commit 3c54a222b9
4 changed files with 53 additions and 9 deletions

View File

@ -27,7 +27,11 @@
url="/client/api/Employees" url="/client/api/Employees"
show-field="name" show-field="name"
value-field="id" value-field="id"
select-fields="surname"
label="Comercial"> label="Comercial">
<item-template>
{{::i.name}} {{::i.surname}}
</item-template>
</vn-autocomplete> </vn-autocomplete>
<vn-autocomplete vn-one <vn-autocomplete vn-one
initial-value="$ctrl.client.contactChannel" initial-value="$ctrl.client.contactChannel"

View File

@ -2,8 +2,6 @@ import {module} from '../module';
import './style.css'; import './style.css';
import './item-client'; import './item-client';
export const NAME = 'vnClientIndex'; module.component('vnClientIndex', {
export const COMPONENT = {
template: require('./index.html') template: require('./index.html')
}; });
module.component(NAME, COMPONENT);

View File

@ -6,7 +6,7 @@ import './style.scss';
* Combobox like component with search and partial data loading features. * Combobox like component with search and partial data loading features.
*/ */
export default class Autocomplete extends Component { export default class Autocomplete extends Component {
constructor($element, $scope, $http, vnPopover) { constructor($element, $scope, $http, vnPopover, $transclude) {
super($element); super($element);
this.input = $element[0].querySelector('input'); this.input = $element[0].querySelector('input');
this.item = null; this.item = null;
@ -23,12 +23,15 @@ export default class Autocomplete extends Component {
this.$http = $http; this.$http = $http;
this.$scope = $scope; this.$scope = $scope;
this.vnPopover = vnPopover; this.vnPopover = vnPopover;
this.$transclude = $transclude;
this.scopes = null;
Object.assign(this, { Object.assign(this, {
maxRows: 10, maxRows: 10,
requestDelay: 350, requestDelay: 350,
showField: 'name', showField: 'name',
valueField: 'id' valueField: 'id',
itemAs: 'i'
}); });
componentHandler.upgradeElement($element[0].firstChild); componentHandler.upgradeElement($element[0].firstChild);
@ -149,6 +152,11 @@ export default class Autocomplete extends Component {
if (this.hasFocus) if (this.hasFocus)
this.showPopover(); this.showPopover();
} }
destroyScopes() {
if (this.scopes)
for (let scope of this.scopes)
scope.$destroy();
}
showPopover() { showPopover() {
let data = this.displayData; let data = this.displayData;
@ -156,11 +164,25 @@ export default class Autocomplete extends Component {
return; return;
let fragment = this.document.createDocumentFragment(); let fragment = this.document.createDocumentFragment();
this.destroyScopes();
this.scopes = [];
let hasTemplate = this.$transclude.isSlotFilled('itemTemplate');
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let li = this.document.createElement('li'); let li = this.document.createElement('li');
li.appendChild(this.document.createTextNode(data[i][this.showField]));
fragment.appendChild(li); fragment.appendChild(li);
if (hasTemplate) {
this.$transclude((clone, scope) => {
scope[this.itemAs] = data[i];
li.appendChild(clone[0]);
this.scopes[i] = scope;
}, null, 'itemTemplate');
} else {
let text = this.document.createTextNode(data[i][this.showField]);
li.appendChild(text);
}
} }
if (this.moreData) { if (this.moreData) {
@ -189,6 +211,7 @@ export default class Autocomplete extends Component {
if (!this.popover) return; if (!this.popover) return;
this.activeOption = -1; this.activeOption = -1;
this.vnPopover.hide(); this.vnPopover.hide();
this.destroyScopes();
this.popover = null; this.popover = null;
} }
selectPopoverOption(index) { selectPopoverOption(index) {
@ -200,9 +223,17 @@ export default class Autocomplete extends Component {
this.requestData(this.lastRequest, true); this.requestData(this.lastRequest, true);
} }
onPopoverClick(event) { onPopoverClick(event) {
let target = event.target;
let childs = this.popover.childNodes; let childs = this.popover.childNodes;
if (target === this.popover)
return;
while (target.parentNode !== this.popover)
target = target.parentNode;
for (let i = 0; i < childs.length; i++) for (let i = 0; i < childs.length; i++)
if (childs[i] === event.target) { if (childs[i] === target) {
this.selectPopoverOption(i); this.selectPopoverOption(i);
break; break;
} }
@ -362,8 +393,11 @@ export default class Autocomplete extends Component {
this.item = item; this.item = item;
this.mdlUpdate(); this.mdlUpdate();
} }
$onDestroy() {
this.destroyScopes();
}
} }
Autocomplete.$inject = ['$element', '$scope', '$http', 'vnPopover']; Autocomplete.$inject = ['$element', '$scope', '$http', 'vnPopover', '$transclude'];
module.component('vnAutocomplete', { module.component('vnAutocomplete', {
template: require('./index.html'), template: require('./index.html'),
@ -373,8 +407,12 @@ module.component('vnAutocomplete', {
valueField: '@?', valueField: '@?',
selectFields: '@?', selectFields: '@?',
initialData: '<?', initialData: '<?',
itemAs: '@?',
field: '=', field: '=',
label: '@' label: '@'
}, },
transclude: {
itemTemplate: '?itemTemplate'
},
controller: Autocomplete controller: Autocomplete
}); });

View File

@ -11,6 +11,10 @@
"name": { "name": {
"type": "string", "type": "string",
"required": true "required": true
},
"surname": {
"type": "string",
"required": true
} }
}, },
"relations": { "relations": {