From ede9e0fc3d3e533d1318fd8723aad4eaba58a9ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20LAGIER?= <gaetan@bimdata.io>
Date: Thu, 13 Jun 2024 16:46:53 +0200
Subject: [PATCH] cleanner solution

---
 .../bcf-topics-table/BcfTopicsTable.vue       | 56 +------------------
 .../BcfTopicActionsCell.vue                   | 47 ++++++++++++++++
 2 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/src/components/bcf-topics-table/BcfTopicsTable.vue b/src/components/bcf-topics-table/BcfTopicsTable.vue
index 64a68b7..7842416 100644
--- a/src/components/bcf-topics-table/BcfTopicsTable.vue
+++ b/src/components/bcf-topics-table/BcfTopicsTable.vue
@@ -51,20 +51,10 @@
       </BIMDataTooltip>
     </template>
     <template #cell-date="{ row: topic }">
-      <div class="bcf-topics-table__date">
-        {{ toShortDateFormat(topic.creation_date) }}
-        <div class="bcf-topics-table__warning" v-if="warningCallback(topic)">
-          <div class="bcf-topics-table__warning__white-gradient"></div>
-          <BIMDataTooltip :message="warningTooltipMessage" position="left" >
-            <div class="bcf-topics-table__warning__icon">
-              <BIMDataIconWarning fill color="warning" />
-            </div>
-          </BIMDataTooltip>
-        </div>
-      </div>
+      {{ toShortDateFormat(topic.creation_date) }}
     </template>
     <template #cell-actions="{ row: topic }">
-      <BcfTopicActionsCell :topic="topic" @open-topic="$emit('open-topic', $event)" :warning="warningCallback(topic)" />
+      <BcfTopicActionsCell :topic="topic" @open-topic="$emit('open-topic', $event)" :warning="warningCallback(topic)" :warningTooltipMessage="warningTooltipMessage" />
     </template>
   </BIMDataTable>
 </template>
@@ -155,45 +145,3 @@ export default {
   }
 };
 </script>
-
-<style scoped lang="scss">
-.bcf-topics-table {
-  &__date {
-    height: 42px;
-    position: relative;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &__warning {
-    position: absolute;
-    top: 0;
-    right: -16px;
-
-    display: flex;
-    justify-content: flex-end;
-    
-    &__white-gradient {      
-      background: linear-gradient(90deg, transparent, var(--color-white) 90%);
-  
-      width: 350px;
-      height: 42px;
-    }
-
-    &__icon {
-      box-shadow: var(--box-shadow);
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 42px;
-      height: 42px;
-
-      background-color: var(--color-white);
-    }
-  }
-}
-</style>
diff --git a/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue b/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue
index 8ae0440..a607a50 100644
--- a/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue
+++ b/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue
@@ -9,6 +9,14 @@
     >
       <BIMDataIconShow size="xs" :color="warning ? 'warning' : 'primary'" fill/>
     </BIMDataButton>
+    <div class="bcf-topic-actions-cell__warning" v-if="warning">
+      <div class="bcf-topic-actions-cell__warning__white-gradient"></div>
+      <BIMDataTooltip :message="warningTooltipMessage" position="left" >
+        <div class="bcf-topic-actions-cell__warning__icon">
+          <BIMDataIconWarning fill color="warning" />
+        </div>
+      </BIMDataTooltip>
+    </div>
   </div>
 </template>
 
@@ -22,6 +30,10 @@ export default {
     warning: {
       type: Boolean,
       default: false
+    },
+    warningTooltipMessage: {
+      type: String,
+      default: ""
     }
   },
   emits: [
@@ -32,8 +44,43 @@ export default {
 
 <style scoped lang="scss">
 .bcf-topic-actions-cell {
+  position: relative;
+  height: 42px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   .bimdata-btn {
     margin: auto;
   }
+
+  &__warning {
+    position: absolute;
+    top: 0;
+    right: 44px;
+
+    display: flex;
+    justify-content: flex-end;
+    
+    &__white-gradient {      
+      background: linear-gradient(90deg, transparent, var(--color-white) 90%);
+  
+      width: 350px;
+      height: 42px;
+    }
+
+    &__icon {
+      box-shadow: var(--box-shadow);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 42px;
+      height: 42px;
+
+      background-color: var(--color-white);
+    }
+  }
 }
 </style>