@kigi/components 1.45.1 → 1.46.0-beta.2

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.
@@ -1,125 +1,127 @@
1
1
  <div class="store-goal-wrapper"
2
- ng-class="{'opacity-dash-goal': $ctrl.blockStoreGoal}">
3
- <div ng-show="!$ctrl.loading">
4
- <div class="description-container-dash">
5
- <span class="description-dash">
6
- Meta do mês / {{$ctrl.currentMonthName}}
7
- <i class="fa fa-exclamation-circle"
8
- uib-tooltip="{{$ctrl.percentageEstimatedMessage}}"
9
- tooltip-placement="top"
10
- ng-show="$ctrl.estimatedPercentageGreaterThanTarget"
11
- aria-hidden="true"></i>
12
- </span>
13
-
14
- <div class="mbg-h-c-tone-s-icon-dash"
15
- ng-click="$ctrl.toggleShowValueStoreGoal(false)">
16
- <label>{{$ctrl.indexActiveSlide}}</label>
17
- <i class="fa fa-lock lock-dash-store"
18
- aria-hidden="true"
19
- uib-tooltip="Sem permissão para visualizar"
20
- tooltip-placement="left"
21
- ng-if="$ctrl.blockStoreGoal"></i>
22
- <i ng-if="$ctrl.hideValue && !$ctrl.blockStoreGoal"
23
- disable-animate
24
- class="far fa-eye eye-board-target"></i>
25
- <i ng-if="!$ctrl.hideValue && !$ctrl.blockStoreGoal"
26
- disable-animate
27
- class="far fa-eye-slash eye-board-target"></i>
28
-
29
- </div>
2
+ ng-class="{'opacity-dash-goal': $ctrl.blockStoreGoal}"
3
+ ng-show="$ctrl.showDashboard">
4
+ <div class="description-container-dash">
5
+ <p class="description-dash">
6
+ Meta do mês / {{$ctrl.currentMonthName}}
7
+ <i class="fa fa-exclamation-circle"
8
+ uib-tooltip="{{$ctrl.percentageEstimatedMessage}}"
9
+ tooltip-placement="top"
10
+ ng-show="$ctrl.estimatedPercentageGreaterThanTarget"
11
+ aria-hidden="true"></i>
12
+ </p>
13
+ <div class="mbg-h-c-tone-s-icon-dash"
14
+ ng-click="$ctrl.toggleShowValueStoreGoal(false)">
15
+ <i class="fa fa-lock lock-dash-store"
16
+ aria-hidden="true"
17
+ uib-tooltip="Sem permissão para visualizar"
18
+ tooltip-placement="left"
19
+ ng-if="$ctrl.blockStoreGoal"></i>
20
+ <i ng-if="$ctrl.hideValue && !$ctrl.blockStoreGoal"
21
+ disable-animate
22
+ class="far fa-eye eye-board-target"></i>
23
+ <i ng-if="!$ctrl.hideValue && !$ctrl.blockStoreGoal"
24
+ disable-animate
25
+ class="far fa-eye-slash eye-board-target"></i>
30
26
  </div>
31
- <div class="line-goal"></div>
32
- <div class="dashboard-wrapper">
33
- <div class="swiper">
34
- <div class="swiper-wrapper">
35
- <div class="swiper-slide">
36
- <div class="chart-container"
37
- id="container-speed">
38
- </div>
27
+ </div>
28
+ <div class="active-index"
29
+ ng-if="$ctrl.indexActiveSlide">
30
+ <label>{{$ctrl.indexActiveSlide}}</label>
31
+ </div>
32
+
33
+ <div class="line-goal"></div>
34
+ <div class="dashboard-wrapper">
35
+ <div class="swiper">
36
+ <div class="swiper-wrapper">
37
+ <div class="swiper-slide">
38
+ <div class="chart-container"
39
+ id="container-speed">
39
40
  </div>
41
+ </div>
40
42
 
41
- <div class="swiper-slide">
42
- <div class="dashboard-estimated">
43
- <p ng-if="$ctrl.hideValue">Meta: <strong>{{$ctrl.goalDataForTheMonth.target | currency: 'R$ '
44
- }}</strong>
45
- </p>
46
- <p ng-if="!$ctrl.hideValue">Meta: <i class="fa fa-lock"
47
- aria-hidden="true"
48
- tooltip-placement="right"
49
- uib-tooltip="Sem permissão para visualizar"></i>
50
- </p>
51
- <p ng-if="!$ctrl.hideValue">Venda atual: <i class="fa fa-lock"
52
- aria-hidden="true"
53
- tooltip-placement="right"
54
- uib-tooltip="Sem permissão para visualizar"></i>
55
- </p>
56
- <p class="estimate-goal-store lock-permition"
57
- ng-if="$ctrl.hideValue">Venda atual: <strong>{{$ctrl.goalDataForTheMonth.sales | currency: 'R$ '
58
- }}</strong>
59
- <i class="fa fa-exclamation-circle"
60
- aria-hidden="true"
61
- tooltip-placement="top"
62
- uib-tooltip="Considera devoluções"></i>
63
- </p>
64
- <p ng-if="!$ctrl.hideValue">Restante: <i class="fa fa-lock"
65
- aria-hidden="true"
66
- tooltip-placement="right"
67
- uib-tooltip="Sem permissão para visualizar"></i>
68
- </p>
69
- <p class="estimate-goal-store"
70
- ng-if="$ctrl.hideValue">Restante: <strong>{{$ctrl.goalDataForTheMonth.remaining | currency: 'R$
71
- '
72
- }} =
73
- ({{$ctrl.goalDataForTheMonth.remainingPercentage}}%)</strong>
74
- </p>
75
- <p ng-if="!$ctrl.hideValue">Estimativa: <i class="fa fa-lock"
76
- aria-hidden="true"
77
- tooltip-placement="right"
78
- uib-tooltip="Sem permissão para visualizar"></i>
79
- </p>
80
- <p class="estimate-goal-store"
81
- ng-if="$ctrl.hideValue">Estimativa: <strong>{{$ctrl.goalDataForTheMonth.estimate | currency: 'R$
82
- '}} =
83
- ({{$ctrl.goalDataForTheMonth.estimatePercentage}}%)</strong>
84
- </p>
85
- </div>
43
+ <div class="swiper-slide">
44
+ <div class="dashboard-estimated">
45
+ <p ng-if="$ctrl.hideValue">Meta: <strong>{{$ctrl.goalDataForTheMonth.target | currency: 'R$ '
46
+ }}</strong>
47
+ </p>
48
+ <p ng-if="!$ctrl.hideValue">Meta: <i class="fa fa-lock"
49
+ aria-hidden="true"
50
+ tooltip-placement="right"
51
+ uib-tooltip="Sem permissão para visualizar"></i>
52
+ </p>
53
+ <p ng-if="!$ctrl.hideValue">Venda atual: <i class="fa fa-lock"
54
+ aria-hidden="true"
55
+ tooltip-placement="right"
56
+ uib-tooltip="Sem permissão para visualizar"></i>
57
+ </p>
58
+ <p class="estimate-goal-store lock-permition"
59
+ ng-if="$ctrl.hideValue">Venda atual: <strong>{{$ctrl.goalDataForTheMonth.sales | currency: 'R$ '
60
+ }}</strong>
61
+ <i class="fa fa-exclamation-circle"
62
+ aria-hidden="true"
63
+ tooltip-placement="top"
64
+ uib-tooltip="Considera devoluções"></i>
65
+ </p>
66
+ <p ng-if="!$ctrl.hideValue">Restante: <i class="fa fa-lock"
67
+ aria-hidden="true"
68
+ tooltip-placement="right"
69
+ uib-tooltip="Sem permissão para visualizar"></i>
70
+ </p>
71
+ <p class="estimate-goal-store"
72
+ ng-if="$ctrl.hideValue">Restante: <strong>{{$ctrl.goalDataForTheMonth.remaining | currency: 'R$ '
73
+ }} =
74
+ ({{$ctrl.goalDataForTheMonth.remainingPercentage}}%)</strong>
75
+ </p>
76
+ <p ng-if="!$ctrl.hideValue">Estimativa: <i class="fa fa-lock"
77
+ aria-hidden="true"
78
+ tooltip-placement="right"
79
+ uib-tooltip="Sem permissão para visualizar"></i>
80
+ </p>
81
+ <p class="estimate-goal-store"
82
+ ng-if="$ctrl.hideValue">Estimativa: <strong>{{$ctrl.goalDataForTheMonth.estimate | currency: 'R$
83
+ '}} =
84
+ ({{$ctrl.goalDataForTheMonth.estimatePercentage}}%)</strong>
85
+ </p>
86
86
  </div>
87
+ </div>
87
88
 
88
- <div class="swiper-slide">
89
- <div class="dashboard-estimated-store">
90
- <p ng-if="$ctrl.hideValue">Meta diária: <strong>{{$ctrl.goalDataForTheMonth.dailyTarget | currency:
91
- 'R$ '
92
- }}</strong></p>
93
- <p ng-if="!$ctrl.hideValue">Meta diária: <i class="fa fa-lock"
94
- aria-hidden="true"
95
- tooltip-placement="right"
96
- uib-tooltip="Sem permissão para visualizar"></i>
97
- </p>
98
- <p ng-if="!$ctrl.hideValue">Realizado/dia: <i class="fa fa-lock"
99
- aria-hidden="true"
100
- tooltip-placement="right"
101
- uib-tooltip="Sem permissão para visualizar"></i>
102
- </p>
103
- <p class="estimate-goal-store"
104
- ng-if="$ctrl.hideValue">Realizado/dia: <strong>{{$ctrl.goalDataForTheMonth.realityPerDay |
105
- currency: 'R$
106
- ' }}</strong>
107
- </p>
108
- <p ng-if="!$ctrl.hideValue">Necessidade/dia: <i class="fa fa-lock"
109
- aria-hidden="true"
110
- tooltip-placement="right"
111
- uib-tooltip="Sem permissão para visualizar"></i>
112
- </p>
113
- <p class="estimate-goal-store"
114
- ng-if="$ctrl.hideValue">Necessidade/dia: <strong>{{$ctrl.goalDataForTheMonth.neededPerDay |
115
- currency: 'R$
116
- ' }}</strong>
117
- </p>
118
- </div>
89
+ <div class="swiper-slide">
90
+ <div class="dashboard-estimated-store">
91
+ <p ng-if="$ctrl.hideValue">Meta diária: <strong>{{$ctrl.goalDataForTheMonth.dailyTarget | currency:
92
+ 'R$ '
93
+ }}</strong></p>
94
+ <p ng-if="!$ctrl.hideValue">Meta diária: <i class="fa fa-lock"
95
+ aria-hidden="true"
96
+ tooltip-placement="right"
97
+ uib-tooltip="Sem permissão para visualizar"></i>
98
+ </p>
99
+ <p ng-if="!$ctrl.hideValue">Realizado/dia: <i class="fa fa-lock"
100
+ aria-hidden="true"
101
+ tooltip-placement="right"
102
+ uib-tooltip="Sem permissão para visualizar"></i>
103
+ </p>
104
+ <p class="estimate-goal-store"
105
+ ng-if="$ctrl.hideValue">Realizado/dia: <strong>{{$ctrl.goalDataForTheMonth.realityPerDay |
106
+ currency: 'R$
107
+ ' }}</strong>
108
+ </p>
109
+ <p ng-if="!$ctrl.hideValue">Necessidade/dia: <i class="fa fa-lock"
110
+ aria-hidden="true"
111
+ tooltip-placement="right"
112
+ uib-tooltip="Sem permissão para visualizar"></i>
113
+ </p>
114
+ <p class="estimate-goal-store"
115
+ ng-if="$ctrl.hideValue">Necessidade/dia: <strong>{{$ctrl.goalDataForTheMonth.neededPerDay |
116
+ currency: 'R$
117
+ ' }}</strong>
118
+ </p>
119
119
  </div>
120
120
  </div>
121
- <div class="swiper-pagination"></div>
122
121
  </div>
122
+
123
+
124
+ <div class="swiper-pagination"></div>
123
125
  <div class="loading-indicator">
124
126
  <svg id="loading-circle"
125
127
  width="30"
@@ -147,16 +149,10 @@
147
149
  </div>
148
150
  </div>
149
151
  </div>
150
-
151
152
  </div>
152
153
 
153
- <div ng-show="!$ctrl.showDashboard && !$ctrl.loading"
154
+ <div ng-show="!$ctrl.showDashboard"
154
155
  class="hide-goal">
155
156
  <label for="">Sem meta cadastrada. Defina sua meta hoje. <a class="state-goal"
156
157
  ng-click="$ctrl.stateGoNewGoal()">Clique aqui</a> </label>
157
- </div>
158
-
159
- <div class="fake-chart"
160
- ng-if="$ctrl.loading">
161
- <mbg-skeleton></mbg-skeleton>
162
158
  </div>
@@ -1,16 +1,12 @@
1
1
  .store-goal-wrapper {
2
- width: 100%;
3
- max-width: 100%;
4
- overflow: hidden;
5
- padding: 0px 16px;
6
2
 
7
3
  .loading-indicator {
8
- display: flex;
9
- align-items: center;
10
- justify-content: center;
11
- padding: 0px 0px 100px 40px;
4
+ position: absolute;
5
+ top: 26%;
6
+ left: 98%;
12
7
  transform: translate(-50%, -50%);
13
-
8
+ width: 40px;
9
+ height: 40px;
14
10
  }
15
11
 
16
12
  #loading-circle {
@@ -20,7 +16,7 @@
20
16
  .swiper {
21
17
  width: 100%;
22
18
  height: 100%;
23
- overflow: hidden;
19
+ overflow: hidden;
24
20
  }
25
21
 
26
22
  .swiper-wrapper {
@@ -29,10 +25,10 @@
29
25
  }
30
26
 
31
27
  .swiper-slide {
32
- width: 100%;
28
+ width: 100%;
33
29
  flex-shrink: 0;
34
30
  display: flex;
35
- justify-content: center;
31
+ justify-content: center;
36
32
  align-items: center;
37
33
  box-sizing: border-box;
38
34
  }
@@ -42,26 +38,26 @@
42
38
  justify-content: center;
43
39
  align-items: center;
44
40
  }
45
-
41
+
46
42
  .swiper-pagination {
47
43
  position: absolute;
48
- top: 100px;
44
+ top: 100px;
49
45
  left: 50%;
50
46
  transform: translateX(-50%);
51
47
  display: flex;
52
48
  gap: 5px;
53
49
  }
54
-
50
+
55
51
  .swiper-pagination-bullet {
56
52
  width: 10px;
57
53
  height: 10px;
58
- background-color: #606A90;
54
+ background-color: #606A90;
59
55
  border-radius: 50%;
60
56
  opacity: 0.5;
61
57
  }
62
58
 
63
59
  .swiper-pagination-bullet-active {
64
- background-color: #0EBCBD;
60
+ background-color: #0EBCBD;
65
61
  opacity: 1;
66
62
  }
67
63
 
@@ -72,7 +68,7 @@
72
68
  margin-top: -17px;
73
69
  color: var(--titleColor);
74
70
  }
75
-
71
+
76
72
 
77
73
  .line-goal {
78
74
  width: 100%;
@@ -83,7 +79,7 @@
83
79
  }
84
80
 
85
81
  .dashboard-wrapper {
86
- overflow: hidden;
82
+ overflow: hidden;
87
83
  display: flex;
88
84
  justify-content: center;
89
85
  align-items: center;
@@ -93,18 +89,21 @@
93
89
 
94
90
 
95
91
  .dashboard-estimated {
96
- display: flex;
97
- flex-direction: column;
98
- padding: 5px 5px 0px 55px;
92
+ position: relative;
93
+ left: 52px;
94
+ top: 10px;
95
+ height: 115px;
99
96
  font-size: 14px;
100
97
  color: #5f5b5b;
101
98
 
102
99
  }
103
100
 
104
101
  .dashboard-estimated-store {
105
- display: flex;
106
- flex-direction: column;
107
- padding: 5px 5px 0px 55px;
102
+
103
+ position: relative;
104
+ top: 18px;
105
+ left: 38px;
106
+ height: 115px;
108
107
  font-size: 14px;
109
108
  color: #5f5b5b;
110
109
  }
@@ -163,8 +162,8 @@
163
162
  }
164
163
 
165
164
  }
165
+ .lock-permition{
166
166
 
167
- .lock-permition {
168
167
  .tooltip-inner {
169
168
  background: #0EBCBD !important;
170
169
  color: #000000 !important;
@@ -188,17 +187,31 @@
188
187
  display: flex;
189
188
  justify-content: space-between;
190
189
  width: 100%;
190
+ margin-top: 16px;
191
191
  font-weight: 600;
192
192
  font-size: 14px;
193
- align-items: center;
194
- padding: 8px 0 5px 0;
195
193
 
194
+ .active-index-slide{
195
+ position: relative;
196
+ top: -11px;
197
+ left: 95px;
198
+ }
196
199
 
197
200
  .mbg-h-c-tone-s-icon-dash {
201
+ margin-top: -10px;
198
202
  transition: opacity 500ms ease;
199
203
  opacity: 0.9;
200
204
  }
201
205
 
206
+ .lock-dash-store {
207
+ position: relative;
208
+ }
209
+
210
+ .show-tooltip {
211
+ font-size: 20px;
212
+ color: #5f5b5b;
213
+ z-index: 9999;
214
+ }
202
215
  }
203
216
 
204
217
  @keyframes blink {
@@ -216,10 +229,8 @@
216
229
  }
217
230
 
218
231
  .description-dash {
219
- color: #aaabaa;
220
- font-size: 17px;
221
- font-weight: 500;
222
- fill: #aaabaa;
232
+ font-size: 20px;
233
+ color: #5f5b5b;
223
234
 
224
235
  i {
225
236
  animation: blink 1s infinite;
@@ -235,25 +246,78 @@
235
246
  }
236
247
  }
237
248
 
249
+ @media screen and (max-width: 1920px){
250
+
251
+ .description-container-dash{
252
+ .active-index-slide {
253
+ left: 140px;
254
+ }
255
+ }
256
+ }
257
+
258
+ @media screen and (max-width: 1728px){
259
+ .description-container-dash{
260
+ .active-index-slide {
261
+ left: 108px;
262
+ }
263
+ }
264
+ }
265
+
266
+ @media screen and (max-width: 1536px){
267
+ .description-container-dash{
268
+ .active-index-slide {
269
+ left: 70px;
270
+ }
271
+ }
272
+ }
273
+ @media screen and (max-width: 1440px){
274
+ .dashboard-wrapper{
275
+ .swiper-slide{
276
+ .dashboard-estimated{
277
+ position: relative;
278
+ left: 32px;
279
+ }
280
+ }
281
+
282
+ }
283
+ .description-container-dash{
284
+ .active-index-slide {
285
+ left: 58px;
286
+ }
287
+ }
288
+ }
289
+
290
+ @media screen and (max-width: 1366px){
291
+ .description-container-dash{
292
+ .active-index-slide {
293
+ left: 125px;
294
+ }
295
+ }
296
+ }
297
+
298
+ @media screen and (max-width: 1024px){
299
+ .dashboard-wrapper{
300
+ .swiper-slide{
301
+ .dashboard-estimated{
302
+ position: relative;
303
+ left: 24px;
304
+ }
305
+ }
306
+
307
+ }
308
+ .description-container-dash{
309
+ .active-index-slide {
310
+ left: 44px;
311
+ }
312
+ }
313
+ }
314
+
238
315
  }
239
316
 
240
317
  .opacity-dash-goal {
241
318
  opacity: 0.6;
242
319
  }
243
320
 
244
- .fake-chart {
245
- width: 100%;
246
- height: 100%;
247
- position: relative;
248
- border-radius: 10px;
249
- padding: 0px;
250
- margin: 0px;
251
- box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
252
- overflow: hidden;
253
- flex: 1;
254
- display: flex;
255
- }
256
-
257
321
  .hide-goal {
258
322
  display: flex;
259
323
  justify-content: center;
@@ -266,25 +330,4 @@
266
330
 
267
331
  .state-goal {
268
332
  cursor: pointer;
269
- }
270
-
271
- @media screen and (max-width: 1440px) {
272
- .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
273
- display: flex;
274
- flex-direction: column;
275
- padding: 0px 5px 0px 30px;
276
- color: #5f5b5b;
277
- // font-size: 12px;
278
- }
279
- }
280
-
281
-
282
- @media screen and (max-width: 1024px) {
283
- .store-goal-wrapper .dashboard-wrapper .dashboard-estimated {
284
- display: flex;
285
- flex-direction: column;
286
- padding: 0px 5px 0px 5px;
287
- color: #5f5b5b;
288
- // font-size: 12px;
289
- }
290
333
  }
@@ -308,7 +308,6 @@ const mbgStoreGoal = {
308
308
  goalDataForTheMonth: '=?',
309
309
  isPermissionStoreGoal: '=?',
310
310
  allowDashBoardAutoValues: '=?',
311
- loading: '=?',
312
311
  },
313
312
  template,
314
313
  controller: MbgStoreGoalController,