DTL panel : show proposal corresponding to dialog working for virtual sample (dynamic and static)
This commit is contained in:
isUnknown
parent
af0c259525
commit
c2d00e0edf
5 changed files with 204 additions and 92 deletions
|
|
@ -73,59 +73,71 @@ function processDTLProposals($page) {
|
|||
$DTLProposal = null;
|
||||
|
||||
switch ($location) {
|
||||
case 'proposal':
|
||||
$proposalPage = $page->find('proposal');
|
||||
$proposalFile = $proposal->DTLproposal()->toFile();
|
||||
case 'proposal':
|
||||
$proposalPage = $page->find('proposal');
|
||||
$proposalFile = $proposal->DTLproposal()->toFile();
|
||||
|
||||
if ($proposalPage && $proposalFile) {
|
||||
$index = $proposalPage->pdf()->toFiles()->indexOf($proposalFile);
|
||||
$DTLProposal = [
|
||||
"location" => "proposal",
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
|
||||
"date" => $proposalFile->modified("d/MM/Y"),
|
||||
"stepLabel" => "Proposition commerciale",
|
||||
];
|
||||
}
|
||||
break;
|
||||
if ($proposalPage && $proposalFile) {
|
||||
$index = $proposalPage->pdf()->toFiles()->indexOf($proposalFile);
|
||||
$DTLProposal = [
|
||||
"location" => [
|
||||
"step" => "proposal"
|
||||
],
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=proposal&fileIndex=" . $index,
|
||||
"date" => $proposalFile->modified("d/MM/Y"),
|
||||
"stepLabel" => "Proposition commerciale",
|
||||
];
|
||||
}
|
||||
break;
|
||||
|
||||
case 'industrialIdeation':
|
||||
$proposalPage = $page->find('industrial-ideation');
|
||||
$proposalFile = $proposal->DTLindustrialIdeation()->toFile();
|
||||
case 'industrialIdeation':
|
||||
$proposalPage = $page->find('industrial-ideation');
|
||||
$proposalFile = $proposal->DTLindustrialIdeation()->toFile();
|
||||
|
||||
if ($proposalPage && $proposalFile) {
|
||||
$DTLProposal = [
|
||||
"location" => "industrialIdeation",
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation",
|
||||
"date" => $proposalFile->modified("d/MM/Y"),
|
||||
"stepLabel" => "Idéation industrielle",
|
||||
];
|
||||
}
|
||||
break;
|
||||
if ($proposalPage && $proposalFile) {
|
||||
$DTLProposal = [
|
||||
"location" => [
|
||||
"step" => "industrialIdeation"
|
||||
],
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=industrial-ideation",
|
||||
"date" => $proposalFile->modified("d/MM/Y"),
|
||||
"stepLabel" => "Idéation industrielle",
|
||||
];
|
||||
}
|
||||
break;
|
||||
|
||||
case 'virtualSampleDynamicTrack':
|
||||
$proposalPage = $proposal->DTLVirtualSampleDynamicTrack()->toPage();
|
||||
if ($proposalPage) {
|
||||
$DTLProposal = [
|
||||
"location" => "virtualSampleDynamicTrack",
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
|
||||
"date" => $proposalPage->modified("d/MM/Y"),
|
||||
"stepLabel" => "Échantillon virtuel - piste dynamique",
|
||||
];
|
||||
}
|
||||
break;
|
||||
case 'virtualSampleDynamicTrack':
|
||||
$proposalPage = $proposal->DTLVirtualSampleDynamicTrack()->toPage();
|
||||
if ($proposalPage) {
|
||||
$DTLProposal = [
|
||||
"location" => [
|
||||
"step" => "virtualSample",
|
||||
"type" => "dynamic",
|
||||
"trackSlug" => (string) $proposalPage->slug()
|
||||
],
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
|
||||
"date" => $proposalPage->modified("d/MM/Y"),
|
||||
"stepLabel" => "Échantillon virtuel - piste dynamique",
|
||||
];
|
||||
}
|
||||
break;
|
||||
|
||||
case 'virtualSampleStaticTrack':
|
||||
$proposalPage = $page->find('virtual-sample');
|
||||
$proposalFile = $proposal->DTLVirtualSampleStaticTrack()->toFile();
|
||||
if ($proposalPage && $proposalFile) {
|
||||
$DTLProposal = [
|
||||
"location" => "virtualSampleStaticTrack",
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
|
||||
"date" => $proposalFile->modified("d/MM/Y"),
|
||||
"stepLabel" => "Échantillon virtuel - piste statique",
|
||||
];
|
||||
}
|
||||
break;
|
||||
case 'virtualSampleStaticTrack':
|
||||
$proposalPage = $page->find('virtual-sample');
|
||||
$proposalFile = $proposal->DTLVirtualSampleStaticTrack()->toFile();
|
||||
if ($proposalPage && $proposalFile) {
|
||||
$DTLProposal = [
|
||||
"location" => [
|
||||
"step" => "virtualSample",
|
||||
"type" => "static",
|
||||
"source" => (string) $proposalFile->url()
|
||||
],
|
||||
"path" => "/projects/" . $page->slug() . "?dialog=virtual-sample",
|
||||
"date" => $proposalFile->modified("d/MM/Y"),
|
||||
"stepLabel" => "Échantillon virtuel - piste statique",
|
||||
];
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if ($DTLProposal) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,26 @@
|
|||
<template>
|
||||
<aside id="dtl-panel" class="text-sm bg-black rounded-2xl" aria-labelledby="dtl-label" @click="preventClose($event)">
|
||||
<header class="flex items-center | border-b pl-32 pr-16 py-8" data-icon="leaf" style="--column-gap:.5rem">
|
||||
<aside
|
||||
id="dtl-panel"
|
||||
class="text-sm bg-black rounded-2xl"
|
||||
aria-labelledby="dtl-label"
|
||||
@click="preventClose($event)"
|
||||
>
|
||||
<header
|
||||
class="flex items-center | border-b pl-32 pr-16 py-8"
|
||||
data-icon="leaf"
|
||||
style="--column-gap: 0.5rem"
|
||||
>
|
||||
<h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
|
||||
<button @click="emits('close')" class="btn btn--icon btn--transparent | ml-auto" data-icon="close">
|
||||
<button
|
||||
@click="emits('close')"
|
||||
class="btn btn--icon btn--transparent | ml-auto"
|
||||
data-icon="close"
|
||||
>
|
||||
<span class="sr-only">Fermer</span>
|
||||
</button>
|
||||
</header>
|
||||
<nav class="tabs" role="tablist" tabindex="-1">
|
||||
<button
|
||||
<button
|
||||
v-for="(proposal, index) in proposals"
|
||||
@click="activeProposal = proposal"
|
||||
role="tab"
|
||||
|
|
@ -18,18 +31,50 @@
|
|||
</button>
|
||||
</nav>
|
||||
<section class="overflow-y" tabindex="-1">
|
||||
<div id="proposition" class="flex | bg-white-05 text-grey-200 px-32 py-16" style="--column-gap:1rem">
|
||||
<div
|
||||
id="proposition"
|
||||
class="flex | bg-white-05 text-grey-200 px-32 py-16"
|
||||
style="--column-gap: 1rem"
|
||||
>
|
||||
<h3 class="sr-only">Proposition</h3>
|
||||
<img v-if="activeProposal.thumb" :src="activeProposal.thumb" alt="" width="72" height="72" loading="lazy" class="bg-white rounded-sm">
|
||||
<p>Données basées sur la proposition <br>du {{ activeProposal.date }} <br>{{ activeProposal.stepLabel }}</p>
|
||||
<img
|
||||
v-if="activeProposal.thumb"
|
||||
:src="activeProposal.thumb"
|
||||
alt=""
|
||||
width="72"
|
||||
height="72"
|
||||
loading="lazy"
|
||||
class="bg-white rounded-sm"
|
||||
/>
|
||||
<p>
|
||||
Données basées sur la proposition <br />du {{ activeProposal.date }}
|
||||
<br />{{ activeProposal.stepLabel }}
|
||||
</p>
|
||||
</div>
|
||||
<div id="note-globale" class="px-32 py-16 border-b flow">
|
||||
<h3>Note globale</h3>
|
||||
<div class="flex" style="--column-gap:1rem">
|
||||
<p :data-grade="activeProposal.grades.global.letter"><strong class="sr-only">{{ activeProposal.grades.global.letter }}</strong></p>
|
||||
<div class="flex" style="--column-gap: 1rem">
|
||||
<p :data-grade="activeProposal.grades.global.letter">
|
||||
<strong class="sr-only">{{
|
||||
activeProposal.grades.global.letter
|
||||
}}</strong>
|
||||
</p>
|
||||
<div class="flex-1">
|
||||
<p><strong class="text-md font-medium">{{ activeProposal.grades.global.mention }}</strong> <span class="text-white-50 ml-8">{{ activeProposal.grades.global.number }}/10</span></p>
|
||||
<input type="range" min="0" max="10" :value="activeProposal.grades.global.number" disabled />
|
||||
<p>
|
||||
<strong class="text-md font-medium">{{
|
||||
activeProposal.grades.global.mention
|
||||
}}</strong>
|
||||
<span class="text-white-50 ml-8"
|
||||
>{{ activeProposal.grades.global.number }}/10</span
|
||||
>
|
||||
</p>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="10"
|
||||
:value="activeProposal.grades.global.number"
|
||||
disabled
|
||||
/>
|
||||
<p>{{ activeProposal.grades.global.comment }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,19 +83,34 @@
|
|||
<h3>Positionnement</h3>
|
||||
<dl>
|
||||
<dt id="design">Design</dt>
|
||||
<dd><span class="sr-only">{{ activeProposal.grades.position.complexity }}</span></dd>
|
||||
<dd>
|
||||
<span class="sr-only">{{
|
||||
activeProposal.grades.position.complexity
|
||||
}}</span>
|
||||
</dd>
|
||||
<dt id="poids">Poids</dt>
|
||||
<dd><span class="sr-only">{{ activeProposal.grades.position.weight }}</span></dd>
|
||||
<dd>
|
||||
<span class="sr-only">{{
|
||||
activeProposal.grades.position.weight
|
||||
}}</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<button
|
||||
<button
|
||||
class="dot"
|
||||
v-for="(proposal, index) in proposals"
|
||||
@click="activeProposal = proposal"
|
||||
:aria-selected="proposal.isActive"
|
||||
:style="'--x:'+activeProposal.grades.position.complexity+';--y:'+activeProposal.grades.position.weight"
|
||||
:style="
|
||||
'--x:' +
|
||||
activeProposal.grades.position.complexity +
|
||||
';--y:' +
|
||||
activeProposal.grades.position.weight
|
||||
"
|
||||
:title="index === 0 ? 'Proposition initiale' : 'Alternative ' + index"
|
||||
>
|
||||
<span class="sr-only">{{ index === 0 ? "Proposition initiale" : "Alternative " + index }}</span>
|
||||
<span class="sr-only">{{
|
||||
index === 0 ? "Proposition initiale" : "Alternative " + index
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="indicateur" class="px-32 py-16 border-b flow">
|
||||
|
|
@ -60,16 +120,35 @@
|
|||
v-for="indicator in activeProposal.grades.indicators"
|
||||
:key="indicator.value"
|
||||
>
|
||||
<div class="gauge" :data-value="indicator.value < 0 ? indicator.value : '+'+indicator.value">
|
||||
<label :for="indicator.id" :style="'--value:'+indicator.value">{{ indicator.label }}</label>
|
||||
<input :id="indicator.id" type="range" min="-5" max="5" orient="vertical" :value="indicator.value" disabled />
|
||||
<div
|
||||
class="gauge"
|
||||
:data-value="
|
||||
indicator.value < 0 ? indicator.value : '+' + indicator.value
|
||||
"
|
||||
>
|
||||
<label
|
||||
:for="indicator.id"
|
||||
:style="'--value:' + indicator.value"
|
||||
>{{ indicator.label }}</label
|
||||
>
|
||||
<input
|
||||
:id="indicator.id"
|
||||
type="range"
|
||||
min="-5"
|
||||
max="5"
|
||||
orient="vertical"
|
||||
:value="indicator.value"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
|
||||
<footer class="p-16">
|
||||
<button class="btn btn--white w-full">Demander une expertise d’optimisation</button>
|
||||
<button class="btn btn--white w-full">
|
||||
Demander une expertise d’optimisation
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</aside>
|
||||
|
|
@ -81,14 +160,16 @@ import dayjs from "dayjs";
|
|||
import "dayjs/locale/fr";
|
||||
import { ref, onBeforeUnmount } from "vue";
|
||||
|
||||
const { proposals } = defineProps({
|
||||
proposals: Array,
|
||||
});
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
|
||||
const emits = defineEmits(["close"]);
|
||||
|
||||
const proposals = page.value.designToLight;
|
||||
|
||||
proposals[0].isActive = true;
|
||||
|
||||
const activeProposal = ref(proposals[0]);
|
||||
|
|
|
|||
|
|
@ -8,27 +8,12 @@
|
|||
/>
|
||||
<VirtualSample v-if="dialog.content.slug === 'virtual-sample'" />
|
||||
<PhysicalSample v-if="dialog.content.slug === 'physical-sample'" />
|
||||
<DTLPanel v-if="correspondingDTLProposal" />
|
||||
</template>
|
||||
<script setup>
|
||||
import TitledPdfWrapper from "./TitledPdfWrapper.vue";
|
||||
import { useDialogStore } from "../../stores/dialog";
|
||||
import VirtualSample from "./virtual-sample/VirtualSample.vue";
|
||||
import PhysicalSample from "./PhysicalSample.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { usePageStore } from "../../stores/page";
|
||||
import { computed } from "vue";
|
||||
import DTLPanel from "../design-to-light/DTLPanel.vue";
|
||||
|
||||
const dialog = useDialogStore();
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
|
||||
const correspondingDTLProposal = computed(() => {
|
||||
if (!page.value?.designToLight) return false;
|
||||
const correspondingDTLProposal = page.value.designToLight.find((proposal) =>
|
||||
window.location.href.includes(proposal.path)
|
||||
);
|
||||
if (!correspondingDTLProposal) return false;
|
||||
return correspondingDTLProposal;
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -81,18 +81,24 @@
|
|||
</template>
|
||||
<Comments v-if="isCommentsOpen" @show-draft-marker="showDraftMarker" />
|
||||
</Dialog>
|
||||
<DTLPanel
|
||||
v-if="correspondingDTLProposal"
|
||||
:proposals="[correspondingDTLProposal]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Comments from "../../comments/Comments.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import Dialog from "primevue/dialog";
|
||||
import DynamicView from "./DynamicView.vue";
|
||||
import StaticView from "./StaticView.vue";
|
||||
import DTLPanel from "../../design-to-light/DTLPanel.vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useVirtualSampleStore } from "../../../stores/virtualSample";
|
||||
import { useDialogStore } from "../../../stores/dialog";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { usePageStore } from "../../../stores/page";
|
||||
|
||||
const { file } = defineProps({
|
||||
file: Object,
|
||||
|
|
@ -105,10 +111,13 @@ const {
|
|||
isLoopAnimationEnabled,
|
||||
isDownloadTriggered,
|
||||
} = storeToRefs(useVirtualSampleStore());
|
||||
|
||||
const { isCommentsOpen, isCommentPanelEnabled, activeTracks, openedFile } =
|
||||
storeToRefs(useDialogStore());
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
|
||||
isLoopAnimationEnabled.value = false;
|
||||
const { isCommentsOpen, isCommentPanelEnabled, activeTracks } = storeToRefs(
|
||||
useDialogStore()
|
||||
);
|
||||
|
||||
// Variables
|
||||
const router = useRouter();
|
||||
|
|
@ -130,6 +139,31 @@ const downloadText = computed(() => {
|
|||
}
|
||||
});
|
||||
|
||||
const correspondingDTLProposal = computed(() => {
|
||||
const hasDTLProposal = page.value?.designToLight;
|
||||
if (!hasDTLProposal) return false;
|
||||
|
||||
const correspondingDTLProposal = page.value.designToLight.find((proposal) => {
|
||||
if (activeTab.value === "dynamic") {
|
||||
return (
|
||||
proposal.location.type === "dynamic" &&
|
||||
activeTracks?.value?.some(
|
||||
(activeTrack) => activeTrack.slug === proposal.location.trackSlug
|
||||
)
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
proposal.location.type === "static" &&
|
||||
openedFile.value.source === proposal.location.source
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
if (!correspondingDTLProposal) return false;
|
||||
|
||||
return correspondingDTLProposal;
|
||||
});
|
||||
|
||||
// Functions
|
||||
function downloadFiles() {
|
||||
isDownloadTriggered.value = true;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
|
||||
<DTLButton
|
||||
v-if="page?.designToLight?.length > 0"
|
||||
@click="openDTLPanel($event)"
|
||||
@click="toggleDTLPanel($event)"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -61,8 +61,8 @@ function openDialog(targetStepSlug) {
|
|||
dialog.content = targetStep;
|
||||
}
|
||||
|
||||
function openDTLPanel(event) {
|
||||
isDTLPanelOpen.value = true;
|
||||
function toggleDTLPanel(event) {
|
||||
isDTLPanelOpen.value = !isDTLPanelOpen.value;
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue