From 54669a942cc9c2d682f53148c48d5a55699e9e64 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 4 Oct 2023 09:39:23 +0200
Subject: [PATCH 1/4] Fix make multiple snapshots

---
 .../BcfTopicSnapshotsActions.scss             | 10 ------
 .../BcfTopicSnapshotsActions.vue              | 29 -----------------
 .../BcfTopicSnapshots.scss                    |  3 ++
 .../bcf-topic-snapshots/BcfTopicSnapshots.vue | 32 ++++++++++++++++---
 4 files changed, 30 insertions(+), 44 deletions(-)
 delete mode 100644 src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss

diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss
deleted file mode 100644
index cc38fb5..0000000
--- a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.bcf-topic-snapshots-actions {
-  &:not(.bcf-topic-snapshots-actions__xs) {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-  label {
-    cursor: pointer;
-  }
-}
diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue
index 74a4168..4833560 100644
--- a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue
+++ b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue
@@ -1,8 +1,6 @@
 <template>
   <div
-    v-if="isXs"
     class="bcf-topic-snapshots-actions flex"
-    :class="{ 'bcf-topic-snapshots-actions__xs': isXs }"
   >
     <BIMDataTooltip
       :disabled="viewpoints.length >= 4"
@@ -43,36 +41,11 @@
       </BIMDataButton>
     </BIMDataTooltip>
   </div>
-  <div v-else class="bcf-topic-snapshots-actions">
-    <BIMDataButton color="primary" fill radius @click="createViewpoints">
-      <BIMDataIconCamera size="s" margin="0 6px 0 0" />
-      <span>{{ $t("BcfComponents.BcfTopicForm.takeSnapshot") }}</span>
-    </BIMDataButton>
-    <BIMDataButton color="primary" outline radius>
-      <label for="files" class="flex items-center">
-        <BIMDataIconUnarchive fill color="default" size="s" margin="0 6px 0 0" />
-        <span>{{ $t("BcfComponents.BcfTopicForm.importFile") }}</span>
-      </label>
-      <input
-        :disabled="viewpoints.length >= 4"
-        hidden
-        id="files"
-        type="file"
-        multiple
-        accept="image/png, image/jpeg"
-        @change="uploadViewpoints"
-      />
-    </BIMDataButton>
-  </div>
 </template>
 
 <script>
 export default {
   props: {
-    isXs: {
-      type: Boolean,
-      default: false,
-    },
     viewpoints: {
       type: Array,
       default: () => [],
@@ -124,5 +97,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss" src="./BcfTopicSnapshotsActions.scss"></style>
diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.scss b/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.scss
index 25174f9..fd7d9aa 100644
--- a/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.scss
+++ b/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.scss
@@ -43,5 +43,8 @@
     justify-content: center;
     align-items: center;
     border: 2px dashed var(--color-silver);
+    label {
+      cursor: pointer;
+    }
   }
 }
diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue b/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue
index 432a7eb..0ec4a9e 100644
--- a/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue
+++ b/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue
@@ -18,11 +18,25 @@
 
     <template v-else>
       <div class="bcf-topic-snapshots__create">
-        <BcfTopicSnapshotsActions
-          :viewpoints="viewpoints"
-          :getViewers="getViewers"
-          @create-viewpoint="$emit('create-viewpoint', $event)"
-        />
+        <BIMDataButton color="primary" fill radius @click="createViewpoints">
+          <BIMDataIconCamera size="s" margin="0 6px 0 0" />
+          <span>{{ $t("BcfComponents.BcfTopicForm.takeSnapshot") }}</span>
+        </BIMDataButton>
+        <BIMDataButton color="primary" outline radius class="m-t-12">
+          <label for="files" class="flex items-center">
+            <BIMDataIconUnarchive fill color="default" size="s" margin="0 6px 0 0" />
+            <span>{{ $t("BcfComponents.BcfTopicForm.importFile") }}</span>
+          </label>
+          <input
+            :disabled="viewpoints.length >= 4"
+            hidden
+            id="files"
+            type="file"
+            multiple
+            accept="image/png, image/jpeg"
+            @change="uploadViewpoints"
+          />
+        </BIMDataButton>
       </div>
     </template>
   </div>
@@ -55,12 +69,20 @@ export default {
   },
   emits: ["create-viewpoint", "delete-viewpoint"],
   setup(props, { emit }) {
+    const createViewpoints = () => {
+      const viewers = Object.values(props.getViewers?.() ?? {}).flat();
+      viewers.forEach(async (viewer) => {
+        const viewpoint = await viewer.getViewpoint();
+        emit("create-viewpoint", viewpoint);
+      });
+    };
     const deleteViewpoint = (viewpoint) => {
       emit("delete-viewpoint", viewpoint);
     };
 
     return {
       // Methods
+      createViewpoints,
       deleteViewpoint,
     };
   },

From 043d4ecb73eb073c77697918e8c241149f8b5dfb Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 4 Oct 2023 10:02:25 +0200
Subject: [PATCH 2/4] delete unused order in config

---
 src/config.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/config.js b/src/config.js
index ef8b7ed..26b85c8 100644
--- a/src/config.js
+++ b/src/config.js
@@ -45,36 +45,30 @@ const VIEWPOINT_TYPES = Object.freeze({
 
 const VIEWPOINT_CONFIG = Object.freeze({
   [VIEWPOINT_TYPES.IFC3D]: {
-    order: 1,
     window: "3d",
     plugin: "viewer3d",
     icon: "fileIfcPolychrome",
   },
   [VIEWPOINT_TYPES.POINT_CLOUD]: {
-    order: 2,
     window: "pointCloud",
     plugin: "pointCloud",
   },
   [VIEWPOINT_TYPES.IFC2D]: {
-    order: 3,
     window: "2d",
     plugin: "viewer2d",
     icon: "fileIfcPolychrome",
   },
   [VIEWPOINT_TYPES.DWG]: {
-    order: 4,
     window: "dwg",
     plugin: "dwg",
     icon: "fileDwgPolychrome",
   },
   [VIEWPOINT_TYPES.PLAN]: {
-    order: 5,
     window: "plan",
     plugin: "plan",
     icon: "filePlanPolychrome",
   },
   [VIEWPOINT_TYPES.PANORAMA]: {
-    order: 6,
     window: "panorama",
     plugin: "panorama",
     icon: "filePlanPolychrome",

From b2baf5a6725e2efe6b6949db4d355420ad86bde4 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 4 Oct 2023 11:05:23 +0200
Subject: [PATCH 3/4] add createViewpoint & uploadViewpoint into BcfTopicForm

---
 .../bcf-topic-form/BcfTopicForm.vue           | 38 +++++++++++-
 .../BcfTopicSnapshotsActions.vue              | 58 +++++--------------
 .../bcf-topic-snapshots/BcfTopicSnapshots.vue | 26 ++-------
 3 files changed, 54 insertions(+), 68 deletions(-)

diff --git a/src/components/bcf-topic-form/BcfTopicForm.vue b/src/components/bcf-topic-form/BcfTopicForm.vue
index c934485..e3d8d90 100644
--- a/src/components/bcf-topic-form/BcfTopicForm.vue
+++ b/src/components/bcf-topic-form/BcfTopicForm.vue
@@ -32,15 +32,16 @@
           :viewpoints="viewpointsToDisplay"
           :getViewers="getViewers"
           @create-viewpoint="createViewpoint"
+          @upload-viewpoint="uploadViewpoint"
           @delete-viewpoint="deleteViewpoint"
         />
         <div class="bcf-topic-form__content__actions">
           <BcfTopicSnapshotsActions
             v-if="viewpointsToDisplay.length > 0"
-            :isXs="true"
             :viewpoints="viewpointsToDisplay"
             :getViewers="getViewers"
             @create-viewpoint="createViewpoint"
+            @upload-viewpoint="uploadViewpoint"
           />
           <BIMDataButton
             fill
@@ -377,8 +378,38 @@ export default {
       { immediate: true }
     );
 
-    const createViewpoint = (viewpoint) => {
-      viewpointsToCreate.value.push(viewpoint);
+    const createViewpoint = () => {
+      const viewers = Object.values(props.getViewers?.() ?? {}).flat();
+      viewers.forEach(async (viewer) => {
+        const viewpoint = await viewer.getViewpoint();
+        viewpointsToCreate.value.push(viewpoint);
+      });
+    };
+
+    const uploadViewpoint = (event) => {
+      [...event.target.files].forEach((file) => {
+        let type;
+        if (file.type === "image/png") {
+          type = "png";
+        } else if (file.type === "image/jpeg") {
+          type = "jpg"; // `jpeg` is not a valid value, only `jpg` is
+        } else {
+          type = file.type;
+        }
+
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+          const viewpoint = {
+            isUpload: true,
+            snapshot: {
+              snapshot_type: type,
+              snapshot_data: reader.result,
+            },
+          };
+          viewpointsToCreate.value.push(viewpoint);
+        });
+        reader.readAsDataURL(file);
+      });
     };
 
     const deleteViewpoint = (viewpoint) => {
@@ -500,6 +531,7 @@ export default {
       viewpointsToDisplay,
       // Methods
       createViewpoint,
+      uploadViewpoint,
       deleteViewpoint,
       submit,
     };
diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue
index 4833560..a4898bf 100644
--- a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue
+++ b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue
@@ -3,7 +3,7 @@
     class="bcf-topic-snapshots-actions flex"
   >
     <BIMDataTooltip
-      :disabled="viewpoints.length >= 4"
+      :disabled="snapshotedViewpoints.length > 0"
       :text="$t('BcfComponents.BcfTopicForm.takeSnapshot')"
       color="primary"
       position="right"
@@ -13,30 +13,28 @@
         ghost
         rounded
         icon
-        @click="createViewpoints"
-        :disabled="viewpoints.length >= 4"
+        @click="$emit('create-viewpoint')"
+        :disabled="snapshotedViewpoints.length > 0"
       >
         <BIMDataIconCamera size="s" />
       </BIMDataButton>
     </BIMDataTooltip>
     <BIMDataTooltip
-      :disabled="viewpoints.length >= 4"
       :text="$t('BcfComponents.BcfTopicForm.importFile')"
       color="primary"
       position="right"
     >
-      <BIMDataButton color="default" ghost rounded icon :disabled="viewpoints.length >= 4">
+      <BIMDataButton color="default" ghost rounded icon >
         <label for="files" class="flex items-center">
           <BIMDataIconUnarchive fill color="default" size="s" />
         </label>
         <input
-          :disabled="viewpoints.length >= 4"
           hidden
           id="files"
           type="file"
           multiple
           accept="image/png, image/jpeg"
-          @change="uploadViewpoints"
+          @change="$emit('upload-viewpoint', $event)"
         />
       </BIMDataButton>
     </BIMDataTooltip>
@@ -44,6 +42,7 @@
 </template>
 
 <script>
+import { computed } from "vue";
 export default {
   props: {
     viewpoints: {
@@ -54,46 +53,19 @@ export default {
       type: Function,
     },
   },
-  emits: ["create-viewpoint"],
-  setup(props, { emit }) {
-    const createViewpoints = () => {
-      const viewers = Object.values(props.getViewers?.() ?? {}).flat();
-      viewers.forEach(async (viewer) => {
-        const viewpoint = await viewer.getViewpoint();
-        emit("create-viewpoint", viewpoint);
-      });
-    };
-
-    const uploadViewpoints = (event) => {
-      [...event.target.files].forEach((file) => {
-        let type;
-        if (file.type === "image/png") {
-          type = "png";
-        } else if (file.type === "image/jpeg") {
-          type = "jpg"; // `jpeg` is not a valid value, only `jpg` is
-        } else {
-          type = file.type;
-        }
+  emits: ["create-viewpoint", "upload-viewpoint"],
+  setup(props) {
 
-        const reader = new FileReader();
-        reader.addEventListener("load", () => {
-          const viewpoint = {
-            snapshot: {
-              snapshot_type: type,
-              snapshot_data: reader.result,
-            },
-          };
-          emit("create-viewpoint", viewpoint);
-        });
-        reader.readAsDataURL(file);
-      });
-    };
+    // Computed filtering viewpoints on isUpload = false
+    const snapshotedViewpoints = computed(() =>
+      props.viewpoints.filter((viewpoint) => !viewpoint.isUpload)
+    );
 
     return {
-      // Methods
-      createViewpoints,
-      uploadViewpoints,
+      snapshotedViewpoints,
     };
   },
 };
 </script>
+
+<style scoped lang="scss" src="./BcfTopicSnapshotsActions.scss"></style>
\ No newline at end of file
diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue b/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue
index 0ec4a9e..bcca5b8 100644
--- a/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue
+++ b/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue
@@ -9,7 +9,7 @@
           :key="viewpoint.guid || i"
         >
           <img v-if="viewpoint.snapshot.snapshot_data" :src="viewpoint.snapshot.snapshot_data" />
-          <BIMDataButton class="btn-delete" fill rounded icon @click="deleteViewpoint(viewpoint)">
+          <BIMDataButton class="btn-delete" fill rounded icon @click="$emit('delete-viewpoint', viewpoint)">
             <BIMDataIconDelete size="xs" fill color="high" />
           </BIMDataButton>
         </div>
@@ -18,7 +18,7 @@
 
     <template v-else>
       <div class="bcf-topic-snapshots__create">
-        <BIMDataButton color="primary" fill radius @click="createViewpoints">
+        <BIMDataButton color="primary" fill radius @click="$emit('create-viewpoint')">
           <BIMDataIconCamera size="s" margin="0 6px 0 0" />
           <span>{{ $t("BcfComponents.BcfTopicForm.takeSnapshot") }}</span>
         </BIMDataButton>
@@ -34,7 +34,7 @@
             type="file"
             multiple
             accept="image/png, image/jpeg"
-            @change="uploadViewpoints"
+            @change="$emit('upload-viewpoint', $event)"
           />
         </BIMDataButton>
       </div>
@@ -67,25 +67,7 @@ export default {
       type: Function,
     },
   },
-  emits: ["create-viewpoint", "delete-viewpoint"],
-  setup(props, { emit }) {
-    const createViewpoints = () => {
-      const viewers = Object.values(props.getViewers?.() ?? {}).flat();
-      viewers.forEach(async (viewer) => {
-        const viewpoint = await viewer.getViewpoint();
-        emit("create-viewpoint", viewpoint);
-      });
-    };
-    const deleteViewpoint = (viewpoint) => {
-      emit("delete-viewpoint", viewpoint);
-    };
-
-    return {
-      // Methods
-      createViewpoints,
-      deleteViewpoint,
-    };
-  },
+  emits: ["create-viewpoint", "upload-viewpoint", "delete-viewpoint"],
 };
 </script>
 

From 4b06f3e305222a406d77b19bb0065178d2d36547 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Wed, 4 Oct 2023 11:05:49 +0200
Subject: [PATCH 4/4] add BcfTopicSnapshotActions scss file

---
 .../BcfTopicSnapshotsActions.scss                        | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss

diff --git a/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss
new file mode 100644
index 0000000..2f1ae89
--- /dev/null
+++ b/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss
@@ -0,0 +1,9 @@
+.bcf-topic-snapshots-actions {
+  label {
+    height: 32px;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+  }
+}