feat(models-manager): create mamanger modal + add archive, download, …

…merge and delete features (some bugs remain)
bimdata · Apr 6, 2021 · d7f20ff · d7f20ff
1 parent 71d6a5e
commit d7f20ff
Show file tree

Hide file tree

Showing 14 changed files with 439 additions and 17 deletions.
diff --git a/src/components/generic/generic-modal/GenericModal.scss b/src/components/generic/generic-modal/GenericModal.scss
@@ -0,0 +1,55 @@
+.generic-modal {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 0.9rem;
+  color: $color-primary;
+  background-color: rgba(47, 55, 74, 0.75);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__content {
+    position: relative;
+    background-color: $color-white;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__btn-close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      color: $color-tertiary-dark;
+    }
+
+    &__title {
+      width: 100%;
+      padding: $spacing-unit * 2;
+      font-size: 1.3rem;
+      font-weight: bold;
+      text-align: center;
+    }
+
+    &__text {
+      flex-grow: 1;
+      width: 100%;
+      padding: $spacing-unit;
+      overflow-y: auto;
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: $spacing-unit * 2;
+      width: 100%;
+      padding: $spacing-unit * 2;
+    }
+  }
+}
diff --git a/src/components/generic/generic-modal/GenericModal.vue b/src/components/generic/generic-modal/GenericModal.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="generic-modal">
+    <div
+      class="generic-modal__content"
+      :style="{
+        width: contentWidth,
+        height: contentHeight
+      }"
+    >
+      <BIMDataButton
+        class="generic-modal__content__btn-close"
+        ghost
+        rounded
+        icon
+        @click="$emit('close')"
+      >
+        <BIMDataIcon name="close" size="xxs" />
+      </BIMDataButton>
+      <div class="generic-modal__content__title">
+        <slot name="header"></slot>
+      </div>
+      <div class="generic-modal__content__text">
+        <slot name="body"></slot>
+      </div>
+      <div class="generic-modal__content__actions">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </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: {
+    contentWidth: {
+      type: String,
+      default: "50%"
+    },
+    contentHeight: {
+      type: String,
+      default: "50%"
+    }
+  },
+  emits: ["close"]
+};
+</script>
+
+<style scoped lang="scss" src="./GenericModal.scss"></style>
diff --git a/src/components/specific/models/models-action-bar/ModelsActionBar.vue b/src/components/specific/models/models-action-bar/ModelsActionBar.vue
@@ -1,18 +1,28 @@
 <template>
   <div class="models-action-bar">
-    <BIMDataButton color="high" ghost squared @click="$emit('delete-clicked')">
+    <BIMDataButton
+      color="high"
+      ghost
+      squared
+      @click="$emit('delete-clicked', models)"
+    >
       <BIMDataIcon name="delete" size="xs" />
       <span>{{ $t("ModelsActionBar.delete") }}</span>
     </BIMDataButton>
-    <BIMDataButton ghost squared @click="$emit('archive-clicked')">
+    <BIMDataButton ghost squared @click="$emit('archive-clicked', models)">
       <BIMDataIcon name="import" size="xs" />
       <span>{{ $t("ModelsActionBar.archive") }}</span>
     </BIMDataButton>
-    <BIMDataButton ghost squared @click="$emit('download-clicked')">
+    <BIMDataButton ghost squared @click="$emit('download-clicked', models)">
       <BIMDataIcon name="cloud" size="xs" />
       <span>{{ $t("ModelsActionBar.download") }}</span>
     </BIMDataButton>
-    <BIMDataButton ghost squared @click="$emit('merge-clicked')">
+    <BIMDataButton
+      ghost
+      squared
+      @click="$emit('merge-clicked', models)"
+      :disabled="models.length < 2"
+    >
       <BIMDataIcon name="union" size="xs" />
       <span>{{ $t("ModelsActionBar.merge") }}</span>
     </BIMDataButton>
@@ -29,6 +39,12 @@ export default {
     BIMDataButton,
     BIMDataIcon
   },
+  props: {
+    models: {
+      type: Array,
+      default: () => []
+    }
+  },
   emits: [
     "delete-clicked",
     "archive-clicked",

diff --git a/src/components/specific/models/models-manager-table/ModelsManagerTable.vue b/src/components/specific/models/models-manager-table/ModelsManagerTable.vue
@@ -1,5 +1,6 @@
 <template>
   <GenericTable
+    class="models-manager-table"
     :columns="columns"
     :rows="models"
     :paginated="true"

diff --git a/src/components/specific/models/models-manager-table/model-name-cell/ModelNameCell.vue b/src/components/specific/models/models-manager-table/model-name-cell/ModelNameCell.vue
@@ -90,6 +90,7 @@ export default {
     const error = ref(false);
 
     const renameModel = async () => {
+      // TODO: fix model update (maybe on API side)
       try {
         if (modelName.value) {
           loading.value = true;

diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.scss b/src/components/specific/models/project-models-manager/ProjectModelsManager.scss
@@ -1,4 +1,6 @@
 .project-models-manager {
+  position: relative;
+
   &.bimdata-card:deep() > .bimdata-card__content {
     height: calc(100% - 35px);
     padding: $spacing-unit;

diff --git a/src/components/specific/models/project-models-manager/ProjectModelsManager.vue b/src/components/specific/models/project-models-manager/ProjectModelsManager.vue
@@ -16,20 +16,39 @@
       <ModelsActionBar
         class="project-models-manager__action-bar"
         :style="{ visibility: selection.length > 0 ? 'visible' : 'hidden' }"
-        @archive-clicked="() => {}"
-        @delete-clicked="() => {}"
-        @download-clicked="() => {}"
-        @merge-clicked="() => {}"
+        :models="selection"
+        @archive-clicked="archiveModels"
+        @delete-clicked="openDeleteModal"
+        @download-clicked="downloadModels"
+        @merge-clicked="openMergeModal"
       />
 
       <ModelsManagerTable
         :project="project"
         :models="displayedModels"
-        @archive-clicked="() => {}"
-        @delete-clicked="() => {}"
-        @download-clicked="() => {}"
+        @archive-clicked="archiveModels([$event])"
+        @delete-clicked="openDeleteModal([$event])"
+        @download-clicked="downloadModels([$event])"
         @selection-changed="setSelection"
       />
+
+      <transition name="fade">
+        <ModelsDeleteModal
+          v-if="showDeleteModal"
+          :project="project"
+          :models="modelsToDelete"
+          @close="closeDeleteModal"
+        />
+      </transition>
+
+      <transition name="fade">
+        <ModelsMergeModal
+          v-if="showMergeModal"
+          :project="project"
+          :models="modelsToMerge"
+          @close="closeMergeModal"
+        />
+      </transition>
     </template>
   </BIMDataCard>
 </template>
@@ -44,13 +63,17 @@ import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/B
 import BIMDataTabs from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataTabs.js";
 import ModelsActionBar from "@/components/specific/models/models-action-bar/ModelsActionBar";
 import ModelsManagerTable from "@/components/specific/models/models-manager-table/ModelsManagerTable";
+import ModelsDeleteModal from "./models-delete-modal/ModelsDeleteModal";
+import ModelsMergeModal from "./models-merge-modal/ModelsMergeModal";
 
 export default {
   components: {
     BIMDataCard,
     BIMDataTabs,
     ModelsActionBar,
-    ModelsManagerTable
+    ModelsManagerTable,
+    ModelsDeleteModal,
+    ModelsMergeModal
   },
   props: {
     project: {
@@ -64,7 +87,7 @@ export default {
   },
   setup(props) {
     const { t } = useI18n();
-    const { updateModels, deleteModels } = useModels();
+    const { updateModels } = useModels();
 
     const tabs = ref([]);
     const currentTab = ref("ifc");
@@ -125,20 +148,65 @@ export default {
       selection.value = models;
     };
 
-    const removeModels = models => {};
+    const modelsToDelete = ref([]);
+    const showDeleteModal = ref(false);
+    const openDeleteModal = models => {
+      modelsToDelete.value = models;
+      showDeleteModal.value = true;
+    };
+    const closeDeleteModal = () => {
+      modelsToDelete.value = [];
+      showDeleteModal.value = false;
+    };
 
-    const archiveModels = models => {};
+    const modelsToMerge = ref([]);
+    const showMergeModal = ref(false);
+    const openMergeModal = models => {
+      modelsToMerge.value = models;
+      showMergeModal.value = true;
+    };
+    const closeMergeModal = () => {
+      modelsToMerge.value = [];
+      showMergeModal.value = false;
+    };
 
-    const downloadModels = models => {};
+    const archiveModels = async models => {
+      // TODO: fix model update (maybe on API side)
+      for (const model of models) {
+        model.archived = true;
+      }
+      await updateModels(props.project, models);
+    };
 
-    const mergeModels = models => {};
+    const downloadModels = models => {
+      // TODO: fix download for multiple files
+      const link = document.createElement("a");
+      link.style.display = "none";
+      link.download = "";
+      document.body.appendChild(link);
+      for (const model of models) {
+        link.href = model.document.file;
+        link.click();
+      }
+      document.body.removeChild(link);
+    };
 
     return {
       // References
       displayedModels,
+      modelsToDelete,
+      modelsToMerge,
       selection,
+      showDeleteModal,
+      showMergeModal,
       tabs,
       // Methods
+      archiveModels,
+      downloadModels,
+      closeDeleteModal,
+      closeMergeModal,
+      openDeleteModal,
+      openMergeModal,
       selectTab,
       setSelection
     };

diff --git a/...ponents/specific/models/project-models-manager/models-delete-modal/ModelsDeleteModal.scss b/...ponents/specific/models/project-models-manager/models-delete-modal/ModelsDeleteModal.scss
@@ -0,0 +1,16 @@
+.models-delete-modal {
+  &__message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &__list {
+      margin-right: auto;
+
+      &__item {
+        margin: $spacing-unit/3 0;
+      }
+    }
+  }
+}