From 432c8a9ab8898bedfcc08fb5bbbd255e38cae335 Mon Sep 17 00:00:00 2001
From: vicent <vicent@verdnatura.es>
Date: Tue, 21 Feb 2023 10:56:46 +0100
Subject: [PATCH] refactor: cambiados estilos de los chips

---
 front/core/components/chip/style.scss         | 27 +++++++++++-
 modules/ticket/front/sale-tracking/index.html | 44 ++++++++++++++++---
 modules/ticket/front/sale-tracking/index.js   | 25 -----------
 modules/ticket/front/sale-tracking/style.scss | 11 +++--
 4 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/front/core/components/chip/style.scss b/front/core/components/chip/style.scss
index 7651638be..562861441 100644
--- a/front/core/components/chip/style.scss
+++ b/front/core/components/chip/style.scss
@@ -58,10 +58,33 @@ 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;
-        
+
         &:hover,
         &:focus {
             opacity: 1;
@@ -118,4 +141,4 @@ vn-avatar {
     display: inline-block;
     min-width: 28px;
     border-radius: 50%;
-}
\ No newline at end of file
+}
diff --git a/modules/ticket/front/sale-tracking/index.html b/modules/ticket/front/sale-tracking/index.html
index 8d3f414c2..33d22f92e 100644
--- a/modules/ticket/front/sale-tracking/index.html
+++ b/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>
-                    <span class="chip {{$ctrl.chipIsPreviousSelected(sale.preparingList.isPreviousSelected)}} vn-ml-xs" vn-tooltip="is previousSelected"></span>
-                    <span class="chip {{$ctrl.chipIsPrevious(sale.preparingList.isPrevious)}} vn-mr-xs" vn-tooltip="is previous"></span>
-                    <span class="chip {{$ctrl.chipIsPrepared(sale.preparingList.isPrepared)}} vn-mx-xs" vn-tooltip="is prepared"></span>
-                    <span class="chip {{$ctrl.chipIsControled(sale.preparingList.isControled)}} vn-mx-xs" vn-tooltip="is controled"></span>
-                </vn-td>
+                    <vn-chip
+                    ng-class="::{
+                        'pink': sale.preparingList.hasSaleGroupDetail,
+                        'none': !sale.preparingList.hasSaleGroupDetail,
+                    }"
+                    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)"
diff --git a/modules/ticket/front/sale-tracking/index.js b/modules/ticket/front/sale-tracking/index.js
index 1fc89ec4a..60b422cc0 100644
--- a/modules/ticket/front/sale-tracking/index.js
+++ b/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();
diff --git a/modules/ticket/front/sale-tracking/style.scss b/modules/ticket/front/sale-tracking/style.scss
index 6d8b3db69..60512b30d 100644
--- a/modules/ticket/front/sale-tracking/style.scss
+++ b/modules/ticket/front/sale-tracking/style.scss
@@ -1,7 +1,12 @@
 @import "variables";
 
-.chip {
+.circle {
     display: inline-block;
-    min-width: 15px;
-    min-height: 25px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    font-size: .9rem;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
 }
-- 
2.40.1