MINOR: Feature/upload file (#27)

* create BcfTopicSnapshotsActions file * add translations * use BcfTopicSnapshotsActions * fix snapshot style * delete dead code * fix img in BcfTopicsSnapshots
bimdata · Sep 28, 2023 · 5e3d820 · 5e3d820
1 parent 31e6637
commit 5e3d820
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 13 deletions.
diff --git a/src/components/bcf-topic-form/BcfTopicForm.vue b/src/components/bcf-topic-form/BcfTopicForm.vue
@@ -35,6 +35,13 @@
           @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"
+          />
           <BIMDataButton
             fill
             radius
@@ -205,11 +212,13 @@ import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMData
 import BIMDataTooltip from "@bimdata/design-system/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue";
 import BcfTopicImages from "./bcf-topic-images/BcfTopicImages.vue";
 import BcfTopicSnapshots from "./bcf-topic-snapshots/BcfTopicSnapshots.vue";
+import BcfTopicSnapshotsActions from "./bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue";
 
 export default {
   components: {
     BcfTopicImages,
     BcfTopicSnapshots,
+    BcfTopicSnapshotsActions,
     BIMDataButton,
     BIMDataDatePicker,
     BIMDataIconArrow,

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
@@ -0,0 +1,7 @@
+.bcf-topic-snapshots-actions {
+  &:not(.bcf-topic-snapshots-actions__xs) {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+}
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
@@ -0,0 +1,128 @@
+<template>
+  <div
+    v-if="isXs"
+    class="bcf-topic-snapshots-actions flex"
+    :class="{ 'bcf-topic-snapshots-actions__xs': isXs }"
+  >
+    <BIMDataTooltip
+      :disabled="viewpoints.length >= 4"
+      :text="$t('BcfComponents.BcfTopicForm.takeSnapshot')"
+      color="primary"
+      position="right"
+    >
+      <BIMDataButton
+        color="default"
+        ghost
+        rounded
+        icon
+        @click="createViewpoints"
+        :disabled="viewpoints.length >= 4"
+      >
+        <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">
+        <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"
+        />
+      </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: () => [],
+    },
+    getViewers: {
+      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;
+        }
+
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+          const viewpoint = {
+            snapshot: {
+              snapshot_type: type,
+              snapshot_data: reader.result,
+            },
+          };
+          emit("create-viewpoint", viewpoint);
+        });
+        reader.readAsDataURL(file);
+      });
+    };
+
+    return {
+      // Methods
+      createViewpoints,
+      uploadViewpoints,
+    };
+  },
+};
+</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
@@ -43,6 +43,5 @@
     justify-content: center;
     align-items: center;
     border: 2px dashed var(--color-silver);
-    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
@@ -17,14 +17,19 @@
     </template>
 
     <template v-else>
-      <div class="bcf-topic-snapshots__create" @click="createViewpoints">
-        <BIMDataIconCamera size="xl" />
+      <div class="bcf-topic-snapshots__create">
+        <BcfTopicSnapshotsActions
+          :viewpoints="viewpoints"
+          :getViewers="getViewers"
+          @create-viewpoint="$emit('create-viewpoint', $event)"
+        />
       </div>
     </template>
   </div>
 </template>
 
 <script>
+import BcfTopicSnapshotsActions from "../bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue";
 // Components
 import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
 import {
@@ -34,6 +39,7 @@ import {
 
 export default {
   components: {
+    BcfTopicSnapshotsActions,
     BIMDataButton,
     BIMDataIconDelete,
     BIMDataIconCamera,
@@ -49,21 +55,12 @@ 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,
     };
   },

diff --git a/src/i18n/lang/fr.json b/src/i18n/lang/fr.json
@@ -65,7 +65,9 @@
             "updateButton": "Modifier ce BCF",
             "modalText": "Vous êtes sur le point de quitter l'édition de l'issue {name} mais il y'a des modifications non enregistrées.",
             "cancelButton": "Annuler les modifications",
-            "continueButton": "Continuer les modifications"
+            "continueButton": "Continuer les modifications",
+            "takeSnapshot": "Prendre un snapshot",
+            "importFile": "Importer un fichier"
         },
         "BcfTopicOverview": {
             "openViewer": "Ouvrir dans le viewer",