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

fix comment problem

Browse source
This commit is contained in:
isUnknown 2024-11-27 17:51:49 +01:00
parent 16d57ec024
commit cca389f1b0
10 changed files with 128 additions and 545 deletions
Download patch file Download diff file Expand all files Collapse all files

207
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/38969543_extrait-de-louis-sullivan-form-follow-function.-de-la-tour-de-bureaux-artistiquement-consideree.pdf.txt
View file

@ -6,209 +6,4 @@ Uuid: s0lNtRA0Z7ybTCWG
----
Template: document
----
Comments:
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
x: "27.05459466102"
y: "35.135135135135"
replies:
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
replies: [ ]
text: test
author:
name: Utilisateur Dior
email: utilisateur@dior.com
uuid: user://HfuumN8s
role: client
date: 2024-11-22T08:08:39+01:00
id: m3seh19r
type: comment
isRead: false
parentId: m3sdsq23
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
replies: [ ]
text: Deuxième réponse
author:
name: Utilisateur Dior
email: utilisateur@dior.com
uuid: user://HfuumN8s
role: client
date: 2024-11-22T08:10:12+01:00
id: m3sej19k
type: comment
isRead: false
parentId: m3sdsq23
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
replies: [ ]
text: Encore
author:
name: Utilisateur Dior
email: utilisateur@dior.com
uuid: user://HfuumN8s
role: client
date: 2024-11-22T08:12:39+01:00
id: m3sem6sz
type: comment
isRead: false
parentId: m3sdsq23
text: test
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-22T07:49:45+01:00
id: m3sdsq23
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
x: "65.847110638459"
y: "53.474903474903"
replies: [ ]
text: test
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-22T08:50:41+01:00
id: m3sfz36o
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
x: "32.518325137231"
y: "62.548262548263"
replies: [ ]
text: test
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-22T09:18:05+01:00
id: m3sgybwq
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/client-brief
title: Brief client
href: >
/projects/miss-dior-blooming-bouquet?dialog=client-brief
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://s0lNtRA0Z7ybTCWG
url: file://s0lNtRA0Z7ybTCWG
position:
pageIndex: 1
x: '73.769521704789'
y: '83.204633204633'
replies: [ ]
text: 'Adrien Payet : test'
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-22T09:20:04+01:00
id: m3sh0vfu
type: comment
isRead: false
Template: document

33
public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/cinema-4-13b-022685-fr.pdf.txt
View file

@ -1,36 +1,3 @@
Comments:
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=1'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://7cCbXLUJWENOMUwh
url: file://7cCbXLUJWENOMUwh
position:
pageIndex: 1
x: '40.256495570504'
y: '48.069498069498'
replies: [ ]
text: test2
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-18T16:16:54+01:00
id: m3n65iqx
type: comment
isRead: false
----
Label: Offre initiale
----

200
public/content/projects/1_miss-dior-blooming-bouquet/2_proposal/des-textos-revelent-comment-bfm-sest-mise-au-service-de-sarkozy-le-boss.pdf.txt
View file

@ -1,202 +1,4 @@
Comments:
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: >
/projects/miss-dior-blooming-bouquet?dialog=proposal
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: "26.50821702805"
y: "62.355212355212"
replies: [ ]
text: test
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-18T16:00:11+01:00
id: m3n5k0mb
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: "67.213040131138"
y: "36.872586872587"
replies: [ ]
text: test2
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-19T15:53:46+01:00
id: m3okrmlt
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: "98.083140873747"
y: "79.343629343629"
replies: [ ]
text: test3
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-19T15:53:57+01:00
id: m3okrvaa
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: "65.027546273254"
y: "55.791505791506"
replies: [ ]
text: test4
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-19T15:54:03+01:00
id: m3okrzsb
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: "75.408642098202"
y: "20.849420849421"
replies: [ ]
text: test
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-19T16:27:21+01:00
id: m3olyt8i
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0#comment-m3olyt8i'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: "27.327777224757"
y: "78.185328185328"
replies: [ ]
text: test198
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-19T16:53:10+01:00
id: m3omw0ci
type: comment
isRead: false
-
location:
page:
uri: >
projects/miss-dior-blooming-bouquet/proposal
title: Offre commerciale
href: '/projects/miss-dior-blooming-bouquet?dialog=proposal&fileIndex=0#comment-m3omw0ci'
project:
title: Miss Dior Blooming Bouquet
uri: projects/miss-dior-blooming-bouquet
file:
uuid: file://3vTh1tMFeFM2JxaN
url: file://3vTh1tMFeFM2JxaN
position:
pageIndex: 1
x: '34.977005727351'
y: '48.455598455598'
replies: [ ]
text: test1287
author:
name: Adrien Payet
email: adrien.payet@outlook.com
uuid: user://WWjXgPWk
role: admin
date: 2024-11-19T17:01:26+01:00
id: m3on6nfv
type: comment
isRead: false
Comments:
----

2
public/site/plugins/comments/routes/create.php
View file

@ -33,7 +33,7 @@ return [
'y' => $data->position->y
],
'replies' => [],
'text' => $user->name()->isNotEmpty() ? $user->name()->value() . ' : ' . $data->text : $user->email()->value() . ' : ' . $data->text,
'text' => $data->text,
'author' => $user,
'date' => (string) $data->date,
'id' => $data->id,

4
src/components/project/DialogWrapper.vue
View file

@ -1,5 +1,5 @@
<template>
<PdfViewer
<TitledPdfWrapper
v-if="
dialog.content.slug.includes('brief') ||
dialog.content.slug === 'proposal'
@ -9,7 +9,7 @@
<VirtualSample v-if="dialog.content.slug === 'virtual-sample'" />
</template>
<script setup>
import PdfViewer from "./brief/PdfViewer.vue";
import TitledPdfWrapper from "./TitledPdfWrapper.vue";
import { useDialogStore } from "../../stores/dialog";
import VirtualSample from "./virtual-sample/VirtualSample.vue";

129
src/components/project/brief/PdfViewer.vue → src/components/project/PdfViewer.vue
View file

@ -1,88 +1,40 @@
<template>
<Dialog
id="add-pdf"
v-model:visible="isOpen"
modal
:draggable="false"
header="Titre du PDF"
class="dialog"
:class="{ 'with-comments': isCommentsOpen }"
:closeOnEscape="true"
<VPdfViewer
:darkMode="true"
:initialThumbnailsVisible="true"
:src="openedFile.url"
local="fr_FR"
@loaded="onPdfLoaded"
/>
<button
id="toggle-comments"
:aria-pressed="isCommentsOpen"
class="btn btn--transparent btn--outline"
data-icon="comment"
@click="isCommentsOpen = !isCommentsOpen"
>
<template #header>
<button
v-if="
dialog.content.id === 'clientBrief' &&
dialog.content.isValidated !== true
"
class="btn"
@click="validate()"
>
Valider et envoyer le brief
</button>
<h2
class="font-serif text-lg"
:title="openedFile?.label.length ? openedFile.label : openedFile.name"
>
{{ openedFile?.label.length ? openedFile.label : openedFile.name }}
</h2>
</template>
<div id="vpv-container">
<VPdfViewer
:darkMode="true"
:initialThumbnailsVisible="true"
:src="openedFile.url"
local="fr_FR"
@loaded="onPdfLoaded"
/>
<button
id="toggle-comments"
:aria-pressed="isCommentsOpen"
class="btn btn--transparent btn--outline"
data-icon="comment"
@click="isCommentsOpen = !isCommentsOpen"
>
<span class="sr-only">Afficher les commentaires</span>
</button>
<Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
</div>
</Dialog>
<span class="sr-only">Afficher les commentaires</span>
</button>
<Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
</template>
<script setup>
import Dialog from "primevue/dialog";
import Comments from "../../comments/Comments.vue";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
import Comments from "../comments/Comments.vue";
import { ref, watch } from "vue";
import { useDialogStore } from "../../../stores/dialog";
import { useRoute, useRouter } from "vue-router";
import { useDialogStore } from "../../stores/dialog";
import { storeToRefs } from "pinia";
import { useApiStore } from "../../../stores/api";
const router = useRouter();
const route = useRoute();
const dialog = useDialogStore();
const api = useApiStore();
const { openedFile, comments } = storeToRefs(useDialogStore());
openedFile.value = route.query.fileIndex
? dialog.content.files[route.query.fileIndex]
: dialog.content.files[0];
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
import { useRoute, useRouter } from "vue-router";
const licenseKey = import.meta.env.VITE_VPV_LICENSE;
useLicense({ licenseKey });
const { openedFile, isCommentsOpen, comments } = storeToRefs(useDialogStore());
const dialog = useDialogStore();
const router = useRouter();
const route = useRoute();
const draftComment = ref(null);
const isOpen = ref(true);
watch(isOpen, (newValue) => {
router.push({ name: route.name });
});
console.log(route.query);
const isCommentsOpen = ref(
route.query.hasOwnProperty("comments") ? true : false
);
const currentPageIndex = ref(1);
watch(isCommentsOpen, (newVal) => {
if (newVal) {
@ -92,6 +44,9 @@ watch(isCommentsOpen, (newVal) => {
}
});
openedFile.value = route.query.fileIndex
? dialog.content.files[route.query.fileIndex]
: dialog.content.files[0];
watch(openedFile, (newVal) => {
removeCommentMarkers();
if (newVal.comments) {
@ -99,6 +54,8 @@ watch(openedFile, (newVal) => {
}
});
const currentPageIndex = ref(1);
// Functions
const onPdfLoaded = () => {
const wrapper = document.querySelector(".vpv-pages-inner-container");
@ -193,32 +150,8 @@ function showDraftMarker(draftComment) {
container.appendChild(bubble);
}
async function validate() {
const response = await api.validateBrief(
route.path + "/client-brief",
route.fullPath
);
if (response.success) {
dialog.content.isValidated = true;
} else {
console.alert(response);
}
}
</script>
<style>
#vpv-container {
width: var(--dialog-max-w);
height: calc(var(--dialog-max-h) - var(--dialog-header-h));
background: black;
position: relative;
}
.with-comments .vpv-pages-container-wrapper {
margin-right: var(--dialog-comments-w, 20rem);
}
</style>
<style scoped>
@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
@import "../../assets/css/src/2.blocks.pdf-viewer.css";
</style>

83
src/components/project/TitledPdfWrapper.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<Dialog
id="add-pdf"
v-model:visible="isOpen"
modal
:draggable="false"
header="Titre du PDF"
class="dialog"
:class="{ 'with-comments': isCommentsOpen }"
:closeOnEscape="true"
>
<template #header>
<button
v-if="
dialog.content.id === 'clientBrief' &&
dialog.content.isValidated !== true
"
class="btn"
@click="validate()"
>
Valider et envoyer le brief
</button>
<h2
v-if="openedFile"
class="font-serif text-lg"
:title="openedFile?.label.length ? openedFile.label : openedFile.name"
>
{{ openedFile?.label.length ? openedFile.label : openedFile.name }}
</h2>
</template>
<div id="vpv-container">
<PdfViewer />
</div>
</Dialog>
</template>
<script setup>
import Dialog from "primevue/dialog";
import PdfViewer from "./PdfViewer.vue";
import { ref, watch } from "vue";
import { useDialogStore } from "../../stores/dialog";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useApiStore } from "../../stores/api";
const { openedFile, isCommentsOpen } = storeToRefs(useDialogStore());
const router = useRouter();
const route = useRoute();
const dialog = useDialogStore();
const api = useApiStore();
const isOpen = ref(true);
watch(isOpen, (newValue) => {
router.push({ name: route.name });
});
// Functions
async function validate() {
const response = await api.validateBrief(
route.path + "/client-brief",
route.fullPath
);
if (response.success) {
dialog.content.isValidated = true;
} else {
console.alert(response);
}
}
</script>
<style>
#vpv-container {
width: var(--dialog-max-w);
height: calc(var(--dialog-max-h) - var(--dialog-header-h));
background: black;
position: relative;
}
.with-comments .vpv-pages-container-wrapper {
margin-right: var(--dialog-comments-w, 20rem);
}
</style>

3
src/components/project/virtual-sample/StaticView.vue
View file

@ -47,15 +47,12 @@
<script setup>
import { ref } from "vue";
import { useVirtualSampleStore } from "../../../stores/virtualSample";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
const { step } = useVirtualSampleStore();
const activeTab = ref(Object.keys(step.files.static)[0]);
</script>
<style scoped>
@import "../../../assets/css/src/2.blocks.pdf-viewer.css";
.dialog__inner {
background-color: inherit;
height: calc(100% - 3.5rem) !important;

8
src/stores/dialog.js
View file

@ -1,5 +1,6 @@
import { defineStore } from "pinia";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
export const useDialogStore = defineStore("dialog", () => {
const content = ref(null);
@ -15,5 +16,10 @@ export const useDialogStore = defineStore("dialog", () => {
openedFile.value = newFile;
}
return { content, openedFile, comments, updateFile };
const route = useRoute();
const isCommentsOpen = ref(
route.query.hasOwnProperty("comments") ? true : false
);
return { content, openedFile, comments, isCommentsOpen, updateFile };
});

4
src/views/Brief.vue
View file

@ -18,7 +18,7 @@ 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 PdfViewer from "../components/project/brief/PdfViewer.vue";
import TitledPdfWrapper from "../components/project/TitledPdfWrapper.vue";
import { usePageStore } from "../stores/page";
import { storeToRefs } from "pinia";
@ -26,7 +26,7 @@ const stepsComponents = {
Intro,
ModeSelection,
Images,
PdfViewer,
TitledPdfWrapper,
};
const { page } = storeToRefs(usePageStore());