project - view pdf in dialog working. Open and close working
This commit is contained in:
isUnknown
parent
09eb3e1969
commit
3d8f9fc893
19 changed files with 89 additions and 119 deletions
Binary file not shown.
|
|
@ -0,0 +1,9 @@
|
|||
Date: 2024-10-16 04:17
|
||||
|
||||
----
|
||||
|
||||
Uuid: Z6wXAXIq5mBocGi8
|
||||
|
||||
----
|
||||
|
||||
Template: document
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Date: 2024-10-16 02:10
|
||||
|
||||
----
|
||||
|
||||
Description:
|
||||
|
||||
----
|
||||
|
||||
Tags: DA globale
|
||||
|
||||
----
|
||||
|
||||
Uuid: BvOqspCnL024Ar9u
|
||||
|
||||
----
|
||||
|
||||
Template: image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Description: description
|
||||
|
||||
----
|
||||
|
||||
Tags:
|
||||
|
||||
----
|
||||
|
||||
Sort: 7
|
||||
|
||||
----
|
||||
|
||||
Uuid: zIZTny7xOE28rckL
|
||||
|
||||
----
|
||||
|
||||
Template: image
|
||||
|
|
@ -6,7 +6,7 @@ Stepname: clientBrief
|
|||
|
||||
----
|
||||
|
||||
Pdf:
|
||||
Pdf: - file://Z6wXAXIq5mBocGi8
|
||||
|
||||
----
|
||||
|
||||
|
|
@ -14,13 +14,7 @@ Description:
|
|||
|
||||
----
|
||||
|
||||
Moodboard:
|
||||
|
||||
- file://YV7aUYle8hcLrzb6
|
||||
- file://zIZTny7xOE28rckL
|
||||
- file://Z5m6jEomcOt9bJqR
|
||||
- file://C2zFxRDOmD5PeXD6
|
||||
- file://BvOqspCnL024Ar9u
|
||||
Moodboard:
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Description:
|
||||
|
||||
----
|
||||
|
||||
Tags:
|
||||
|
||||
----
|
||||
|
||||
Sort: 8
|
||||
|
||||
----
|
||||
|
||||
Uuid: Z5m6jEomcOt9bJqR
|
||||
|
||||
----
|
||||
|
||||
Template: image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 217 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Description:
|
||||
|
||||
----
|
||||
|
||||
Tags:
|
||||
|
||||
----
|
||||
|
||||
Sort: 10
|
||||
|
||||
----
|
||||
|
||||
Uuid: C2zFxRDOmD5PeXD6
|
||||
|
||||
----
|
||||
|
||||
Template: image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 116 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Description:
|
||||
|
||||
----
|
||||
|
||||
Tags:
|
||||
|
||||
----
|
||||
|
||||
Sort: 12
|
||||
|
||||
----
|
||||
|
||||
Uuid: YV7aUYle8hcLrzb6
|
||||
|
||||
----
|
||||
|
||||
Template: image
|
||||
|
|
@ -11,6 +11,9 @@ class ProjectPage extends Page {
|
|||
foreach ($child->moodboard()->toFiles() as $file) {
|
||||
$files[] = getFileData($file);
|
||||
}
|
||||
foreach ($child->pdf()->toFiles() as $file) {
|
||||
$files[] = getFileData($file);
|
||||
}
|
||||
}
|
||||
|
||||
$steps[] = [
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ function getFileData($file) {
|
|||
'url' => $file->url(),
|
||||
'uuid' => (string) $file->uuid(),
|
||||
'name' => $file->filename(),
|
||||
'type' => (string) $file->type()
|
||||
];
|
||||
|
||||
if ($file->description()->exists()) {
|
||||
|
|
|
|||
|
|
@ -4,23 +4,28 @@
|
|||
aria-labelledby="votre-brief-label"
|
||||
:data-status="status"
|
||||
>
|
||||
<router-link :to="'/' + step.uri">
|
||||
<h2 id="votre-brief-label">
|
||||
<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>
|
||||
<h2 id="votre-brief-label">
|
||||
<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.value === 'clientBrief'">
|
||||
<figure class="card__images" :data-count="step.files.length - 3">
|
||||
<template v-if="step.files[0]?.type === 'image'">
|
||||
<router-link :to="'/' + step.uri">
|
||||
<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"
|
||||
|
|
@ -28,10 +33,15 @@
|
|||
:alt="image.alt"
|
||||
/>
|
||||
</figure>
|
||||
</template>
|
||||
</article>
|
||||
</div>
|
||||
</router-link>
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-if="step.files[0]?.type === 'document'">
|
||||
<figure @click="showPdf" class="card__images">
|
||||
À remplacer par picto PDF
|
||||
</figure>
|
||||
</template>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -44,6 +54,8 @@ const { step } = defineProps({
|
|||
step: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:pdf"]);
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
const { page } = usePageStore();
|
||||
|
|
@ -65,6 +77,10 @@ function setStatus() {
|
|||
return "uncompleted";
|
||||
}
|
||||
}
|
||||
|
||||
function showPdf() {
|
||||
emit("update:pdf", step.files[0].url);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
:draggable="false"
|
||||
header="Titre du PDF"
|
||||
class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
|
||||
:closeOnEscape="true"
|
||||
>
|
||||
<template #header>
|
||||
<a class="btn">Valider et envoyer le brief</a>
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
<VPdfViewer
|
||||
:darkMode="true"
|
||||
:initialThumbnailsVisible="true"
|
||||
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
||||
:src="src"
|
||||
local="fr_FR"
|
||||
@loaded="onPdfLoaded"
|
||||
/>
|
||||
|
|
@ -26,11 +27,21 @@
|
|||
<script setup>
|
||||
import Dialog from "primevue/dialog";
|
||||
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const { src } = defineProps({
|
||||
src: String,
|
||||
});
|
||||
|
||||
const emit = defineEmits("close");
|
||||
|
||||
const licenseKey = import.meta.env.VITE_VPV_LICENSE;
|
||||
useLicense({ licenseKey });
|
||||
|
||||
const isOpen = true;
|
||||
const isOpen = ref(true);
|
||||
watch(isOpen, (newValue) => {
|
||||
emit("close");
|
||||
});
|
||||
|
||||
const onPdfLoaded = () => {
|
||||
const wrapper = document.querySelector(".vpv-pages-inner-container");
|
||||
|
|
@ -73,7 +84,7 @@ const onPdfLoaded = () => {
|
|||
|
||||
<style>
|
||||
#add-pdf {
|
||||
--max-w: min(100vw - var(--gutter) * 2, 77rem);
|
||||
--max-w: min(100vw - var(--gutter) * 2, 77rem);
|
||||
--max-h: calc(100vh - var(--gutter) * 2 - 5.5rem);
|
||||
--header-h: 4.5rem;
|
||||
max-width: var(--max-w);
|
||||
|
|
@ -152,7 +163,9 @@ const onPdfLoaded = () => {
|
|||
--vpv-input-border-color: var(--color-white);
|
||||
--vpv-input-placeholder-color: #596673;
|
||||
/* Modal of PDF Properties */
|
||||
--vpv-properties-content-background: var(--vpv-dropdown-menu-content-background);
|
||||
--vpv-properties-content-background: var(
|
||||
--vpv-dropdown-menu-content-background
|
||||
);
|
||||
--vpv-properties-content-secondary-color: #c6ccd2;
|
||||
--vpv-properties-content-color: var(--vpv-toolbar-color);
|
||||
--vpv-properties-separator: var(--vpv-dropdown-separator);
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ function setInitialStep() {
|
|||
page.value.content.description.length !== 0;
|
||||
const isEmpty = !hasPDF && !hasImages;
|
||||
if (isEmpty) return "Intro";
|
||||
if (hasPDF) return "PdfViewer";
|
||||
if (hasImages) return "Images";
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,15 @@
|
|||
<Header :title="page.content.title" />
|
||||
<!-- Kanban: Status Brief Enrichi -->
|
||||
|
||||
<PdfViewer v-if="pdf" :src="pdf" @close="pdf = null" />
|
||||
|
||||
<div class="kanban">
|
||||
<ProjectStep v-for="step in page.steps" :key="step" :step="step">
|
||||
<ProjectStep
|
||||
v-for="step in page.steps"
|
||||
:key="step"
|
||||
:step="step"
|
||||
@update:pdf="changePdf"
|
||||
>
|
||||
</ProjectStep>
|
||||
<!-- <section
|
||||
class="flex-1"
|
||||
|
|
@ -155,10 +162,14 @@ 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 { ref } from "vue";
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
const user = useUserStore().user;
|
||||
|
||||
const pdf = ref(null);
|
||||
|
||||
function setStepStatus(stepName) {
|
||||
const stepIndex = steps.indexOf(stepName);
|
||||
const currentIndex = steps.indexOf(currentStep.value);
|
||||
|
|
@ -166,6 +177,15 @@ function setStepStatus(stepName) {
|
|||
return "done";
|
||||
}
|
||||
}
|
||||
|
||||
function changePdf(src) {
|
||||
pdf.value = src;
|
||||
}
|
||||
|
||||
function hidePdf() {
|
||||
console.log("test");
|
||||
pdf.value = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue