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

add client brief page

Browse source
This commit is contained in:
isUnknown 2024-09-26 19:14:20 +02:00
parent 83cf6beea7
commit 769639b241
12 changed files with 97 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/inspirations/Header.vue
View file

@ -4,7 +4,7 @@
:style="'--image: url(\'' + inspiration.cover + '\')'"
>
<h2
id="inspiration-title"
id="inspiration-title"
class="inspiration__title | font-serif | text-lg"
:class="{ new: inspiration.new }"
>

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

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

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

12
src/components/project/Header.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<header class="flex | bg-white | rounded-2xl | p-8 mb-16">
<h1 class="font-serif | px-8">{{ title }}</h1>
<button class="btn | ml-auto">Demander un RDV</button>
</header>
</template>
<script setup>
const { title } = defineProps({
title: String,
});
</script>

51
src/components/project/ProjectStep.vue
View file

@ -5,33 +5,46 @@
data-status="done"
>
<h2 id="votre-brief-label">
<span data-icon="votre-brief">Votre brief</span>
<span data-icon="votre-brief">{{ step.text }}</span>
</h2>
<div class="cards | flow">
<article class="card">
<hgroup class="order-last">
<h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
<h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
</hgroup>
<div class="card__meta | flex">
<time class="card__date | text-grey-700" datetime="2024-06-12"
>12 juin 2024</time
>
<time class="card__date | text-grey-700" datetime="2024-06-12">{{
dayjs(step.modified).format("DD MMMM YYYY")
}}</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>
<router-link :to="'/' + step.uri">
<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>
</router-link>
</article>
</div>
</section>
</template>
<script setup>
import dayjs from "dayjs";
import "dayjs/locale/fr";
dayjs.locale("fr");
const { step } = defineProps({
step: Object,
});
</script>

5
src/router/routes.js
View file

@ -3,6 +3,7 @@ import Notifications from "../views/Notifications.vue";
import Reunions from "../views/Reunions.vue";
import Inspirations from "../views/Inspirations.vue";
import Project from "../views/Project.vue";
import ClientBrief from "../views/ClientBrief.vue";
const routes = [
{
@ -25,6 +26,10 @@ const routes = [
path: "/projects/:id",
component: Project,
},
{
path: "/projects/:id/client-brief",
component: ClientBrief,
},
];
export default routes;

25
src/views/ClientBrief.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<main class="flex flex-col items-stretch | w-full">
<Header />
<component :is="stepsComponents[currentStep]" @update:step="changeStep" />
</main>
</template>
<script setup>
import { ref } from "vue";
import Header from "../components/project/Header.vue";
import Intro from "../components/project/ClientBrief/Intro.vue";
import ModeSelection from "../components/project/ClientBrief/ModeSelection.vue";
import AddImages from "../components/project/ClientBrief/AddImages.vue";
const stepsComponents = {
Intro,
ModeSelection,
AddImages,
};
const currentStep = ref("Intro");
function changeStep(stepName) {
currentStep.value = stepName;
}
</script>

30
src/views/Project.vue
View file

@ -1,16 +1,10 @@
<template>
<main class="flex flex-col items-stretch | w-full">
<header class="flex | bg-white | rounded-2xl | p-8 mb-16">
<h1 class="font-serif | px-8">{{ page.content.title }}</h1>
<button class="btn | ml-auto">Demander un RDV</button>
</header>
<!-- <component :is="stepsComponents[currentStep]" @update:step="changeStep" /> -->
<Header :title="page.content.title" />
<!-- Kanban: Status Brief Enrichi -->
<div class="kanban">
<ProjectStep v-for="step in steps" :key="step" :step="step" />
<ProjectStep v-for="step in page.steps" :key="step" :step="step" />
<!-- <section
class="flex-1"
aria-labelledby="votre-brief-label"
@ -157,31 +151,13 @@
<script setup>
import { usePageStore } from "../stores/page";
import { useUserStore } from "../stores/user";
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
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";
import Header from "../components/project/Header.vue";
const { page } = storeToRefs(usePageStore());
const user = useUserStore().user;
const currentStep = page.value.currentStep;
const steps = page.value.steps.map((step) => step.value);
// const stepsComponents = {
// Intro,
// ModeSelection,
// AddImages,
// };
// const currentStep = ref("Intro");
// function changeStep(stepName) {
// currentStep.value = stepName;
// }
function setStepStatus(stepName) {
const stepIndex = steps.indexOf(stepName);
const currentIndex = steps.indexOf(currentStep.value);