improve project dialog system
- project model : refactor getSteps() method - create dialog store - create DialogWrapper component that open the dialog corresponding to the URL query param
This commit is contained in:
isUnknown
parent
4e8c876dac
commit
26369ad71b
228 changed files with 451 additions and 525 deletions
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<div class="virtual-sample" ref="virtualSampleContainer"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as THREE from "three";
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
|
||||
|
||||
const virtualSampleContainer = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
const container = virtualSampleContainer.value;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
container.clientWidth / container.clientHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
renderer.setClearColor(0xffffff, 1);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
const light = new THREE.AmbientLight(0xffffff);
|
||||
scene.add(light);
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
loader.load(
|
||||
"/assets/3D/flacon-test.glb",
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
scene.add(model);
|
||||
},
|
||||
undefined,
|
||||
(error) => {
|
||||
console.error("Erreur lors du chargement du modèle", error);
|
||||
}
|
||||
);
|
||||
|
||||
camera.position.set(3, 2, 5);
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
camera.aspect = container.clientWidth / container.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.virtual-sample {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -109,6 +109,7 @@ import { watch, ref } from "vue";
|
|||
import { useUserStore } from "../../stores/user";
|
||||
import { usePageStore } from "../../stores/page";
|
||||
import { useApiStore } from "../../stores/api";
|
||||
import { useDialogStore } from "../../stores/dialog";
|
||||
import Comment from "./Comment.vue";
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
|
@ -121,6 +122,7 @@ const { currentPageIndex, file, comments } = defineProps({
|
|||
|
||||
const { user } = useUserStore();
|
||||
const { page } = usePageStore();
|
||||
const dialog = useDialogStore();
|
||||
const api = useApiStore();
|
||||
|
||||
const openedComment = ref(null);
|
||||
|
|
@ -193,7 +195,6 @@ function handleSubmit(event = null) {
|
|||
if (openedComment.value) {
|
||||
replyComment(newComment);
|
||||
} else {
|
||||
console.log(newComment);
|
||||
addComment(newComment);
|
||||
}
|
||||
}
|
||||
|
|
@ -213,11 +214,10 @@ async function addComment(newComment) {
|
|||
const newFile = await api.addComment(newComment);
|
||||
newCommentText.value = "";
|
||||
isAddOpen.value = false;
|
||||
emits("update:file", newFile);
|
||||
}
|
||||
|
||||
function changeFile(newFile) {
|
||||
emits("update:file", newFile);
|
||||
dialog.content.files = dialog.content.files.map((file) =>
|
||||
file.id === newFile.id ? newFile : file
|
||||
);
|
||||
}
|
||||
|
||||
function closeComment() {
|
||||
|
|
|
|||
9
src/components/project/DialogWrapper.vue
Normal file
9
src/components/project/DialogWrapper.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<PdfViewer v-if="dialog.content.id === 'clientBrief'" />
|
||||
</template>
|
||||
<script setup>
|
||||
import PdfViewer from "./client-brief/PdfViewer.vue";
|
||||
import { useDialogStore } from "../../stores/dialog";
|
||||
|
||||
const dialog = useDialogStore();
|
||||
</script>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
|
@ -1,46 +1,57 @@
|
|||
<template>
|
||||
<section class="flex-1" :aria-labelledby="text" :data-status="status">
|
||||
<section class="flex-1" :aria-labelledby="step.id" :data-status="status">
|
||||
<router-link :to="'/' + step.uri">
|
||||
<h2 :id="text">
|
||||
<h2 :id="step.id">
|
||||
<!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
|
||||
<span data-icon="votre-brief">{{ step.text }}</span>
|
||||
<span data-icon="votre-brief">{{ step.label }}</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
|
||||
<h3 class="card__title | font-serif | text-lg">{{ step.label }}</h3>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12">{{
|
||||
dayjs(step.modified).format("DD MMMM YYYY")
|
||||
}}</time>
|
||||
<time
|
||||
class="card__date | text-grey-700"
|
||||
:datetime="dayjs(step.modified).format('YYYY-M-DD')"
|
||||
>{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Images -->
|
||||
<template v-if="step.files[0]?.type === 'image'">
|
||||
<figure
|
||||
class="card__images"
|
||||
:data-count="
|
||||
step.files.length > 3 ? step.files.length - 3 : undefined
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-for="image in step.files.slice(0, 3)"
|
||||
:key="image.uuid"
|
||||
:src="image.url"
|
||||
:alt="image.alt"
|
||||
/>
|
||||
</figure>
|
||||
</template>
|
||||
<!-- All images -->
|
||||
<figure
|
||||
v-if="
|
||||
step.value === 'clientBrief' && step.files[0]?.type === 'image'
|
||||
"
|
||||
class="card__images"
|
||||
:data-count="
|
||||
step.files.length > 3 ? step.files.length - 3 : undefined
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-for="image in step.files.slice(0, 3)"
|
||||
:key="image.uuid"
|
||||
:src="image.url"
|
||||
:alt="image.alt"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<!-- First image -->
|
||||
<figure v-if="step.value === 'virtualSample'" class="card__images">
|
||||
<img
|
||||
:key="step.files[0].uuid"
|
||||
:src="step.files[0].url"
|
||||
:alt="step.files[0].alt"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<!-- Document -->
|
||||
<div
|
||||
v-if="step.files[0]?.type === 'document'"
|
||||
class="card__images"
|
||||
data-icon="document"
|
||||
></div>
|
||||
|
||||
<!-- PDF -->
|
||||
<template v-if="step.files[0]?.type === 'document'">
|
||||
<div
|
||||
@click="showPdf"
|
||||
class="card__images"
|
||||
data-icon="document"
|
||||
></div>
|
||||
</template>
|
||||
<footer v-if="step?.files[0]?.comments?.length > 0">
|
||||
{{ step.files[0].comments.length }} commentaire{{
|
||||
step.files[0].comments.length > 1 ? "s" : ""
|
||||
|
|
@ -56,6 +67,7 @@
|
|||
import dayjs from "dayjs";
|
||||
import "dayjs/locale/fr";
|
||||
import { usePageStore } from "../../stores/page";
|
||||
import { useDialogStore } from "../../stores/dialog";
|
||||
|
||||
const { step } = defineProps({
|
||||
step: Object,
|
||||
|
|
@ -74,21 +86,16 @@ const steps = page.steps.map((item) => {
|
|||
const status = setStatus();
|
||||
|
||||
function setStatus() {
|
||||
if (page.content.currentstep === step.value) {
|
||||
if (page.content.currentstep === step.id) {
|
||||
return "in-progress";
|
||||
}
|
||||
if (steps.indexOf(step.value) < steps.indexOf(page.content.currentstep)) {
|
||||
if (steps.indexOf(step.id) < steps.indexOf(page.content.currentstep)) {
|
||||
return "completed";
|
||||
}
|
||||
if (steps.indexOf(step.value) > steps.indexOf(page.content.currentstep)) {
|
||||
if (steps.indexOf(step.id) > steps.indexOf(page.content.currentstep)) {
|
||||
return "uncompleted";
|
||||
}
|
||||
}
|
||||
|
||||
function showPdf(event) {
|
||||
event.preventDefault();
|
||||
emit("update:file", step.files[0]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@
|
|||
:current-page-index="currentPageIndex"
|
||||
:file="file"
|
||||
:comments="file.comments ?? []"
|
||||
@update:file="changeFile"
|
||||
/>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
|
@ -46,12 +45,13 @@ import Dialog from "primevue/dialog";
|
|||
import Comments from "../../comments/Comments.vue";
|
||||
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
|
||||
import { ref, watch } from "vue";
|
||||
import { useDialogStore } from "../../../stores/dialog";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
const { file } = defineProps({
|
||||
file: Object,
|
||||
});
|
||||
const file = useDialogStore().content.files[0];
|
||||
|
||||
const emits = defineEmits(["close", "update:file"]);
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const licenseKey = import.meta.env.VITE_VPV_LICENSE;
|
||||
useLicense({ licenseKey });
|
||||
|
|
@ -59,7 +59,7 @@ useLicense({ licenseKey });
|
|||
// Variables
|
||||
const isOpen = ref(true);
|
||||
watch(isOpen, (newValue) => {
|
||||
emits("close");
|
||||
router.push({ name: route.name });
|
||||
});
|
||||
const isCommentsOpen = ref(false);
|
||||
const currentPageIndex = ref(1);
|
||||
|
|
@ -123,10 +123,6 @@ const onPdfLoaded = () => {
|
|||
observePages();
|
||||
};
|
||||
|
||||
function changeFile(newFile) {
|
||||
emits("update:file", newFile);
|
||||
}
|
||||
|
||||
function setCommentBubbles() {
|
||||
console.log(file.comments);
|
||||
if (!file.comments) return;
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
<template>
|
||||
<div class="virtual-sample" ref="virtualSampleContainer"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as THREE from "three";
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
|
||||
|
||||
const virtualSampleContainer = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
const container = virtualSampleContainer.value;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
75,
|
||||
container.clientWidth / container.clientHeight,
|
||||
0.1,
|
||||
1000
|
||||
);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
renderer.setClearColor(0xffffff, 1);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
const light = new THREE.AmbientLight(0xffffff);
|
||||
scene.add(light);
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
loader.load(
|
||||
"/assets/3D/flacon-test.glb",
|
||||
(gltf) => {
|
||||
const model = gltf.scene;
|
||||
scene.add(model);
|
||||
},
|
||||
undefined,
|
||||
(error) => {
|
||||
console.error("Erreur lors du chargement du modèle", error);
|
||||
}
|
||||
);
|
||||
|
||||
camera.position.set(3, 2, 5);
|
||||
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
|
||||
const animate = () => {
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
animate();
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
camera.aspect = container.clientWidth / container.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.virtual-sample {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
139
src/savedCode/Kanban.vue
Normal file
139
src/savedCode/Kanban.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<!-- <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>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="offre-commerciale-label"
|
||||
data-status="done"
|
||||
>
|
||||
<h2 id="offre-commerciale-label">
|
||||
<span data-icon="offre-commerciale">Offre Commerciale</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre - 2</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
<span class="text-primary | font-medium | ml-auto">Validé</span>
|
||||
</div>
|
||||
<figure class="card__images">
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</article>
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre - 3</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre Initiale</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="brief-enrichi-label"
|
||||
data-status="in-progress"
|
||||
>
|
||||
<h2 id="brief-enrichi-label">
|
||||
<span data-icon="brief-enrichi">Brief Enrichi</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Brief enrichi</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
<span class="text-primary | font-medium | ml-auto">Validé</span>
|
||||
</div>
|
||||
<figure class="card__images" data-count="15">
|
||||
<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>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="echantillon-virtuel-label"
|
||||
data-status="uncompleted"
|
||||
>
|
||||
<h2 id="echantillon-virtuel-label">
|
||||
<span data-icon="echantillon-virtuel">Échantillon Virtuel</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<div
|
||||
class="flex flex-col justify-center | rounded-2xl | bg-grey-200 text-grey-700"
|
||||
>
|
||||
<p>Prochainement disponible</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
8
src/stores/dialog.js
Normal file
8
src/stores/dialog.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
export const useDialogStore = defineStore("dialog", () => {
|
||||
const content = ref(null);
|
||||
|
||||
return { content };
|
||||
});
|
||||
|
|
@ -1,214 +1,57 @@
|
|||
<template>
|
||||
<main class="flex flex-col items-stretch | w-full">
|
||||
<Header :title="page.content.title" />
|
||||
<!-- Kanban: Status Brief Enrichi -->
|
||||
|
||||
<VirtualSample />
|
||||
|
||||
<PdfViewer
|
||||
v-if="file"
|
||||
:file="file"
|
||||
@close="file = null"
|
||||
@update:file="updateFile"
|
||||
/>
|
||||
<DialogWrapper v-if="dialog.content" />
|
||||
|
||||
<div class="kanban">
|
||||
<ProjectStep
|
||||
v-for="step in page.steps"
|
||||
:key="step"
|
||||
:step="step"
|
||||
@update:file="changeFile"
|
||||
@update:dialog="updateDialog"
|
||||
>
|
||||
</ProjectStep>
|
||||
<!-- <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>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="offre-commerciale-label"
|
||||
data-status="done"
|
||||
>
|
||||
<h2 id="offre-commerciale-label">
|
||||
<span data-icon="offre-commerciale">Offre Commerciale</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre - 2</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
<span class="text-primary | font-medium | ml-auto">Validé</span>
|
||||
</div>
|
||||
<figure class="card__images">
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</article>
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre - 3</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre Initiale</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="brief-enrichi-label"
|
||||
data-status="in-progress"
|
||||
>
|
||||
<h2 id="brief-enrichi-label">
|
||||
<span data-icon="brief-enrichi">Brief Enrichi</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Brief enrichi</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
<span class="text-primary | font-medium | ml-auto">Validé</span>
|
||||
</div>
|
||||
<figure class="card__images" data-count="15">
|
||||
<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>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="echantillon-virtuel-label"
|
||||
data-status="uncompleted"
|
||||
>
|
||||
<h2 id="echantillon-virtuel-label">
|
||||
<span data-icon="echantillon-virtuel">Échantillon Virtuel</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<div
|
||||
class="flex flex-col justify-center | rounded-2xl | bg-grey-200 text-grey-700"
|
||||
>
|
||||
<p>Prochainement disponible</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePageStore } from "../stores/page";
|
||||
import { useUserStore } from "../stores/user";
|
||||
import { storeToRefs } from "pinia";
|
||||
import ProjectStep from "../components/project/ProjectStep.vue";
|
||||
import Header from "../components/project/Header.vue";
|
||||
import PdfViewer from "../components/project/client-brief/PdfViewer.vue";
|
||||
import VirtualSample from "../components/project/VirtualSample.vue";
|
||||
import { ref } from "vue";
|
||||
import DialogWrapper from "../components/project/DialogWrapper.vue";
|
||||
import { usePageStore } from "../stores/page";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { watch } from "vue";
|
||||
import { useDialogStore } from "../stores/dialog";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
const user = useUserStore().user;
|
||||
const dialog = useDialogStore();
|
||||
|
||||
const file = ref(null);
|
||||
const route = useRoute();
|
||||
|
||||
// const route = useRoute();
|
||||
if (route.query.dialog) {
|
||||
openDialog(route.query.dialog);
|
||||
}
|
||||
|
||||
// if (route.query.notificationId) {
|
||||
// page.value.steps.forEach((step) => {
|
||||
// const srcNotification = user.notifications;
|
||||
// step.files.forEach((item) => {
|
||||
// if (item.uuid === route.query.notificationId) {
|
||||
// file.value = item;
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
function setStepStatus(stepName) {
|
||||
const stepIndex = steps.indexOf(stepName);
|
||||
const currentIndex = steps.indexOf(currentStep.value);
|
||||
if (stepIndex < currentIndex) {
|
||||
return "done";
|
||||
watch(
|
||||
() => route.query.dialog,
|
||||
(targetStepId) => {
|
||||
if (targetStepId) {
|
||||
const targetStep = page.value.steps.find(
|
||||
(step) => step.id === targetStepId
|
||||
);
|
||||
dialog.content = targetStep;
|
||||
} else {
|
||||
dialog.content = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function changeFile(newFile) {
|
||||
file.value = newFile;
|
||||
}
|
||||
|
||||
function updateFile(newFile) {
|
||||
page.value.files = [];
|
||||
page.value.files.push(newFile);
|
||||
|
||||
file.value = page.value.files[0];
|
||||
function openDialog(stepId) {
|
||||
const targetStep = page.value.steps.find((step) => step.id === stepId);
|
||||
dialog.content = targetStep;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue