@kigi/components 1.58.0 → 1.59.0-beta.1
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-product-grid/mbg-product-grid.html +94 -103
- package/src/components/mbg-product-grid/mbg-product-grid.ts +2 -0
- package/src/components/mbg-product-inline/mbg-product-inline.html +26 -19
- package/src/components/mbg-product-inline/mbg-product-inline.ts +8 -1
package/package.json
CHANGED
|
@@ -1,114 +1,105 @@
|
|
|
1
1
|
<div class="mbg-product-grid-wrapper">
|
|
2
2
|
<table class="table table-striped">
|
|
3
3
|
<thead>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
4
|
+
<tr>
|
|
5
|
+
<th class="grid-center-content">
|
|
6
|
+
<div class="border-list">
|
|
7
|
+
<label>{{ ::$ctrl.y.label }}</label>
|
|
8
|
+
</div>
|
|
9
|
+
</th>
|
|
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
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
</th>
|
|
21
|
+
</tr>
|
|
22
|
+
<tr>
|
|
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
32
|
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
</td>
|
|
34
|
+
</tr>
|
|
35
35
|
</thead>
|
|
36
36
|
<tbody>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
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" />
|
|
74
|
-
</svg>
|
|
75
|
-
<a tabindex="-1"
|
|
76
|
-
class="link"
|
|
77
|
-
ng-show="$ctrl.activeAddOrRemove"
|
|
78
|
-
ng-click="$ctrl.toogleEnableItem($index, $parent.$index)">
|
|
79
|
-
{{ $ctrl.gridValues[$index][$parent.$index].enable ? 'Remover' : 'Adicionar'}}
|
|
80
|
-
</a>
|
|
81
|
-
<span tabindex="-1"
|
|
82
|
-
ng-show="$ctrl.enableCurrentStock">Estoque:
|
|
37
|
+
<tr ng-repeat="yItem in $ctrl.grid.y track by yItem.value">
|
|
38
|
+
<td>
|
|
39
|
+
<div class="grid-product-item-name-wrapper border-list">
|
|
40
|
+
<div class="grid-product-item-circle"
|
|
41
|
+
ng-style="{'background': yItem.valueRef}"></div>
|
|
42
|
+
<span>{{ ::yItem.value }}</span>
|
|
43
|
+
</div>
|
|
44
|
+
</td>
|
|
45
|
+
<td ng-repeat="xItem in $ctrl.grid.x track by xItem.value">
|
|
46
|
+
<div class="grid-transclude-edit-wrapper">
|
|
47
|
+
<div ng-show="$ctrl.transcludeTemplate"
|
|
48
|
+
mbg-dynamic-html="$ctrl.transcludeTemplate"></div>
|
|
49
|
+
</div>
|
|
50
|
+
<div ng-class="{'has-divergent-price': $ctrl.gridValues[$index][$parent.$index].hasDivergentPrice}"
|
|
51
|
+
ng-show="!$ctrl.transcludeTemplate"
|
|
52
|
+
class="grid-product-edit-wrapper">
|
|
53
|
+
<svg tabindex="-1"
|
|
54
|
+
height="401pt"
|
|
55
|
+
viewBox="0 -1 401.52289 401"
|
|
56
|
+
width="401pt"
|
|
57
|
+
ng-click="$ctrl.onClickEditButton({ x: xItem, y: yItem })"
|
|
58
|
+
ng-show="$ctrl.activeEdit && $ctrl.gridValues[$index][$parent.$index].enable"
|
|
59
|
+
xmlns="http://www.w3.org/2000/svg">
|
|
60
|
+
<path
|
|
61
|
+
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" />
|
|
62
|
+
<path
|
|
63
|
+
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" />
|
|
64
|
+
</svg>
|
|
65
|
+
<a tabindex="-1"
|
|
66
|
+
class="link"
|
|
67
|
+
ng-show="$ctrl.activeAddOrRemove"
|
|
68
|
+
ng-click="$ctrl.toogleEnableItem($index, $parent.$index)">
|
|
69
|
+
{{ $ctrl.gridValues[$index][$parent.$index].enable ? 'Remover' : 'Adicionar'}}
|
|
70
|
+
</a>
|
|
71
|
+
<span tabindex="-1"
|
|
72
|
+
ng-show="$ctrl.enableCurrentStock">Estoque:
|
|
83
73
|
{{$ctrl.gridValues[$index][$parent.$index].currentStock || '0'}}</span>
|
|
84
|
-
|
|
85
|
-
|
|
74
|
+
<span tabindex="-1"
|
|
75
|
+
ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }">
|
|
86
76
|
{{$ctrl.inputLabel ? $ctrl.inputLabel : $ctrl.showStock ? 'Estoque' : 'R$ Venda'}}</span>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
</
|
|
111
|
-
</
|
|
77
|
+
<input tabindex="0"
|
|
78
|
+
type="number"
|
|
79
|
+
ng-show="$ctrl.showStock"
|
|
80
|
+
ng-model="$ctrl.gridValues[$index][$parent.$index].stock"
|
|
81
|
+
placeholder="0"
|
|
82
|
+
ng-keydown="$ctrl.onKeydown($event)"
|
|
83
|
+
ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }"
|
|
84
|
+
ng-change="$ctrl.handleGridValues()"
|
|
85
|
+
ng-model-options="{ debounce: 500 }"
|
|
86
|
+
class="grid-product-stock"
|
|
87
|
+
onwheel="this.blur()" />
|
|
88
|
+
<input tabindex="-1"
|
|
89
|
+
type="text"
|
|
90
|
+
ng-model="$ctrl.gridValues[$index][$parent.$index].price"
|
|
91
|
+
ng-show="$ctrl.enablePrice"
|
|
92
|
+
ui-money-mask
|
|
93
|
+
ng-disabled="$ctrl.ngDisabled"
|
|
94
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
95
|
+
ng-class="{ 'grid-disable': $ctrl.activeAddOrRemove && !$ctrl.gridValues[$index][$parent.$index].enable }"
|
|
96
|
+
ng-change="$ctrl.handleGridValues()"
|
|
97
|
+
ng-model-options="{ debounce: 500 }"
|
|
98
|
+
class="grid-product-money"
|
|
99
|
+
placeholder="0" />
|
|
100
|
+
</div>
|
|
101
|
+
</td>
|
|
102
|
+
</tr>
|
|
112
103
|
</tbody>
|
|
113
104
|
</table>
|
|
114
|
-
</div>
|
|
105
|
+
</div>
|
|
@@ -102,6 +102,7 @@ class MbgProductGridController {
|
|
|
102
102
|
})
|
|
103
103
|
.forEach((item) => this.ngModel.push(item))
|
|
104
104
|
})
|
|
105
|
+
if (!!this.onUpdate) this.onUpdate({ data: this.ngModel })
|
|
105
106
|
})
|
|
106
107
|
}
|
|
107
108
|
|
|
@@ -150,6 +151,7 @@ const mbgProductGrid = {
|
|
|
150
151
|
showStock: '=?',
|
|
151
152
|
enablePrice: '=?',
|
|
152
153
|
enableCurrentStock: '=?',
|
|
154
|
+
onUpdate: '&?',
|
|
153
155
|
},
|
|
154
156
|
template,
|
|
155
157
|
controller: MbgProductGridController,
|
|
@@ -59,30 +59,37 @@
|
|
|
59
59
|
class="inline-product-barcode" />
|
|
60
60
|
</div>
|
|
61
61
|
<div class="stock-col">
|
|
62
|
-
<input
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
62
|
+
<input
|
|
63
|
+
tabindex="0"
|
|
64
|
+
type="number"
|
|
65
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
66
|
+
ng-model="item.stock"
|
|
67
|
+
ng-keydown="$ctrl.onKeydown($event)"
|
|
68
|
+
placeholder="0"
|
|
69
|
+
placeholder="Estoque"
|
|
70
|
+
ng-model-options="{ debounce: 500 }"
|
|
71
|
+
class="inline-product-stock"
|
|
72
|
+
onwheel="this.blur()"
|
|
73
|
+
ng-change="$ctrl.handleUpdate(item)"
|
|
74
|
+
/>
|
|
72
75
|
</div>
|
|
73
76
|
<div class="price-col"
|
|
74
77
|
ng-hide="$ctrl.hidePrice">
|
|
75
|
-
<input
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
<input
|
|
79
|
+
tabindex="-1"
|
|
80
|
+
type="text"
|
|
81
|
+
onclick="angular.element(this).scope().$ctrl.focusInput(this)"
|
|
82
|
+
ng-model="item.price"
|
|
83
|
+
ui-money-mask
|
|
84
|
+
ng-disabled="$ctrl.ngDisabled"
|
|
85
|
+
class="inline-product-money"
|
|
86
|
+
placeholder="0"
|
|
87
|
+
ng-change="$ctrl.handleUpdate(item)"
|
|
88
|
+
ng-model-options="{ debounce: 500 }"
|
|
89
|
+
/>
|
|
83
90
|
</div>
|
|
84
91
|
</div>
|
|
85
92
|
</div>
|
|
86
93
|
</div>
|
|
87
94
|
</div>
|
|
88
|
-
</div>
|
|
95
|
+
</div>
|
|
@@ -11,7 +11,8 @@ class MbgProductInlineController {
|
|
|
11
11
|
private orderDirSizes: 'asc' | 'dir' = 'asc'
|
|
12
12
|
private orderDirColors: 'asc' | 'dir' = 'asc'
|
|
13
13
|
|
|
14
|
-
constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {
|
|
14
|
+
constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {
|
|
15
|
+
}
|
|
15
16
|
|
|
16
17
|
$onInit() {
|
|
17
18
|
this.gridValues = {}
|
|
@@ -45,6 +46,7 @@ class MbgProductInlineController {
|
|
|
45
46
|
this.$timeout(() => (item.inputError = !!callBack))
|
|
46
47
|
}
|
|
47
48
|
}
|
|
49
|
+
this.handleUpdate(item)
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
orderSizes(a, b, dir) {
|
|
@@ -74,6 +76,10 @@ class MbgProductInlineController {
|
|
|
74
76
|
)
|
|
75
77
|
}
|
|
76
78
|
}
|
|
79
|
+
|
|
80
|
+
handleUpdate(item) {
|
|
81
|
+
if (this.onUpdate) this.onUpdate({ data: item })
|
|
82
|
+
}
|
|
77
83
|
}
|
|
78
84
|
|
|
79
85
|
MbgProductInlineController.$inject = ['$scope', '$element', '$attrs', '$timeout', '$transclude']
|
|
@@ -89,6 +95,7 @@ const mbgProductInline = {
|
|
|
89
95
|
activeAttr: '@?',
|
|
90
96
|
hidePrice: '=?',
|
|
91
97
|
hideBarcode: '=?',
|
|
98
|
+
onUpdate: '&?',
|
|
92
99
|
},
|
|
93
100
|
template,
|
|
94
101
|
controller: MbgProductInlineController,
|