From dc9d6b6b3fb0971f5ff576a8c9ffb03c5d34698c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20LAGIER?= <gaetan@bimdata.io>
Date: Thu, 13 Jun 2024 11:37:24 +0200
Subject: [PATCH] add topics list element warning

---
 .../bcf-topics-table/BcfTopicsTable.vue       | 67 +++++++++++++++++--
 .../BcfTopicActionsCell.vue                   |  8 ++-
 2 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/components/bcf-topics-table/BcfTopicsTable.vue b/src/components/bcf-topics-table/BcfTopicsTable.vue
index abea79b..64a68b7 100644
--- a/src/components/bcf-topics-table/BcfTopicsTable.vue
+++ b/src/components/bcf-topics-table/BcfTopicsTable.vue
@@ -51,13 +51,20 @@
       </BIMDataTooltip>
     </template>
     <template #cell-date="{ row: topic }">
-      {{ toShortDateFormat(topic.creation_date) }}
+      <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>
     </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)" />
     </template>
   </BIMDataTable>
 </template>
@@ -110,6 +117,14 @@ export default {
       type: Map,
       default: () => new Map(),
     },
+    warningCallback: {
+      type: Function,
+      default: () => false
+    },
+    warningTooltipMessage: {
+      type: String,
+      default: ""
+    }
   },
   emits: [
     "open-topic",
@@ -140,3 +155,45 @@ 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 18f9988..8ae0440 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,13 +1,13 @@
 <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>
 </template>
@@ -18,6 +18,10 @@ export default {
     topic: {
       type: Object,
       required: true
+    },
+    warning: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [