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

comments : prepare new comment working

Browse source
This commit is contained in:
isUnknown 2024-10-23 09:48:27 +02:00
parent f2255d50aa
commit a9992b0ff5
6 changed files with 136 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
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 Normal file
View file

Binary file not shown.

9
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 Normal file
View file

@ -0,0 +1,9 @@
Date: 2024-10-23 07:20
----
Uuid: s0lNtRA0Z7ybTCWG
----
Template: document

2
public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt
View file

@ -6,7 +6,7 @@ Stepname: clientBrief
----
Pdf: - file://Z6wXAXIq5mBocGi8
Pdf: - file://s0lNtRA0Z7ybTCWG
----

77
src/components/comments/Comments.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<aside id="comments-container" aria-labelledby="comments-label">
<h2 id="comments-label" class="sr-only">Commentaires</h2>
<div class="comments | flow">
<article class="comment | flow" data-status="unread">
<header>
<p>
<strong>François</strong>
<span class="comment__id">#1</span> •
<span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">
Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
consequat porta mauris hendrerit malesuada viverra turpis.
</p>
</article>
</div>
<button
id="add-comment"
class="btn btn--white-20 | w-full"
@click="isAddOpen = true"
>
Ajouter un commentaire
</button>
<form
v-if="isAddOpen"
action=""
method="post"
class="flow"
@submit="addComment"
>
<label class="sr-only" for="comment">Votre commentaire</label>
<textarea
name="comment"
id="comment"
placeholder="Ajouter un commentaire"
rows="3"
class="text-sm | rounded-lg bg-black p-12"
v-model="newCommentText"
></textarea>
<footer class="flex">
<button class="btn btn--white-20">Annuler</button>
<input type="submit" class="btn btn--tranparent" />
</footer>
</form>
</aside>
</template>
<script setup>
import { ref } from "vue";
import { useUserStore } from "../../stores/user";
import dayjs from "dayjs";
const { currentPage } = defineProps({
currentPage: Number,
});
const { user } = useUserStore();
const newCommentText = ref("");
const isAddOpen = ref(false);
// Functions
function addComment(event) {
event.preventDefault();
const comment = {
userUuid: user.uuid,
text: newCommentText.value,
page: currentPage,
date: dayjs().format(),
};
console.log(comment);
}
</script>

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

@ -1,22 +1,22 @@
<template>
<section class="flex-1" :aria-labelledby="text" :data-status="status">
<h2 :id="text">
<!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
<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">{{ step.text }}</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>
</div>
<router-link :to="'/' + step.uri">
<h2 :id="text">
<!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
<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">{{ step.text }}</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>
</div>
<template v-if="step.files[0]?.type === 'image'">
<router-link :to="'/' + step.uri">
<template v-if="step.files[0]?.type === 'image'">
<figure
class="card__images"
:data-count="
@ -30,13 +30,17 @@
:alt="image.alt"
/>
</figure>
</router-link>
</template>
<template v-if="step.files[0]?.type === 'document'">
<div @click="showPdf" class="card__images" data-icon="document"></div>
</template>
</article>
</div>
</template>
<template v-if="step.files[0]?.type === 'document'">
<div
@click="showPdf"
class="card__images"
data-icon="document"
></div>
</template>
</article>
</div>
</router-link>
</section>
</template>
@ -73,7 +77,8 @@ function setStatus() {
}
}
function showPdf() {
function showPdf(event) {
event.preventDefault();
emit("update:pdf", step.files[0].url);
}
</script>

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

@ -20,94 +20,23 @@
local="fr_FR"
@loaded="onPdfLoaded"
/>
<button id="toggle-comments" aria-pressed="false" class="btn btn--transparent" data-icon="comment">
<button
id="toggle-comments"
aria-pressed="false"
class="btn btn--transparent"
data-icon="comment"
@click="isCommentsOpen = !isCommentsOpen"
>
<span class="sr-only">Afficher les commentaires</span>
</button>
<aside id="comments-container" aria-labelledby="comments-label">
<h2 id="comments-label" class="sr-only">Commentaires</h2>
<div class="comments | flow">
<article class="comment | flow" data-status="unread">
<header>
<p>
<strong>François</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
</div>
<!-- Ajouter un commentaire -->
<button id="add-comment" class="btn btn--white-20 | w-full">Ajouter un commentaire</button>
<!--
<form action="" method="post" class="flow">
<label class="sr-only" for="comment">Votre commentaire</label>
<textarea name="comment" id="comment" placeholder="Ajouter un commentaire" rows="3" class="text-sm | rounded-lg bg-black p-12"></textarea>
<footer class="flex">
<button class="btn btn--white-20">Annuler</button>
<input type="submit" class="btn btn--tranparent">
</footer>
</form>
-->
</aside>
<Comments v-if="isCommentsOpen" :current-page="currentPage" />
</div>
</Dialog>
</template>
<script setup>
import Dialog from "primevue/dialog";
import Comments from "../../comments/Comments.vue";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
import { ref, watch } from "vue";
@ -120,11 +49,15 @@ const emit = defineEmits("close");
const licenseKey = import.meta.env.VITE_VPV_LICENSE;
useLicense({ licenseKey });
// Variables
const isOpen = ref(true);
watch(isOpen, (newValue) => {
emit("close");
});
const isCommentsOpen = ref(false);
const currentPage = ref(1);
// Functions
const onPdfLoaded = () => {
const wrapper = document.querySelector(".vpv-pages-inner-container");
@ -132,7 +65,9 @@ const onPdfLoaded = () => {
(entries) => {
entries.forEach((entry, index) => {
if (entry.intersectionRatio > 0.5) {
console.log(entry.target.getAttribute("aria-label"));
currentPage.value = parseInt(
entry.target.getAttribute("aria-label").split(" ")[1]
);
}
});
},
@ -211,7 +146,7 @@ const onPdfLoaded = () => {
position: absolute;
right: var(--space-16);
bottom: var(--space-16);
padding: .625rem;
padding: 0.625rem;
}
#comments-container {
background-color: black;
@ -257,14 +192,14 @@ const onPdfLoaded = () => {
color: var(--color-grey-700);
}
.comment[data-status="unread"] header p > :first-child::before {
content: '';
content: "";
display: inline-block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: var(--color-primary);
margin-right: var(--space-8);
margin-bottom: .075em;
margin-bottom: 0.075em;
}
.comment[data-status="unread"] header strong,
.comment[data-status="unread"] footer {
@ -274,7 +209,7 @@ const onPdfLoaded = () => {
color: var(--color-primary);
}
#comments-container form {
--flow-space: .5rem;
--flow-space: 0.5rem;
flex-direction: column;
position: -webkit-sticky;
position: sticky;