feat(models-manager): dsipatch models into tabs + add warning and err…

…or messages
bimdata · Mar 24, 2021 · 3307216 · 3307216
1 parent 85fa2a9
commit 3307216
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 31 deletions.
diff --git a/src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss b/src/components/generic/breadcrumb-selector/BreadcrumbSelector.scss
@@ -3,6 +3,8 @@
 
   &__header {
     padding: $spacing-unit/2;
+    cursor: pointer;
+
     &__icon {
       margin-left: $spacing-unit/2;
       margin-bottom: 1px;

diff --git a/src/components/generic/generic-table/GenericTable.vue b/src/components/generic/generic-table/GenericTable.vue
@@ -5,7 +5,8 @@
         <tr key="head-row-0">
           <th class="cell-checkbox" v-if="selectable">
             <BIMDataCheckbox
-              :modelValue="selection.size === rows.length"
+              :disabled="rows.length === 0"
+              :modelValue="rows.length > 0 && selection.size === rows.length"
               @update:modelValue="toggleFullSelection"
             />
           </th>

diff --git a/src/components/specific/models/model-status-badge/ModelStatusBadge.scss b/src/components/specific/models/model-status-badge/ModelStatusBadge.scss
@@ -1,9 +1,27 @@
 .model-status-badge {
   display: inline-block;
+  position: relative;
   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;
@@ -13,7 +31,29 @@
     color: $color-success;
   }
 
+  &--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,11 +1,37 @@
 <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>
   </span>
 </template>
 
 <script>
-import { ref } from "vue";
+import { ref, watchEffect } from "vue";
 // Components
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
 
@@ -14,37 +40,50 @@ export default {
     BIMDataIcon
   },
   props: {
-    status: {
-      type: String,
+    model: {
+      type: Object,
       required: true
     }
   },
   setup(props) {
     const statusName = ref("");
     const statusIcon = ref("");
+    const warnings = ref([]);
+    const errors = ref([]);
 
-    switch (props.status) {
-      case "P":
-        statusName.value = "pending";
-        statusIcon.value = "success";
-        break;
-      case "I":
-        statusName.value = "in-progress";
-        statusIcon.value = "refresh";
-        break;
-      case "C":
-        statusName.value = "completed";
-        statusIcon.value = "success";
-        break;
-      case "E":
-        statusName.value = "error";
-        statusIcon.value = "failed";
-        break;
-    }
+    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";
+          }
+          break;
+        case "E":
+          statusName.value = "error";
+          statusIcon.value = "failed";
+          errors.value = props.model.errors;
+          break;
+      }
+    });
 
     return {
+      errors,
       statusIcon,
-      statusName
+      statusName,
+      warnings
     };
   }
 };

diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.scss b/src/components/specific/models/project-models-manager/ProjectModelsManager.scss
@@ -6,7 +6,9 @@
 
   &__table-container {
     max-height: calc(100% - 92px);
-    margin-top: $spacing-unit * 3;
+    margin-top: $spacing-unit * 2;
+    padding: $spacing-unit 0;
+    overflow-x: hidden;
     overflow-y: auto;
   }
 }
diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.vue b/src/components/specific/models/project-models-manager/ProjectModelsManager.vue
@@ -8,8 +8,9 @@
         width="100%"
         height="44px"
         tabSize="180px"
-        selected="ifc"
         :tabs="tabs"
+        selected="ifc"
+        @tab-click="selectTab"
       />
 
       <div class="project-models-manager__table-container">
@@ -32,8 +33,8 @@
                 .replace("T", ` ${$t("Commons.at")} `)
             }}
           </template>
-          <template #cell-status="{ row: { status } }">
-            <ModelStatusBadge :status="status" />
+          <template #cell-status="{ row: model }">
+            <ModelStatusBadge :model="model" />
           </template>
           <template #cell-actions="{ row: model }">
             <ModelActionMenu :model="model" />
@@ -45,7 +46,7 @@
 </template>
 
 <script>
-import { ref, watchEffect } from "vue";
+import { reactive, ref, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 // Components
 import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
@@ -76,6 +77,7 @@ export default {
     const { t } = useI18n();
 
     const tabs = ref([]);
+    const currentTab = ref("ifc");
     watchEffect(() => {
       tabs.value = [
         {
@@ -96,6 +98,9 @@ export default {
         }
       ];
     });
+    const selectTab = tab => {
+      currentTab.value = tab.id;
+    };
 
     const columns = ref([]);
     watchEffect(() => {
@@ -138,16 +143,35 @@ export default {
       ];
     });
 
+    const models = reactive({
+      ifc: [],
+      merge: [],
+      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)
+      );
+    });
+
     const rows = ref([]);
     watchEffect(() => {
-      rows.value = props.models;
+      rows.value = models[currentTab.value];
     });
 
     return {
       // References
       columns,
       rows,
-      tabs
+      tabs,
+      // Methods
+      selectTab
     };
   }
 };

diff --git a/src/components/specific/users/space-users-manager/SpaceUsersManager.vue b/src/components/specific/users/space-users-manager/SpaceUsersManager.vue
@@ -98,13 +98,13 @@ export default {
     const { t } = useI18n();
 
     const tabs = ref([]);
+    const currentTab = ref("admins");
     watchEffect(() => {
       tabs.value = [
         { id: "admins", label: t("SpaceUsersManager.adminTabLabel") },
         { id: "users", label: t("SpaceUsersManager.userTabLabel") }
       ];
     });
-    const currentTab = ref("admins");
     const selectTab = tab => {
       currentTab.value = tab.id;
     };