55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<article
|
|
class="project-item | flex | rounded-2xl | px-32 py-32"
|
|
:data-dtl="project.isDTLEnabled ? 'true' : undefined"
|
|
>
|
|
<hgroup>
|
|
<h3>
|
|
<router-link
|
|
:to="
|
|
isEmptyBrief(project) ? project.uri + '/client-brief' : project.uri
|
|
"
|
|
class="link-full"
|
|
>
|
|
{{ project.title }}
|
|
</router-link>
|
|
</h3>
|
|
<p>
|
|
Dernière mise à jour le
|
|
<time :datetime="project.modified">{{ frenchFormattedModified }}</time>
|
|
</p>
|
|
</hgroup>
|
|
<img :src="project.logo" alt="Logo" class="project-logo | rounded-sm" />
|
|
<ol
|
|
class="project-steps"
|
|
:data-steps="project.steps.length"
|
|
:style="'--steps:' + project.steps.length"
|
|
>
|
|
<li
|
|
v-for="step in project.steps"
|
|
class="project-step"
|
|
:data-status="setStatus(project.steps, project.currentStep, step)"
|
|
>
|
|
<span class="pill" :data-icon="step.id">
|
|
<span>{{ step.label }}</span>
|
|
</span>
|
|
</li>
|
|
</ol>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs';
|
|
import 'dayjs/locale/fr';
|
|
import { useProjectStore } from '../../stores/project';
|
|
|
|
dayjs.locale('fr');
|
|
|
|
const { project } = defineProps({ project: Object });
|
|
|
|
const frenchFormattedModified = dayjs(project.modified).format(
|
|
'dddd D MMMM YYYY'
|
|
);
|
|
|
|
const { stepsLabels, setStatus, isEmptyBrief } = useProjectStore();
|
|
</script>
|