316 lines
9.2 KiB
Vue
316 lines
9.2 KiB
Vue
<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"
|
|
/>
|
|
|
|
<div class="kanban">
|
|
<ProjectStep
|
|
v-for="step in page.steps"
|
|
:key="step"
|
|
:step="step"
|
|
@update:file="changeFile"
|
|
>
|
|
</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 { useRoute } from "vue-router";
|
|
|
|
const { page } = storeToRefs(usePageStore());
|
|
const user = useUserStore().user;
|
|
|
|
const file = ref(null);
|
|
|
|
// const route = useRoute();
|
|
|
|
// 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";
|
|
}
|
|
}
|
|
|
|
function changeFile(newFile) {
|
|
file.value = newFile;
|
|
}
|
|
|
|
function updateFile(newFile) {
|
|
page.value.files = [];
|
|
page.value.files.push(newFile);
|
|
|
|
file.value = page.value.files[0];
|
|
}
|
|
</script>
|
|
|
|
<style scope>
|
|
/* Porject details */
|
|
.project-details textarea {
|
|
resize: none;
|
|
max-height: 5rem;
|
|
}
|
|
.project-details__filters button:first-of-type {
|
|
margin-right: calc(var(--space-12) + 1px);
|
|
}
|
|
.project-details__filters button:first-of-type::after {
|
|
content: "";
|
|
width: 1px;
|
|
height: 1.7rem;
|
|
background-color: var(--color-black-20);
|
|
position: absolute;
|
|
right: calc(-0.75rem);
|
|
}
|
|
|
|
/* Masonry */
|
|
.masonry > * {
|
|
margin-bottom: var(--space-16);
|
|
}
|
|
.masonry > *:only-child {
|
|
column-span: all;
|
|
transform: translateY(50%);
|
|
}
|
|
@media (min-width: 40rem) {
|
|
.masonry {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
@media (min-width: 65rem) {
|
|
.masonry {
|
|
column-count: 3;
|
|
}
|
|
}
|
|
@media (min-width: 90rem) {
|
|
.masonry {
|
|
column-count: 4;
|
|
}
|
|
}
|
|
|
|
/* Image */
|
|
.image {
|
|
border-radius: var(--rounded-2xl);
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.image.has-description::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background: var(--icon-color, currentColor);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-size: 1rem;
|
|
mask-image: var(--icon-description);
|
|
position: absolute;
|
|
top: 1.25rem;
|
|
right: 1.25rem;
|
|
}
|
|
.image[aria-selected="true"] {
|
|
outline: 2px solid var(--color-focus-ring);
|
|
}
|
|
.image[aria-selected="true"]::after {
|
|
content: attr(data-count);
|
|
position: absolute;
|
|
top: var(--space-12);
|
|
right: var(--space-12);
|
|
border-radius: 50%;
|
|
color: var(--color-white);
|
|
font-weight: 700;
|
|
background: var(--color-grey-800);
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
.image .tag {
|
|
position: absolute;
|
|
top: var(--space-12);
|
|
left: var(--space-12);
|
|
}
|
|
|
|
/* Kanban */
|
|
.kanban {
|
|
--header-height: 2.25rem; /* 36px */
|
|
--header-bg-color: var(--color-grey-200);
|
|
--header-title-bg-color: var(--color-grey-700);
|
|
--gap: var(--gutter);
|
|
position: relative;
|
|
display: flex;
|
|
gap: var(--gap);
|
|
overflow-x: auto;
|
|
margin: 0 calc(-1 * var(--gutter));
|
|
padding: 0 var(--gutter);
|
|
height: calc(100vh - var(--gutter) * 2 - var(--header-height) - 2.25rem);
|
|
}
|
|
</style>
|