designtopack/src/components/project/ProjectStep.vue

<template>
  <section
    class="flex-1"
    :aria-labelledby="step.id"
    :data-status="setStatus(page.steps, page.content.currentstep, step)"
  >
    <h2 :id="step.id">
      <span :data-icon="step.id">{{ step.label }}</span>
    </h2>
    <div ref="cards-node" class="cards | flow">
      <component :is="cardsMap[step.id]" :step="step" />
    </div>
  </section>
</template>

<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { usePageStore } from "../../stores/page";
import { computed, onMounted, useTemplateRef } from "vue";
import { useProjectStore } from "../../stores/project";
import ClientBrief from "./cards/ClientBrief.vue";
import MultipleDocuments from "./cards/MultipleDocuments.vue";
import SimpleDocument from "./cards/SimpleDocument.vue";
import VirtualSample from "./cards/VirtualSample.vue";
import PhysicalSample from "./cards/PhysicalSample.vue";

const { step } = defineProps({
  step: Object,
});

const cardsMap = {
  clientBrief: ClientBrief,
  proposal: MultipleDocuments,
  extendedBrief: SimpleDocument,
  industrialIdeation: SimpleDocument,
  virtualSample: VirtualSample,
  physicalSample: PhysicalSample,
};

dayjs.locale("fr");

const { page } = usePageStore();
const { setStatus } = useProjectStore();
const cardsNode = useTemplateRef("cards-node");

const steps = page.steps.map((item) => {
  return item.value;
});

const mergedFiles = computed(() => {
  if (step.id !== "virtualSample") return false;

  const staticFiles = step.files?.static ?? [];
  const dynamicFiles = step.files?.dynamic ?? [];

  return [...staticFiles, ...dynamicFiles];
});

// Hooks
onMounted(() => {
  if (step.id === page.content.currentstep) {
    cardsNode.value.scrollIntoView({
      behavior: "smooth",
      inline: "center",
    });
  }
});

// Functions
function getFrontView(track) {
  if (track.files.length === 1) return track.files[0];
  const xMax = parseInt(
    track.files[track.files.length - 1].name.split("_")[1].split(".")[0]
  );
  const xFrontView = (xMax + 1) / 2;
  const extension = track.files[0].name.split(".")[1];
  const frontViewName = "0_" + xFrontView + "." + extension;
  const frontView = track.files.find((file) => file.name === frontViewName);
  return frontView;
}
</script>

<style scoped>
.physical-sample header {
  color: var(--color-white);
  background: linear-gradient(
      90deg,
      hsla(0, 0%, 10%, 0.5) 0%,
      hsla(0, 0%, 10%, 0.9) 50%,
      hsla(0, 0%, 10%, 0.9) 100%
    ),
    var(--cover), var(--color-black);
  background-repeat: no-repeat;
  background-size: cover;
}
.physical-sample header > * {
  padding-inline: var(--space-16);
}
.physical-sample header h3 {
  position: initial;
}
</style>