designtopack/src/views/Brief.vue
2024-11-19 14:10:35 +01:00

49 lines
1.4 KiB
Vue

<template>
<main class="flex flex-col items-stretch | w-full" style="--row-gap: 2rem">
<header class="flex | bg-white | rounded-2xl | p-8">
<router-link
:to="'/' + page.parent"
class="btn btn--white"
data-icon="arrow-left"
>
<span>Retour au projet</span>
</router-link>
<button class="btn | ml-auto">Valider et envoyer le brief</button>
</header>
<component :is="stepsComponents[currentStep]" @update:step="changeStep" />
</main>
</template>
<script setup>
import { ref } from "vue";
import Intro from "../components/project/brief/Intro.vue";
import ModeSelection from "../components/project/brief/ModeSelection.vue";
import Images from "../components/project/brief/Images.vue";
import PdfViewer from "../components/project/brief/PdfViewer.vue";
import { usePageStore } from "../stores/page";
import { storeToRefs } from "pinia";
const stepsComponents = {
Intro,
ModeSelection,
Images,
PdfViewer,
};
const { page } = storeToRefs(usePageStore());
const currentStep = ref(setInitialStep());
function changeStep(stepName) {
currentStep.value = stepName;
}
function setInitialStep() {
const hasPDF = page.value.content.pdf.length !== 0;
const hasImages =
page.value.content.moodboard.length !== 0 ||
page.value.content.description.length !== 0;
const isEmpty = !hasPDF && !hasImages;
if (isEmpty) return "Intro";
if (hasImages) return "Images";
}
</script>