feat(models-manager): create model-status-badge and model-action-menu

bimdata · Mar 24, 2021 · 32ac19d · 32ac19d
1 parent 71dfdf6
commit 32ac19d
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 28 deletions.
diff --git a/src/components/generic/generic-table/GenericTable.scss b/src/components/generic/generic-table/GenericTable.scss
@@ -12,11 +12,15 @@
       background-color: $color-tertiary-lightest;
     }
 
-    th, td {
+    th,
+    td {
       min-height: $spacing-unit * 2;
       height: 50px;
       padding: 0 $spacing-unit;
-      text-align: left;
+
+      &.cell-checkbox:deep() {
+        width: 42px;
+      }
     }
 
     th {

diff --git a/src/components/generic/generic-table/GenericTable.vue b/src/components/generic/generic-table/GenericTable.vue
@@ -1,29 +1,43 @@
 <template>
   <div class="generic-table">
-    <table class="generic-table__table">
+    <table>
       <thead>
-        <tr>
-          <th v-if="selectable">
+        <tr key="head-row-0">
+          <th class="cell-checkbox" v-if="selectable">
             <BIMDataCheckbox
               :modelValue="selection.size === rows.length"
               @update:modelValue="toggleFullSelection"
             />
           </th>
-          <th v-for="(column, j) of columns" :key="`head-row-0-col-${j}`">
-            {{ column.id ? column.label || column.id : column }}
-          </th>
+          <template v-for="(column, j) of columns" :key="`head-row-0-col-${j}`">
+            <th
+              :style="{
+                width: column.width || 'auto',
+                textAlign: column.align || 'left'
+              }"
+            >
+              {{ column.id ? column.label || column.id : column }}
+            </th>
+          </template>
         </tr>
       </thead>
       <tbody>
         <template v-for="(row, i) of rows" :key="`body-row-${i}`">
           <tr v-if="row">
-            <td v-if="selectable">
+            <td class="cell-checkbox" v-if="selectable">
               <BIMDataCheckbox
                 :modelValue="selection.has(i)"
                 @update:modelValue="toggleSelection(i)"
               />
             </td>
-            <td v-for="(column, j) of columns" :key="`body-row-${i}-col-${j}`">
+            <td
+              v-for="(column, j) of columns"
+              :key="`body-row-${i}-col-${j}`"
+              :style="{
+                width: column.width || 'auto',
+                textAlign: column.align || 'left'
+              }"
+            >
               <slot :name="`cell-${column.id}`" :row="row">
                 {{ row[column.id] || row[j] || "" }}
               </slot>

diff --git a/src/components/specific/models/model-action-menu/ModelActionMenu.scss b/src/components/specific/models/model-action-menu/ModelActionMenu.scss
@@ -0,0 +1,21 @@
+.model-action-menu {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: $spacing-unit;
+
+  &__btn {
+    color: $color-tertiary-dark;
+  }
+
+  &__container {
+    position: absolute;
+    right: 32px + $spacing-unit;
+    width: 180px;
+    padding: $spacing-unit/2 0;
+    border-radius: 4px;
+    background-color: $color-white;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  }
+}
diff --git a/src/components/specific/models/model-action-menu/ModelActionMenu.vue b/src/components/specific/models/model-action-menu/ModelActionMenu.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="model-action-menu" v-click-away="closeMenu">
+    <BIMDataButton
+      class="model-action-menu__btn"
+      ripple
+      rounded
+      icon
+      @click="() => {}"
+    >
+      <BIMDataIcon name="cloud" size="s" />
+    </BIMDataButton>
+    <BIMDataButton
+      class="model-action-menu__btn"
+      ripple
+      rounded
+      icon
+      @click="toggleMenu"
+    >
+      <BIMDataIcon name="ellipsis" size="l" />
+    </BIMDataButton>
+
+    <transition name="fade">
+      <div class="model-action-menu__container" v-show="showMenu">
+        <!-- TODO -->
+        <span>Model Action Menu</span>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const showMenu = ref(false);
+
+    const closeMenu = () => {
+      showMenu.value = false;
+    };
+    const toggleMenu = () => {
+      showMenu.value = !showMenu.value;
+    };
+
+    return {
+      // References
+      showMenu,
+      // Methods
+      closeMenu,
+      toggleMenu
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./ModelActionMenu.scss"></style>
diff --git a/src/components/specific/models/model-status-badge/ModelStatusBadge.scss b/src/components/specific/models/model-status-badge/ModelStatusBadge.scss
@@ -0,0 +1,19 @@
+.model-status-badge {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin: $spacing-unit/2;
+
+  &--pending,
+  &--in-progress {
+    color: $color-neutral;
+  }
+
+  &--completed {
+    color: $color-success;
+  }
+
+  &--error {
+    color: $color-high;
+  }
+}
diff --git a/src/components/specific/models/model-status-badge/ModelStatusBadge.vue b/src/components/specific/models/model-status-badge/ModelStatusBadge.vue
@@ -0,0 +1,53 @@
+<template>
+  <span class="model-status-badge" :class="`model-status-badge--${statusName}`">
+    <BIMDataIcon :name="statusIcon" size="s" />
+  </span>
+</template>
+
+<script>
+import { ref } from "vue";
+// Components
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+
+export default {
+  components: {
+    BIMDataIcon
+  },
+  props: {
+    status: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const statusName = ref("");
+    const statusIcon = 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;
+    }
+
+    return {
+      statusIcon,
+      statusName
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./ModelStatusBadge.scss"></style>
diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.scss b/src/components/specific/models/project-models-manager/ProjectModelsManager.scss
@@ -3,4 +3,8 @@
     height: calc(100% - 35px);
     padding: $spacing-unit;
   }
+
+  &__table {
+    margin-top: $spacing-unit * 3;
+  }
 }
diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.vue b/src/components/specific/models/project-models-manager/ProjectModelsManager.vue
@@ -13,20 +13,29 @@
       />
 
       <GenericTable
+        class="project-models-manager__table"
         :columns="columns"
         :rows="rows"
         :selectable="true"
         @selection-change="() => {}"
       >
-        <template #cell-version>0</template>
+        <template #cell-version>?</template>
         <template #cell-creator="{ row: { creator } }">
           {{ creator ? `${creator.firstname} ${creator.lastname[0]}.` : "" }}
         </template>
-        <template #cell-lastupdate="{ row: model }">
-          {{ model.updatedAt.toISOString().slice(0, -5) }}
+        <template #cell-lastupdate="{ row: { updatedAt } }">
+          {{
+            updatedAt
+              .toISOString()
+              .slice(0, -5)
+              .replace("T", " at ")
+          }}
         </template>
-        <template #cell-status="{ row: model }">
-          {{ model.status }}
+        <template #cell-status="{ row: { status } }">
+          <ModelStatusBadge :status="status" />
+        </template>
+        <template #cell-actions="{ row: model }">
+          <ModelActionMenu :model="model" />
         </template>
       </GenericTable>
     </template>
@@ -39,13 +48,16 @@ import { ref, watchEffect } from "vue";
 import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
 import BIMDataTabs from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataTabs.js";
 import GenericTable from "@/components/generic/generic-table/GenericTable";
+import ModelActionMenu from "@/components/specific/models/model-action-menu/ModelActionMenu";
+import ModelStatusBadge from "@/components/specific/models/model-status-badge/ModelStatusBadge";
 
 export default {
   components: {
     BIMDataCard,
-    // BIMDataTable,
     BIMDataTabs,
-    GenericTable
+    GenericTable,
+    ModelActionMenu,
+    ModelStatusBadge
   },
   props: {
     project: {
@@ -66,12 +78,13 @@ export default {
     ];
 
     const columns = [
-      { id: "id", label: "ID" },
+      { id: "id", label: "ID", width: "100px", align: "center" },
       { id: "name", label: "Nom" },
-      { id: "version", label: "Version" },
-      { id: "creator", label: "Creator" },
-      { id: "lastupdate", label: "Modifié le" },
-      { id: "status", label: "Statut" }
+      { id: "version", label: "Version", align: "center" },
+      { id: "creator", label: "Creator", align: "center" },
+      { id: "lastupdate", label: "Modifié le", align: "center" },
+      { id: "status", label: "Statut", align: "center" },
+      { id: "actions", label: " ", width: "300px" }
     ];
     const rows = ref([]);
     watchEffect(() => {

diff --git a/src/components/specific/spaces/space-card-action-menu/SpaceCardActionMenu.vue b/src/components/specific/spaces/space-card-action-menu/SpaceCardActionMenu.vue
@@ -5,11 +5,10 @@
     v-click-away="closeMenu"
   >
     <BIMDataButton
-      color="default"
+      class="space-card-action-menu__btn"
       ripple
       rounded
       icon
-      class="space-card-action-menu__btn"
       @click="toggleMenu"
     >
       <BIMDataIcon name="ellipsis" size="l" />

diff --git a/src/components/specific/users/user-role-badge/UserRoleBadge.scss b/src/components/specific/users/user-role-badge/UserRoleBadge.scss
@@ -4,17 +4,17 @@
   font-size: 12px;
   font-weight: normal;
 
-  &.admin {
+  &--admin {
     background-color: $color-primary;
     color: $color-white;
   }
 
-  &.user {
+  &--user {
     background-color: $color-success;
     color: $color-white;
   }
 
-  &.guest {
+  &--guest {
     background-color: $color-tertiary-dark;
     color: $color-white;
   }

diff --git a/src/components/specific/users/user-role-badge/UserRoleBadge.vue b/src/components/specific/users/user-role-badge/UserRoleBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="user-role-badge" :class="roleName">
+  <span class="user-role-badge" :class="`user-role-badge--${roleName}`">
     {{ $t(`User.${roleName}`) }}
   </span>
 </template>