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 './contextmenu';
|
||||
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-submit';
|
||||
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
|
||||
model="model">
|
||||
</vn-auto-search>
|
||||
<vn-data-viewer
|
||||
model="model"
|
||||
class="vn-mb-xl vn-w-xl">
|
||||
<vn-card>
|
||||
<vn-table model="model">
|
||||
<vn-thead>
|
||||
<vn-tr>
|
||||
<vn-th shrink>
|
||||
<vn-multi-check
|
||||
model="model">
|
||||
</vn-multi-check>
|
||||
</vn-th>
|
||||
<vn-th class="icon-field"></vn-th>
|
||||
<vn-th field="id">Id</vn-th>
|
||||
<vn-th field="salesPersonFk" class="expendable">Salesperson</vn-th>
|
||||
<vn-th field="shipped" shrink-date>Date</vn-th>
|
||||
<vn-th>Hour</vn-th>
|
||||
<vn-th field="zoneHour" shrink>Closure</vn-th>
|
||||
<vn-th field="nickname">Alias</vn-th>
|
||||
<vn-th field="provinceFk" class="expendable">Province</vn-th>
|
||||
<vn-th field="stateFk" >State</vn-th>
|
||||
<vn-th field="zoneFk">Zone</vn-th>
|
||||
<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>
|
||||
<vn-card>
|
||||
<!-- To access table component should be a nested component -->
|
||||
<smart-table-menu vn-id="smart-menu" model="model">
|
||||
<slot-body>
|
||||
<table class="vn-table" smart-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th field="myfield1">Column 1</th>
|
||||
<th field="myfield2">Column 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody ng-repeat="ticket in model.data">
|
||||
<tr>
|
||||
<td>{{::ticket.id}}</td>
|
||||
<td>{{::ticket.userName}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</slot-body>
|
||||
</smart-table-menu>
|
||||
|
||||
</vn-card>
|
||||
<div fixed-bottom-right>
|
||||
<vn-vertical style="align-items: center;">
|
||||
<vn-button class="round sm vn-mb-sm"
|
||||
|
|
@ -205,35 +78,6 @@
|
|||
<vn-invoice-out-descriptor-popover
|
||||
vn-id="invoiceOutDescriptor">
|
||||
</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 -->
|
||||
<vn-confirm
|
||||
|
|
|
|||
Loading…
Reference in New Issue