studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

project blueprint - optional steps working

Browse source
This commit is contained in:
isUnknown 2024-09-26 17:21:24 +02:00
parent 595c275100
commit 8da0fb0e36
30 changed files with 296 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Projects.vue
View file

@ -33,7 +33,7 @@
</template>
<script setup>
import Tabs from "./Tabs.vue";
import Project from "./Project.vue";
import Project from "./project/Project.vue";
import { useProjectsStore } from "../stores/projects";
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";

0
src/components/Project.vue → src/components/project/Project.vue
View file

37
src/components/project/ProjectStep.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<section
class="flex-1"
aria-labelledby="votre-brief-label"
data-status="done"
>
<h2 id="votre-brief-label">
<span data-icon="votre-brief">Votre brief</span>
</h2>
<div class="cards | flow">
<article class="card">
<hgroup class="order-last">
<h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
</hgroup>
<div class="card__meta | flex">
<time class="card__date | text-grey-700" datetime="2024-06-12"
>12 juin 2024</time
>
</div>
<figure class="card__images" data-count="13">
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
alt=""
/>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
alt=""
/>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
alt=""
/>
</figure>
</article>
</div>
</section>
</template>

0
src/components/brief/AddImages.vue → src/components/project/brief/AddImages.vue
View file

0
src/components/brief/Intro.vue → src/components/project/brief/Intro.vue
View file

0
src/components/brief/ModeSelection.vue → src/components/project/brief/ModeSelection.vue
View file

48
src/views/Project.vue
View file

@ -5,13 +5,13 @@
<button class="btn | ml-auto">Demander un RDV</button>
</header>
<component :is="stepsComponents[currentStep]" @update:step="changeStep" />
<!-- <VirtualSample /> -->
<!-- <component :is="stepsComponents[currentStep]" @update:step="changeStep" /> -->
<!-- Kanban: Status Brief Enrichi -->
<!-- <div class="kanban">
<section
<div class="kanban">
<ProjectStep v-for="step in steps" :key="step" :step="step" />
<!-- <section
class="flex-1"
aria-labelledby="votre-brief-label"
data-status="done"
@ -149,8 +149,8 @@
<p>Prochainement disponible</p>
</div>
</div>
</section>
</div> -->
</section> -->
</div>
</main>
</template>
@ -159,25 +159,35 @@ import { usePageStore } from "../stores/page";
import { useUserStore } from "../stores/user";
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import Intro from "../components/brief/Intro.vue";
import ModeSelection from "../components/brief/ModeSelection.vue";
import AddImages from "../components/brief/AddImages.vue";
import VirtualSampleVue from "../components/VirtualSample.vue";
import VirtualSample from "../components/VirtualSample.vue";
import ProjectStep from "../components/project/ProjectStep.vue";
import Intro from "../components/project/brief/Intro.vue";
import ModeSelection from "../components/project/brief/ModeSelection.vue";
import AddImages from "../components/project/brief/AddImages.vue";
const { page } = storeToRefs(usePageStore());
const user = useUserStore().user;
const stepsComponents = {
Intro,
ModeSelection,
AddImages,
};
const currentStep = page.value.currentStep;
const steps = page.value.steps.map((step) => step.value);
const currentStep = ref("Intro");
// const stepsComponents = {
// Intro,
// ModeSelection,
// AddImages,
// };
function changeStep(stepName) {
currentStep.value = stepName;
// const currentStep = ref("Intro");
// function changeStep(stepName) {
// currentStep.value = stepName;
// }
function setStepStatus(stepName) {
const stepIndex = steps.indexOf(stepName);
const currentIndex = steps.indexOf(currentStep.value);
if (stepIndex < currentIndex) {
return "done";
}
}
</script>