From e6304d026c6c1892903bc8fa67bd85d055a5aa3c Mon Sep 17 00:00:00 2001 From: joan Date: Fri, 22 Oct 2021 15:01:54 +0200 Subject: [PATCH] feat(smart-table): added smart-table and smart-table-menu components --- front/core/components/index.js | 1 + .../components/smart-table-menu/index.html | 45 ++++ .../core/components/smart-table-menu/index.js | 48 +++++ .../components/smart-table-menu/style.scss | 24 +++ front/core/directives/index.js | 2 + front/core/directives/smart-table2.js | 54 +++++ modules/ticket/front/index/index.html | 200 ++---------------- 7 files changed, 196 insertions(+), 178 deletions(-) create mode 100644 front/core/components/smart-table-menu/index.html create mode 100644 front/core/components/smart-table-menu/index.js create mode 100644 front/core/components/smart-table-menu/style.scss create mode 100644 front/core/directives/smart-table2.js diff --git a/front/core/components/index.js b/front/core/components/index.js index 3ccc64b89..150fc2158 100644 --- a/front/core/components/index.js +++ b/front/core/components/index.js @@ -52,3 +52,4 @@ import './wday-picker'; import './datalist'; import './contextmenu'; import './rating'; +import './smart-table-menu'; diff --git a/front/core/components/smart-table-menu/index.html b/front/core/components/smart-table-menu/index.html new file mode 100644 index 000000000..14b94cf48 --- /dev/null +++ b/front/core/components/smart-table-menu/index.html @@ -0,0 +1,45 @@ +
+
+ +
+ + +
+
+ + +
+ + a + + + + + +
+ +
+ + + + +
+
+ + +
+
\ No newline at end of file diff --git a/front/core/components/smart-table-menu/index.js b/front/core/components/smart-table-menu/index.js new file mode 100644 index 000000000..9d2b378cc --- /dev/null +++ b/front/core/components/smart-table-menu/index.js @@ -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: ' vn-button { + box-shadow: 0 0 0 0 + } + } + } +} diff --git a/front/core/directives/index.js b/front/core/directives/index.js index e0f42aef5..dfc79d1aa 100644 --- a/front/core/directives/index.js +++ b/front/core/directives/index.js @@ -16,3 +16,5 @@ import './droppable'; import './http-click'; import './http-submit'; import './anchor'; +import './smart-table2'; + diff --git a/front/core/directives/smart-table2.js b/front/core/directives/smart-table2.js new file mode 100644 index 000000000..187f77569 --- /dev/null +++ b/front/core/directives/smart-table2.js @@ -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: { + } + }; +}); diff --git a/modules/ticket/front/index/index.html b/modules/ticket/front/index/index.html index 63b0b049d..f3ac18c52 100644 --- a/modules/ticket/front/index/index.html +++ b/modules/ticket/front/index/index.html @@ -1,155 +1,28 @@ - - - - - - - - - - - Id - Salesperson - Date - Hour - Closure - Alias - Province - State - Zone - Warehouse - Total - - - - - - - - - - - - - - - - - - - - - - - - {{::ticket.id}} - - - {{::ticket.userName | dashIfEmpty}} - - - - - {{::ticket.shipped | date: 'dd/MM/yyyy'}} - - - {{::ticket.shipped | date: 'HH:mm'}} - {{::ticket.zoneLanding | date: 'HH:mm'}} - - - {{::ticket.nickname}} - - - {{::ticket.province}} - - - {{::ticket.refFk}} - - - {{ticket.state}} - - - - - {{::ticket.zoneName | dashIfEmpty}} - - - {{::ticket.warehouse}} - - - {{::(ticket.totalWithVat ? ticket.totalWithVat : 0) | currency: 'EUR': 2}} - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Column 1Column 2
{{::ticket.id}}{{::ticket.userName}}
+ + + +
- - - - Filter by selection - - - Exclude selection - - - Remove filter - - - Remove all filters - - - Copy value - - -