feat(models-manager): create model-action-bar and update model-action…

…-menu
bimdata · Mar 24, 2021 · 5d554b4 · 5d554b4
1 parent 05d9ce4
commit 5d554b4
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 41 deletions.
diff --git a/src/components/specific/models/model-action-bar/ModelActionBar.scss b/src/components/specific/models/model-action-bar/ModelActionBar.scss
@@ -0,0 +1,6 @@
+.model-action-bar {
+  display: inline-flex;
+  gap: $spacing-unit;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: $color-white;
+}
diff --git a/src/components/specific/models/model-action-bar/ModelActionBar.vue b/src/components/specific/models/model-action-bar/ModelActionBar.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="model-action-bar">
+    <BIMDataButton color="high" ghost squared>
+      <BIMDataIcon name="delete" size="xs" />
+      <span>{{ $t("ModelActionBar.delete") }}</span>
+    </BIMDataButton>
+    <BIMDataButton ghost squared>
+      <BIMDataIcon name="import" size="xs" />
+      <span>{{ $t("ModelActionBar.archive") }}</span>
+    </BIMDataButton>
+    <BIMDataButton ghost squared>
+      <BIMDataIcon name="cloud" size="xs" />
+      <span>{{ $t("ModelActionBar.download") }}</span>
+    </BIMDataButton>
+    <BIMDataButton ghost squared>
+      <BIMDataIcon name="union" size="xs" />
+      <span>{{ $t("ModelActionBar.merge") }}</span>
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+// 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: {
+    models: {
+      type: Array,
+      require: true
+    }
+  },
+  setup(props) {
+    // TODO
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./ModelActionBar.scss"></style>
diff --git a/src/components/specific/models/model-action-menu/ModelActionMenu.scss b/src/components/specific/models/model-action-menu/ModelActionMenu.scss
@@ -7,16 +7,29 @@
 
   &__btn {
     color: $color-tertiary-dark;
+
+    &--viewer {
+      color: $color-primary;
+      &:disabled {
+        opacity: 0.6;
+      }
+    }
   }
 
   &__container {
     position: absolute;
-    right: 32px + $spacing-unit;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
     width: 180px;
     padding: $spacing-unit/2 0;
-    border-radius: 4px;
     box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
     background-color: $color-white;
-    text-align: center;
+
+    &__btn {
+      justify-content: flex-start;
+    }
   }
 }
diff --git a/src/components/specific/models/model-action-menu/ModelActionMenu.vue b/src/components/specific/models/model-action-menu/ModelActionMenu.vue
@@ -1,5 +1,27 @@
 <template>
   <div class="model-action-menu" v-click-away="closeMenu">
+    <BIMDataButton
+      class="model-action-menu__btn model-action-menu__btn--viewer"
+      color="primary"
+      outline
+      radius
+      icon
+      :disabled="true"
+      @click="() => {}"
+    >
+      2D
+    </BIMDataButton>
+    <BIMDataButton
+      class="model-action-menu__btn model-action-menu__btn--viewer"
+      color="primary"
+      outline
+      radius
+      icon
+      :disabled="true"
+      @click="() => {}"
+    >
+      3D
+    </BIMDataButton>
     <BIMDataButton
       class="model-action-menu__btn"
       ripple
@@ -21,8 +43,18 @@
 
     <transition name="fade">
       <div class="model-action-menu__container" v-show="showMenu">
-        <!-- TODO -->
-        <span>Model Action Menu</span>
+        <BIMDataButton class="model-action-menu__container__btn" ghost squared>
+          {{ $t("ModelActionMenu.buttonAddTags") }}
+        </BIMDataButton>
+        <BIMDataButton class="model-action-menu__container__btn" ghost squared>
+          {{ $t("ModelActionMenu.buttonRename") }}
+        </BIMDataButton>
+        <BIMDataButton class="model-action-menu__container__btn" ghost squared>
+          {{ $t("ModelActionMenu.buttonArchive") }}
+        </BIMDataButton>
+        <BIMDataButton class="model-action-menu__container__btn" ghost squared>
+          {{ $t("ModelActionMenu.buttonDelete") }}
+        </BIMDataButton>
       </div>
     </transition>
   </div>

diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.scss b/src/components/specific/models/project-models-manager/ProjectModelsManager.scss
@@ -4,7 +4,7 @@
     padding: $spacing-unit;
   }
 
-  &__table-container {
-    padding: $spacing-unit 0;
+  &__action-bar {
+    margin: $spacing-unit 0;
   }
 }
diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.vue b/src/components/specific/models/project-models-manager/ProjectModelsManager.vue
@@ -13,39 +13,41 @@
         @tab-click="selectTab"
       />
 
-      <div class="project-models-manager__table-container">
-        <GenericTable
-          :columns="columns"
-          :rows="rows"
-          :paginated="true"
-          :perPage="6"
-          :selectable="true"
-          @selection-changed="() => {}"
-          :placeholder="
-            $t('ProjectBoard.ProjectModelsManager.tablePlaceholder')
-          "
-        >
-          <template #cell-version>?</template>
-          <template #cell-creator="{ row: { creator } }">
-            {{ creator ? `${creator.firstname} ${creator.lastname[0]}.` : "?" }}
-          </template>
-          <template #cell-lastupdate="{ row: { updatedAt } }">
-            {{
-              updatedAt
-                .toISOString()
-                .slice(0, -5)
-                .replace(/-/g, "/")
-                .replace("T", ` ${$t("Commons.at")} `)
-            }}
-          </template>
-          <template #cell-status="{ row: model }">
-            <ModelStatusBadge :model="model" />
-          </template>
-          <template #cell-actions="{ row: model }">
-            <ModelActionMenu :model="model" />
-          </template>
-        </GenericTable>
-      </div>
+      <ModelActionBar
+        class="project-models-manager__action-bar"
+        :style="{ visibility: selection.length > 0 ? 'visible' : 'hidden' }"
+        :models="selection"
+      />
+
+      <GenericTable
+        :columns="columns"
+        :rows="rows"
+        :paginated="true"
+        :perPage="6"
+        :selectable="true"
+        @selection-changed="setSelection"
+        :placeholder="$t('ProjectBoard.ProjectModelsManager.tablePlaceholder')"
+      >
+        <template #cell-version>?</template>
+        <template #cell-creator="{ row: { creator } }">
+          {{ creator ? `${creator.firstname} ${creator.lastname[0]}.` : "?" }}
+        </template>
+        <template #cell-lastupdate="{ row: { updatedAt } }">
+          {{
+            updatedAt
+              .toISOString()
+              .slice(0, -5)
+              .replace(/-/g, "/")
+              .replace("T", ` ${$t("Commons.at")} `)
+          }}
+        </template>
+        <template #cell-status="{ row: model }">
+          <ModelStatusBadge :model="model" />
+        </template>
+        <template #cell-actions="{ row: model }">
+          <ModelActionMenu :model="model" />
+        </template>
+      </GenericTable>
     </template>
   </BIMDataCard>
 </template>
@@ -57,6 +59,7 @@ import { useI18n } from "vue-i18n";
 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 ModelActionBar from "@/components/specific/models/model-action-bar/ModelActionBar";
 import ModelActionMenu from "@/components/specific/models/model-action-menu/ModelActionMenu";
 import ModelStatusBadge from "@/components/specific/models/model-status-badge/ModelStatusBadge";
 
@@ -65,6 +68,7 @@ export default {
     BIMDataCard,
     BIMDataTabs,
     GenericTable,
+    ModelActionBar,
     ModelActionMenu,
     ModelStatusBadge
   },
@@ -179,13 +183,20 @@ export default {
       rows.value = models[currentTab.value];
     });
 
+    const selection = ref([]);
+    const setSelection = models => {
+      selection.value = models;
+    };
+
     return {
       // References
       columns,
       rows,
+      selection,
       tabs,
       // Methods
-      selectTab
+      selectTab,
+      setSelection
     };
   }
 };

diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
@@ -189,5 +189,17 @@ export default {
   },
   GenericTable: {
     pagination: "{start} - {end} of {total}"
+  },
+  ModelActionBar: {
+    delete: "Delete",
+    archive: "Archive",
+    download: "Download",
+    merge: "Merge"
+  },
+  ModelActionMenu: {
+    buttonAddTags: "Add tags",
+    buttonRename: "Rename",
+    buttonArchive: "Archive",
+    buttonDelete: "Delete"
   }
 };
diff --git a/src/i18n/lang/fr.js b/src/i18n/lang/fr.js
@@ -192,5 +192,17 @@ export default {
   },
   GenericTable: {
     pagination: "{start} - {end} sur {total}"
+  },
+  ModelActionBar: {
+    delete: "Supprimer",
+    archive: "Archiver",
+    download: "Télécharger",
+    merge: "Fusionner"
+  },
+  ModelActionMenu: {
+    buttonAddTags: "Ajouter des tags",
+    buttonRename: "Renommer",
+    buttonArchive: "Archiver",
+    buttonDelete: "Supprimer"
   }
 };