@kigi/components 1.8.11 → 1.8.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/mbg-multi-select/mbg-multi-select.html +2 -4
- package/src/components/mbg-multi-select/mbg-multi-select.ts +8 -10
- package/src/components/mbg-product-grid/mbg-product-grid.html +71 -34
- package/src/components/mbg-product-grid/mbg-product-grid.scss +27 -2
- package/src/components/mbg-product-grid/mbg-product-grid.ts +8 -0
- package/src/components/mbg-product-inline/mbg-product-inline.html +55 -21
- package/src/components/mbg-product-inline/mbg-product-inline.scss +142 -134
- package/src/components/mbg-product-inline/mbg-product-inline.ts +31 -1
- package/src/components/mbg-select/mbg-select.ts +5 -28
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
ng-class="{'disabled': $ctrl.ngDisabled, 'inline-mode-wrapper': $ctrl.inlineMode}">
|
|
4
4
|
<div class="mbg-multi-select-content">
|
|
5
5
|
<ul class="items-selected">
|
|
6
|
-
<li ng-repeat="item in $ctrl.ngModel
|
|
6
|
+
<li ng-repeat="item in $ctrl.ngModel"
|
|
7
7
|
draggable="true">
|
|
8
8
|
<label data-text="{{ $ctrl.label ? item[$ctrl.label] : item }}"
|
|
9
9
|
ng-style="{width: $ctrl.widthEllipsis && $ctrl.inlineMode ? $ctrl.widthEllipsis : 'auto'}">{{
|
|
@@ -24,13 +24,11 @@
|
|
|
24
24
|
fetch="$ctrl.fetch({ query })"
|
|
25
25
|
ng-disabled="$ctrl.ngDisabled"
|
|
26
26
|
ignore-items="$ctrl.ngModel"
|
|
27
|
-
on-select="$ctrl.onSelect(
|
|
27
|
+
on-select="$ctrl.onSelect()"
|
|
28
28
|
ng-blur="$ctrl.ngBlur({ $event })"
|
|
29
29
|
ng-focus="$ctrl.ngFocus({ $event })"
|
|
30
30
|
placeholder="{{ $ctrl.placeholder }}"
|
|
31
31
|
enable-add="$ctrl.enableAdd"
|
|
32
|
-
enable-favorite="$ctrl.enableFavorite"
|
|
33
|
-
many-favorite="true"
|
|
34
32
|
label="{{ $ctrl.label }}"></mbg-select>
|
|
35
33
|
</div>
|
|
36
34
|
</div>
|
|
@@ -19,7 +19,6 @@ class MbgMultiSelectController {
|
|
|
19
19
|
private enableAdd: boolean
|
|
20
20
|
private inlineMode: boolean
|
|
21
21
|
private widthEllipsis: string
|
|
22
|
-
private enableFavorite: boolean
|
|
23
22
|
|
|
24
23
|
constructor(public $scope, public $element, public $attrs, public $timeout) {}
|
|
25
24
|
|
|
@@ -54,26 +53,26 @@ class MbgMultiSelectController {
|
|
|
54
53
|
})
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
onSelect(
|
|
56
|
+
onSelect() {
|
|
58
57
|
this.$timeout(() => {
|
|
59
|
-
|
|
60
|
-
if (currentModel) {
|
|
58
|
+
if (this.searchModel) {
|
|
61
59
|
this.ngModel = this.ngModel || []
|
|
62
60
|
if (this.ngModel && typeof this.ngModel[0] === 'string') {
|
|
63
61
|
if (
|
|
64
|
-
this.ngModel.filter((v) => v.toLowerCase() ===
|
|
62
|
+
this.ngModel.filter((v) => v.toLowerCase() === this.searchModel.toLowerCase())
|
|
63
|
+
.length === 0
|
|
65
64
|
) {
|
|
66
65
|
if (this.inlineMode) {
|
|
67
|
-
this.ngModel.unshift(
|
|
66
|
+
this.ngModel.unshift(this.searchModel)
|
|
68
67
|
} else {
|
|
69
|
-
this.ngModel.push(
|
|
68
|
+
this.ngModel.push(this.searchModel)
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
} else {
|
|
73
72
|
if (this.inlineMode) {
|
|
74
|
-
this.ngModel.unshift(
|
|
73
|
+
this.ngModel.unshift(this.searchModel)
|
|
75
74
|
} else {
|
|
76
|
-
this.ngModel.push(
|
|
75
|
+
this.ngModel.push(this.searchModel)
|
|
77
76
|
}
|
|
78
77
|
}
|
|
79
78
|
this.verifyScroll()
|
|
@@ -243,7 +242,6 @@ const mbgMultiSelect = {
|
|
|
243
242
|
ngDisabled: '=?',
|
|
244
243
|
inlineMode: '=?',
|
|
245
244
|
widthEllipsis: '@?',
|
|
246
|
-
enableFavorite: '=?',
|
|
247
245
|
},
|
|
248
246
|
template,
|
|
249
247
|
controller: MbgMultiSelectController,
|
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
<div class="mbg-product-grid-wrapper">
|
|
2
2
|
<table class="table table-striped">
|
|
3
|
-
<
|
|
3
|
+
<thead>
|
|
4
4
|
<tr>
|
|
5
5
|
<th class="grid-center-content">
|
|
6
|
-
<
|
|
6
|
+
<div class="border-list">
|
|
7
|
+
<label>{{ ::$ctrl.y.label }}</label>
|
|
8
|
+
</div>
|
|
7
9
|
</th>
|
|
8
|
-
<th class="grid-center-content"
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
{{ ::$ctrl.
|
|
12
|
-
|
|
10
|
+
<th class="grid-center-content"
|
|
11
|
+
colspan="{{ $ctrl.grid.x.length }}">
|
|
12
|
+
<div class="border-list">
|
|
13
|
+
<label>{{ ::$ctrl.x.label }}</label>
|
|
14
|
+
<a class="grid-adicional-link"
|
|
15
|
+
ng-click="$ctrl.onClickExtraButton()">
|
|
16
|
+
{{ ::$ctrl.extraButtonLabel }}
|
|
17
|
+
</a>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
13
20
|
</th>
|
|
14
21
|
</tr>
|
|
15
22
|
<tr>
|
|
16
|
-
<td
|
|
17
|
-
|
|
18
|
-
|
|
23
|
+
<td>
|
|
24
|
+
<div class="border-list">
|
|
25
|
+
</div>
|
|
26
|
+
</td>
|
|
27
|
+
<td ng-repeat="xItem in $ctrl.grid.x track by xItem.value"
|
|
28
|
+
class="grid-center-content">
|
|
29
|
+
<div class="border-list">
|
|
30
|
+
<label>{{ ::xItem.value }}</label>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
19
33
|
</td>
|
|
20
34
|
</tr>
|
|
35
|
+
</thead>
|
|
36
|
+
<tbody>
|
|
21
37
|
<!-- <tr>
|
|
22
38
|
<td></td>
|
|
23
39
|
<td ng-repeat="xItem in $ctrl.grid.x track by xItem.value"
|
|
@@ -30,44 +46,65 @@
|
|
|
30
46
|
</tr> -->
|
|
31
47
|
<tr ng-repeat="yItem in $ctrl.grid.y track by yItem.value">
|
|
32
48
|
<td>
|
|
33
|
-
<div class="grid-product-item-name-wrapper">
|
|
34
|
-
<div class="grid-product-item-circle"
|
|
49
|
+
<div class="grid-product-item-name-wrapper border-list">
|
|
50
|
+
<div class="grid-product-item-circle"
|
|
51
|
+
ng-style="{'background': yItem.valueRef}"></div>
|
|
35
52
|
<span>{{ ::yItem.value }}</span>
|
|
36
53
|
</div>
|
|
37
54
|
</td>
|
|
38
55
|
<td ng-repeat="xItem in $ctrl.grid.x track by xItem.value">
|
|
39
56
|
<div class="grid-transclude-edit-wrapper">
|
|
40
|
-
<div ng-show="$ctrl.transcludeTemplate"
|
|
57
|
+
<div ng-show="$ctrl.transcludeTemplate"
|
|
58
|
+
mbg-dynamic-html="$ctrl.transcludeTemplate"></div>
|
|
41
59
|
</div>
|
|
42
|
-
<div ng-show="!$ctrl.transcludeTemplate"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
60
|
+
<div ng-show="!$ctrl.transcludeTemplate"
|
|
61
|
+
class="grid-product-edit-wrapper">
|
|
62
|
+
<svg tabindex="-1"
|
|
63
|
+
height="401pt"
|
|
64
|
+
viewBox="0 -1 401.52289 401"
|
|
65
|
+
width="401pt"
|
|
66
|
+
ng-click="$ctrl.onClickEditButton({ x: xItem, y: yItem })"
|
|
67
|
+
ng-show="$ctrl.activeEdit && $ctrl.gridValues[$index][$parent.$index].enable"
|
|
68
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
47
69
|
<path
|
|
48
|
-
|
|
70
|
+
d="m370.589844 250.972656c-5.523438 0-10 4.476563-10 10v88.789063c-.019532 16.5625-13.4375 29.984375-30 30h-280.589844c-16.5625-.015625-29.980469-13.4375-30-30v-260.589844c.019531-16.558594 13.4375-29.980469 30-30h88.789062c5.523438 0 10-4.476563 10-10 0-5.519531-4.476562-10-10-10h-88.789062c-27.601562.03125-49.96875 22.398437-50 50v260.59375c.03125 27.601563 22.398438 49.96875 50 50h280.589844c27.601562-.03125 49.96875-22.398437 50-50v-88.792969c0-5.523437-4.476563-10-10-10zm0 0" />
|
|
49
71
|
<path
|
|
50
|
-
|
|
72
|
+
d="m376.628906 13.441406c-17.574218-17.574218-46.066406-17.574218-63.640625 0l-178.40625 178.40625c-1.222656 1.222656-2.105469 2.738282-2.566406 4.402344l-23.460937 84.699219c-.964844 3.472656.015624 7.191406 2.5625 9.742187 2.550781 2.546875 6.269531 3.527344 9.742187 2.566406l84.699219-23.464843c1.664062-.460938 3.179687-1.34375 4.402344-2.566407l178.402343-178.410156c17.546875-17.585937 17.546875-46.054687 0-63.640625zm-220.257812 184.90625 146.011718-146.015625 47.089844 47.089844-146.015625 146.015625zm-9.40625 18.875 37.621094 37.625-52.039063 14.417969zm227.257812-142.546875-10.605468 10.605469-47.09375-47.09375 10.609374-10.605469c9.761719-9.761719 25.589844-9.761719 35.351563 0l11.738281 11.734375c9.746094 9.773438 9.746094 25.589844 0 35.359375zm0 0" />
|
|
51
73
|
</svg>
|
|
52
|
-
<a tabindex="-1"
|
|
53
|
-
|
|
74
|
+
<a tabindex="-1"
|
|
75
|
+
class="link"
|
|
76
|
+
ng-show="$ctrl.activeAddOrRemove"
|
|
77
|
+
ng-click="$ctrl.toogleEnableItem($index, $parent.$index)">
|
|
54
78
|
{{ $ctrl.gridValues[$index][$parent.$index].enable ? 'Remover' : 'Adicionar'}}
|
|
55
79
|
</a>
|
|
56
|
-
<span tabindex="-1"
|
|
80
|
+
<span tabindex="-1"
|
|
81
|
+
ng-show="$ctrl.enableCurrentStock">Estoque:
|
|
57
82
|
{{$ctrl.gridValues[$index][$parent.$index].currentStock || '0'}}</span>
|
|
58
83
|
<span tabindex="-1"
|
|
59
|
-
|
|
84
|
+
ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }">
|
|
60
85
|
{{$ctrl.inputLabel ? $ctrl.inputLabel : $ctrl.showStock ? 'Estoque' : 'R$ Venda'}}</span>
|
|
61
|
-
<input tabindex="0"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
86
|
+
<input tabindex="0"
|
|
87
|
+
type="number"
|
|
88
|
+
ng-show="$ctrl.showStock"
|
|
89
|
+
ng-model="$ctrl.gridValues[$index][$parent.$index].stock"
|
|
90
|
+
placeholder="0"
|
|
91
|
+
ng-keydown="$ctrl.onKeydown($event)"
|
|
92
|
+
ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }"
|
|
93
|
+
ng-change="$ctrl.handleGridValues()"
|
|
94
|
+
ng-model-options="{ debounce: 500 }"
|
|
95
|
+
class="grid-product-stock"
|
|
96
|
+
onwheel="this.blur()" />
|
|
97
|
+
<input tabindex="-1"
|
|
98
|
+
type="text"
|
|
99
|
+
ng-model="$ctrl.gridValues[$index][$parent.$index].price"
|
|
100
|
+
ng-show="$ctrl.enablePrice"
|
|
101
|
+
ui-money-mask
|
|
102
|
+
ng-disabled="$ctrl.ngDisabled"
|
|
103
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
104
|
+
ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }"
|
|
105
|
+
ng-change="$ctrl.handleGridValues()"
|
|
106
|
+
class="grid-product-money"
|
|
107
|
+
placeholder="0" />
|
|
71
108
|
</div>
|
|
72
109
|
</td>
|
|
73
110
|
</tr>
|
|
@@ -8,10 +8,25 @@
|
|
|
8
8
|
input[type="number"] {
|
|
9
9
|
-moz-appearance: textfield;
|
|
10
10
|
}
|
|
11
|
-
overflow: auto;
|
|
11
|
+
// overflow: auto;
|
|
12
|
+
max-height: 600px;
|
|
12
13
|
table {
|
|
13
14
|
border-radius: 5px;
|
|
14
|
-
|
|
15
|
+
thead {
|
|
16
|
+
padding: 0 !important;
|
|
17
|
+
border: 0 !important;
|
|
18
|
+
th {
|
|
19
|
+
padding: 0 !important;
|
|
20
|
+
border: 0 !important;
|
|
21
|
+
}
|
|
22
|
+
td {
|
|
23
|
+
background-color: #fff;
|
|
24
|
+
z-index: 1;
|
|
25
|
+
padding: 0 !important;
|
|
26
|
+
border: 0 !important;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
tbody, thead {
|
|
15
30
|
border: 1px solid #ccc;
|
|
16
31
|
border-radius: 5px;
|
|
17
32
|
.grid-center-content {
|
|
@@ -32,6 +47,8 @@
|
|
|
32
47
|
border-top: 1px solid #ccc;
|
|
33
48
|
border-left: 1px solid #ccc;
|
|
34
49
|
height: 54px;
|
|
50
|
+
padding: 0 !important;
|
|
51
|
+
border: 0 !important;
|
|
35
52
|
.grid-adicional-link {
|
|
36
53
|
position: absolute;
|
|
37
54
|
right: 18px;
|
|
@@ -61,6 +78,8 @@
|
|
|
61
78
|
align-items: flex-end;
|
|
62
79
|
color: #666;
|
|
63
80
|
font-weight: 500;
|
|
81
|
+
padding: 8px;
|
|
82
|
+
border: 1px solid #ccc;
|
|
64
83
|
.grid-disable {
|
|
65
84
|
pointer-events: none;
|
|
66
85
|
opacity: 0;
|
|
@@ -159,3 +178,9 @@
|
|
|
159
178
|
margin: 0 10px !important;
|
|
160
179
|
}
|
|
161
180
|
}
|
|
181
|
+
|
|
182
|
+
.border-list {
|
|
183
|
+
width: 100%;
|
|
184
|
+
height:100%;
|
|
185
|
+
border: 1px solid #ccc;
|
|
186
|
+
}
|
|
@@ -32,6 +32,7 @@ class MbgProductGridController {
|
|
|
32
32
|
this.findTransclude()
|
|
33
33
|
this.$scope.$watch('$ctrl.ngModel', () => this.handleModel(), true)
|
|
34
34
|
this.$scope.$watch('$ctrl.details', () => this.handleModel(), true)
|
|
35
|
+
this.handleGridView()
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
findTransclude() {
|
|
@@ -122,6 +123,13 @@ class MbgProductGridController {
|
|
|
122
123
|
focusInput(element) {
|
|
123
124
|
element.select()
|
|
124
125
|
}
|
|
126
|
+
|
|
127
|
+
handleGridView() {
|
|
128
|
+
angular.element('.mbg-product-grid-wrapper table').mbgSmartGrid({
|
|
129
|
+
head: true,
|
|
130
|
+
left: 1,
|
|
131
|
+
})
|
|
132
|
+
}
|
|
125
133
|
}
|
|
126
134
|
|
|
127
135
|
MbgProductGridController.$inject = ['$scope', '$element', '$attrs', '$timeout', '$transclude']
|
|
@@ -1,51 +1,85 @@
|
|
|
1
1
|
<div class="mbg-product-inline-wrapper">
|
|
2
2
|
<div class="default-header-inline">
|
|
3
3
|
<div class="inline-row">
|
|
4
|
-
<div class="x-value-col"
|
|
4
|
+
<div class="x-value-col"
|
|
5
|
+
ng-click="$ctrl.order($ctrl.x.label, $ctrl.orderDirSizes == 'asc' ? 'desc' : 'asc')">
|
|
5
6
|
<label>{{$ctrl.x.label}}</label>
|
|
7
|
+
<i class="fa fa-angle-down"
|
|
8
|
+
ng-show="$ctrl.orderDirSizes == 'asc'"></i>
|
|
9
|
+
<i class="fa fa-angle-up"
|
|
10
|
+
ng-show="$ctrl.orderDirSizes == 'desc'"></i>
|
|
6
11
|
</div>
|
|
7
|
-
<div class="y-value-col"
|
|
12
|
+
<div class="y-value-col"
|
|
13
|
+
ng-click="$ctrl.order($ctrl.y.label, $ctrl.orderDirColors == 'asc' ? 'desc' : 'asc')">
|
|
8
14
|
<label>{{$ctrl.y.label}}</label>
|
|
15
|
+
<i class="fa fa-angle-down"
|
|
16
|
+
ng-show="$ctrl.orderDirColors == 'asc'"></i>
|
|
17
|
+
<i class="fa fa-angle-up"
|
|
18
|
+
ng-show="$ctrl.orderDirColors == 'desc'"></i>
|
|
9
19
|
</div>
|
|
10
|
-
<div class="barcode-col"
|
|
20
|
+
<div class="barcode-col"
|
|
21
|
+
ng-hide="$ctrl.hideBarcode">
|
|
11
22
|
<label>Código de barras</label>
|
|
12
23
|
</div>
|
|
13
24
|
<div class="stock-col">
|
|
14
25
|
<label>Estoque</label>
|
|
15
26
|
</div>
|
|
16
|
-
<div class="price-col"
|
|
27
|
+
<div class="price-col"
|
|
28
|
+
ng-hide="$ctrl.hidePrice">
|
|
17
29
|
<label>Preço</label>
|
|
18
30
|
</div>
|
|
19
31
|
</div>
|
|
20
32
|
</div>
|
|
21
|
-
<div class="inline-content"
|
|
33
|
+
<div class="inline-content"
|
|
34
|
+
ng-style="{'max-height': $ctrl.maxHeight + 'px'}">
|
|
22
35
|
<div class="inline-x">
|
|
23
|
-
<div class="inline-y"
|
|
24
|
-
|
|
36
|
+
<div class="inline-y"
|
|
37
|
+
ng-if="item[$ctrl.activeAttr] === undefined ? true : item[$ctrl.activeAttr]"
|
|
38
|
+
ng-repeat="item in $ctrl.ngModel track by $index">
|
|
25
39
|
<div class="inline-row"
|
|
26
|
-
|
|
40
|
+
ng-class="{'default-template': !$ctrl.transcludeTemplate && $parent.$index === 0 && $index === 0}">
|
|
27
41
|
<div class="x-value-col">
|
|
28
42
|
<span tabindex="-1">{{ item.xDetail.value}}</span>
|
|
29
43
|
</div>
|
|
30
44
|
<div class="y-value-col">
|
|
31
|
-
<div class="grid-product-item-circle"
|
|
45
|
+
<div class="grid-product-item-circle"
|
|
46
|
+
ng-style="{'background': item.yDetail.valueRef}"></div>
|
|
32
47
|
<span tabindex="-1">{{ item.yDetail.value }}</span>
|
|
33
48
|
</div>
|
|
34
|
-
<div class="barcode-col"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
49
|
+
<div class="barcode-col"
|
|
50
|
+
ng-hide="$ctrl.hideBarcode">
|
|
51
|
+
<input tabindex="-1"
|
|
52
|
+
type="text"
|
|
53
|
+
ng-class="{'input-error': item.inputError}"
|
|
54
|
+
ng-change="$ctrl.changeBarCode(item)"
|
|
55
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
56
|
+
ng-model="item.barCode"
|
|
57
|
+
placeholder="Código de barras"
|
|
58
|
+
ng-model-options="{ debounce: 500 }"
|
|
59
|
+
class="inline-product-barcode" />
|
|
39
60
|
</div>
|
|
40
61
|
<div class="stock-col">
|
|
41
|
-
<input tabindex="0"
|
|
42
|
-
|
|
43
|
-
|
|
62
|
+
<input tabindex="0"
|
|
63
|
+
type="number"
|
|
64
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
65
|
+
ng-model="item.stock"
|
|
66
|
+
ng-keydown="$ctrl.onKeydown($event)"
|
|
67
|
+
placeholder="0"
|
|
68
|
+
placeholder="Estoque"
|
|
69
|
+
ng-model-options="{ debounce: 500 }"
|
|
70
|
+
class="inline-product-stock"
|
|
71
|
+
onwheel="this.blur()" />
|
|
44
72
|
</div>
|
|
45
|
-
<div class="price-col"
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
73
|
+
<div class="price-col"
|
|
74
|
+
ng-hide="$ctrl.hidePrice">
|
|
75
|
+
<input tabindex="-1"
|
|
76
|
+
type="text"
|
|
77
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
78
|
+
ng-model="item.price"
|
|
79
|
+
ui-money-mask
|
|
80
|
+
ng-disabled="$ctrl.ngDisabled"
|
|
81
|
+
class="inline-product-money"
|
|
82
|
+
placeholder="0" />
|
|
49
83
|
</div>
|
|
50
84
|
</div>
|
|
51
85
|
</div>
|
|
@@ -1,169 +1,177 @@
|
|
|
1
1
|
.mbg-product-inline-wrapper {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
2
|
+
input[type="number"]::-webkit-outer-spin-button,
|
|
3
|
+
input[type="number"]::-webkit-inner-spin-button {
|
|
4
|
+
-webkit-appearance: none;
|
|
5
|
+
margin: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
input[type="number"] {
|
|
9
|
+
-moz-appearance: textfield;
|
|
10
|
+
}
|
|
11
|
+
.inline-content {
|
|
12
|
+
overflow: auto;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.inline-y {
|
|
16
|
+
&:first-child {
|
|
17
|
+
.inline-row {
|
|
18
|
+
border-top: 1px solid #ccc;
|
|
20
19
|
}
|
|
21
20
|
}
|
|
21
|
+
}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
.inline-row {
|
|
24
|
+
display: flex;
|
|
25
|
+
height: 44px;
|
|
26
|
+
border-bottom: 1px solid #ccc;
|
|
27
|
+
border-left: 1px solid #ccc;
|
|
28
|
+
border-right: 1px solid #ccc;
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
div {
|
|
31
|
+
flex: 1;
|
|
32
|
+
}
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
.x-value-col {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
max-width: 154px;
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
40
|
+
span {
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
color: #666;
|
|
44
43
|
}
|
|
45
44
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
align-items: center;
|
|
49
|
-
justify-content: flex-start;
|
|
50
|
-
max-width: 174px;
|
|
45
|
+
label {
|
|
46
|
+
margin-right: 5px;
|
|
51
47
|
}
|
|
48
|
+
}
|
|
52
49
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
50
|
+
.y-value-col {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: flex-start;
|
|
54
|
+
max-width: 174px;
|
|
58
55
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
align-items: center;
|
|
62
|
-
justify-content: center;
|
|
56
|
+
label {
|
|
57
|
+
margin-right: 5px;
|
|
63
58
|
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.barcode-col {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
}
|
|
64
66
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
.stock-col {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.price-col {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.grid-product-item-circle {
|
|
80
|
+
max-width: 18px;
|
|
81
|
+
width: 18px;
|
|
82
|
+
height: 18px;
|
|
83
|
+
border-radius: 50%;
|
|
84
|
+
margin: 0 12px 0 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
input {
|
|
88
|
+
background: transparent;
|
|
89
|
+
height: 100%;
|
|
90
|
+
width: 100%;
|
|
91
|
+
padding-right: 14px;
|
|
92
|
+
&.input-error {
|
|
93
|
+
color: #ff002e;
|
|
69
94
|
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
input[type="number"] {
|
|
98
|
+
-moz-appearance: textfield;
|
|
99
|
+
}
|
|
70
100
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
101
|
+
input::-webkit-outer-spin-button,
|
|
102
|
+
input::-webkit-inner-spin-button {
|
|
103
|
+
-webkit-appearance: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
input {
|
|
107
|
+
padding: 0 6px;
|
|
108
|
+
border: none;
|
|
109
|
+
text-align: right;
|
|
110
|
+
outline: none;
|
|
111
|
+
|
|
112
|
+
&.ng-touched.ng-invalid {
|
|
113
|
+
border: 1px solid #b00020;
|
|
77
114
|
}
|
|
78
115
|
|
|
79
|
-
|
|
80
|
-
background:
|
|
81
|
-
height: 100%;
|
|
82
|
-
width: 100%;
|
|
83
|
-
padding-right: 14px;
|
|
84
|
-
&.input-error {
|
|
85
|
-
color: #ff002e;
|
|
86
|
-
}
|
|
116
|
+
&[disabled="disabled"] {
|
|
117
|
+
background: #f5f5f5;
|
|
87
118
|
}
|
|
88
119
|
|
|
89
|
-
input
|
|
90
|
-
|
|
120
|
+
&::-webkit-input-placeholder {
|
|
121
|
+
color: #bcbcbc;
|
|
122
|
+
font-style: italic;
|
|
91
123
|
}
|
|
92
124
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
125
|
+
&:-moz-placeholder {
|
|
126
|
+
/* Firefox 18- */
|
|
127
|
+
color: #bcbcbc;
|
|
128
|
+
font-style: italic;
|
|
96
129
|
}
|
|
97
130
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
outline: none;
|
|
103
|
-
|
|
104
|
-
&.ng-touched.ng-invalid {
|
|
105
|
-
border: 1px solid #b00020;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
&[disabled="disabled"] {
|
|
109
|
-
background: #f5f5f5;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
&::-webkit-input-placeholder {
|
|
113
|
-
color: #bcbcbc;
|
|
114
|
-
font-style: italic;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
&:-moz-placeholder {
|
|
118
|
-
/* Firefox 18- */
|
|
119
|
-
color: #bcbcbc;
|
|
120
|
-
font-style: italic;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
&::-moz-placeholder {
|
|
124
|
-
/* Firefox 19+ */
|
|
125
|
-
color: #bcbcbc;
|
|
126
|
-
font-style: italic;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
&:-ms-input-placeholder {
|
|
130
|
-
color: #bcbcbc;
|
|
131
|
-
font-style: italic;
|
|
132
|
-
}
|
|
131
|
+
&::-moz-placeholder {
|
|
132
|
+
/* Firefox 19+ */
|
|
133
|
+
color: #bcbcbc;
|
|
134
|
+
font-style: italic;
|
|
133
135
|
}
|
|
134
136
|
|
|
135
|
-
|
|
136
|
-
color: #
|
|
137
|
-
font-
|
|
138
|
-
font-weight: 600;
|
|
137
|
+
&:-ms-input-placeholder {
|
|
138
|
+
color: #bcbcbc;
|
|
139
|
+
font-style: italic;
|
|
139
140
|
}
|
|
140
141
|
}
|
|
141
142
|
|
|
142
|
-
.
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
143
|
+
.inline-product-money {
|
|
144
|
+
color: #666;
|
|
145
|
+
font-size: 16px;
|
|
146
|
+
font-weight: 600;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
146
149
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
.default-header-inline {
|
|
151
|
+
* {
|
|
152
|
+
border: 0;
|
|
153
|
+
}
|
|
151
154
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
155
|
+
.barcode-col {
|
|
156
|
+
padding-right: 6px;
|
|
157
|
+
justify-content: flex-end;
|
|
158
|
+
}
|
|
156
159
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
160
|
+
.stock-col {
|
|
161
|
+
padding-right: 6px;
|
|
162
|
+
justify-content: flex-end;
|
|
163
|
+
}
|
|
161
164
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
color: #666;
|
|
166
|
-
font-weight: 600;
|
|
167
|
-
}
|
|
165
|
+
.price-col {
|
|
166
|
+
padding-right: 6px;
|
|
167
|
+
justify-content: flex-end;
|
|
168
168
|
}
|
|
169
|
+
|
|
170
|
+
label {
|
|
171
|
+
display: flex;
|
|
172
|
+
text-align: center;
|
|
173
|
+
color: #666;
|
|
174
|
+
font-weight: 600;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
169
177
|
}
|
|
@@ -8,8 +8,10 @@ class MbgProductInlineController {
|
|
|
8
8
|
private y: { key: string; label: string }
|
|
9
9
|
private gridValues: any
|
|
10
10
|
private errorCallBackBarCode: Function
|
|
11
|
+
private orderDirSizes: 'asc' | 'dir' = 'asc'
|
|
12
|
+
private orderDirColors: 'asc' | 'dir' = 'asc'
|
|
11
13
|
|
|
12
|
-
constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {
|
|
14
|
+
constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {}
|
|
13
15
|
|
|
14
16
|
$onInit() {
|
|
15
17
|
this.gridValues = {}
|
|
@@ -44,6 +46,34 @@ class MbgProductInlineController {
|
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
}
|
|
49
|
+
|
|
50
|
+
orderSizes(a, b, dir) {
|
|
51
|
+
if (dir == 'asc') {
|
|
52
|
+
return Number(a.xDetail.valueRef || 9999) - Number(b.xDetail.valueRef || 99999)
|
|
53
|
+
} else {
|
|
54
|
+
return Number(b.xDetail.valueRef || 99999) - Number(a.xDetail.valueRef || 9999)
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
orderColors(a, b, dir) {
|
|
59
|
+
if (dir == 'asc') {
|
|
60
|
+
return a.yDetail.description.localeCompare(b.yDetail.description)
|
|
61
|
+
} else {
|
|
62
|
+
return b.yDetail.description.localeCompare(a.yDetail.description)
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
order(column, dir) {
|
|
67
|
+
if (column == 'TAMANHOS') {
|
|
68
|
+
this.orderDirSizes = dir
|
|
69
|
+
this.ngModel.sort((a, b) => this.orderSizes(a, b, dir))
|
|
70
|
+
} else {
|
|
71
|
+
this.orderDirColors = dir
|
|
72
|
+
this.ngModel.sort(
|
|
73
|
+
(a, b) => this.orderSizes(a, b, this.orderDirSizes) || this.orderColors(a, b, dir),
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
}
|
|
47
77
|
}
|
|
48
78
|
|
|
49
79
|
MbgProductInlineController.$inject = ['$scope', '$element', '$attrs', '$timeout', '$transclude']
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Capitalize } from '@kigi/components/src/helpers/capitalize'
|
|
1
|
+
import { Capitalize } from '@kigi/components/src/helpers/capitalize';
|
|
2
2
|
import * as angular from 'angular'
|
|
3
3
|
import './mbg-select.scss'
|
|
4
4
|
import template from './mbg-select.html'
|
|
@@ -44,7 +44,6 @@ class MbgSelectController {
|
|
|
44
44
|
private transcludeSize: any
|
|
45
45
|
private getCustomModel: Function
|
|
46
46
|
private capitalize
|
|
47
|
-
private manyFavorite: boolean
|
|
48
47
|
|
|
49
48
|
constructor(
|
|
50
49
|
public $scope,
|
|
@@ -53,7 +52,7 @@ class MbgSelectController {
|
|
|
53
52
|
public $timeout,
|
|
54
53
|
public $compile,
|
|
55
54
|
public $transclude,
|
|
56
|
-
) {}
|
|
55
|
+
) { }
|
|
57
56
|
|
|
58
57
|
$onInit() {
|
|
59
58
|
this.fixedValue = this.ngValue || 'id'
|
|
@@ -431,12 +430,6 @@ class MbgSelectController {
|
|
|
431
430
|
this.executeCallback(isNew)
|
|
432
431
|
this.pressEnter = false
|
|
433
432
|
this.hasFocus = false
|
|
434
|
-
if (item instanceof Array) {
|
|
435
|
-
if (this.onSelect) {
|
|
436
|
-
item.forEach((i) => this.onSelect({ value: i }))
|
|
437
|
-
return
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
433
|
await this.updateModelValue(this.ngValue ? item[this.ngValue] : item)
|
|
441
434
|
if (this.onSelect) {
|
|
442
435
|
this.onSelect({ value: this.ngModel })
|
|
@@ -606,19 +599,8 @@ class MbgSelectController {
|
|
|
606
599
|
favorite(evt, item) {
|
|
607
600
|
evt.preventDefault()
|
|
608
601
|
evt.stopPropagation()
|
|
609
|
-
if (this.isFavorite(item)
|
|
602
|
+
if (this.isFavorite(item)) {
|
|
610
603
|
MbgCookie.set(this.getFavoriteKey(), null)
|
|
611
|
-
} else if (this.manyFavorite) {
|
|
612
|
-
if (this.isFavorite(item)) {
|
|
613
|
-
const favorite = MbgCookie.get(this.getFavoriteKey())
|
|
614
|
-
const index = favorite.findIndex((i) => i.id == item.id)
|
|
615
|
-
favorite.splice(index, 1)
|
|
616
|
-
MbgCookie.set(this.getFavoriteKey(), favorite)
|
|
617
|
-
} else {
|
|
618
|
-
const favorite = MbgCookie.get(this.getFavoriteKey())
|
|
619
|
-
const favoriteArray = favorite ? (favorite instanceof Array ? favorite : [favorite]) : []
|
|
620
|
-
MbgCookie.set(this.getFavoriteKey(), [...favoriteArray, item])
|
|
621
|
-
}
|
|
622
604
|
} else {
|
|
623
605
|
MbgCookie.set(this.getFavoriteKey(), item)
|
|
624
606
|
}
|
|
@@ -639,11 +621,7 @@ class MbgSelectController {
|
|
|
639
621
|
|
|
640
622
|
isFavorite(item) {
|
|
641
623
|
const favorite = MbgCookie.get(this.getFavoriteKey())
|
|
642
|
-
|
|
643
|
-
return favorite && (favorite || []).find((i) => i && i.id == item.id)
|
|
644
|
-
} else {
|
|
645
|
-
return favorite && angular.equals(favorite, item)
|
|
646
|
-
}
|
|
624
|
+
return favorite && angular.equals(favorite, item)
|
|
647
625
|
}
|
|
648
626
|
|
|
649
627
|
async fixedOption(evt, item) {
|
|
@@ -694,8 +672,7 @@ const mbgSelect = {
|
|
|
694
672
|
callbackAddFixedOption: '&?',
|
|
695
673
|
transcludeSize: '=?',
|
|
696
674
|
getCustomModel: '&?',
|
|
697
|
-
capitalize: '=?'
|
|
698
|
-
manyFavorite: '=?',
|
|
675
|
+
capitalize: '=?'
|
|
699
676
|
},
|
|
700
677
|
controller: MbgSelectController,
|
|
701
678
|
template,
|