front/core/components/chip/style.scss

@@ -58,6 +58,29 @@ vn-chip {
         background-color: $color-font-bg-dark;
         color: $color-font-bg;
     }
+    &.pink,
+    &.pink.clickable:hover,
+    &.pink.clickable:focus  {
+        background-color: $color-pink;
+    }
+    &.dark-notice,
+    &.dark-notice.clickable:hover,
+    &.dark-notice.clickable:focus  {
+        background-color: $color-notice;
+    }
+    &.yellow,
+    &.yellow.clickable:hover,
+    &.yellow.clickable:focus  {
+        background-color: $color-yellow;
+    }
+    &.none,
+    &.none.clickable:hover,
+    &.none.clickable:focus  {
+        background-color: $color-bg-panel;
+        border-radius: 50%;
+        border: 1px solid $color-font-link
+
+    }
     &.clickable {
         @extend %clickable;
         opacity: 0.8;

modules/ticket/front/sale-tracking/index.html

@@ -24,12 +24,44 @@
         <vn-tbody>
             <vn-tr ng-repeat="sale in $ctrl.sales">
                 <vn-td center>
-                    <span class="chip {{$ctrl.chipHasSaleGroupDetail(sale.preparingList.hasSaleGroupDetail)}} vn-mx-xs chip2" vn-tooltip="has saleGroupDetail"></span>
+                    <vn-chip
-                    <span class="chip {{$ctrl.chipIsPreviousSelected(sale.preparingList.isPreviousSelected)}} vn-ml-xs" vn-tooltip="is previousSelected"></span>
+                    ng-class="::{
-                    <span class="chip {{$ctrl.chipIsPrevious(sale.preparingList.isPrevious)}} vn-mr-xs" vn-tooltip="is previous"></span>
+                        'pink': sale.preparingList.hasSaleGroupDetail,
-                    <span class="chip {{$ctrl.chipIsPrepared(sale.preparingList.isPrepared)}} vn-mx-xs" vn-tooltip="is prepared"></span>
+                        'none': !sale.preparingList.hasSaleGroupDetail,
-                    <span class="chip {{$ctrl.chipIsControled(sale.preparingList.isControled)}} vn-mx-xs" vn-tooltip="is controled"></span>
+                    }"
-                </vn-td>
+                    class="circle"
+                    vn-tooltip="has saleGroupDetail"
+                    >
+                    </vn-chip>
+                    <vn-chip ng-class="::{
+                        'notice': sale.preparingList.isPreviousSelected,
+                        'none': !sale.preparingList.isPreviousSelected,
+                    }"
+                    class="circle"
+                    vn-tooltip="is previousSelected">
+                    </vn-chip>
+                    <vn-chip ng-class="::{
+                        'dark-notice': sale.preparingList.isPrevious,
+                        'none': !sale.preparingList.isPrevious,
+                    }"
+                    class="circle"
+                    vn-tooltip="is previous">
+                    </vn-chip>
+                    <vn-chip ng-class="::{
+                        'warning': sale.preparingList.isPrepared,
+                        'none': !sale.preparingList.isPrepared,
+                    }"
+                    class="circle"
+                    vn-tooltip="is prepared">
+                    </vn-chip>
+                    <vn-chip ng-class="::{
+                        'yellow': sale.preparingList.isControled,
+                        'none': !sale.preparingList.isControled,
+                    }"
+                    class="circle"
+                    vn-tooltip="is controled">
+                    </vn-chip>
+                    </vn-td>
                 <vn-td number>
                         <span
                         ng-click="itemDescriptor.show($event, sale.item.id)"

modules/ticket/front/sale-tracking/index.js

@@ -74,31 +74,6 @@ class Controller extends Section {
         this.$.itemDescriptor.show(event.target, sale.item.id);
     }
 
-    chipHasSaleGroupDetail(hasSaleGroupDetail) {
-        if (hasSaleGroupDetail) return 'pink';
-        else return 'message';
-    }
-
-    chipIsPreviousSelected(isPreviousSelected) {
-        if (isPreviousSelected) return 'notice';
-        else return 'message';
-    }
-
-    chipIsPrevious(isPrevious) {
-        if (isPrevious) return 'dark-notice';
-        else return 'message';
-    }
-
-    chipIsPrepared(isPrepared) {
-        if (isPrepared) return 'warning';
-        else return 'message';
-    }
-
-    chipIsControled(isControled) {
-        if (isControled) return 'yellow';
-        else return 'message';
-    }
-
     showSaleTracking(sale) {
         this.saleId = sale.id;
         this.$.saleTracking.show();

modules/ticket/front/sale-tracking/style.scss

@@ -1,7 +1,12 @@
 @import "variables";
 
-.chip {
+.circle {
     display: inline-block;
-    min-width: 15px;
+    justify-content: center;
-    min-height: 25px;
+    align-items: center;
+    border-radius: 50%;
+    font-size: .9rem;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
 }