237 lines
7 KiB
Vue
237 lines
7 KiB
Vue
<template>
|
|
<section
|
|
class="flex-1"
|
|
:aria-labelledby="step.id"
|
|
:data-status="setStatus(page.steps, page.content.currentstep, step)"
|
|
>
|
|
<h2 :id="step.id">
|
|
<span :data-icon="step.id">{{ step.label }}</span>
|
|
</h2>
|
|
<div class="cards | flow">
|
|
<template
|
|
v-if="
|
|
step.id === 'clientBrief' ||
|
|
step.files.dynamic ||
|
|
step.files.static ||
|
|
step.files.length
|
|
"
|
|
>
|
|
<article
|
|
class="card"
|
|
v-if="
|
|
step.id !== 'proposal' &&
|
|
step.id !== 'industrialIdeation' &&
|
|
step.id !== 'physicalSample'
|
|
"
|
|
>
|
|
<hgroup class="order-last">
|
|
<h3 class="card__title | font-serif | text-lg">
|
|
<router-link :to="'/' + step.uri" class="link-full">{{
|
|
step.label
|
|
}}</router-link>
|
|
</h3>
|
|
</hgroup>
|
|
<div class="card__meta | flex">
|
|
<time
|
|
class="card__date | text-grey-700"
|
|
:datetime="dayjs(step.modified).format('YYYY-M-DD')"
|
|
>{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
|
|
>
|
|
</div>
|
|
<!-- All images -->
|
|
<figure
|
|
v-if="step.id === 'clientBrief' && step.files[0]?.type === 'image'"
|
|
class="card__images"
|
|
:data-count="step.files.length"
|
|
:data-plus="
|
|
step.files.length > 3 ? step.files.length - 3 : undefined
|
|
"
|
|
>
|
|
<img
|
|
v-for="image in step.files.slice(0, 3)"
|
|
:key="image.uuid"
|
|
:src="image.url"
|
|
:alt="image.alt"
|
|
/>
|
|
</figure>
|
|
<figure
|
|
v-if="step.id === 'virtualSample'"
|
|
class="card__images"
|
|
:data-count="step.files.dynamic.length"
|
|
:data-plus="
|
|
step.files.dynamic.length > 3
|
|
? step.files.dynamic.length - 3
|
|
: undefined
|
|
"
|
|
>
|
|
<img
|
|
v-for="track in step.files.dynamic"
|
|
:key="track.files[0].slug"
|
|
:src="track.files[0].url"
|
|
:alt="track.files[0].alt"
|
|
/>
|
|
</figure>
|
|
<!-- Document -->
|
|
<div
|
|
v-if="step.files[0]?.type === 'document'"
|
|
class="card__images"
|
|
data-icon="document"
|
|
></div>
|
|
<footer
|
|
v-if="step?.files[0]?.comments?.length > 0"
|
|
class="order-last | text-sm text-primary font-medium"
|
|
>
|
|
{{ step.files[0].comments.length }} commentaire{{
|
|
step.files[0].comments.length > 1 ? "s" : ""
|
|
}}
|
|
</footer>
|
|
</article>
|
|
|
|
<template
|
|
v-if="
|
|
step.id == 'proposal' ||
|
|
(step.id == 'industrialIdeation' && step.files.length)
|
|
"
|
|
>
|
|
<article
|
|
class="card"
|
|
v-for="(file, index) in step.files"
|
|
:key="file.name"
|
|
>
|
|
<hgroup class="order-last">
|
|
<h3 class="card__title | font-serif | text-lg">
|
|
<router-link
|
|
:to="'/' + step.uri + '&fileIndex=' + index"
|
|
class="link-full"
|
|
>
|
|
{{
|
|
file.label.length
|
|
? file.label
|
|
: file.name.replace(".pdf", "")
|
|
}}
|
|
</router-link>
|
|
</h3>
|
|
</hgroup>
|
|
<div class="card__meta | flex">
|
|
<time
|
|
class="card__date | text-grey-700"
|
|
:datetime="dayjs(file.modified).format('YYYY-M-DD')"
|
|
>{{ dayjs(file.modified).format("DD MMMM YYYY") }}</time
|
|
>
|
|
</div>
|
|
<template v-if="index === 0">
|
|
<figure
|
|
v-if="file.cover"
|
|
class="card__images pdf-cover"
|
|
style="aspect-ratio: unset"
|
|
>
|
|
<img :src="file.cover" alt="" />
|
|
</figure>
|
|
<div v-else class="card__images" data-icon="document"></div>
|
|
</template>
|
|
<footer
|
|
v-if="file.comments?.length > 0"
|
|
class="order-last | text-sm text-primary font-medium"
|
|
>
|
|
<template v-if="step.id === 'proposal'">
|
|
<router-link
|
|
:to="'/' + step.uri + '&fileIndex=' + index + '&comments'"
|
|
>
|
|
{{ file.comments.length }} commentaire{{
|
|
file.comments.length > 1 ? "s" : ""
|
|
}}
|
|
</router-link>
|
|
</template>
|
|
<template v-else>
|
|
<router-link :to="'/' + step.uri + '&comments=true'">
|
|
{{ file.comments.length }} commentaire{{
|
|
file.comments.length > 1 ? "s" : ""
|
|
}}
|
|
</router-link>
|
|
</template>
|
|
</footer>
|
|
</article>
|
|
</template>
|
|
</template>
|
|
|
|
<template v-if="step.id === 'physicalSample' && step.files[0]">
|
|
<div class="card | physical-sample">
|
|
<header
|
|
class="text-center rounded-lg py-32"
|
|
:style="'--cover: url(' + step.cover + ')'"
|
|
>
|
|
<h3 class="text-lg font-serif">
|
|
<router-link :to="'/' + step.uri" class="link-full">{{
|
|
step.title
|
|
}}</router-link>
|
|
</h3>
|
|
<time class="font-medium text-sm py-8" :datetime="step.date">{{
|
|
step.date
|
|
}}</time>
|
|
<p>{{ step.description }}</p>
|
|
</header>
|
|
<img
|
|
:src="step.files[0].url"
|
|
alt=""
|
|
loading="lazy"
|
|
class="rounded-lg mt-16"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template v-else></template>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/fr";
|
|
import { usePageStore } from "../../stores/page";
|
|
import { computed } from "vue";
|
|
import { useProjectStore } from "../../stores/project";
|
|
|
|
const { step } = defineProps({
|
|
step: Object,
|
|
});
|
|
|
|
const emit = defineEmits(["update:file"]);
|
|
|
|
dayjs.locale("fr");
|
|
|
|
const { page } = usePageStore();
|
|
const { setStatus } = useProjectStore();
|
|
|
|
const steps = page.steps.map((item) => {
|
|
return item.value;
|
|
});
|
|
|
|
const mergedFiles = computed(() => {
|
|
if (step.id !== "virtualSample") return false;
|
|
|
|
const staticFiles = step.files?.static ?? [];
|
|
const dynamicFiles = step.files?.dynamic ?? [];
|
|
|
|
return [...staticFiles, ...dynamicFiles];
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.physical-sample header {
|
|
color: var(--color-white);
|
|
background: linear-gradient(
|
|
90deg,
|
|
hsla(0, 0%, 10%, 0.5) 0%,
|
|
hsla(0, 0%, 10%, 0.9) 50%,
|
|
hsla(0, 0%, 10%, 0.9) 100%
|
|
),
|
|
var(--cover), var(--color-black);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.physical-sample header > * {
|
|
padding-inline: var(--space-16);
|
|
}
|
|
.physical-sample header h3 {
|
|
position: initial;
|
|
}
|
|
</style>
|