fix(models-manager): remove warnings/errors tooltip from model-status…

…-badge
bimdata · Mar 24, 2021 · 697edca · 697edca
1 parent 4ceb373
commit 697edca
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 93 deletions.
diff --git a/src/components/specific/models/model-status-badge/ModelStatusBadge.scss b/src/components/specific/models/model-status-badge/ModelStatusBadge.scss
@@ -1,30 +1,14 @@
 .model-status-badge {
-  display: inline-block;
-  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   width: 18px;
   height: 18px;
   margin: $spacing-unit/2;
 
-  &__tooltip {
-    position: absolute;
-    z-index: 1;
-    top: -$spacing-unit/2;
-    left: calc(100% + #{$spacing-unit}/ 2);
-    width: 160px;
-    border-radius: 2px;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    background-color: $color-white;
-
-    &__message {
-      padding: $spacing-unit/2;
-      word-wrap: break-word;
-      font-size: 0.8rem;
-    }
-  }
-
   &--pending,
   &--in-progress {
-    color: $color-neutral;
+    color: $color-primary;
   }
 
   &--completed {
@@ -33,27 +17,9 @@
 
   &--warning {
     color: $color-warning;
-
-    .model-status-badge__tooltip--warnings {
-      display: none;
-    }
-    &:hover {
-      .model-status-badge__tooltip--warnings {
-        display: block;
-      }
-    }
   }
 
   &--error {
     color: $color-high;
-
-    .model-status-badge__tooltip--errors {
-      display: none;
-    }
-    &:hover {
-      .model-status-badge__tooltip--errors {
-        display: block;
-      }
-    }
   }
 }
diff --git a/src/components/specific/models/model-status-badge/ModelStatusBadge.vue b/src/components/specific/models/model-status-badge/ModelStatusBadge.vue
@@ -1,43 +1,20 @@
 <template>
   <span class="model-status-badge" :class="`model-status-badge--${statusName}`">
-    <BIMDataIcon :name="statusIcon" size="s" />
-
-    <div
-      v-if="statusName === 'warning'"
-      class="model-status-badge__tooltip model-status-badge__tooltip--warnings"
-    >
-      <div
-        v-for="(warning, i) in warnings"
-        :key="`warning-${i}`"
-        class="model-status-badge__tooltip__message"
-      >
-        {{ warning }}
-      </div>
-    </div>
-
-    <div
-      v-if="statusName === 'error'"
-      class="model-status-badge__tooltip model-status-badge__tooltip--errors"
-    >
-      <div
-        v-for="(error, i) in errors"
-        :key="`error-${i}`"
-        class="model-status-badge__tooltip__message"
-      >
-        {{ error }}
-      </div>
-    </div>
+    <BIMDataSpinner v-if="['pending', 'in-progress'].includes(statusName)" />
+    <BIMDataIcon v-else :name="statusIcon" size="s" />
   </span>
 </template>
 
 <script>
 import { ref, watchEffect } from "vue";
 // Components
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
 
 export default {
   components: {
-    BIMDataIcon
+    BIMDataIcon,
+    BIMDataSpinner
   },
   props: {
     model: {
@@ -48,42 +25,29 @@ export default {
   setup(props) {
     const statusName = ref("");
     const statusIcon = ref("");
-    const warnings = ref([]);
-    const errors = ref([]);
 
     watchEffect(() => {
       switch (props.model.status) {
         case "P":
           statusName.value = "pending";
-          statusIcon.value = "success";
           break;
         case "I":
           statusName.value = "in-progress";
-          statusIcon.value = "refresh";
           break;
         case "C":
-          if (props.model.warnings.length > 0) {
-            statusName.value = "warning";
-            statusIcon.value = "warning";
-            warnings.value = props.model.warnings;
-          } else {
-            statusName.value = "completed";
-            statusIcon.value = "success";
-          }
+          statusName.value = "completed";
+          statusIcon.value = "success";
           break;
         case "E":
           statusName.value = "error";
           statusIcon.value = "failed";
-          errors.value = props.model.errors;
           break;
       }
     });
 
     return {
-      errors,
       statusIcon,
-      statusName,
-      warnings
+      statusName
     };
   }
 };

diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.vue b/src/components/specific/models/project-models-manager/ProjectModelsManager.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { reactive, ref, watchEffect } from "vue";
+import { reactive, ref, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 // Components
 import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
@@ -149,16 +149,21 @@ export default {
       split: [],
       archive: []
     });
-    watchEffect(() => {
-      models.ifc = props.models.filter(model => model.source === "UPLOAD");
-      models.merge = props.models.filter(model => model.source === "MERGE");
-      models.split = props.models.filter(model =>
-        ["SPLIT", "EXPORT"].includes(model.source)
-      );
-      models.archive = props.models.filter(
-        model => !["UPLOAD", "MERGE", "SPLIT", "EXPORT"].includes(model.source)
-      );
-    });
+    watch(
+      () => props.models,
+      () => {
+        models.ifc = props.models.filter(model => model.source === "UPLOAD");
+        models.merge = props.models.filter(model => model.source === "MERGE");
+        models.split = props.models.filter(model =>
+          ["SPLIT", "EXPORT"].includes(model.source)
+        );
+        models.archive = props.models.filter(
+          model =>
+            !["UPLOAD", "MERGE", "SPLIT", "EXPORT"].includes(model.source)
+        );
+      },
+      { immediate: true }
+    );
 
     const rows = ref([]);
     watchEffect(() => {