From 8f851d5c15201bf68589a8b8ecdb05b758283886 Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Thu, 30 Jan 2020 13:53:14 +0100 Subject: [PATCH] refactor --- e2e/helpers/selectors.js | 10 +- modules/order/front/catalog-view/index.html | 61 ++++++ modules/order/front/catalog-view/index.js | 24 +++ .../{catalog => catalog-view}/locale/es.yml | 0 modules/order/front/catalog-view/style.scss | 31 +++ modules/order/front/catalog/index.html | 198 ++++++++++++------ modules/order/front/catalog/index.js | 189 +++++++++++++++-- modules/order/front/catalog/index.spec.js | 170 ++++++++++++++- modules/order/front/catalog/style.scss | 65 ++++-- modules/order/front/filter/index.html | 129 ------------ modules/order/front/filter/index.js | 175 ---------------- modules/order/front/filter/index.spec.js | 172 --------------- modules/order/front/filter/style.scss | 55 ----- modules/order/front/index.js | 4 +- 14 files changed, 629 insertions(+), 654 deletions(-) create mode 100644 modules/order/front/catalog-view/index.html create mode 100644 modules/order/front/catalog-view/index.js rename modules/order/front/{catalog => catalog-view}/locale/es.yml (100%) create mode 100644 modules/order/front/catalog-view/style.scss delete mode 100644 modules/order/front/filter/index.html delete mode 100644 modules/order/front/filter/index.js delete mode 100644 modules/order/front/filter/index.spec.js delete mode 100644 modules/order/front/filter/style.scss diff --git a/e2e/helpers/selectors.js b/e2e/helpers/selectors.js index 019a3a252..95f7610ba 100644 --- a/e2e/helpers/selectors.js +++ b/e2e/helpers/selectors.js @@ -604,14 +604,14 @@ export default { orderByAutocomplete: 'vn-autocomplete[label="Order by"]', plantRealmButton: 'vn-order-catalog > vn-side-menu vn-icon[icon="icon-plant"]', typeAutocomplete: 'vn-autocomplete[data="$ctrl.itemTypes"]', - itemIdInput: 'vn-catalog-filter vn-textfield[ng-model="$ctrl.itemId"]', - itemTagValueInput: 'vn-catalog-filter vn-textfield[ng-model="$ctrl.value"]', - openTagSearch: 'vn-catalog-filter > div > vn-vertical > vn-textfield[ng-model="$ctrl.value"] .append i', + itemIdInput: 'vn-order-catalog > vn-side-menu vn-textfield[ng-model="$ctrl.itemId"]', + itemTagValueInput: 'vn-order-catalog > vn-side-menu vn-textfield[ng-model="$ctrl.value"]', + openTagSearch: 'vn-order-catalog > vn-side-menu > div > vn-vertical > vn-textfield[ng-model="$ctrl.value"] .append i', tagAutocomplete: 'vn-order-catalog-search-panel vn-autocomplete[ng-model="filter.tagFk"]', tagValueInput: 'vn-order-catalog-search-panel [ng-model="filter.value"]', searchTagButton: 'vn-order-catalog-search-panel button[type=submit]', - thirdFilterRemoveButton: 'vn-catalog-filter .chips > vn-chip:nth-child(3) vn-icon[icon=cancel]', - fourthFilterRemoveButton: 'vn-catalog-filter .chips > vn-chip:nth-child(4) vn-icon[icon=cancel]', + thirdFilterRemoveButton: 'vn-order-catalog > vn-side-menu .chips > vn-chip:nth-child(3) vn-icon[icon=cancel]', + fourthFilterRemoveButton: 'vn-order-catalog > vn-side-menu .chips > vn-chip:nth-child(4) vn-icon[icon=cancel]', }, orderBasicData: { clientAutocomplete: 'vn-autocomplete[label="Client"]', diff --git a/modules/order/front/catalog-view/index.html b/modules/order/front/catalog-view/index.html new file mode 100644 index 000000000..7a588a464 --- /dev/null +++ b/modules/order/front/catalog-view/index.html @@ -0,0 +1,61 @@ + + +
+ +
+ +
+
+

+ {{::item.name}} +

+

+ {{::item.subName}} +

+
+ + + + + + +
+
+
+ + {{::item.available}} + from + {{::item.price | currency:'EUR':2}} + + + +
+
+ Precio por kilo {{::item.priceKg | currency: 'EUR'}} +
+
+
+ +
+ + + + diff --git a/modules/order/front/catalog-view/index.js b/modules/order/front/catalog-view/index.js new file mode 100644 index 000000000..fe1f1c712 --- /dev/null +++ b/modules/order/front/catalog-view/index.js @@ -0,0 +1,24 @@ +import ngModule from '../module'; +import Component from 'core/lib/component'; +import './style.scss'; + + +class Controller extends Component { + preview(event, item) { + event.preventDefault(); + this.$.pricesPopover.show(event, item); + } + + onDescriptorLoad() { + this.$.popover.relocate(); + } +} + +ngModule.component('vnOrderCatalogView', { + template: require('./index.html'), + controller: Controller, + bindings: { + order: '<', + model: '<' + } +}); diff --git a/modules/order/front/catalog/locale/es.yml b/modules/order/front/catalog-view/locale/es.yml similarity index 100% rename from modules/order/front/catalog/locale/es.yml rename to modules/order/front/catalog-view/locale/es.yml diff --git a/modules/order/front/catalog-view/style.scss b/modules/order/front/catalog-view/style.scss new file mode 100644 index 000000000..18dc51bb0 --- /dev/null +++ b/modules/order/front/catalog-view/style.scss @@ -0,0 +1,31 @@ +@import "variables"; + +vn-order-catalog { + .catalog-header { + border-bottom: $border-thin; + padding: $spacing-md; + align-items: center; + + & > vn-one { + display: flex; + flex: 1; + + span { + color: $color-font-secondary + } + } + & > vn-auto { + width: 28em; + display: flex; + overflow: hidden; + + & > * { + padding-left: $spacing-md; + } + } + } + .catalog-list { + padding-top: $spacing-sm; + } +} + diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html index 8002c2b10..86b209e59 100644 --- a/modules/order/front/catalog/index.html +++ b/modules/order/front/catalog/index.html @@ -1,72 +1,140 @@ + + + + data="$ctrl.items"> - - -
- -
- -
-
-

- {{::item.name}} -

-

- {{::item.subName}} -

-
- - - - - - -
-
-
- - {{::item.available}} - from - {{::item.price | currency:'EUR':2}} - - - -
-
- Precio por kilo {{::item.priceKg | currency: 'EUR'}} -
-
-
- -
- - - - - - - + + + + + + + + + + + + + +
{{name}}
+
+ {{categoryName}} +
+ + + + + + + + +
+ More than {{model.limit}} results +
+ + + + + + + + + + + + + + + + + + + + + +
+ + {{category.selection.name}} + + + {{type.selection.name}} + + + {{::tag.value}} + +
+ \ No newline at end of file diff --git a/modules/order/front/catalog/index.js b/modules/order/front/catalog/index.js index 40c60b5ea..a53d62089 100644 --- a/modules/order/front/catalog/index.js +++ b/modules/order/front/catalog/index.js @@ -2,10 +2,15 @@ import ngModule from '../module'; import './style.scss'; class Controller { - constructor($scope, $state) { - this.$scope = $scope; + constructor($http, $scope, $state, $compile, $transitions) { + this.$http = $http; + this.$ = $scope; this.$state = $state; this.$stateParams = $state.params; + this.$compile = $compile; + this.$transitions = $transitions; + this.itemTypes = []; + this.tags = []; // Static autocomplete data this.orderWays = [ @@ -23,16 +28,49 @@ class Controller { this.orderField = this.orderFields[0].field; } + $onChanges() { + if (this.order && this.order.isConfirmed) + this.$state.go('order.card.line'); + } + /** * Fills order autocomplete with tags * obtained from last filtered */ - onDataChange() { - const items = this.$scope.model.data; - const newFilterList = []; - if (!items) return; + get order() { + return this._order; + } - items.forEach(item => { + /** + * Sets filter values from state params + * + * @param {Object} value - Order data + */ + set order(value) { + this._order = value; + + if (!value) return; + + this.$.$applyAsync(() => { + if (this.$stateParams.categoryId) + this.categoryId = this.$stateParams.categoryId; + + if (this.$stateParams.typeId) + this.typeId = this.$stateParams.typeId; + }); + } + + get items() { + return this._items; + } + + set items(value) { + this._items = value; + + if (!value) return; + + const newFilterList = []; + value.forEach(item => { // Add new tag filters item.tags.forEach(itemTag => { const alreadyAdded = newFilterList.findIndex(filter => { @@ -64,6 +102,40 @@ class Controller { this.orderFields = newFilterList; } + get categoryId() { + return this._categoryId; + } + + set categoryId(value) { + if (!value || (this.categoryId == value)) + value = null; + + this._categoryId = value; + this.itemTypes = []; + this.typeId = null; + + this.updateStateParams(); + + if (this.tags.length > 0) + this.applyFilters(); + + if (value) + this.updateItemTypes(); + } + + get typeId() { + return this._typeId; + } + + set typeId(value) { + this._typeId = value; + + this.updateStateParams(); + + if (value || this.tags.length > 0) + this.applyFilters(); + } + /** * Get order way ASC/DESC */ @@ -76,6 +148,9 @@ class Controller { if (value) this.applyOrder(); } + /** + * Returns the order way selection + */ get orderSelection() { return this._orderSelection; } @@ -86,6 +161,14 @@ class Controller { if (value) this.applyOrder(); } + /** + * Apply order to model + */ + applyOrder() { + if (this.typeId || this.tags.length > 0) + this.$.model.addFilter(null, {orderBy: this.getOrderBy()}); + } + /** * Returns order param * @@ -101,33 +184,101 @@ class Controller { } /** - * Apply order to model + * Refreshes item type dropdown data */ - applyOrder() { - this.$scope.model.addFilter(null, {orderBy: this.getOrderBy()}); + updateItemTypes() { + let params = { + itemCategoryId: this.categoryId + }; + + const query = `Orders/${this.order.id}/getItemTypeAvailable`; + this.$http.get(query, {params}).then(res => + this.itemTypes = res.data); } - preview(event, item) { + onSearchById(event) { + const hasValue = this.tags.length > 0 || this.itemId || this.typeId; + if (event.key === 'Enter' && hasValue) + this.applyFilters(); + } + + onSearchByTag(event) { + if (event.key !== 'Enter' || !this.value) return; + this.tags.push({ + value: this.value, + }); + this.$.search.value = null; + this.applyFilters(); + } + + remove(index) { + this.tags.splice(index, 1); + + if (this.tags.length >= 0 || this.itemId || this.typeId) + this.applyFilters(); + } + + applyFilters() { + let newParams = {}; + let newFilter = {}; + const model = this.$.model; + + if (this.categoryId) + newFilter.categoryFk = this.categoryId; + + if (this.typeId) + newFilter.typeFk = this.typeId; + + if (this.itemId) + newFilter = {'i.id': this.itemId}; + + newParams = { + orderFk: this.order.id, + orderBy: this.getOrderBy(), + tags: this.tags, + }; + + model.applyFilter({where: newFilter}, newParams); + } + + openPanel(event) { + if (event.defaultPrevented) return; event.preventDefault(); - this.$scope.pricesPopover.show(event, item); + + this.panelFilter = {}; + this.$.popover.show(this.$.search.element); } - onDescriptorLoad() { - this.$scope.popover.relocate(); + onPanelSubmit(filter) { + this.$.popover.hide(); + this.tags.push(filter); + this.applyFilters(); } - $onChanges() { - if (this.order && this.order.isConfirmed) - this.$state.go('order.card.line'); + /** + * Updates url state params from filter values + */ + updateStateParams() { + const params = {}; + + if (this.categoryId) + params.categoryId = this.categoryId; + else params.categoryId = undefined; + + if (this.typeId) + params.typeId = this.typeId; + else params.typeId = undefined; + + this.$state.go(this.$state.current.name, params); } } -Controller.$inject = ['$scope', '$state']; +Controller.$inject = ['$http', '$scope', '$state', '$compile', '$transitions']; ngModule.component('vnOrderCatalog', { template: require('./index.html'), controller: Controller, bindings: { - order: '<', + order: '<' } }); diff --git a/modules/order/front/catalog/index.spec.js b/modules/order/front/catalog/index.spec.js index b6e70bb4a..9e542a91f 100644 --- a/modules/order/front/catalog/index.spec.js +++ b/modules/order/front/catalog/index.spec.js @@ -1,29 +1,47 @@ import './index.js'; import crudModel from 'core/mocks/crud-model'; -describe('Order', () => { +fdescribe('Order', () => { describe('Component vnOrderCatalog', () => { let $scope; + let $state; let controller; + let $httpBackend; beforeEach(ngModule('order')); - beforeEach(angular.mock.inject(($componentController, $rootScope) => { + beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_, $rootScope) => { + $httpBackend = _$httpBackend_; $scope = $rootScope.$new(); $scope.model = crudModel; - $scope.field = {}; - controller = $componentController('vnOrderCatalog', {$scope: $scope}); + $scope.search = {}; + $state = _$state_; + $state.params.categoryId = 1; + $state.params.typeId = 2; + $state.current.name = 'my.current.state'; + controller = $componentController('vnOrderCatalog', {$scope, $state}); })); - describe('onDataChange()', () => { + describe('order() setter', () => { + it(`should call scope $applyAsync() method and apply filters from state params`, () => { + $httpBackend.expect('GET', `Orders/4/getItemTypeAvailable?itemCategoryId=1`).respond(); + controller.order = {id: 4}; + + $scope.$apply(); + + expect(controller.categoryId).toEqual(1); + expect(controller.typeId).toEqual(2); + }); + }); + + describe('items() setter', () => { it(`should return an object with order params`, () => { - $scope.model.data = [{id: 1, name: 'My Item', tags: [ + let expectedResult = [{field: 'showOrder, price', name: 'Color'}]; + let unexpectedResult = [{tagFk: 5, name: 'Color'}]; + controller.items = [{id: 1, name: 'My Item', tags: [ {tagFk: 4, name: 'Length'}, {tagFk: 5, name: 'Color'} ]}]; - let expectedResult = [{field: 'showOrder, price', name: 'Color'}]; - let unexpectedResult = [{tagFk: 5, name: 'Color'}]; - controller.onDataChange(); expect(controller.orderFields.length).toEqual(5); expect(controller.orderFields).toEqual(jasmine.arrayContaining(expectedResult)); @@ -31,6 +49,134 @@ describe('Order', () => { }); }); + describe('categoryId() setter', () => { + it(`should set category property to null, call updateStateParams() method and not call applyFilters()`, () => { + spyOn(controller, 'updateStateParams'); + controller.categoryId = null; + + expect(controller.updateStateParams).toHaveBeenCalledWith(); + }); + + it(`should set category property and then call updateStateParams() and applyFilters() methods`, () => { + spyOn(controller, 'updateStateParams'); + controller._order = {id: 4}; + controller.categoryId = 2; + + expect(controller.updateStateParams).toHaveBeenCalledWith(); + }); + }); + + describe('typeId() setter', () => { + it(`should set type property to null, call updateStateParams() method and not call applyFilters()`, () => { + spyOn(controller, 'updateStateParams'); + spyOn(controller, 'applyFilters'); + controller.typeId = null; + + expect(controller.updateStateParams).toHaveBeenCalledWith(); + expect(controller.applyFilters).not.toHaveBeenCalledWith(); + }); + + it(`should set category property and then call updateStateParams() and applyFilters() methods`, () => { + spyOn(controller, 'updateStateParams'); + spyOn(controller, 'applyFilters'); + controller.typeId = 2; + + expect(controller.updateStateParams).toHaveBeenCalledWith(); + expect(controller.applyFilters).toHaveBeenCalledWith(); + }); + }); + + describe('onSearchByTag()', () => { + it(`should not add a new tag if the event key code doesn't equals to 'Enter'`, () => { + spyOn(controller, 'applyFilters'); + controller.order = {id: 4}; + controller.value = 'Color'; + controller.onSearchByTag({key: 'Tab'}); + + expect(controller.applyFilters).not.toHaveBeenCalledWith(); + }); + + it(`should add a new tag if the event key code equals to 'Enter' an then call applyFilters()`, () => { + spyOn(controller, 'applyFilters'); + controller.order = {id: 4}; + controller.value = 'Color'; + + controller.onSearchByTag({key: 'Enter'}); + + expect(controller.applyFilters).toHaveBeenCalledWith(); + }); + }); + + describe('onSearchById()', () => { + it(`should not filter by id if the event key code doesn't equals to 'Enter'`, () => { + spyOn(controller, 'applyFilters'); + controller.itemId = 1; + controller.onSearchById({key: 'Tab'}); + + expect(controller.applyFilters).not.toHaveBeenCalledWith(); + }); + + it(`should filter by id if the event key code equals to 'Enter' an then call applyFilters()`, () => { + spyOn(controller, 'applyFilters'); + controller.itemId = 1; + + controller.onSearchById({key: 'Enter'}); + + expect(controller.applyFilters).toHaveBeenCalledWith(); + }); + }); + + describe('applyFilters()', () => { + it(`should call model applyFilter() method with a new filter`, () => { + let model = controller.$.model; + spyOn(model, 'applyFilter'); + controller._categoryId = 2; + controller._typeId = 4; + controller._order = {id: 4}; + + controller.applyFilters(); + + expect(model.applyFilter).toHaveBeenCalledWith( + {where: {categoryFk: 2, typeFk: 4}}, + {orderFk: 4, orderBy: controller.getOrderBy(), tags: []}); + }); + }); + + describe('remove()', () => { + it(`should remove a tag from tags property`, () => { + spyOn(controller, 'applyFilters'); + controller.tags = [{tagFk: 1, value: 'Blue'}, {tagFk: 2, value: '70'}]; + controller.remove(0); + + expect(controller.tags.length).toEqual(1); + expect(controller.tags[0].tagFk).toEqual(2); + expect(controller.applyFilters).toHaveBeenCalledWith(); + }); + + it(`should remove a tag from tags property and call applyFilters() if there's no more tags`, () => { + spyOn(controller, 'applyFilters'); + controller._categoryId = 1; + controller._typeId = 1; + controller.tags = [{tagFk: 1, value: 'Blue'}]; + controller.remove(0); + + expect(controller.tags.length).toEqual(0); + expect(controller.applyFilters).toHaveBeenCalledWith(); + }); + }); + + describe('updateStateParams()', () => { + it(`should call state go() method passing category and type state params`, () => { + spyOn(controller.$state, 'go'); + controller._categoryId = 2; + controller._typeId = 4; + let result = {categoryId: 2, typeId: 4}; + controller.updateStateParams(); + + expect(controller.$state.go).toHaveBeenCalledWith('my.current.state', result); + }); + }); + describe('getOrderBy()', () => { it(`should return an object with order params`, () => { controller.orderField = 'relevancy DESC, name'; @@ -50,13 +196,15 @@ describe('Order', () => { it(`should apply order param to model calling getOrderBy()`, () => { controller.field = 'relevancy DESC, name'; controller.way = 'ASC'; + controller._categoryId = 1; + controller._typeId = 1; let expectedOrder = {orderBy: controller.getOrderBy()}; spyOn(controller, 'getOrderBy').and.callThrough(); - spyOn(controller.$scope.model, 'addFilter'); + spyOn(controller.$.model, 'addFilter'); controller.applyOrder(); expect(controller.getOrderBy).toHaveBeenCalledWith(); - expect(controller.$scope.model.addFilter).toHaveBeenCalledWith(null, expectedOrder); + expect(controller.$.model.addFilter).toHaveBeenCalledWith(null, expectedOrder); }); }); }); diff --git a/modules/order/front/catalog/style.scss b/modules/order/front/catalog/style.scss index 18dc51bb0..308acb6b2 100644 --- a/modules/order/front/catalog/style.scss +++ b/modules/order/front/catalog/style.scss @@ -1,31 +1,54 @@ @import "variables"; -vn-order-catalog { - .catalog-header { +vn-order-catalog vn-side-menu div { + & > .input { + padding-left: $spacing-md; + padding-right: $spacing-md; + border-color: $color-spacer; border-bottom: $border-thin; - padding: $spacing-md; - align-items: center; + } + .item-category { + padding: $spacing-sm; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + + vn-autocomplete[vn-id="category"] { + display: none + } & > vn-one { - display: flex; - flex: 1; + padding: $spacing-sm; + min-width: 33.33%; + text-align: center; + box-sizing: border-box; - span { - color: $color-font-secondary - } - } - & > vn-auto { - width: 28em; - display: flex; - overflow: hidden; - - & > * { - padding-left: $spacing-md; + & > vn-icon { + padding: $spacing-sm; + background-color: $color-font-secondary; + border-radius: 50%; + cursor: pointer; + + &.active { + background-color: $color-main; + color: #FFF + } + & > i:before { + font-size: 32pt; + width: 1em; + height: 1em; + } } } } - .catalog-list { - padding-top: $spacing-sm; + .chips { + display: flex; + flex-wrap: wrap; + padding: $spacing-md; + overflow: hidden; + max-width: 100%; } -} - + vn-autocomplete[vn-id="type"] .list { + max-height: 20em + } +} \ No newline at end of file diff --git a/modules/order/front/filter/index.html b/modules/order/front/filter/index.html deleted file mode 100644 index 13010a553..000000000 --- a/modules/order/front/filter/index.html +++ /dev/null @@ -1,129 +0,0 @@ - - -
- - - - - - - - - - - -
{{name}}
-
- {{categoryName}} -
- - - - - - - - -
- More than {{model.limit}} results -
- - - - - - - - - - - - - - - - - - - - - -
- - {{category.selection.name}} - - - {{type.selection.name}} - - - {{::tag.value}} - -
-
\ No newline at end of file diff --git a/modules/order/front/filter/index.js b/modules/order/front/filter/index.js deleted file mode 100644 index ba563d05c..000000000 --- a/modules/order/front/filter/index.js +++ /dev/null @@ -1,175 +0,0 @@ -import ngModule from '../module'; -import './style.scss'; - -class Controller { - constructor($element, $http, $scope, $state, $compile, $transitions) { - this.$element = $element; - this.$http = $http; - this.$ = $scope; - this.$state = $state; - this.$stateParams = $state.params; - this.$compile = $compile; - this.$transitions = $transitions; - this.itemTypes = []; - this.tags = []; - } - - get order() { - return this._order; - } - - /** - * Sets filter values from state params - * - * @param {Object} value - Order data - */ - set order(value) { - this._order = value; - - if (!value) return; - - this.$.$applyAsync(() => { - if (this.$stateParams.categoryId) - this.categoryId = this.$stateParams.categoryId; - - if (this.$stateParams.typeId) - this.typeId = this.$stateParams.typeId; - }); - } - - get categoryId() { - return this._categoryId; - } - - set categoryId(value) { - if (!value || (this.categoryId == value)) - value = null; - - this._categoryId = value; - this.itemTypes = []; - this.typeId = null; - - this.updateStateParams(); - - if (this.tags.length > 0) - this.applyFilters(); - - if (value) - this.updateItemTypes(); - } - - get typeId() { - return this._typeId; - } - - set typeId(value) { - this._typeId = value; - - this.updateStateParams(); - - if ((value) || this.tags.length > 0) - this.applyFilters(); - } - - /** - * Refreshes item type dropdown data - */ - updateItemTypes() { - let params = { - itemCategoryId: this.categoryId - }; - - const query = `Orders/${this.order.id}/getItemTypeAvailable`; - this.$http.get(query, {params}).then(res => - this.itemTypes = res.data); - } - - onSearchById(event) { - const hasValue = this.tags.length > 0 || this.itemId || this.typeId; - if (event.key === 'Enter' && hasValue) - this.applyFilters(); - } - - onSearchByTag(event) { - if (event.key !== 'Enter' || !this.value) return; - this.tags.push({ - value: this.value, - }); - this.$.search.value = null; - this.applyFilters(); - } - - remove(index) { - this.tags.splice(index, 1); - - if (this.tags.length >= 0 || this.itemId || this.typeId) - this.applyFilters(); - } - - applyFilters() { - let newParams = {}; - let newFilter = {}; - const model = this.catalog.$scope.model; - - if (this.categoryId) - newFilter.categoryFk = this.categoryId; - - if (this.typeId) - newFilter.typeFk = this.typeId; - - if (this.itemId) - newFilter = {'i.id': this.itemId}; - - newParams = { - orderFk: this.order.id, - orderBy: this.catalog.getOrderBy(), - tags: this.tags, - }; - - model.applyFilter({where: newFilter}, newParams); - } - - openPanel(event) { - if (event.defaultPrevented) return; - event.preventDefault(); - - this.panelFilter = {}; - this.$.popover.show(this.$.search.element); - } - - onPanelSubmit(filter) { - this.$.popover.hide(); - this.tags.push(filter); - this.applyFilters(); - } - - /** - * Updates url state params from filter values - */ - updateStateParams() { - const params = {}; - - if (this.categoryId) - params.categoryId = this.categoryId; - else params.categoryId = undefined; - - if (this.typeId) - params.typeId = this.typeId; - else params.typeId = undefined; - - this.$state.go(this.$state.current.name, params); - } -} - -Controller.$inject = ['$element', '$http', '$scope', '$state', '$compile', '$transitions']; - -ngModule.component('vnCatalogFilter', { - template: require('./index.html'), - controller: Controller, - require: { - catalog: '^vnOrderCatalog' - }, - bindings: { - order: '<' - } -}); diff --git a/modules/order/front/filter/index.spec.js b/modules/order/front/filter/index.spec.js deleted file mode 100644 index 72a0f206b..000000000 --- a/modules/order/front/filter/index.spec.js +++ /dev/null @@ -1,172 +0,0 @@ -import './index.js'; -import crudModel from 'core/mocks/crud-model'; - -describe('Order', () => { - describe('Component vnCatalogFilter', () => { - let $scope; - let $state; - let controller; - let $httpBackend; - - beforeEach(ngModule('order')); - - beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_, $rootScope) => { - $httpBackend = _$httpBackend_; - $scope = $rootScope.$new(); - $scope.model = crudModel; - $scope.search = {}; - $state = _$state_; - $state.params.categoryId = 1; - $state.params.typeId = 2; - $state.current.name = 'my.current.state'; - controller = $componentController('vnCatalogFilter', {$element: null, $scope, $state}); - controller.catalog = { - $scope: $scope, - getOrderBy: () => { - return {field: 'relevancy DESC, name', way: 'DESC'}; - } - }; - })); - - describe('order() setter', () => { - it(`should call scope $applyAsync() method and apply filters from state params`, () => { - $httpBackend.expect('GET', `Orders/4/getItemTypeAvailable?itemCategoryId=1`).respond(); - controller.order = {id: 4}; - - $scope.$apply(); - - expect(controller.categoryId).toEqual(1); - expect(controller.typeId).toEqual(2); - }); - }); - - describe('categoryId() setter', () => { - it(`should set category property to null, call updateStateParams() method and not call applyFilters()`, () => { - spyOn(controller, 'updateStateParams'); - controller.categoryId = null; - - expect(controller.updateStateParams).toHaveBeenCalledWith(); - }); - - it(`should set category property and then call updateStateParams() and applyFilters() methods`, () => { - spyOn(controller, 'updateStateParams'); - controller._order = {id: 4}; - controller.categoryId = 2; - - expect(controller.updateStateParams).toHaveBeenCalledWith(); - }); - }); - - describe('typeId() setter', () => { - it(`should set type property to null, call updateStateParams() method and not call applyFilters()`, () => { - spyOn(controller, 'updateStateParams'); - spyOn(controller, 'applyFilters'); - controller.typeId = null; - - expect(controller.updateStateParams).toHaveBeenCalledWith(); - expect(controller.applyFilters).not.toHaveBeenCalledWith(); - }); - - it(`should set category property and then call updateStateParams() and applyFilters() methods`, () => { - spyOn(controller, 'updateStateParams'); - spyOn(controller, 'applyFilters'); - controller.typeId = 2; - - expect(controller.updateStateParams).toHaveBeenCalledWith(); - expect(controller.applyFilters).toHaveBeenCalledWith(); - }); - }); - - describe('onSearchByTag()', () => { - it(`should not add a new tag if the event key code doesn't equals to 'Enter'`, () => { - spyOn(controller, 'applyFilters'); - controller.order = {id: 4}; - controller.value = 'Color'; - controller.onSearchByTag({key: 'Tab'}); - - expect(controller.applyFilters).not.toHaveBeenCalledWith(); - }); - - it(`should add a new tag if the event key code equals to 'Enter' an then call applyFilters()`, () => { - spyOn(controller, 'applyFilters'); - controller.order = {id: 4}; - controller.value = 'Color'; - - controller.onSearchByTag({key: 'Enter'}); - - expect(controller.applyFilters).toHaveBeenCalledWith(); - }); - }); - - describe('onSearchById()', () => { - it(`should not filter by id if the event key code doesn't equals to 'Enter'`, () => { - spyOn(controller, 'applyFilters'); - controller.itemId = 1; - controller.onSearchById({key: 'Tab'}); - - expect(controller.applyFilters).not.toHaveBeenCalledWith(); - }); - - it(`should filter by id if the event key code equals to 'Enter' an then call applyFilters()`, () => { - spyOn(controller, 'applyFilters'); - controller.itemId = 1; - - controller.onSearchById({key: 'Enter'}); - - expect(controller.applyFilters).toHaveBeenCalledWith(); - }); - }); - - describe('applyFilters()', () => { - it(`should call model applyFilter() method with a new filter`, () => { - let model = controller.catalog.$scope.model; - spyOn(model, 'applyFilter'); - controller._categoryId = 2; - controller._typeId = 4; - controller._order = {id: 4}; - - controller.applyFilters(); - - expect(model.applyFilter).toHaveBeenCalledWith( - {where: {categoryFk: 2, typeFk: 4}}, - {orderFk: 4, orderBy: controller.catalog.getOrderBy(), tags: []}); - }); - }); - - describe('remove()', () => { - it(`should remove a tag from tags property`, () => { - spyOn(controller, 'applyFilters'); - controller.tags = [{tagFk: 1, value: 'Blue'}, {tagFk: 2, value: '70'}]; - controller.remove(0); - - expect(controller.tags.length).toEqual(1); - expect(controller.tags[0].tagFk).toEqual(2); - expect(controller.applyFilters).toHaveBeenCalledWith(); - }); - - it(`should remove a tag from tags property and call applyFilters() if there's no more tags`, () => { - spyOn(controller, 'applyFilters'); - controller._categoryId = 1; - controller._typeId = 1; - controller.tags = [{tagFk: 1, value: 'Blue'}]; - controller.remove(0); - - expect(controller.tags.length).toEqual(0); - expect(controller.applyFilters).toHaveBeenCalledWith(); - }); - }); - - describe('updateStateParams()', () => { - it(`should call state go() method passing category and type state params`, () => { - spyOn(controller.$state, 'go'); - controller._categoryId = 2; - controller._typeId = 4; - let result = {categoryId: 2, typeId: 4}; - controller.updateStateParams(); - - expect(controller.$state.go).toHaveBeenCalledWith('my.current.state', result); - }); - }); - }); -}); - diff --git a/modules/order/front/filter/style.scss b/modules/order/front/filter/style.scss deleted file mode 100644 index f4fe226f2..000000000 --- a/modules/order/front/filter/style.scss +++ /dev/null @@ -1,55 +0,0 @@ -@import "variables"; -@import "variables"; - -vn-catalog-filter > div { - & > .input { - padding-left: $spacing-md; - padding-right: $spacing-md; - border-color: $color-spacer; - border-bottom: $border-thin; - } - .item-category { - padding: $spacing-sm; - justify-content: flex-start; - align-items: flex-start; - flex-wrap: wrap; - - vn-autocomplete[vn-id="category"] { - display: none - } - - & > vn-one { - padding: $spacing-sm; - min-width: 33.33%; - text-align: center; - box-sizing: border-box; - - & > vn-icon { - padding: $spacing-sm; - background-color: $color-font-secondary; - border-radius: 50%; - cursor: pointer; - - &.active { - background-color: $color-main; - color: #FFF - } - & > i:before { - font-size: 32pt; - width: 1em; - height: 1em; - } - } - } - } - .chips { - display: flex; - flex-wrap: wrap; - padding: $spacing-md; - overflow: hidden; - max-width: 100%; - } - vn-autocomplete[vn-id="type"] .list { - max-height: 20em - } -} \ No newline at end of file diff --git a/modules/order/front/index.js b/modules/order/front/index.js index 0d8d0d686..4d5b5615e 100644 --- a/modules/order/front/index.js +++ b/modules/order/front/index.js @@ -6,9 +6,9 @@ import './card'; import './descriptor'; import './search-panel'; import './catalog-search-panel'; -import './filter'; -import './summary'; +import './catalog-view'; import './catalog'; +import './summary'; import './line'; import './prices-popover'; import './volume';