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

refactor(smart-table): style changes and added smart-table to sales monitor

This commit is contained in:
Joan Sanchez 2021-11-11 17:18:44 +01:00
parent f99e0c5648
commit 04da06d778
9 changed files with 346 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
front/core/components/smart-table/index.html
View File

@ -7,15 +7,12 @@
vn-tooltip="Shown columns"> vn-tooltip="Shown columns">
</vn-button> </vn-button>
<div ng-transclude="actions"></div> <!-- transcluded actions --> <div ng-transclude="actions"></div> <!-- transcluded actions -->
<div class="totalRows" ng-if="$ctrl.model.data">
<
<span translate>Showing</span>
{{model.data.length}}
<span translate>results</span>
>
</div>
</div> </div>
<div class="actions-right"> <div class="actions-right">
<div class="totalRows" ng-if="$ctrl.model.data">
{{model.data.length}}
<span translate>results</span>
</div>
<vn-button icon="search" <vn-button icon="search"
ng-if="$ctrl.options.activeButtons.search" ng-if="$ctrl.options.activeButtons.search"
ng-click="$ctrl.displaySearch()" ng-click="$ctrl.displaySearch()"
@ -74,8 +71,21 @@
</vn-crud-model> </vn-crud-model>
<vn-popover vn-id="smart-table-columns" message="Fields to show"> <vn-popover vn-id="smart-table-columns" message="Fields to show">
<tpl-body> <tpl-body>
<div class="smart-table-columns vn-pa-md vn-w-xs"> <div class="smart-table-columns vn-pa-md vn-w-sm">
<h6 class="vn-mb-sm" translate>Check the columns you want to see</h6> <vn-horizontal>
<h6 translate style="margin:0">Shown columns</h6>
<vn-icon
vn-none
icon="info"
color-marginal
vn-tooltip="Check the columns you want to see"/>
</vn-horizontal>
<div class="vn-mb-md">
<vn-check label="Tick all"
ng-model="$ctrl.checkAll">
</vn-check>
</div>
<vn-horizontal class="vn-mb-md"> <vn-horizontal class="vn-mb-md">
<vn-check ng-repeat="column in $ctrl.columns" <vn-check ng-repeat="column in $ctrl.columns"
label="{{column.caption}}" label="{{column.caption}}"

13
front/core/components/smart-table/index.js
View File

@ -97,6 +97,19 @@ export default class SmartTable extends Component {
return null; return null;
} }
get checkAll() {
return this._checkAll;
}
set checkAll(value) {
this._checkAll = value;
if (value !== undefined) {
const shownColumns = this.viewConfig[0].configuration;
for (let param in shownColumns)
shownColumns[param] = value;
}
}
transclude() { transclude() {
const slotTable = this.element.querySelector('#table'); const slotTable = this.element.querySelector('#table');
this.$transclude(($clone, $scope) => { this.$transclude(($clone, $scope) => {

1
front/core/components/smart-table/locale/es.yml
View File

@ -6,3 +6,4 @@ Shown columns: Columnas visibles
Check the columns you want to see: Marca las columnas que quieres ver Check the columns you want to see: Marca las columnas que quieres ver
Showing: Mostrando Showing: Mostrando
results: resultados results: resultados
Tick all: Marcar todas

62
front/core/components/smart-table/style.scss
View File

@ -5,6 +5,51 @@ smart-table {
th[field] { th[field] {
overflow: visible; overflow: visible;
cursor: pointer; cursor: pointer;
align-items: center;
& > * {
display: flex
}
}
th[field][number] {
& > :before {
display: flex;
font-family: 'Material Icons';
content: 'arrow_downward';
color: $color-spacer;
margin: 2px 2px 0 0;
opacity: 0
}
&.asc > :before, &.desc > :before {
color: $color-font;
opacity: 1;
}
&.asc > :before {
content: 'arrow_upward';
}
&.desc > :before {
content: 'arrow_downward';
}
&:hover > :before {
opacity: 1;
}
}
th[field]:not([number]) {
& > :after {
display: flex;
font-family: 'Material Icons';
content: 'arrow_downward';
color: $color-spacer;
margin: 2px 0 0 2px;
opacity: 0
}
&.asc > :after, &.desc > :after { &.asc > :after, &.desc > :after {
color: $color-font; color: $color-font;
@ -12,23 +57,13 @@ smart-table {
} }
&.asc > :after { &.asc > :after {
content: 'arrow_drop_up'; content: 'arrow_upward';
} }
&.desc > :after { &.desc > :after {
content: 'arrow_drop_down'; content: 'arrow_downward';
} }
& > :after {
font-family: 'Material Icons';
content: 'arrow_drop_down';
position: absolute;
color: $color-spacer;
font-size: 1.5em;
margin-top: -2px;
opacity: 0
}
&:hover > :after { &:hover > :after {
opacity: 1; opacity: 1;
} }
@ -81,6 +116,7 @@ smart-table {
#table { #table {
overflow-x: auto; overflow-x: auto;
margin-top: 15px
} }
vn-tbody a[ng-repeat].vn-tr:focus { vn-tbody a[ng-repeat].vn-tr:focus {
@ -108,6 +144,6 @@ smart-table {
vn-check { vn-check {
flex: initial; flex: initial;
width: 50% width: 33%
} }
} }

9
front/core/components/smart-table/table.scss
View File

@ -35,7 +35,7 @@ smart-table table {
text-align: right; text-align: right;
width: 96px; width: 96px;
} }
&[center] { &[centered] {
text-align: center; text-align: center;
} }
&[shrink] { &[shrink] {
@ -54,6 +54,13 @@ smart-table table {
max-width: 400px; max-width: 400px;
min-width: 0; min-width: 0;
} }
&[actions] {
width: 1px;
& > * {
vertical-align: middle;
}
}
vn-icon.bright, i.bright { vn-icon.bright, i.bright {
color: #f7931e; color: #f7931e;
} }

52
modules/entry/front/latest-buys/index.html
View File

@ -36,13 +36,13 @@
<th field="id"> <th field="id">
<span translate>Identifier</span> <span translate>Identifier</span>
</th> </th>
<th field="packing"> <th field="packing" number>
<span translate>Packing</span> <span translate>Packing</span>
</th> </th>
<th field="grouping"> <th field="grouping" number>
<span translate>Grouping</span> <span translate>Grouping</span>
</th> </th>
<th field="quantity"> <th field="quantity" number>
<span translate>Quantity</span> <span translate>Quantity</span>
</th> </th>
<th field="description"> <th field="description">
@ -75,29 +75,29 @@
<th field="entryFk"> <th field="entryFk">
<span translate>Entry</span> <span translate>Entry</span>
</th> </th>
<th field="buyingValue"> <th field="buyingValue" number>
<span translate>Buying value</span> <span translate>Buying value</span>
</th> </th>
<th field="freightValue"> <th field="freightValue" number>
<span translate>Freight value</span> <span translate>Freight value</span>
</th> </th>
<th field="comissionValue"> <th field="comissionValue" number>
<span translate>Commission value</span> <span translate>Commission value</span>
</th> </th>
<th field="packageValue"> <th field="packageValue" number>
<span translate>Package value</span> <span translate>Package value</span>
</th> </th>
<th field="isIgnored"> <th field="isIgnored">
<span translate>Is ignored</span> <span translate>Is ignored</span>
</th> </th>
<th field="price2"> <th field="price2" number>
<span translate>Grouping price</span> <span translate>Grouping</span>
</th> </th>
<th field="price3"> <th field="price3" number>
<span translate>Packing price</span> <span translate>Packing</span>
</th> </th>
<th field="minPrice"> <th field="minPrice" number>
<span translate>Min price</span> <span translate>Min</span>
</th> </th>
<th field="ektFk"> <th field="ektFk">
<span translate>Ekt</span> <span translate>Ekt</span>
@ -106,10 +106,10 @@
<span translate>Weight</span> <span translate>Weight</span>
</th> </th>
<th field="packageFk"> <th field="packageFk">
<span translate>Package name</span> <span translate>Package</span>
</th> </th>
<th field="packingOut"> <th field="packingOut">
<span translate>Packing out</span> <span translate>Package out</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -139,21 +139,21 @@
{{::buy.itemFk | zeroFill:6}} {{::buy.itemFk | zeroFill:6}}
</span> </span>
</td> </td>
<td> <td number>
<vn-chip class="transparent" translate-attr="buy.groupingMode == 2 ? {title: 'Minimun amount'} : {title: 'Packing'}" ng-class="{'message': buy.groupingMode == 2}"> <vn-chip class="transparent" translate-attr="buy.groupingMode == 2 ? {title: 'Minimun amount'} : {title: 'Packing'}" ng-class="{'message': buy.groupingMode == 2}">
<span translate>{{::buy.packing | dashIfEmpty}}</span> <span translate>{{::buy.packing | dashIfEmpty}}</span>
</vn-chip> </vn-chip>
</td> </td>
<td> <td number>
<vn-chip class="transparent" translate-attr="buy.groupingMode == 1 ? {title: 'Minimun amount'} : {title: 'Grouping'}" ng-class="{'message': buy.groupingMode == 1}"> <vn-chip class="transparent" translate-attr="buy.groupingMode == 1 ? {title: 'Minimun amount'} : {title: 'Grouping'}" ng-class="{'message': buy.groupingMode == 1}">
<span translate>{{::buy.grouping | dashIfEmpty}}</span> <span translate>{{::buy.grouping | dashIfEmpty}}</span>
</vn-chip> </vn-chip>
</td> </td>
<td>{{::buy.quantity}}</td> <td number>{{::buy.quantity}}</td>
<td vn-two title="{{::buy.description}}"> <td vn-two title="{{::buy.description}}">
{{::buy.description | dashIfEmpty}} {{::buy.description | dashIfEmpty}}
</td> </td>
<td>{{::buy.size}}</td> <td number>{{::buy.size}}</td>
<td vn-fetched-tags> <td vn-fetched-tags>
<div> <div>
<vn-one title="{{::buy.name}}">{{::buy.name}}</vn-one> <vn-one title="{{::buy.name}}">{{::buy.name}}</vn-one>
@ -189,19 +189,19 @@
{{::buy.entryFk}} {{::buy.entryFk}}
</span> </span>
</td> </td>
<td>{{::buy.buyingValue | currency: 'EUR':2}}</td> <td number>{{::buy.buyingValue | currency: 'EUR':2}}</td>
<td>{{::buy.freightValue | currency: 'EUR':2}}</td> <td number>{{::buy.freightValue | currency: 'EUR':2}}</td>
<td>{{::buy.comissionValue | currency: 'EUR':2}}</td> <td number>{{::buy.comissionValue | currency: 'EUR':2}}</td>
<td>{{::buy.packageValue | currency: 'EUR':2}}</td> <td number>{{::buy.packageValue | currency: 'EUR':2}}</td>
<td> <td>
<vn-check <vn-check
disabled="true" disabled="true"
ng-model="::buy.isIgnored"> ng-model="::buy.isIgnored">
</vn-check> </vn-check>
</td> </td>
<td>{{::buy.price2 | currency: 'EUR':2}}</td> <td number>{{::buy.price2 | currency: 'EUR':2}}</td>
<td>{{::buy.price3 | currency: 'EUR':2}}</td> <td number>{{::buy.price3 | currency: 'EUR':2}}</td>
<td>{{::buy.minPrice | currency: 'EUR':2}}</td> <td number>{{::buy.minPrice | currency: 'EUR':2}}</td>
<td>{{::buy.ektFk | dashIfEmpty}}</td> <td>{{::buy.ektFk | dashIfEmpty}}</td>
<td>{{::buy.weight}}</td> <td>{{::buy.weight}}</td>
<td>{{::buy.packageFk}}</td> <td>{{::buy.packageFk}}</td>

2
modules/entry/front/latest-buys/locale/es.yml
View File

@ -14,4 +14,4 @@ Field to edit: Campo a editar
PackageName: Cubo PackageName: Cubo
Edit: Editar Edit: Editar
buy(s): compra(s) buy(s): compra(s)
PackingOut: Packing envíos Package out: Embalaje envíos

137
modules/monitor/front/index/tickets/index.html
View File

@ -34,28 +34,62 @@
</vn-none> </vn-none>
</vn-horizontal> </vn-horizontal>
<vn-card> <vn-card>
<vn-table model="model"> <smart-table
<vn-thead> model="model"
<vn-tr> view-config-id="ticketsMonitor"
<vn-th field="totalProblems" menu-enabled="false">Problems</vn-th> options="$ctrl.smartTableOptions"
<vn-th field="nickname">Client</vn-th> expr-builder="$ctrl.exprBuilder(param, value)">
<vn-th field="salesPersonFk" class="expendable" shrink>Salesperson</vn-th> <slot-table>
<vn-th field="shipped" shrink-date>Date</vn-th> <table>
<vn-th field="preparationHour" filter-enabled="false">Prep.</vn-th> <thead>
<vn-th field="theoreticalHour">Theoretical</vn-th> <tr>
<vn-th field="practicalHour">Practical</vn-th> <th field="totalProblems" menu-enabled="false">
<vn-th field="provinceFk" class="expendable">Province</vn-th> <span translate>Problems</span>
<vn-th field="stateFk">State</vn-th> </th>
<vn-th field="zoneFk">Zone</vn-th> <th field="id">
<vn-th field="totalWithVat" shrink>Total</vn-th> <span translate>Identifier</span>
<vn-th></vn-th> </th>
</vn-tr> <th field="nickname">
</vn-thead> <span translate>Client</span>
<vn-tbody> </th>
<a ng-repeat="ticket in model.data" <th field="salesPersonFk">
class="clickable vn-tr search-result" <span translate>Salesperson</span>
ui-sref="ticket.card.summary({id: {{::ticket.id}}})" target="_blank"> </th>
<vn-td expand> <th field="shipped" shrink-date>
<span translate>Date</span>
</th>
<th field="preparationHour" filter-enabled="false">
<span translate>Preparation</span>
</th>
<th field="theoreticalHour">
<span translate>Theoretical</span>
</th>
<th field="practicalHour">
<span translate>Practical</span>
</th>
<th field="provinceFk">
<span translate>Province</span>
</th>
<th field="stateFk">
<span translate>State</span>
</th>
<th field="zoneFk">
<span translate>Zone</span>
</th>
<th field="totalWithVat" shrink>
<span translate>Total</span>
</th>
<th shrink></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ticket in model.data"
vn-anchor="::{
state: 'ticket.card.summary',
params: {id: ticket.id},
target: '_blank'
}">
<td>
<vn-icon <vn-icon
ng-show="::ticket.isTaxDataChecked === 0" ng-show="::ticket.isTaxDataChecked === 0"
translate-attr="{title: 'No verified data'}" translate-attr="{title: 'No verified data'}"
@ -93,33 +127,40 @@
class="bright" class="bright"
icon="icon-components"> icon="icon-components">
</vn-icon> </vn-icon>
</vn-td> </td>
<vn-td name="nickname"> <td>
<span
vn-click-stop="ticketDescriptor.show($event, ticket.id)"
class="link">
{{::ticket.id}}
</span>
</td>
<td name="nickname">
<span <span
title="{{::ticket.nickname}}" title="{{::ticket.nickname}}"
vn-click-stop="clientDescriptor.show($event, ticket.clientFk)" vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
class="link"> class="link">
{{::ticket.nickname}} {{::ticket.nickname}}
</span> </span>
</vn-td> </td>
<vn-td class="expendable" shrink> <td>
<span <span
title="{{::ticket.userName}}" title="{{::ticket.userName}}"
vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)" vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
class="link"> class="link">
{{::ticket.userName | dashIfEmpty}} {{::ticket.userName | dashIfEmpty}}
</span> </span>
</vn-td> </td>
<vn-td shrink-date> <td>
<span class="chip {{::$ctrl.compareDate(ticket.shipped)}}"> <span class="chip {{::$ctrl.compareDate(ticket.shipped)}}">
{{::ticket.shipped | date: 'dd/MM/yyyy'}} {{::ticket.shipped | date: 'dd/MM/yyyy'}}
</span> </span>
</vn-td> </td>
<vn-td shrink>{{::ticket.shipped | date: 'HH:mm'}}</vn-td> <td centered>{{::ticket.shipped | date: 'HH:mm'}}</td>
<vn-td shrink>{{::ticket.zoneLanding | date: 'HH:mm'}}</vn-td> <td centered>{{::ticket.zoneLanding | date: 'HH:mm'}}</td>
<vn-td shrink>{{::ticket.practicalHour | date: 'HH:mm'}}</vn-td> <td centered>{{::ticket.practicalHour | date: 'HH:mm'}}</td>
<vn-td class="expendable">{{::ticket.province}}</vn-td> <td>{{::ticket.province}}</td>
<vn-td class="expendable"> <td>
<span <span
ng-show="::ticket.refFk" ng-show="::ticket.refFk"
title="{{::ticket.refFk}}" title="{{::ticket.refFk}}"
@ -132,21 +173,21 @@
class="chip {{::$ctrl.stateColor(ticket)}}"> class="chip {{::$ctrl.stateColor(ticket)}}">
{{::ticket.state}} {{::ticket.state}}
</span> </span>
</vn-td> </td>
<vn-td> <td>
<span <span
title="{{::ticket.zoneName}}" title="{{::ticket.zoneName}}"
vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)" vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
class="link"> class="link">
{{::ticket.zoneName | dashIfEmpty}} {{::ticket.zoneName | dashIfEmpty}}
</span> </span>
</vn-td> </td>
<vn-td shrink> <td number>
<span class="chip {{::$ctrl.totalPriceColor(ticket)}}"> <span class="chip {{::$ctrl.totalPriceColor(ticket)}}">
{{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}} {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
</span> </span>
</vn-td> </td>
<vn-td actions> <td actions>
<vn-icon-button <vn-icon-button
vn-anchor="::{ vn-anchor="::{
state: 'ticket.card.sale', state: 'ticket.card.sale',
@ -161,14 +202,12 @@
vn-tooltip="Preview" vn-tooltip="Preview"
icon="preview"> icon="preview">
</vn-icon-button> </vn-icon-button>
</vn-td> </td>
</a> </tr>
</vn-tbody> </tbody>
</vn-table> </table>
<vn-pagination </slot-table>
model="model" </smart-table>
class="vn-pt-xs">
</vn-pagination>
</vn-card> </vn-card>
<vn-worker-descriptor-popover <vn-worker-descriptor-popover
vn-id="workerDescriptor"> vn-id="workerDescriptor">
@ -185,7 +224,7 @@
model="model"> model="model">
</vn-ticket-summary> </vn-ticket-summary>
</vn-popup> </vn-popup>
<vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-tickets vn-table']" model="model" <vn-contextmenu vn-id="contextmenu" targets="['vn-monitor-sales-tickets smart-tablea']" model="model"
expr-builder="$ctrl.exprBuilder(param, value)"> expr-builder="$ctrl.exprBuilder(param, value)">
<slot-menu> <slot-menu>
<vn-item translate <vn-item translate

55
modules/monitor/front/index/tickets/index.js
View File

@ -7,6 +7,61 @@ export default class Controller extends Section {
super($element, $); super($element, $);
this.filterParams = this.fetchParams(); this.filterParams = this.fetchParams();
this.smartTableOptions = {
activeButtons: {
search: true,
shownColumns: true,
},
columns: [
{
field: 'category',
autocomplete: {
url: 'ItemCategories',
valueField: 'name',
}
},
{
field: 'origin',
autocomplete: {
url: 'Origins',
showField: 'code',
valueField: 'code'
}
},
{
field: 'typeFk',
autocomplete: {
url: 'ItemTypes',
}
},
{
field: 'intrastat',
autocomplete: {
url: 'Intrastats',
showField: 'description',
valueField: 'description'
}
},
{
field: 'buyerFk',
autocomplete: {
url: 'Workers/activeWithRole',
where: `{role: {inq: ['logistic', 'buyer']}}`,
searchFunction: '{firstName: $search}',
showField: 'nickname',
valueField: 'id',
}
},
{
field: 'active',
searchable: false
},
{
field: 'landed',
searchable: false
},
]
};
} }
$onInit() { $onInit() {