Project view > Kanban + project card clickable
This commit is contained in:
isUnknown
parent
ac48b4166a
commit
4d1811830c
5 changed files with 77 additions and 34 deletions
|
|
@ -1,317 +0,0 @@
|
|||
<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];
|
||||
console.log(file.value);
|
||||
}
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue