descriptor quicklings fixed #593

This commit is contained in:
Joan Sanchez 2018-09-04 12:29:22 +02:00
parent eea42ec958
commit afb5bdf4d0
28 changed files with 288 additions and 96 deletions

View File

@ -54,22 +54,29 @@
</vn-icon>
</vn-horizontal>
<vn-horizontal pad-small class="quicklinks">
<vn-button ng-if="$ctrl.quicklinks.btnOne" pad-small-right
<a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
icon="{{::$ctrl.quicklinks.btnOne.icon}}"
ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnOne.state, $ctrl.quicklinks.btnOne.params)">
</vn-button>
<vn-button ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnOne.icon}}">
</vn-icon>
</a>
<a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
icon="{{::$ctrl.quicklinks.btnTwo.icon}}"
ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnTwo.state, $ctrl.quicklinks.btnTwo.params)">
</vn-button>
<vn-button ng-if="$ctrl.quicklinks.btnThree" pad-small-right
ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
</vn-icon>
</a>
<a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
icon="{{::$ctrl.quicklinks.btnThree.icon}}"
ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnThree.state, $ctrl.quicklinks.btnThree.params)">
</vn-button>
ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnThree.icon}}">
</vn-icon>
</a>
</vn-horizontal>
</vn-card>

View File

@ -21,8 +21,7 @@ class Controller {
this._quicklinks = {
btnOne: {
icon: 'icon-ticket',
state: 'ticket.index',
params: {q: `{"clientFk": ${value.id}}`},
state: `ticket.index({q: '{"clientFk": ${value.id}}'})`,
tooltip: 'Client ticket list'
}
};

View File

@ -0,0 +1,8 @@
<div>
<span ng-class="{'mdl-chip--deletable': !$ctrl.disabled}" class="mdl-chip">
<span class="mdl-chip__text" ng-transclude></span>
<button ng-show="!$ctrl.disabled" type="button" class="mdl-chip__action">
<i class="material-icons">cancel</i>
</button>
</span>
</div>

View File

@ -0,0 +1,27 @@
import ngModule from '../../module';
import './style.scss';
export default class Chip {
constructor($element, $scope, $transclude) {
$transclude($scope.$parent, clone => {
angular.element($element[0].querySelector('div')).append(clone);
});
/* this.mdlElement = this.element.querySelector('.mdl-slider');
componentHandler.upgradeElement(this.mdlElement); */
/* this.mdlElement.addEventListener('change', () => {
this._value = this.input.value;
this.$.$applyAsync();
}); */
}
}
Chip.$inject = ['$element', '$scope', '$transclude'];
ngModule.component('vnChip', {
template: require('./index.html'),
controller: Chip,
transclude: true,
bindings: {
disabled: '<?'
}
});

View File

@ -0,0 +1,7 @@
@import 'colors';
vn-chip {
.mdl-chip {
background-color: $main-01
}
}

View File

@ -39,3 +39,4 @@ import './searchbar/searchbar';
import './table';
import './th';
import './input-range';
import './chip';

View File

@ -48,22 +48,30 @@
</vn-auto>
</vn-vertical>
<vn-horizontal pad-small class="quicklinks">
<vn-button ng-if="$ctrl.quicklinks.btnOne" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
icon="{{::$ctrl.quicklinks.btnOne.icon}}"
ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnOne.state, $ctrl.quicklinks.btnOne.params)">
</vn-button>
<vn-button ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
icon="{{::$ctrl.quicklinks.btnTwo.icon}}"
ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnTwo.state, $ctrl.quicklinks.btnTwo.params)">
</vn-button>
<vn-button ng-if="$ctrl.quicklinks.btnThree" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
icon="{{::$ctrl.quicklinks.btnThree.icon}}"
ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnThree.state, $ctrl.quicklinks.btnThree.params)">
</vn-button>
<vn-horizontal pad-small class="quicklinks">
<a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnOne.icon}}">
</vn-icon>
</a>
<a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
</vn-icon>
</a>
<a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnThree.icon}}">
</vn-icon>
</a>
</vn-horizontal>
</vn-card>

View File

@ -27,7 +27,7 @@
<vn-th number>Id</vn-th>
<vn-th>State</vn-th>
<vn-th>Reference</vn-th>
<vn-th>Worker</vn-th>
<vn-th>Client</vn-th>
<vn-th number>In</vn-th>
<vn-th number>Out</vn-th>
<vn-th number>Balance</vn-th>
@ -37,11 +37,14 @@
<vn-tr ng-class="{'warning': $ctrl.isToday(sale.date)}"
ng-repeat="sale in sales" vn-repeat-last on-last="$ctrl.scrollToActive()">
<vn-td>{{::sale.date | date:'dd/MM/yyyy HH:mm' }}</vn-td>
<vn-td ng-click="$ctrl.showDescriptor($event, sale)" pointer number class="link">
<vn-td ng-class="{'link pointer': sale.isTicket}"
ng-click="$ctrl.showDescriptor($event, sale)" number>
{{::sale.origin | dashIfEmpty}}</vn-td>
<vn-td>{{::sale.stateName | dashIfEmpty}}</vn-td>
<vn-td>{{::sale.reference | dashIfEmpty}}</vn-td>
<vn-td >{{sale.name | dashIfEmpty}}</vn-td>
<vn-td ng-class="{'link pointer': sale.isTicket}"
ng-click="$ctrl.showClientDescriptor($event, sale)">
{{sale.name | dashIfEmpty}}</vn-td>
<vn-td number>{{::sale.in | dashIfEmpty}}</vn-td>
<vn-td number>{{::sale.out | dashIfEmpty}}</vn-td>
<vn-td number><span class="balance">{{::sale.balance | dashIfEmpty}}</span></vn-td>
@ -54,4 +57,10 @@
</vn-vertical>
</vn-card>
</vn-vertical>
<vn-ticket-descriptor-popover vn-id="descriptor"></vn-ticket-descriptor-popover>
<vn-ticket-descriptor-popover
vn-id="descriptor">
</vn-ticket-descriptor-popover>
<vn-client-descriptor-popover
vn-id="clientDescriptor">
</vn-client-descriptor-popover>

View File

@ -125,6 +125,16 @@ class Controller {
event.stopImmediatePropagation();
}
showClientDescriptor(event, sale) {
if (!sale.isTicket) return;
this.$scope.clientDescriptor.clientFk = sale.clientFk;
this.$scope.clientDescriptor.parent = event.target;
this.$scope.clientDescriptor.show();
event.preventDefault();
event.stopImmediatePropagation();
}
onDescriptorLoad() {
this.$scope.popover.relocate();
}

View File

@ -4,7 +4,7 @@
<vn-icon icon="chevron_left"></vn-icon>
</a>
<vn-icon icon="icon-ticket"></vn-icon>
<a translate-attr="{title: 'Preview'}" ui-sref="ticket.card.summary">
<a translate-attr="{title: 'Preview'}" ui-sref="ticket.card.summary({id: $ctrl.ticket.id})">
<vn-icon icon="desktop_windows"></vn-icon>
</a>
</vn-horizontal>
@ -14,8 +14,6 @@
value="{{$ctrl.ticket.id}}">
</vn-label-value>
<vn-label-value label="Client"
class="link"
ng-click="$ctrl.showDescriptor($event, $ctrl.ticket.client.id)"
value="{{$ctrl.ticket.client.name}}">
</vn-label-value>
<vn-label-value label="State"
@ -57,7 +55,32 @@
vn-tooltip="Client not checked"
icon="icon-no036"
ng-class="{bright: $ctrl.ticket.client.isTaxDataChecked == false}">
</vn-icon>
</vn-icon>
</vn-horizontal>
<vn-horizontal pad-small class="quicklinks">
<a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnOne.icon}}">
</vn-icon>
</a>
<a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
</vn-icon>
</a>
<a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
<vn-icon
class="mdl-button mdl-js-button mdl-button--colored"
icon="{{::$ctrl.quicklinks.btnThree.icon}}">
</vn-icon>
</a>
</vn-horizontal>
</vn-card>
<vn-client-descriptor-popover vn-id="descriptor"></vn-client-descriptor-popover>

View File

@ -1,25 +1,43 @@
import ngModule from '../module';
class Controller {
constructor($http, $scope) {
constructor($state, $scope) {
this.$scope = $scope;
this.$http = $http;
this.$state = $state;
}
showDescriptor(event, clientFk) {
this.$scope.descriptor.clientFk = clientFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();
event.preventDefault();
event.stopImmediatePropagation();
get ticket() {
return this._ticket;
}
onDescriptorLoad() {
this.$scope.popover.relocate();
set ticket(value) {
this._ticket = value;
if (!value) return;
this._quicklinks = {
btnOne: {
icon: 'person',
state: `client.card.summary({id: ${value.clientFk}})`,
tooltip: 'Client card'
}
};
}
set quicklinks(value = {}) {
this._quicklinks = Object.assign(value, this._quicklinks);
}
get quicklinks() {
return this._quicklinks;
}
quicklinkGo(state, params) {
this.$state.go(state, params);
}
}
Controller.$inject = ['$http', '$scope'];
Controller.$inject = ['$state', '$scope'];
ngModule.component('vnTicketDescriptor', {
template: require('./index.html'),

View File

@ -42,7 +42,7 @@
</vn-horizontal>
<vn-horizontal pad-medium>
tags
<vn-chip onRemove="$ctrl.onRemove($index)">Tag1</vn-chip>
</vn-horizontal>
</vn-vertical>
</vn-card>

View File

@ -210,18 +210,15 @@ vn-main-block {
.quicklinks {
justify-content: center;
align-items: center;
& > a {
background-color: $main-01;
@extend %clickable;
display: flex;
align-items: center;
padding: .5em;
color: white;
text-decoration: none;
& > vn-icon {
font-size: 1.8em;
padding: 0;
}
& > vn-icon i[class="material-icons"] {
line-height: 36px;
}
}
}
@ -287,8 +284,11 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
.counter {
background-color: $main-header;
display: inline-block;
color: $color-white;
text-align: center;
border-radius: 3px;
min-width: 1.5em;
padding: 5px
}

View File

@ -76,4 +76,6 @@
<!-- <vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging> -->
</vn-card>
</vn-vertical>
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
<vn-item-descriptor-popover vn-id="descriptor"
quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>

View File

@ -88,6 +88,16 @@ class Controller {
}
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();

View File

@ -56,5 +56,7 @@
scroll-selector="ui-view">
</vn-pagination>
</vn-card>
</vn-vertical>
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
</vn-vertical>
<vn-item-descriptor-popover vn-id="descriptor"
quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>

View File

@ -32,6 +32,16 @@ class Controller {
}
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();
@ -46,5 +56,8 @@ Controller.$inject = ['$scope', '$stateParams', '$http'];
ngModule.component('vnTicketExpedition', {
template: require('./index.html'),
controller: Controller
controller: Controller,
bindings: {
ticket: '<'
}
});

View File

@ -57,6 +57,7 @@ Risk: Riesgo
Delay: Retraso
Code 100: Código 100
Invoice: Factura
Client card: Ficha del cliente
#sections
List: Listado

View File

@ -47,4 +47,6 @@
</vn-pagination>
</vn-card>
</vn-vertical>
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
<vn-item-descriptor-popover vn-id="descriptor"
quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>

View File

@ -34,6 +34,16 @@ class Controller {
}
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();
@ -48,5 +58,8 @@ Controller.$inject = ['$scope', '$stateParams'];
ngModule.component('vnTicketSaleChecked', {
template: require('./index.html'),
controller: Controller
controller: Controller,
bindings: {
ticket: '<'
}
});

View File

@ -60,5 +60,6 @@
</vn-pagination>
</vn-card>
</vn-vertical>
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
<vn-item-descriptor-popover vn-id="descriptor"
quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>

View File

@ -7,6 +7,16 @@ class Controller {
}
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();

View File

@ -20,25 +20,6 @@ class Controller {
];
}
set ticket(value) {
this._ticket = value;
if (!value) return;
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: 'item.card.diary',
params: {id: value.id, q: `{"warehouseFk": ${value.warehouseFk}}`},
tooltip: 'Item diary'
}
};
}
get ticket() {
return this._ticket;
}
onDataChange() {
this.sales = this.$scope.model.data;
this.getTaxes();
@ -241,6 +222,16 @@ class Controller {
// Item Descriptor
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();

View File

@ -92,4 +92,6 @@
</vn-horizontal>
</vn-vertical>
</vn-card>
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
<vn-item-descriptor-popover vn-id="descriptor"
quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>

View File

@ -7,8 +7,14 @@ class Controller {
this.$http = $http;
}
$onChanges() {
if (!this.ticket) return;
get ticket() {
return this._ticket;
}
set ticket(value) {
this._ticket = value;
if (!value) return;
this.$http.get(`/ticket/api/Tickets/${this.ticket.id}/summary`).then(res => {
if (res && res.data)
@ -26,6 +32,16 @@ class Controller {
}
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();

View File

@ -18,12 +18,12 @@ describe('Ticket', () => {
controller.ticket = {id: 1};
}));
describe('$onChanges()', () => {
describe('ticket()', () => {
it('should perform a GET query and define summary property', () => {
let res = {id: 1, nickname: 'Batman'};
$httpBackend.when('GET', `/ticket/api/Tickets/1/summary`).respond(200, res);
$httpBackend.expect('GET', `/ticket/api/Tickets/1/summary`);
controller.$onChanges();
controller.ticket = {id: 1};
$httpBackend.flush();
expect(controller.summary).toBeDefined();

View File

@ -53,5 +53,7 @@
</vn-pagination>
</vn-card>
</vn-vertical>
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
<vn-item-descriptor-popover vn-id="descriptor"
quicklinks="$ctrl.quicklinks">
</vn-item-descriptor-popover>

View File

@ -47,6 +47,16 @@ class Controller {
}
showDescriptor(event, itemFk) {
this.quicklinks = {
btnThree: {
icon: 'icon-transaction',
state: `item.card.diary({
id: ${itemFk},
q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
})`,
tooltip: 'Item diary'
}
};
this.$scope.descriptor.itemFk = itemFk;
this.$scope.descriptor.parent = event.target;
this.$scope.descriptor.show();