refactor
gitea/salix/2064-catalog_refactor This commit looks good
Details
gitea/salix/2064-catalog_refactor This commit looks good
Details
This commit is contained in:
parent
31349b2ebf
commit
8f851d5c15
|
|
@ -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"]',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<vn-data-viewer
|
||||
model="$ctrl.model">
|
||||
<vn-horizontal class="catalog-list">
|
||||
<section class="product" ng-repeat="item in $ctrl.model.data">
|
||||
<vn-card>
|
||||
<div class="image">
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
|
||||
on-error-src/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>
|
||||
{{::item.name}}
|
||||
</h3>
|
||||
<h4 class="ellipsize">
|
||||
<span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
|
||||
</h4>
|
||||
<div class="tags">
|
||||
<vn-label-value
|
||||
ng-if="::item.value5"
|
||||
label="{{::item.tag5}}"
|
||||
value="{{::item.value5}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-if="::item.value6"
|
||||
label="{{::item.tag6}}"
|
||||
value="{{::item.value6}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-if="::item.value7"
|
||||
label="{{::item.tag7}}"
|
||||
value="{{::item.value7}}">
|
||||
</vn-label-value>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="price">
|
||||
<vn-one>
|
||||
<span>{{::item.available}}</span>
|
||||
<span translate>from</span>
|
||||
<span>{{::item.price | currency:'EUR':2}}</span>
|
||||
</vn-one>
|
||||
<vn-icon-button vn-none
|
||||
icon="add_circle"
|
||||
ng-click="$ctrl.preview($event, item)"
|
||||
vn-tooltip="Add">
|
||||
</vn-icon-button>
|
||||
</div>
|
||||
<div class="priceKg" ng-show="::item.priceKg">
|
||||
<span>Precio por kilo {{::item.priceKg | currency: 'EUR'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vn-card>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
</vn-data-viewer>
|
||||
<vn-order-prices-popover
|
||||
vn-id="pricesPopover"
|
||||
order="$ctrl.order">
|
||||
</vn-order-prices-popover>
|
||||
|
|
@ -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: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,72 +1,140 @@
|
|||
|
||||
<vn-crud-model
|
||||
url="ItemCategories"
|
||||
data="categories"
|
||||
auto-load="true">
|
||||
</vn-crud-model>
|
||||
<vn-crud-model
|
||||
vn-id="model"
|
||||
url="Orders/CatalogFilter"
|
||||
params="{orderFk: $ctrl.$state.params.id}"
|
||||
limit="50"
|
||||
data="items"
|
||||
on-data-change="$ctrl.onDataChange()">
|
||||
data="$ctrl.items">
|
||||
</vn-crud-model>
|
||||
<vn-data-viewer
|
||||
model="model">
|
||||
<vn-horizontal class="catalog-list">
|
||||
<section class="product" ng-repeat="item in items">
|
||||
<vn-card>
|
||||
<div class="image">
|
||||
<img
|
||||
ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}"
|
||||
zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
|
||||
on-error-src/>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h3>
|
||||
{{::item.name}}
|
||||
</h3>
|
||||
<h4 class="ellipsize">
|
||||
<span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
|
||||
</h4>
|
||||
<div class="tags">
|
||||
<vn-label-value
|
||||
ng-if="::item.value5"
|
||||
label="{{::item.tag5}}"
|
||||
value="{{::item.value5}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-if="::item.value6"
|
||||
label="{{::item.tag6}}"
|
||||
value="{{::item.value6}}">
|
||||
</vn-label-value>
|
||||
<vn-label-value
|
||||
ng-if="::item.value7"
|
||||
label="{{::item.tag7}}"
|
||||
value="{{::item.value7}}">
|
||||
</vn-label-value>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="price">
|
||||
<vn-one>
|
||||
<span>{{::item.available}}</span>
|
||||
<span translate>from</span>
|
||||
<span>{{::item.price | currency:'EUR':2}}</span>
|
||||
</vn-one>
|
||||
<vn-icon-button vn-none
|
||||
icon="add_circle"
|
||||
ng-click="$ctrl.preview($event, item)"
|
||||
vn-tooltip="Add">
|
||||
</vn-icon-button>
|
||||
</div>
|
||||
<div class="priceKg" ng-show="::item.priceKg">
|
||||
<span>Precio por kilo {{::item.priceKg | currency: 'EUR'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vn-card>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
</vn-data-viewer>
|
||||
<vn-side-menu side="right">
|
||||
<vn-catalog-filter order="$ctrl.order"></vn-catalog-filter>
|
||||
</vn-side-menu>
|
||||
<vn-order-prices-popover
|
||||
vn-id="pricesPopover"
|
||||
|
||||
<vn-order-catalog-view model="model"
|
||||
order="$ctrl.order">
|
||||
</vn-order-prices-popover>
|
||||
</vn-order-catalog-view>
|
||||
<vn-side-menu side="right">
|
||||
<vn-horizontal class="item-category">
|
||||
<vn-autocomplete vn-id="category"
|
||||
data="categories"
|
||||
ng-model="$ctrl.categoryId"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
label="Category">
|
||||
</vn-autocomplete>
|
||||
<vn-one ng-repeat="category in categories">
|
||||
<vn-icon
|
||||
ng-class="{'active': $ctrl.categoryId == category.id}"
|
||||
icon="{{::category.icon}}"
|
||||
vn-tooltip="{{::category.name}}"
|
||||
ng-click="$ctrl.categoryId = category.id">
|
||||
</vn-icon>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-vertical class="input">
|
||||
<vn-autocomplete vn-id="type"
|
||||
data="$ctrl.itemTypes"
|
||||
ng-model="$ctrl.typeId"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
label="Type"
|
||||
fields="['categoryFk']"
|
||||
include="'category'">
|
||||
<tpl-item>
|
||||
<div>{{name}}</div>
|
||||
<div class="text-caption text-secondary">
|
||||
{{categoryName}}
|
||||
</div>
|
||||
</tpl-item>
|
||||
</vn-autocomplete>
|
||||
</vn-vertical>
|
||||
<vn-vertical class="input vn-pt-md">
|
||||
<vn-autocomplete
|
||||
vn-id="field"
|
||||
data="$ctrl.orderFields"
|
||||
ng-model="$ctrl.orderField"
|
||||
selection="$ctrl.orderSelection"
|
||||
translate-fields="['name']"
|
||||
order="name"
|
||||
show-field="name"
|
||||
value-field="field"
|
||||
label="Order by"
|
||||
disabled="!model.data">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete
|
||||
data="$ctrl.orderWays"
|
||||
ng-model="$ctrl.orderWay"
|
||||
translate-fields="['name']"
|
||||
show-field="name"
|
||||
value-field="way"
|
||||
label="Order"
|
||||
disabled="!model.data">
|
||||
</vn-autocomplete>
|
||||
<div ng-if="false && model.moreRows">
|
||||
<span translate>More than</span> {{model.limit}} <span translate>results</span>
|
||||
</div>
|
||||
</vn-vertical>
|
||||
<vn-vertical class="input vn-pt-md">
|
||||
<vn-textfield
|
||||
ng-keyUp="$ctrl.onSearchById($event)"
|
||||
label="Item id"
|
||||
ng-model="$ctrl.itemId">
|
||||
<prepend>
|
||||
<vn-icon icon="icon-item"></vn-icon>
|
||||
</prepend>
|
||||
</vn-textfield>
|
||||
<vn-textfield
|
||||
vn-one
|
||||
vn-id="search"
|
||||
ng-keyUp="$ctrl.onSearchByTag($event)"
|
||||
label="Search tag"
|
||||
ng-model="$ctrl.value">
|
||||
<prepend>
|
||||
<vn-icon icon="search"></vn-icon>
|
||||
</prepend>
|
||||
<append>
|
||||
<vn-icon
|
||||
icon="keyboard_arrow_down"
|
||||
ng-click="$ctrl.openPanel($event)"
|
||||
style="cursor: pointer;">
|
||||
</vn-icon>
|
||||
</append>
|
||||
</vn-textfield>
|
||||
</vn-vertical>
|
||||
<vn-popover
|
||||
vn-id="popover"
|
||||
on-close="$ctrl.onPopoverClose()">
|
||||
<vn-order-catalog-search-panel
|
||||
filter="panelFilter"
|
||||
on-submit="$ctrl.onPanelSubmit($filter)">
|
||||
</vn-order-catalog-search-panel>
|
||||
</vn-popover>
|
||||
<div class="chips">
|
||||
<vn-chip
|
||||
ng-if="category.selection"
|
||||
removable="true"
|
||||
translate-attr="{title: 'Category'}"
|
||||
on-remove="$ctrl.categoryId = null"
|
||||
class="colored">
|
||||
<span translate>{{category.selection.name}}</span>
|
||||
</vn-chip>
|
||||
<vn-chip
|
||||
ng-if="type.selection"
|
||||
removable="true"
|
||||
translate-attr="{title: 'Type'}"
|
||||
on-remove="$ctrl.typeId = null"
|
||||
class="colored">
|
||||
<span translate>{{type.selection.name}}</span>
|
||||
</vn-chip>
|
||||
<vn-chip
|
||||
ng-repeat="tag in $ctrl.tags"
|
||||
removable="true"
|
||||
translate-attr="{title: 'Tag'}"
|
||||
on-remove="$ctrl.remove($index)"
|
||||
class="colored">
|
||||
<span translate>{{::tag.value}}</span>
|
||||
</vn-chip>
|
||||
</div>
|
||||
</vn-side-menu>
|
||||
|
|
@ -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: '<'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
& > vn-icon {
|
||||
padding: $spacing-sm;
|
||||
background-color: $color-font-secondary;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
& > * {
|
||||
padding-left: $spacing-md;
|
||||
&.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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,129 +0,0 @@
|
|||
<vn-crud-model
|
||||
vn-id="model"
|
||||
url="ItemCategories"
|
||||
data="categories"
|
||||
auto-load="true">
|
||||
</vn-crud-model>
|
||||
<div>
|
||||
<vn-horizontal class="item-category">
|
||||
<vn-autocomplete vn-id="category"
|
||||
data="categories"
|
||||
ng-model="$ctrl.categoryId"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
label="Category">
|
||||
</vn-autocomplete>
|
||||
<vn-one ng-repeat="category in categories">
|
||||
<vn-icon
|
||||
ng-class="{'active': $ctrl.categoryId == category.id}"
|
||||
icon="{{::category.icon}}"
|
||||
vn-tooltip="{{::category.name}}"
|
||||
ng-click="$ctrl.categoryId = category.id">
|
||||
</vn-icon>
|
||||
</vn-one>
|
||||
</vn-horizontal>
|
||||
<vn-vertical class="input">
|
||||
<vn-autocomplete vn-id="type"
|
||||
data="$ctrl.itemTypes"
|
||||
ng-model="$ctrl.typeId"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
label="Type"
|
||||
fields="['categoryFk']"
|
||||
include="'category'">
|
||||
<tpl-item>
|
||||
<div>{{name}}</div>
|
||||
<div class="text-caption text-secondary">
|
||||
{{categoryName}}
|
||||
</div>
|
||||
</tpl-item>
|
||||
</vn-autocomplete>
|
||||
</vn-vertical>
|
||||
<vn-vertical class="input vn-pt-md">
|
||||
<vn-autocomplete
|
||||
vn-id="field"
|
||||
data="$ctrl.catalog.orderFields"
|
||||
ng-model="$ctrl.catalog.orderField"
|
||||
selection="$ctrl.catalog.orderSelection"
|
||||
translate-fields="['name']"
|
||||
order="name"
|
||||
show-field="name"
|
||||
value-field="field"
|
||||
label="Order by"
|
||||
disabled="!model.data">
|
||||
</vn-autocomplete>
|
||||
<vn-autocomplete
|
||||
data="$ctrl.catalog.orderWays"
|
||||
ng-model="$ctrl.catalog.orderWay"
|
||||
translate-fields="['name']"
|
||||
show-field="name"
|
||||
value-field="way"
|
||||
label="Order"
|
||||
disabled="!model.data">
|
||||
</vn-autocomplete>
|
||||
<div ng-if="false && model.moreRows">
|
||||
<span translate>More than</span> {{model.limit}} <span translate>results</span>
|
||||
</div>
|
||||
</vn-vertical>
|
||||
<vn-vertical class="input vn-pt-md">
|
||||
<vn-textfield
|
||||
ng-keyUp="$ctrl.onSearchById($event)"
|
||||
label="Item id"
|
||||
ng-model="$ctrl.itemId">
|
||||
<prepend>
|
||||
<vn-icon icon="icon-item"></vn-icon>
|
||||
</prepend>
|
||||
</vn-textfield>
|
||||
<vn-textfield
|
||||
vn-one
|
||||
vn-id="search"
|
||||
ng-keyUp="$ctrl.onSearchByTag($event)"
|
||||
label="Search tag"
|
||||
ng-model="$ctrl.value">
|
||||
<prepend>
|
||||
<vn-icon icon="search"></vn-icon>
|
||||
</prepend>
|
||||
<append>
|
||||
<vn-icon
|
||||
icon="keyboard_arrow_down"
|
||||
ng-click="$ctrl.openPanel($event)"
|
||||
style="cursor: pointer;">
|
||||
</vn-icon>
|
||||
</append>
|
||||
</vn-textfield>
|
||||
</vn-vertical>
|
||||
<vn-popover
|
||||
vn-id="popover"
|
||||
on-close="$ctrl.onPopoverClose()">
|
||||
<vn-order-catalog-search-panel
|
||||
filter="panelFilter"
|
||||
on-submit="$ctrl.onPanelSubmit($filter)">
|
||||
</vn-order-catalog-search-panel>
|
||||
</vn-popover>
|
||||
<div class="chips">
|
||||
<vn-chip
|
||||
ng-if="category.selection"
|
||||
removable="true"
|
||||
translate-attr="{title: 'Category'}"
|
||||
on-remove="$ctrl.categoryId = null"
|
||||
class="colored">
|
||||
<span translate>{{category.selection.name}}</span>
|
||||
</vn-chip>
|
||||
<vn-chip
|
||||
ng-if="type.selection"
|
||||
removable="true"
|
||||
translate-attr="{title: 'Type'}"
|
||||
on-remove="$ctrl.typeId = null"
|
||||
class="colored">
|
||||
<span translate>{{type.selection.name}}</span>
|
||||
</vn-chip>
|
||||
<vn-chip
|
||||
ng-repeat="tag in $ctrl.tags"
|
||||
removable="true"
|
||||
translate-attr="{title: 'Tag'}"
|
||||
on-remove="$ctrl.remove($index)"
|
||||
class="colored">
|
||||
<span translate>{{::tag.value}}</span>
|
||||
</vn-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue