@kigi/components 1.45.0-beta.2 → 1.45.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.45.0-beta.2",
+  "version": "1.45.0-beta.3",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-average-customer-time/mbg-average-customer-time.html

@@ -1,5 +1,6 @@
-<div class="average-customer-time-wrapper">
-   <div class="row">
+<div class="average-customer-time-wrapper"
+     ng-if="!$ctrl.loadingChartCustomer">
+   <div class="row customer-average">
       <div class="description-container-dash"
            ng-show="$ctrl.percentagesReturnCustomerTime.length">
          <span class="description-dash">Tempo médio de retorno do cliente</span>
@@ -29,4 +30,9 @@
            id="container">
       </div>
    </div>
+</div>
+
+<div class="fake-chart"
+     ng-if="$ctrl.loadingChartCustomer">
+   <mbg-skeleton></mbg-skeleton>
 </div>

package/src/components/mbg-average-customer-time/mbg-average-customer-time.scss

@@ -4,9 +4,23 @@ mbg-average-customer-time {
   height: 100%; 
   flex-grow: 1; 
   box-sizing: border-box;
-  padding: 0px 16px;
 }
 
+.customer-average {
+  padding: 0px 32px;
+}
+
+.fake-chart {
+  width: 100%; 
+  height: 100%; 
+  position: relative;
+  border-radius: 15px;
+  padding: 0px;
+  margin: 0px;
+  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  flex: 1;
+}
 
   .opacity-dash{
     opacity: 0.6;

package/src/components/mbg-average-customer-time/mbg-average-customer-time.ts

@@ -17,6 +17,7 @@ class MbgAverageCustomerTimeController {
   private boundAdjustContainerWidth
   private allowDashBoardAutoValues
   private callBackInstanceZapi: Function
+  private loadingChartCustomer: boolean
 
   constructor(
     public $scope,
@@ -28,6 +29,7 @@ class MbgAverageCustomerTimeController {
   ) {}
 
   async $onInit() {
+    this.loadingChartCustomer = true
     this.isBlockValuesDashboarReturnCustomer =
       !this.allowedToSee || !this.isPermissionAverageCustomerReturnTime
     this.initialize()
@@ -125,6 +127,8 @@ class MbgAverageCustomerTimeController {
       }
     })
 
+    this.loadingChartCustomer = false
+
     Highcharts.chart('container', {
       chart: {
         type: 'pie',
@@ -266,6 +270,7 @@ const mbgAverageCustomerTime = {
     isBlockValuesDashboarReturnCustomer: '=?',
     allowDashBoardAutoValues: '=?',
     callBackInstanceZapi: '&?',
+    loading: '=?',
   },
   template,
   controller: MbgAverageCustomerTimeController,

package/src/components/mbg-store-goal/mbg-store-goal.html

@@ -1,6 +1,6 @@
 <div class="store-goal-wrapper"
      ng-class="{'opacity-dash-goal': $ctrl.blockStoreGoal}"
-     ng-show="$ctrl.showDashboard">
+     ng-if="!$ctrl.loading || $ctrl.showDashboard ">
    <div class="description-container-dash">
       <span class="description-dash">
          Meta do mês / {{$ctrl.currentMonthName}}
@@ -28,11 +28,6 @@
 
       </div>
    </div>
-   <!-- <div class="active-index"
-        ng-if="$ctrl.indexActiveSlide">
-      <label>{{$ctrl.indexActiveSlide}}</label>
-   </div> -->
-
    <div class="line-goal"></div>
    <div class="dashboard-wrapper">
       <div class="swiper">
@@ -154,8 +149,13 @@
    </div>
 </div>
 
-<div ng-show="!$ctrl.showDashboard"
+<div ng-show="!$ctrl.showDashboard && !$ctrl.loading"
      class="hide-goal">
    <label for="">Sem meta cadastrada. Defina sua meta hoje. <a class="state-goal"
          ng-click="$ctrl.stateGoNewGoal()">Clique aqui</a> </label>
+</div>
+
+<div class="fake-chart"
+     ng-if="$ctrl.loading">
+   <mbg-skeleton></mbg-skeleton>
 </div>

package/src/components/mbg-store-goal/mbg-store-goal.scss

@@ -2,6 +2,7 @@
   width: 100%; 
   max-width: 100%;
   overflow: hidden;
+  padding: 0px 16px;
 
   .loading-indicator {
     position: absolute;
@@ -243,6 +244,19 @@
   opacity: 0.6;
 }
 
+.fake-chart {
+  width: 100%; 
+  height: 100%; 
+  position: relative;
+  border-radius: 10px;
+  padding: 0px;
+  margin: 0px;
+  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  flex: 1;
+  display: flex;
+}
+
 .hide-goal {
   display: flex;
   justify-content: center;

package/src/components/mbg-store-goal/mbg-store-goal.ts

@@ -308,6 +308,7 @@ const mbgStoreGoal = {
     goalDataForTheMonth: '=?',
     isPermissionStoreGoal: '=?',
     allowDashBoardAutoValues: '=?',
+    loading: '=?',
   },
   template,
   controller: MbgStoreGoalController,

package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.html

@@ -1,7 +1,8 @@
 <div class="top-sellings-products-wrapper "
-     ng-class="{'opacity-dash': $ctrl.isBlockValuesTopSellingsProducts}">
+     ng-if="!$ctrl.loadingChart"
+     ng-class="{'opacity-dash': $ctrl.isBlockValuesTopSellingsProducts, 'loading-chart': $ctrl.loadingChart }">
    <div class="row top-selling"
-        ng-show="!$ctrl.isProductsTopSellings">
+        ng-show="!$ctrl.isProductsTopSellings && !$ctrl.loadingChart">
       <div class="description-container-dash">
          <span class="description-dash">10 Produtos mais vendidos</span>
          <div class="mbg-h-c-tone-s-icon-dash"
@@ -23,7 +24,7 @@
 
 
    <div class="description-header"
-        ng-show="!$ctrl.isProductsTopSellings">
+        ng-show="!$ctrl.isProductsTopSellings && !$ctrl.loadingChart">
       <div class="product-list">
          <div class="product-header">
             <span class="header-sales">Itens vendidos</span>
@@ -179,16 +180,19 @@
                </svg>
             </div>
          </div>
-
       </div>
    </div>
 
 
    <div class="show-slides-not-data"
-        ng-if="$ctrl.isProductsTopSellings">
+        ng-if="$ctrl.isProductsTopSellings && !$ctrl.loadingChart">
       <label>
          Atualmente, a empresa não possui vendas registradas.
       </label>
    </div>
+</div>
 
+<div class="fake-chart"
+     ng-if="$ctrl.loadingChart">
+   <mbg-skeleton></mbg-skeleton>
 </div>

package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.scss

@@ -1,194 +1,216 @@
 mbg-top-sellings-products {
-  display: block; 
-  width: 100%; 
-  height: 100%; 
-  flex-grow: 1; 
-  box-sizing: border-box;
-  padding: 0px 16px;
-}
-
-.top-selling {
-  padding: 0px 16px;
-}
-
-  .description-container-dash {
-    flex-grow: 1;
-    color: var(--titleColor);
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    font-weight: 600;
-    font-size: 14px; 
-    align-items: center;
-    padding: 8px 0 5px 0;
+   display: block; 
+   width: 100%; 
+   height: 100%; 
+   flex-grow: 1; 
+   box-sizing: border-box;
+ //   padding: 0px 16px;
+ }
+ 
+ .loading-chart{
+   padding: 0;
+ }
+ 
+ .top-sellings-products-wrapper{
+    padding: 0px 16px;
+ }
+ 
+ .top-selling {
+    padding: 0px 16px;
+ }
+ 
+   .description-container-dash {
+     flex-grow: 1;
+     color: var(--titleColor);
+     display: flex;
+     justify-content: space-between;
+     width: 100%;
+     font-weight: 600;
+     font-size: 14px; 
+     align-items: center;
+     padding: 8px 0 5px 0;
+   
+     .mbg-h-c-tone-s-icon-dash {
+       transition: opacity 500ms ease;
+       opacity: 0.9;
+     }
+   }
+ 
+ 
+   .loading-indicator-top {
+     position: absolute;
+     top: 97%;
+     left: 97%;
+     transform: translate(-50%, -50%);
+     width: 40px;
+     height: 40px;
+   }
+ 
+   #loading-circle-top {
+     position: absolute;
+   }
+ 
+   .active-index-top {
+   display: flex;
+   position: relative;
+   top: -24px;
+   justify-content: center;
+   color: #5f5b5b;
+   }
+ 
+ 
+   .opacity-dash{
+     opacity: 0.6;
+   }
+ 
+ 
+   .description-header {
+     flex-direction: column;
+     width: 100%;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     height: 400px;
+     padding: 16px 0px;
+  }
+ 
+  
+  .product-header {
+     display: flex;
+     justify-content: end;
+     font-weight: bold;
+     width: 100%;
+     // padding: 0px 24px;
+  }
   
-    .mbg-h-c-tone-s-icon-dash {
-      transition: opacity 500ms ease;
-      opacity: 0.9;
-    }
+  .product-header span {
+     color: #555;
   }
-
-
-  .loading-indicator-top {
-    position: absolute;
-    top: 97%;
-    left: 97%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
+ 
+  
+  .header-sales {
+     width: 40%;
+     text-align: right;
   }
-
-  #loading-circle-top {
-    position: absolute;
+  
+  .header-stock {
+     width: 20%;
+     text-align: right;
   }
-
-  .active-index-top {
-  display: flex;
-  position: relative;
-  top: -24px;
-  justify-content: center;
-  color: #5f5b5b;
+  
+  .product-list {
+ 
+     width: 100%;
   }
-
-
-  .opacity-dash{
-    opacity: 0.6;
+  
+  .product-item {
+     display: block;
+     padding: 0;
+     padding: 0px 23px 0px 0px;
+ 
   }
-
-
-  .description-header {
-    flex-direction: column;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 400px;
-    padding: 16px 0px;
- }
-
  
- .product-header {
+  .fake-chart {
+    width: 100%; 
+    height: 100%; 
+    position: relative;
+    border-radius: 10px;
+    padding: 0px;
+    margin: 0px;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+    flex: 1;
     display: flex;
-    justify-content: end;
-    font-weight: bold;
-    width: 100%;
-    // padding: 0px 24px;
- }
+  }
+  
+  .swiper-container {
+     width: 100%;
+     overflow: hidden;
+     height: 350px;
+     position: relative;
  
- .product-header span {
-    color: #555;
- }
-
+  }
  
- .header-sales {
-    width: 40%;
-    text-align: right;
+  .swiper-pagination {
+   display: flex;
+   gap: 5px;
  }
  
- .header-stock {
-    width: 20%;
-    text-align: right;
+ .swiper-pagination-bullet {
+   width: 10px;
+   height: 10px;
+   background-color: #606A90; 
+   border-radius: 50%;
+   opacity: 0.5;
  }
  
- .product-list {
-
-    width: 100%;
+ .swiper-pagination-bullet-active {
+   background-color: #0EBCBD; 
+   opacity: 1;
  }
  
- .product-item {
-    display: block;
-    padding: 0;
-    padding: 0px 23px 0px 0px;
-
- }
+  
+  .segment-item {
+     display: flex;
+     justify-content: space-between;
+     padding: 6px 0;
+  }
+   
+  .name {
+     width: 70%;
+     max-width: 50%;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     position: relative;
+     font-size: 14px;
+     color: #5f5b5b;
+  }
  
- .swiper-container {
-    width: 100%;
-    overflow: hidden;
-    height: 350px;
-    position: relative;
-
- }
-
- .swiper-pagination {
-  display: flex;
-  gap: 5px;
-}
-
-.swiper-pagination-bullet {
-  width: 10px;
-  height: 10px;
-  background-color: #606A90; 
-  border-radius: 50%;
-  opacity: 0.5;
-}
-
-.swiper-pagination-bullet-active {
-  background-color: #0EBCBD; 
-  opacity: 1;
-}
-
- 
- .segment-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 6px 0;
+  .tooltip-inner {
+   background: #0EBCBD !important;
+   font-weight: bold;
+   color: #FFFFFF;
  }
+ 
+  .line-block-top{
+     height: 1px;
+     background: black;
+     width: 60%;
+     position: relative;
+     left: 10px;
+     opacity: 0.3;
+     top: 8px;
+  }
   
- .name {
-    width: 70%;
-    max-width: 50%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    position: relative;
-    font-size: 14px;
-    color: #5f5b5b;
- }
-
- .tooltip-inner {
-  background: #0EBCBD !important;
-  font-weight: bold;
-  color: #FFFFFF;
-}
-
- .line-block-top{
-    height: 1px;
-    background: black;
-    width: 60%;
-    position: relative;
-    left: 10px;
-    opacity: 0.3;
-    top: 8px;
- }
+  .sales {
+     width: 20%;
+     text-align: right;
+     font-size: 14px;
+     color: #5f5b5b;
+     position: relative;
+     right: 18px;
+  }
+  
+  .stock {
+     width: 20%;
+     text-align: right;
+     font-size: 14px;
+     color: #5f5b5b;
+     position: relative;
+  }
  
- .sales {
-    width: 20%;
-    text-align: right;
-    font-size: 14px;
-    color: #5f5b5b;
-    position: relative;
-    right: 18px;
- }
+  .show-slides-not-data{
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   width: 444px;
+   height: 100%;
+   font-size: 14px;
+   color: #5f5b5b;
+  }
  
- .stock {
-    width: 20%;
-    text-align: right;
-    font-size: 14px;
-    color: #5f5b5b;
-    position: relative;
- }
-
- .show-slides-not-data{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 444px;
-  height: 100%;
-  font-size: 14px;
-  color: #5f5b5b;
- }
-
-
-
-
+ 
+ 
+ 
+ 

package/src/components/mbg-top-sellings-products/mbg-top-sellings-products.ts

@@ -16,6 +16,7 @@ class MbgTopSellingsProducts {
   private oneMonthInterval
   private threeMonthInterval
   private oneYearInterval
+  private loadingChart: boolean
 
   constructor(
     public $scope,
@@ -27,6 +28,7 @@ class MbgTopSellingsProducts {
   ) {}
 
   async $onInit() {
+    this.loadingChart = true
     this.isBlockValuesTopSellingsProducts =
       !this.allowedToSee || !this.isPermissionTopSellingsProducts
     this.$scope.$watch(
@@ -65,6 +67,8 @@ class MbgTopSellingsProducts {
     this.transformeParseFloat(this.oneMonthInterval)
     this.transformeParseFloat(this.threeMonthInterval)
     this.transformeParseFloat(this.oneYearInterval)
+
+    this.loadingChart = false
   }
 
   transformeParseFloat(array) {
@@ -171,6 +175,7 @@ const mbgTopSellingsProducts = {
     isPermissionTopSellingsProducts: '=?',
     isBlockValuesTopSellingsProducts: '=?',
     isProductsTopSellings: '=?',
+    loading: '=?',
   },
   template,
   controller: MbgTopSellingsProducts,