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 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 } from "vue";
import { useProjectStore } from "../../stores/project";
import { useRouter } from "vue-router";
import ClientBrief from "./cards/ClientBrief.vue";
import Proposal from "./cards/Proposal.vue";
import ExtendedBrief from "./cards/ExtendedBrief.vue";

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

const cardsMap = {
  clientBrief: ClientBrief,
  proposal: Proposal,
  extendedBrief: ExtendedBrief,
};

const emit = defineEmits(["update:file"]);
const router = useRouter();

dayjs.locale("fr");

const { page } = usePageStore();
const { setStatus } = useProjectStore();

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];
});

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>