improve project dialog system
- 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
parent
4e8c876dac
commit
26369ad71b
228 changed files with 451 additions and 525 deletions
|
|
@ -1,214 +1,57 @@
|
|||
<template>
|
||||
<main class="flex flex-col items-stretch | w-full">
|
||||
<Header :title="page.content.title" />
|
||||
<!-- Kanban: Status Brief Enrichi -->
|
||||
|
||||
<VirtualSample />
|
||||
|
||||
<PdfViewer
|
||||
v-if="file"
|
||||
:file="file"
|
||||
@close="file = null"
|
||||
@update:file="updateFile"
|
||||
/>
|
||||
<DialogWrapper v-if="dialog.content" />
|
||||
|
||||
<div class="kanban">
|
||||
<ProjectStep
|
||||
v-for="step in page.steps"
|
||||
:key="step"
|
||||
:step="step"
|
||||
@update:file="changeFile"
|
||||
@update:dialog="updateDialog"
|
||||
>
|
||||
</ProjectStep>
|
||||
<!-- <section
|
||||
class="flex-1"
|
||||
aria-labelledby="votre-brief-label"
|
||||
data-status="done"
|
||||
>
|
||||
<h2 id="votre-brief-label">
|
||||
<span data-icon="votre-brief">Votre brief</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Votre Brief</h3>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
<figure class="card__images" data-count="13">
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="offre-commerciale-label"
|
||||
data-status="done"
|
||||
>
|
||||
<h2 id="offre-commerciale-label">
|
||||
<span data-icon="offre-commerciale">Offre Commerciale</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre - 2</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
<span class="text-primary | font-medium | ml-auto">Validé</span>
|
||||
</div>
|
||||
<figure class="card__images">
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</article>
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre - 3</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Offre Initiale</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="brief-enrichi-label"
|
||||
data-status="in-progress"
|
||||
>
|
||||
<h2 id="brief-enrichi-label">
|
||||
<span data-icon="brief-enrichi">Brief Enrichi</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<article class="card">
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">Brief enrichi</h3>
|
||||
<p class="text-primary | font-medium">4 commentaires</p>
|
||||
</hgroup>
|
||||
<div class="card__meta | flex">
|
||||
<time class="card__date | text-grey-700" datetime="2024-06-12"
|
||||
>12 juin 2024</time
|
||||
>
|
||||
<span class="text-primary | font-medium | ml-auto">Validé</span>
|
||||
</div>
|
||||
<figure class="card__images" data-count="15">
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="flex-1"
|
||||
aria-labelledby="echantillon-virtuel-label"
|
||||
data-status="uncompleted"
|
||||
>
|
||||
<h2 id="echantillon-virtuel-label">
|
||||
<span data-icon="echantillon-virtuel">Échantillon Virtuel</span>
|
||||
</h2>
|
||||
<div class="cards | flow">
|
||||
<div
|
||||
class="flex flex-col justify-center | rounded-2xl | bg-grey-200 text-grey-700"
|
||||
>
|
||||
<p>Prochainement disponible</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePageStore } from "../stores/page";
|
||||
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 VirtualSample from "../components/project/VirtualSample.vue";
|
||||
import { ref } from "vue";
|
||||
import DialogWrapper from "../components/project/DialogWrapper.vue";
|
||||
import { usePageStore } from "../stores/page";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { watch } from "vue";
|
||||
import { useDialogStore } from "../stores/dialog";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const { page } = storeToRefs(usePageStore());
|
||||
const user = useUserStore().user;
|
||||
const dialog = useDialogStore();
|
||||
|
||||
const file = ref(null);
|
||||
const route = useRoute();
|
||||
|
||||
// const route = useRoute();
|
||||
if (route.query.dialog) {
|
||||
openDialog(route.query.dialog);
|
||||
}
|
||||
|
||||
// if (route.query.notificationId) {
|
||||
// page.value.steps.forEach((step) => {
|
||||
// const srcNotification = user.notifications;
|
||||
// step.files.forEach((item) => {
|
||||
// if (item.uuid === route.query.notificationId) {
|
||||
// file.value = item;
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
function setStepStatus(stepName) {
|
||||
const stepIndex = steps.indexOf(stepName);
|
||||
const currentIndex = steps.indexOf(currentStep.value);
|
||||
if (stepIndex < currentIndex) {
|
||||
return "done";
|
||||
watch(
|
||||
() => route.query.dialog,
|
||||
(targetStepId) => {
|
||||
if (targetStepId) {
|
||||
const targetStep = page.value.steps.find(
|
||||
(step) => step.id === targetStepId
|
||||
);
|
||||
dialog.content = targetStep;
|
||||
} else {
|
||||
dialog.content = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function changeFile(newFile) {
|
||||
file.value = newFile;
|
||||
}
|
||||
|
||||
function updateFile(newFile) {
|
||||
page.value.files = [];
|
||||
page.value.files.push(newFile);
|
||||
|
||||
file.value = page.value.files[0];
|
||||
function openDialog(stepId) {
|
||||
const targetStep = page.value.steps.find((step) => step.id === stepId);
|
||||
dialog.content = targetStep;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue