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

improve project dialog system

Browse source 
- 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 2024-11-16 11:30:51 +01:00
parent 4e8c876dac
commit 26369ad71b
228 changed files with 451 additions and 525 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/VirtualSample.vue
View file

@ -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>

10
src/components/comments/Comments.vue
View file

@ -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
View 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>

3
src/components/project/ProductViewer.vue
View file

@ -1,3 +0,0 @@
<template>
<div></div>
</template>

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

@ -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>

16
src/components/project/client-brief/PdfViewer.vue
View file

@ -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;

71
src/components/test/VirtualSample.vue
View file

@ -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>