This commit is contained in:
Juan Ferrer 2019-02-08 17:49:53 +01:00
commit 20382b2b14
7 changed files with 75 additions and 8 deletions

View File

@ -34,6 +34,7 @@ import './paging/paging';
import './pagination/pagination'; import './pagination/pagination';
import './searchbar/searchbar'; import './searchbar/searchbar';
import './table'; import './table';
import './td-editable';
import './th'; import './th';
import './input-range'; import './input-range';
import './chip'; import './chip';

View File

@ -64,7 +64,7 @@ vn-table {
vn-th { vn-th {
font-weight: bold font-weight: bold
} }
vn-td, vn-th { vn-td, vn-th, vn-td-editable {
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
text-align: left; text-align: left;
@ -95,14 +95,14 @@ vn-table {
&.clickable { &.clickable {
@extend %clickable; @extend %clickable;
} }
&.success, & > vn-td.success { &.success, & > vn-td.success, & > vn-td-editable.success {
background-color: rgba(163, 209, 49, 0.3); background-color: rgba(163, 209, 49, 0.3);
&:hover { &:hover {
background-color: rgba(163, 209, 49, 0.5); background-color: rgba(163, 209, 49, 0.5);
} }
} }
&.warning, & > vn-td.warning { &.warning, & > vn-td.warning, & > vn-td-editable.warning {
background-color: rgba(247, 147, 30, 0.3); background-color: rgba(247, 147, 30, 0.3);
&:hover { &:hover {

View File

@ -0,0 +1,4 @@
<vn-horizontal class="text-container">
<span class="text" ng-transclude="text" vn-one></span>
</vn-horizontal>
<div class="field"></div>

View File

@ -0,0 +1,44 @@
import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';
export default class Controller extends Component {
constructor($element, $scope, $transclude) {
super($element, $scope);
let element = $element[0];
element.tabIndex = 0;
element.addEventListener('focus', () => {
$transclude((tClone, tScope) => {
this.field = tClone;
this.tScope = tScope;
this.element.querySelector('.field').appendChild(this.field[0]);
}, null, 'field');
element.classList.add('selected');
});
element.addEventListener('focusout', event => {
this.lastEvent = event;
let target = event.relatedTarget;
while (target && target.parentNode != element)
target = target.parentNode;
if (!target) {
this.tScope.$destroy();
this.field.remove();
element.classList.remove('selected');
}
});
}
}
Controller.$inject = ['$element', '$scope', '$transclude'];
ngModule.component('vnTdEditable', {
template: require('./index.html'),
controller: Controller,
transclude: {
text: 'text',
field: '?field'
}
});

View File

@ -0,0 +1,16 @@
vn-td-editable {
cursor: pointer;
& > div.text-container{
width: 100%;
}
&.selected {
& > .text-container{
display: none;
}
}
vn-icon {
font-size: 1em;
}
}

View File

@ -27,5 +27,6 @@
"model": "Client", "model": "Client",
"foreignKey": "clientFk" "foreignKey": "clientFk"
} }
} },
"scope" : {"where": {"amount": {"gt": 0}}}
} }

View File

@ -31,11 +31,12 @@
</vn-autocomplete> </vn-autocomplete>
<vn-autocomplete <vn-autocomplete
vn-one vn-one
label="SalesPerson"
field="filter.workerFk" field="filter.workerFk"
url="/claim/api/Workers" url="/client/api/Clients/activeWorkersWithRole"
show-field="firstName" search-function="{firstName: $search}"
value-field="id"> value-field="id"
where="{role: 'employee'}"
label="Sales person">
<tpl-item>{{firstName}} {{name}}</tpl-item> <tpl-item>{{firstName}} {{name}}</tpl-item>
</vn-autocomplete> </vn-autocomplete>
</vn-horizontal> </vn-horizontal>