From 41cff802adb4d12d21b7d415f81b5b2dd86dfce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20LAGIER?= <gaetan@bimdata.io>
Date: Thu, 13 Jun 2024 16:54:31 +0200
Subject: [PATCH] feature: add topics list element warning (#37)

* add topics list element warning

* cleanner solution
---
 .../bcf-topics-table/BcfTopicsTable.vue       | 13 +++--
 .../BcfTopicActionsCell.vue                   | 55 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/components/bcf-topics-table/BcfTopicsTable.vue b/src/components/bcf-topics-table/BcfTopicsTable.vue
index abea79b..7842416 100644
--- a/src/components/bcf-topics-table/BcfTopicsTable.vue
+++ b/src/components/bcf-topics-table/BcfTopicsTable.vue
@@ -54,10 +54,7 @@
       {{ toShortDateFormat(topic.creation_date) }}
     </template>
     <template #cell-actions="{ row: topic }">
-      <BcfTopicActionsCell
-        :topic="topic"
-        @open-topic="$emit('open-topic', $event)"
-      />
+      <BcfTopicActionsCell :topic="topic" @open-topic="$emit('open-topic', $event)" :warning="warningCallback(topic)" :warningTooltipMessage="warningTooltipMessage" />
     </template>
   </BIMDataTable>
 </template>
@@ -110,6 +107,14 @@ export default {
       type: Map,
       default: () => new Map(),
     },
+    warningCallback: {
+      type: Function,
+      default: () => false
+    },
+    warningTooltipMessage: {
+      type: String,
+      default: ""
+    }
   },
   emits: [
     "open-topic",
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 18f9988..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
@@ -1,14 +1,22 @@
 <template>
   <div class="bcf-topic-actions-cell">
     <BIMDataButton
-      color="primary"
+      :color="warning ? 'secondary' : 'primary'"
       outline
       radius
       icon
       @click="$emit('open-topic', topic)"
     >
-      <BIMDataIconShow size="xs" />
+      <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>
 
@@ -18,6 +26,14 @@ export default {
     topic: {
       type: Object,
       required: true
+    },
+    warning: {
+      type: Boolean,
+      default: false
+    },
+    warningTooltipMessage: {
+      type: String,
+      default: ""
     }
   },
   emits: [
@@ -28,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>