feat(projects): add image switcher to project model preview

src/components/project-model-preview/ProjectModelPreview.scss

@@ -1,10 +1,26 @@
 .project-model-preview {
   @include noselect;
 
+  position: relative;
   height: 100%;
   background-color: $platform-project-card-background;
 
-  &__wrapper {
+  &__switcher {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100px;
+    margin: 0 calc((100% - 100px) / 2);
+    margin-top: 16px;
+
+    .icon-previous {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__viewport {
     width: $platform-project-card-content-height;
     height: 100%;
     margin: auto;

src/components/project-model-preview/ProjectModelPreview.vue

@@ -1,27 +1,47 @@
 <template>
   <div class="project-model-preview" ref="container" @mousemove="translate">
-    <div class="project-model-preview__wrapper" ref="viewport">
+    <div class="project-model-preview__switcher" v-if="images.length > 1">
+      <BIMDataIcon
+        name="chevron"
+        size="xs"
+        class="icon-previous"
+        @click="previousImage"
+      />
+      <span>{{ `${image.index} / ${images.length}` }}</span>
+      <BIMDataIcon
+        name="chevron"
+        size="xs"
+        class="icon-next"
+        @click="nextImage"
+      />
+    </div>
+    <div class="project-model-preview__viewport" ref="viewport">
       <img
-        :src="image || '/static/default-model-preview.png'"
+        :src="image ? image.url : '/static/default-model-preview.png'"
         :style="{ transform: `translateX(-${translation}px)` }"
       />
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from "vue";
+import { ref, watchEffect } from "vue";
 import { useProjects } from "@/state/projects";
+// Components
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
 
 export default {
+  components: {
+    BIMDataIcon
+  },
   props: {
     project: {
       type: Object,
       required: true
     }
   },
   setup(props) {
-    const { fetchProjectPreviewImage } = useProjects();
+    const { fetchProjectPreviewImages } = useProjects();
 
     const nbSlices = 15;
     const container = ref(null);
@@ -40,18 +60,36 @@ export default {
       }
     };
 
+    let index = 0;
     const image = ref(null);
-    fetchProjectPreviewImage(props.project).then(
-      imageURL => (image.value = imageURL)
+    const images = ref([]);
+    const nextImage = () => {
+      if (index < images.value.length - 1) {
+        image.value = images.value[++index];
+      }
+    };
+    const previousImage = () => {
+      if (index > 0) {
+        image.value = images.value[--index];
+      }
+    };
+    watchEffect(
+      () => (image.value = images.value.length > 0 ? images.value[0] : null)
+    );
+    fetchProjectPreviewImages(props.project).then(
+      urls => (images.value = urls.map((url, i) => ({ index: i + 1, url })))
     );
 
     return {
       // References
       container,
       image,
+      images,
       translation,
       viewport,
       // Methods
+      nextImage,
+      previousImage,
       translate
     };
   }

src/state/projects.js

@@ -43,12 +43,18 @@ const selectProject = id => {
   return state.currentProject;
 };
 
-const fetchProjectPreviewImage = async project => {
-  let ifcs = await IfcService.fetchProjectIfcs(project);
-  ifcs = ifcs.filter(ifc => ifc.viewer360File);
-  ifcs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-  const imageURL = ifcs.length ? ifcs[0].viewer360File : null;
-  return imageURL;
+const fetchProjectPreviewImages = async project => {
+  // let ifcs = await IfcService.fetchProjectIfcs(project);
+  // ifcs = ifcs.filter(ifc => ifc.viewer360File);
+  // ifcs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+  // const imageURL = ifcs.length ? ifcs[0].viewer360File : null;
+  // return imageURL;
+
+  const ifcs = await IfcService.fetchProjectIfcs(project);
+  const images = ifcs
+    .filter(ifc => ifc.viewer360File)
+    .map(ifc => ifc.viewer360File);
+  return images;
 };
 
 export function useProjects() {
@@ -61,6 +67,6 @@ export function useProjects() {
     softUpdateProject,
     deleteProject,
     selectProject,
-    fetchProjectPreviewImage
+    fetchProjectPreviewImages
   };
 }