feat(smart-table): added smart-table and smart-table-menu components
gitea/salix/pipeline/head This commit looks good
Details
gitea/salix/pipeline/head This commit looks good
Details
This commit is contained in:
parent
2cdc22bc4d
commit
e6304d026c
|
|
@ -52,3 +52,4 @@ import './wday-picker';
|
||||||
import './datalist';
|
import './datalist';
|
||||||
import './contextmenu';
|
import './contextmenu';
|
||||||
import './rating';
|
import './rating';
|
||||||
|
import './smart-table-menu';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<div class="vn-pa-md">
|
||||||
|
<div></div> <!-- transcluded actions -->
|
||||||
|
<vn-horizontal>
|
||||||
|
<div class="actions-left">
|
||||||
|
<vn-button icon="view_column"
|
||||||
|
ng-click="$broadcast('displaySearch')"
|
||||||
|
vn-tooltip="Shown columns">
|
||||||
|
</vn-button>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<vn-button icon="search"
|
||||||
|
ng-click="$broadcast('displaySearch')"
|
||||||
|
vn-tooltip="Search">
|
||||||
|
</vn-button>
|
||||||
|
<div class="button-group">
|
||||||
|
<vn-button icon="add"
|
||||||
|
ng-click="$broadcast('addRow')"
|
||||||
|
vn-tooltip="Add new row">
|
||||||
|
<prepend>a</prepend>
|
||||||
|
</vn-button>
|
||||||
|
<vn-button icon="delete"
|
||||||
|
ng-click="$broadcast('addRow')"
|
||||||
|
vn-tooltip="Remove selected rows">
|
||||||
|
</vn-button>
|
||||||
|
<vn-button icon="save"
|
||||||
|
ng-click="$broadcast('addRow')"
|
||||||
|
vn-tooltip="Save data">
|
||||||
|
</vn-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button-group">
|
||||||
|
<vn-button icon="refresh"
|
||||||
|
ng-click="$ctrl.model.refresh()"
|
||||||
|
vn-tooltip="Refresh">
|
||||||
|
</vn-button>
|
||||||
|
<vn-button icon="more_vert"
|
||||||
|
ng-click="moreOptions.show($event)"
|
||||||
|
vn-tooltip="More">
|
||||||
|
</vn-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vn-horizontal>
|
||||||
|
|
||||||
|
<div class="body"></div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import ngModule from '../../module';
|
||||||
|
import Component from '../../lib/component';
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
|
export default class SmartTableMenu extends Component {
|
||||||
|
constructor($element, $, $transclude) {
|
||||||
|
super($element, $);
|
||||||
|
this.$transclude = $transclude;
|
||||||
|
// stuff
|
||||||
|
}
|
||||||
|
|
||||||
|
$onDestroy() {
|
||||||
|
if (this.$contentScope)
|
||||||
|
this.$contentScope.$destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
get model() {
|
||||||
|
return this._model;
|
||||||
|
}
|
||||||
|
|
||||||
|
set model(value) {
|
||||||
|
this._model = value;
|
||||||
|
if (value)
|
||||||
|
this.transclude();
|
||||||
|
}
|
||||||
|
|
||||||
|
transclude() {
|
||||||
|
const body = this.element.querySelector('.body');
|
||||||
|
this.$transclude(($clone, $scope) => {
|
||||||
|
this.$contentScope = $scope;
|
||||||
|
$scope.model = this.model;
|
||||||
|
body.appendChild($clone[0]);
|
||||||
|
}, null, 'body');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SmartTableMenu.$inject = ['$element', '$scope', '$transclude'];
|
||||||
|
|
||||||
|
ngModule.vnComponent('smartTableMenu', {
|
||||||
|
template: require('./index.html'),
|
||||||
|
controller: SmartTableMenu,
|
||||||
|
transclude: {
|
||||||
|
body: '?slotBody'
|
||||||
|
},
|
||||||
|
bindings: {
|
||||||
|
model: '<?'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
@import "effects";
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
smart-table-menu {
|
||||||
|
.actions-left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
& > vn-button {
|
||||||
|
box-shadow: 0 0 0 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -16,3 +16,5 @@ import './droppable';
|
||||||
import './http-click';
|
import './http-click';
|
||||||
import './http-submit';
|
import './http-submit';
|
||||||
import './anchor';
|
import './anchor';
|
||||||
|
import './smart-table2';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import ngModule from '../module';
|
||||||
|
import Component from '../lib/component';
|
||||||
|
import './smart-table.scss';
|
||||||
|
|
||||||
|
class Controller extends Component {
|
||||||
|
constructor($element, $, $attrs) {
|
||||||
|
super($element, $);
|
||||||
|
// this.element = $element[0];
|
||||||
|
|
||||||
|
this.$attrs = $attrs;
|
||||||
|
|
||||||
|
this.registerColumns();
|
||||||
|
this.registerEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
registerColumns() {
|
||||||
|
const header = this.element.querySelector('thead > tr');
|
||||||
|
if (!header) return;
|
||||||
|
const columns = header.querySelectorAll('th');
|
||||||
|
|
||||||
|
// TODO: Add arrow icon and so on..
|
||||||
|
// Click handler
|
||||||
|
for (let column of columns)
|
||||||
|
column.addEventListener('click', () => this.orderHandler(column));
|
||||||
|
}
|
||||||
|
|
||||||
|
registerEvents() {
|
||||||
|
this.$.$on('addRow', () => this.addRow());
|
||||||
|
this.$.$on('displaySearch', () => this.displaySearch());
|
||||||
|
}
|
||||||
|
|
||||||
|
orderHandler(element) {
|
||||||
|
const field = element.getAttribute('field');
|
||||||
|
console.log(`You clicked to ` + field);
|
||||||
|
}
|
||||||
|
|
||||||
|
displaySearch() {
|
||||||
|
console.log('Display the search!');
|
||||||
|
}
|
||||||
|
|
||||||
|
addRow() {
|
||||||
|
console.log('Add new row element');
|
||||||
|
this.$.model.insert({});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Controller.$inject = ['$element', '$scope', '$attrs'];
|
||||||
|
|
||||||
|
ngModule.directive('smartTable', () => {
|
||||||
|
return {
|
||||||
|
controller: Controller,
|
||||||
|
bindings: {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -1,155 +1,28 @@
|
||||||
<vn-auto-search
|
<vn-auto-search
|
||||||
model="model">
|
model="model">
|
||||||
</vn-auto-search>
|
</vn-auto-search>
|
||||||
<vn-data-viewer
|
<vn-card>
|
||||||
model="model"
|
<!-- To access table component should be a nested component -->
|
||||||
class="vn-mb-xl vn-w-xl">
|
<smart-table-menu vn-id="smart-menu" model="model">
|
||||||
<vn-card>
|
<slot-body>
|
||||||
<vn-table model="model">
|
<table class="vn-table" smart-table>
|
||||||
<vn-thead>
|
<thead>
|
||||||
<vn-tr>
|
<tr>
|
||||||
<vn-th shrink>
|
<th field="myfield1">Column 1</th>
|
||||||
<vn-multi-check
|
<th field="myfield2">Column 2</th>
|
||||||
model="model">
|
</tr>
|
||||||
</vn-multi-check>
|
</thead>
|
||||||
</vn-th>
|
<tbody ng-repeat="ticket in model.data">
|
||||||
<vn-th class="icon-field"></vn-th>
|
<tr>
|
||||||
<vn-th field="id">Id</vn-th>
|
<td>{{::ticket.id}}</td>
|
||||||
<vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
|
<td>{{::ticket.userName}}</td>
|
||||||
<vn-th field="shipped" shrink-date>Date</vn-th>
|
</tr>
|
||||||
<vn-th>Hour</vn-th>
|
</tbody>
|
||||||
<vn-th field="zoneHour" shrink>Closure</vn-th>
|
</table>
|
||||||
<vn-th field="nickname">Alias</vn-th>
|
</slot-body>
|
||||||
<vn-th field="provinceFk" class="expendable">Province</vn-th>
|
</smart-table-menu>
|
||||||
<vn-th field="stateFk" >State</vn-th>
|
|
||||||
<vn-th field="zoneFk">Zone</vn-th>
|
</vn-card>
|
||||||
<vn-th field="warehouseFk">Warehouse</vn-th>
|
|
||||||
<vn-th number>Total</vn-th>
|
|
||||||
<vn-th></vn-th>
|
|
||||||
</vn-tr>
|
|
||||||
</vn-thead>
|
|
||||||
<vn-tbody>
|
|
||||||
<a ng-repeat="ticket in model.data"
|
|
||||||
class="clickable vn-tr search-result"
|
|
||||||
ui-sref="ticket.card.summary({id: {{::ticket.id}}})">
|
|
||||||
<vn-td>
|
|
||||||
<vn-check
|
|
||||||
ng-model="ticket.checked"
|
|
||||||
vn-click-stop>
|
|
||||||
</vn-check>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td class="icon-field">
|
|
||||||
<vn-icon
|
|
||||||
ng-show="::ticket.isTaxDataChecked === 0"
|
|
||||||
translate-attr="{title: 'No verified data'}"
|
|
||||||
class="bright"
|
|
||||||
icon="icon-no036">
|
|
||||||
</vn-icon>
|
|
||||||
<vn-icon
|
|
||||||
ng-show="::ticket.hasTicketRequest"
|
|
||||||
translate-attr="{title: 'Purchase request'}"
|
|
||||||
class="bright"
|
|
||||||
icon="icon-100">
|
|
||||||
</vn-icon>
|
|
||||||
<vn-icon
|
|
||||||
ng-show="::ticket.isAvailable === 0"
|
|
||||||
translate-attr="{title: 'Not available'}"
|
|
||||||
class="bright"
|
|
||||||
icon="icon-unavailable">
|
|
||||||
</vn-icon>
|
|
||||||
<vn-icon
|
|
||||||
ng-show="::ticket.isFreezed"
|
|
||||||
translate-attr="{title: 'Client frozen'}"
|
|
||||||
class="bright"
|
|
||||||
icon="icon-frozen">
|
|
||||||
</vn-icon>
|
|
||||||
<vn-icon
|
|
||||||
ng-show="::ticket.risk"
|
|
||||||
title="{{::$ctrl.$t('Risk')}}: {{ticket.risk}}"
|
|
||||||
class="bright"
|
|
||||||
icon="icon-risk">
|
|
||||||
</vn-icon>
|
|
||||||
<vn-icon
|
|
||||||
ng-show="::ticket.hasComponentLack"
|
|
||||||
translate-attr="{title: 'Component lack'}"
|
|
||||||
class="bright"
|
|
||||||
icon="icon-components">
|
|
||||||
</vn-icon>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td shrink>{{::ticket.id}}</vn-td>
|
|
||||||
<vn-td class="expendable">
|
|
||||||
<span
|
|
||||||
title="{{::ticket.userName}}"
|
|
||||||
vn-click-stop="workerDescriptor.show($event, ticket.salesPersonFk)"
|
|
||||||
class="link">
|
|
||||||
{{::ticket.userName | dashIfEmpty}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td shrink-date>
|
|
||||||
<span class="chip {{$ctrl.compareDate(ticket.shipped)}}">
|
|
||||||
{{::ticket.shipped | date: 'dd/MM/yyyy'}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td shrink>{{::ticket.shipped | date: 'HH:mm'}}</vn-td>
|
|
||||||
<vn-td shrink>{{::ticket.zoneLanding | date: 'HH:mm'}}</vn-td>
|
|
||||||
<vn-td>
|
|
||||||
<span
|
|
||||||
title="{{::ticket.nickname}}"
|
|
||||||
vn-click-stop="clientDescriptor.show($event, ticket.clientFk)"
|
|
||||||
class="link">
|
|
||||||
{{::ticket.nickname}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td class="expendable">{{::ticket.province}}</vn-td>
|
|
||||||
<vn-td class="expendable">
|
|
||||||
<span
|
|
||||||
ng-show="ticket.refFk"
|
|
||||||
title="{{::ticket.refFk}}"
|
|
||||||
vn-click-stop="invoiceOutDescriptor.show($event, ticket.invoiceOutId)"
|
|
||||||
class="link">
|
|
||||||
{{::ticket.refFk}}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
ng-show="!ticket.refFk"
|
|
||||||
class="chip {{$ctrl.stateColor(ticket)}}">
|
|
||||||
{{ticket.state}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td>
|
|
||||||
<span
|
|
||||||
title="{{::ticket.zoneName}}"
|
|
||||||
vn-click-stop="zoneDescriptor.show($event, ticket.zoneFk)"
|
|
||||||
class="link">
|
|
||||||
{{::ticket.zoneName | dashIfEmpty}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td>{{::ticket.warehouse}}</vn-td>
|
|
||||||
<vn-td number>
|
|
||||||
<span class="chip {{$ctrl.totalPriceColor(ticket)}}">
|
|
||||||
{{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
<vn-td actions>
|
|
||||||
<vn-icon-button
|
|
||||||
vn-anchor="::{
|
|
||||||
state: 'ticket.card.sale',
|
|
||||||
params: {id: ticket.id},
|
|
||||||
target: '_blank'
|
|
||||||
}"
|
|
||||||
vn-tooltip="Go to lines"
|
|
||||||
icon="icon-lines">
|
|
||||||
</vn-icon-button>
|
|
||||||
<vn-icon-button
|
|
||||||
vn-click-stop="$ctrl.preview(ticket)"
|
|
||||||
vn-tooltip="Preview"
|
|
||||||
icon="preview">
|
|
||||||
</vn-icon-button>
|
|
||||||
</vn-td>
|
|
||||||
</a>
|
|
||||||
</vn-tbody>
|
|
||||||
</vn-table>
|
|
||||||
</vn-card>
|
|
||||||
</vn-data-viewer>
|
|
||||||
<div fixed-bottom-right>
|
<div fixed-bottom-right>
|
||||||
<vn-vertical style="align-items: center;">
|
<vn-vertical style="align-items: center;">
|
||||||
<vn-button class="round sm vn-mb-sm"
|
<vn-button class="round sm vn-mb-sm"
|
||||||
|
|
@ -205,35 +78,6 @@
|
||||||
<vn-invoice-out-descriptor-popover
|
<vn-invoice-out-descriptor-popover
|
||||||
vn-id="invoiceOutDescriptor">
|
vn-id="invoiceOutDescriptor">
|
||||||
</vn-invoice-out-descriptor-popover>
|
</vn-invoice-out-descriptor-popover>
|
||||||
<vn-contextmenu vn-id="contextmenu" targets="['vn-data-viewer']" model="model"
|
|
||||||
expr-builder="$ctrl.exprBuilder(param, value)">
|
|
||||||
<slot-menu>
|
|
||||||
<vn-item translate
|
|
||||||
ng-if="contextmenu.isFilterAllowed()"
|
|
||||||
ng-click="contextmenu.filterBySelection()">
|
|
||||||
Filter by selection
|
|
||||||
</vn-item>
|
|
||||||
<vn-item translate
|
|
||||||
ng-if="contextmenu.isFilterAllowed()"
|
|
||||||
ng-click="contextmenu.excludeSelection()">
|
|
||||||
Exclude selection
|
|
||||||
</vn-item>
|
|
||||||
<vn-item translate
|
|
||||||
ng-if="contextmenu.isFilterAllowed()"
|
|
||||||
ng-click="contextmenu.removeFilter()">
|
|
||||||
Remove filter
|
|
||||||
</vn-item>
|
|
||||||
<vn-item translate
|
|
||||||
ng-click="contextmenu.removeAllFilters()">
|
|
||||||
Remove all filters
|
|
||||||
</vn-item>
|
|
||||||
<vn-item translate
|
|
||||||
ng-if="contextmenu.isActionAllowed()"
|
|
||||||
ng-click="contextmenu.copyValue()">
|
|
||||||
Copy value
|
|
||||||
</vn-item>
|
|
||||||
</slot-menu>
|
|
||||||
</vn-contextmenu>
|
|
||||||
|
|
||||||
<!-- Make invoice confirmation dialog -->
|
<!-- Make invoice confirmation dialog -->
|
||||||
<vn-confirm
|
<vn-confirm
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue