Added filters
gitea/salix/pipeline/head This commit looks good Details

This commit is contained in:
Joan Sanchez 2020-05-29 11:10:58 +02:00
parent 0fe78a2b8f
commit 90ae1562dd
12 changed files with 211 additions and 43 deletions

View File

@ -1,5 +1,5 @@
<section vn-id="contextmenu" style="position: absolute"> <section vn-id="contextmenu" style="position: absolute">
<vn-menu vn-id="menu"> <vn-menu vn-id="menu">
<vn-list ng-transclude="menu"></vn-list> <div ng-transclude="menu"></div>
</vn-menu> </vn-menu>
</section> </section>

View File

@ -1,10 +1,10 @@
import ngModule from '../../module'; import ngModule from '../../module';
export default class Contextmenu { export default class Contextmenu {
constructor($element, $, $window) { constructor($element, $, $transclude) {
this.$element = $element; this.$element = $element;
this.element = $element[0]; this.element = $element[0];
this.$ = $; this.$ = $;
this.$window = $window; this.$transclude = $transclude;
// this.displayMode = 'relative'; // this.displayMode = 'relative';
// Foreach element, apply an addEventListener??? // Foreach element, apply an addEventListener???
@ -27,19 +27,32 @@ export default class Contextmenu {
}); */ }); */
} }
get target() { $onInit() {
return this._target; /* const transcludeElement = this.element.querySelector('vn-menu');
const content = angular.element(transcludeElement);
this.$transclude(($clone, $scope) => {
this.$contentScope = $scope;
// $scope.$target = 'hola??';
const list = angular.element('<vn-list></vn-list>');
list.append($clone);
content.append(list);
}, null, 'menu'); */
} }
set target(value) { get targets() {
this._target = value; return this._targets;
}
set targets(value) {
this._targets = value;
if (!value) return; if (!value) return;
const target = document.querySelector(value);// Find elements for (let selector of value) {
console.log(this.element); const target = document.querySelector(selector);// Find elements
if (!target) continue;
if (!target) return;
target.addEventListener('contextmenu', event => { target.addEventListener('contextmenu', event => {
if (!event.defaultPrevented) if (!event.defaultPrevented)
@ -49,18 +62,105 @@ export default class Contextmenu {
parent.style.top = event.pageY + 'px'; parent.style.top = event.pageY + 'px';
parent.style.left = event.pageX + 'px'; parent.style.left = event.pageX + 'px';
this.eventTarget = event.target;
/* const menu = this.element.querySelector('vn-menu');
const list = document.createElement('vn-list');
menu.append(list);
const transcludeElement = this.element.querySelector('vn-list');
const content = angular.element(transcludeElement);
console.log(transcludeElement);
this.$transclude(($clone, $scope) => {
this.$contentScope = $scope;
$scope.$target = 'hola??';
console.log($clone);
content.append($clone);
}, null, 'menu'); */
this.$.menu.show(parent); this.$.menu.show(parent);
}); });
} }
} }
Contextmenu.$inject = ['$element', '$scope', '$window']; /* const transcludeElement = this.element.querySelector('vn-list');
const content = angular.element(transcludeElement);
console.log(transcludeElement);
this.$transclude(($clone, $scope) => {
this.$contentScope = $scope;
$scope.$target = 'hola??';
content.append($clone);
}); */
filterBySelection() {
// const target = $event.target;
const model = this.model;
const target = this.eventTarget;
console.log(target);
const table = target.closest('.vn-table');
const headerCols = table.querySelectorAll('vn-thead vn-th');
const row = target.closest('.vn-tr');
const col = target.closest('vn-td');
const rowIndex = row.getAttribute('data-index');
const columns = Array.from(row.querySelectorAll('vn-td'));
const fieldIndex = columns.findIndex(column => column == col);
const fieldName = headerCols[fieldIndex].getAttribute('field');
const rowData = model.data[rowIndex];
const filter = {where: {}};
filter['where'][fieldName] = rowData[fieldName];
console.log(filter);
model.addFilter(filter);
}
excludeSelection() {
const model = this.model;
const target = this.eventTarget;
const table = target.closest('.vn-table');
const headerCols = table.querySelectorAll('vn-thead vn-th');
const row = target.closest('.vn-tr');
const col = target.closest('vn-td');
const rowIndex = row.getAttribute('data-index');
const columns = Array.from(row.querySelectorAll('vn-td'));
const fieldIndex = columns.findIndex(column => column == col);
const fieldName = headerCols[fieldIndex].getAttribute('field');
const rowData = model.data[rowIndex];
const filter = {where: {}};
filter['where'][fieldName] = {neq: rowData[fieldName]};
console.log(filter);
model.addFilter(filter);
}
removeFilter() {
this.model.removeFilter();
}
}
Contextmenu.$inject = ['$element', '$scope', '$transclude'];
ngModule.vnComponent('vnContextmenu', { ngModule.vnComponent('vnContextmenu', {
controller: Contextmenu, controller: Contextmenu,
template: require('./index.html'), template: require('./index.html'),
bindings: { bindings: {
target: '@?' targets: '<?',
model: '<?'
}, },
transclude: { transclude: {
menu: '?slotMenu' menu: '?slotMenu'

View File

@ -16,7 +16,7 @@
<vn-item <vn-item
ng-click="consumerReportDialog.show()" ng-click="consumerReportDialog.show()"
translate> translate>
Send consumer report View consumer report
</vn-item> </vn-item>
</slot-menu> </slot-menu>
<slot-body> <slot-body>

View File

@ -1,4 +1,4 @@
Simple ticket: Ticket simple Simple ticket: Ticket simple
Send consumer report: Enviar informe de consumo View consumer report: Ver informe de consumo
From date: Fecha desde From date: Fecha desde
To date: Fecha hasta To date: Fecha hasta

View File

@ -19,10 +19,6 @@ export default class Controller extends Section {
this.$state.go(`ticket.index`, this.$state.go(`ticket.index`,
{q: JSON.stringify({clientFk: client.id})}); {q: JSON.stringify({clientFk: client.id})});
} }
filterBySelection() {
console.log('Filtro por seleccion');
}
} }
ngModule.component('vnClientIndex', { ngModule.component('vnClientIndex', {

View File

@ -56,7 +56,7 @@
<div ng-transclude="btnTwo"> <div ng-transclude="btnTwo">
<vn-quick-link <vn-quick-link
tooltip="Invoice ticket list" tooltip="Invoice ticket list"
state="['ticket.card.summary', {id: $ctrl.invoiceOut.ref}]" state="['ticket.index', {q: $ctrl.filter}]"
icon="icon-ticket"> icon="icon-ticket">
</vn-quick-link> </vn-quick-link>
</div> </div>

View File

@ -22,6 +22,13 @@ class Controller extends Descriptor {
.then(() => this.vnApp.showSuccess(this.$t('InvoiceOut booked'))); .then(() => this.vnApp.showSuccess(this.$t('InvoiceOut booked')));
} }
get filter() {
if (this.invoiceOut)
return JSON.stringify({refFk: this.invoiceOut.ref});
return null;
}
loadData() { loadData() {
const filter = { const filter = {
include: [ include: [

View File

@ -123,12 +123,3 @@
item="$ctrl.itemSelected"> item="$ctrl.itemSelected">
</vn-item-summary> </vn-item-summary>
</vn-popup> </vn-popup>
<vn-contextmenu target="vn-data-viewer">
<slot-menu>
<vn-item ng-click="$ctrl.filterBySelection()">Filter by selection</vn-item>
<vn-item>Exclude selection</vn-item>
<vn-item>Remove filter by selection</vn-item>
<vn-item>Order DESC</vn-item>
<vn-item>Order ASC</vn-item>
</slot-menu>
</vn-contextmenu>

View File

@ -199,9 +199,11 @@ module.exports = Self => {
t.routeFk, t.routeFk,
t.warehouseFk, t.warehouseFk,
t.clientFk, t.clientFk,
a.provinceFk,
p.name AS province, p.name AS province,
w.name AS warehouse, w.name AS warehouse,
am.name AS agencyMode, am.name AS agencyMode,
am.id AS agencyModeFk,
st.name AS state, st.name AS state,
wk.lastName AS salesPerson, wk.lastName AS salesPerson,
ts.stateFk as stateFk, ts.stateFk as stateFk,

View File

@ -15,13 +15,13 @@
</vn-th> </vn-th>
<vn-th></vn-th> <vn-th></vn-th>
<vn-th field="id" number>Id</vn-th> <vn-th field="id" number>Id</vn-th>
<vn-th field="salesPerson" class="expendable">Salesperson</vn-th> <vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
<vn-th field="shipped">Date</vn-th> <vn-th field="shipped">Date</vn-th>
<vn-th>Hour</vn-th> <vn-th>Hour</vn-th>
<vn-th field="nickname">Alias</vn-th> <vn-th field="nickname">Alias</vn-th>
<vn-th field="province" class="expendable">Province</vn-th> <vn-th field="provinceFk" class="expendable">Province</vn-th>
<vn-th field="state" >State</vn-th> <vn-th field="stateFk" >State</vn-th>
<vn-th field="agencyMode">Agency</vn-th> <vn-th field="agencyModeFk">Agency</vn-th>
<vn-th field="warehouse">Warehouse</vn-th> <vn-th field="warehouse">Warehouse</vn-th>
<vn-th field="refFk" class="expendable">Invoice</vn-th> <vn-th field="refFk" class="expendable">Invoice</vn-th>
<vn-th field="zoneHour" shrink>Closure</vn-th> <vn-th field="zoneHour" shrink>Closure</vn-th>
@ -30,7 +30,7 @@
</vn-tr> </vn-tr>
</vn-thead> </vn-thead>
<vn-tbody> <vn-tbody>
<a ng-repeat="ticket in model.data" <a ng-repeat="ticket in model.data" data-index="{{$index}}"
class="clickable vn-tr search-result" class="clickable vn-tr search-result"
ui-sref="ticket.card.summary({id: {{::ticket.id}}})"> ui-sref="ticket.card.summary({id: {{::ticket.id}}})">
<vn-td shrink> <vn-td shrink>
@ -151,3 +151,17 @@
<vn-client-balance-create <vn-client-balance-create
vn-id="balanceCreateDialog"> vn-id="balanceCreateDialog">
</vn-client-balance-create> </vn-client-balance-create>
<vn-contextmenu vn-id="contextmenu" targets="['vn-data-viewer']" model="model">
<slot-menu>
<vn-item ng-click="$ctrl.filterBySelection({event: $parent.$ctrl.$eventTarget})" translate>Filter by selection</vn-item>
<vn-item ng-click="$ctrl.excludeSelection($event, $parent.$ctrl.eventTarget)" translate>Exclude selection</vn-item>
<vn-item ng-click="$ctrl.removeFilter()" translate>Remove filter</vn-item>
<vn-item ng-click="contextmenu.filterBySelection()" translate style="color:green">Filter by selection 2</vn-item>
<vn-item ng-click="contextmenu.excludeSelection()" translate style="color:green">Exclude selection 2</vn-item>
<vn-item ng-click="contextmenu.removeFilter()" translate style="color:green">Remove filter 2</vn-item>
<!-- <p>Quicklinks</p>
<vn-item>Order DESC</vn-item>
<vn-item>Order ASC</vn-item> -->
</slot-menu>
</vn-contextmenu>

View File

@ -92,6 +92,61 @@ export default class Controller extends Section {
this.selectedTicket = ticket; this.selectedTicket = ticket;
this.$.summary.show(); this.$.summary.show();
} }
filterBySelection(target) {
// const target = $event.target;
const model = this.$.model;
console.log(target);
const table = target.closest('.vn-table');
const headerCols = table.querySelectorAll('vn-thead vn-th');
const row = target.closest('.vn-tr');
const col = target.closest('vn-td');
const rowIndex = row.getAttribute('data-index');
const columns = Array.from(row.querySelectorAll('vn-td'));
const fieldIndex = columns.findIndex(column => column == col);
const fieldName = headerCols[fieldIndex].getAttribute('field');
const rowData = model.data[rowIndex];
const filter = {where: {}};
filter['where'][fieldName] = rowData[fieldName];
console.log(filter);
model.addFilter(filter);
}
excludeSelection($event, target) {
const model = this.$.model;
const table = target.closest('.vn-table');
const headerCols = table.querySelectorAll('vn-thead vn-th');
const row = target.closest('.vn-tr');
const col = target.closest('vn-td');
const rowIndex = row.getAttribute('data-index');
const columns = Array.from(row.querySelectorAll('vn-td'));
const fieldIndex = columns.findIndex(column => column == col);
const fieldName = headerCols[fieldIndex].getAttribute('field');
const rowData = model.data[rowIndex];
const filter = {where: {}};
filter['where'][fieldName] = {neq: rowData[fieldName]};
console.log(filter);
model.addFilter(filter);
}
removeFilter() {
this.$.model.removeFilter();
}
} }
ngModule.component('vnTicketIndex', { ngModule.component('vnTicketIndex', {

View File

@ -4,3 +4,6 @@ Not available: No disponible
Payment on account...: Pago a cuenta... Payment on account...: Pago a cuenta...
Closure: Cierre Closure: Cierre
You cannot make a payment on account from multiple clients: No puedes realizar un pago a cuenta de clientes diferentes You cannot make a payment on account from multiple clients: No puedes realizar un pago a cuenta de clientes diferentes
Filter by selection: Filtro por selección
Exclude selection: Excluir selección
Remove filter: Eliminar filtro