80 lines
2.2 KiB
Vue
80 lines
2.2 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"
|
|
aria-labelledby="back-to-project"
|
|
>
|
|
<span id="back-to-project">Retour au projet</span>
|
|
</router-link>
|
|
<button
|
|
class="btn | ml-auto"
|
|
@click="validate"
|
|
v-if="page.content.isvalidated != 'true'"
|
|
:disabled="page.moodboard.length === 0"
|
|
:title="
|
|
page.moodboard.length === 0 ? 'Ajoutez au moins une image' : undefined
|
|
"
|
|
>
|
|
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 TitledPdfWrapper from "../components/project/TitledPdfWrapper.vue";
|
|
import { usePageStore } from "../stores/page";
|
|
import { storeToRefs } from "pinia";
|
|
import { useApiStore } from "../stores/api";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const stepsComponents = {
|
|
Intro,
|
|
ModeSelection,
|
|
Images,
|
|
TitledPdfWrapper,
|
|
};
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
const api = useApiStore();
|
|
|
|
const currentStep = ref(setInitialStep());
|
|
|
|
function changeStep(stepName) {
|
|
currentStep.value = stepName;
|
|
}
|
|
|
|
function setInitialStep() {
|
|
if (useRoute().query.step === "images") {
|
|
return "Images";
|
|
}
|
|
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";
|
|
}
|
|
|
|
function validate() {
|
|
api.validateBrief(page.value.uri).then((res) => {
|
|
location.href = "/" + page.value.parent;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@media (max-width: 540px) {
|
|
#back-to-project {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|