studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

improve project dialog system

Browse source 
- 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 2024-11-16 11:30:51 +01:00
parent 4e8c876dac
commit 26369ad71b
228 changed files with 451 additions and 525 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/components/project/ProjectStep.vue
View file

@ -1,46 +1,57 @@
<template>
<section class="flex-1" :aria-labelledby="text" :data-status="status">
<section class="flex-1" :aria-labelledby="step.id" :data-status="status">
<router-link :to="'/' + step.uri">
<h2 :id="text">
<h2 :id="step.id">
<!-- ADRIEN / TIMOTHÉE : DYNAMISER L'ICONE -->
<span data-icon="votre-brief">{{ step.text }}</span>
<span data-icon="votre-brief">{{ step.label }}</span>
</h2>
<div class="cards | flow">
<article class="card">
<hgroup class="order-last">
<h3 class="card__title | font-serif | text-lg">{{ step.text }}</h3>
<h3 class="card__title | font-serif | text-lg">{{ step.label }}</h3>
</hgroup>
<div class="card__meta | flex">
<time class="card__date | text-grey-700" datetime="2024-06-12">{{
dayjs(step.modified).format("DD MMMM YYYY")
}}</time>
<time
class="card__date | text-grey-700"
:datetime="dayjs(step.modified).format('YYYY-M-DD')"
>{{ dayjs(step.modified).format("DD MMMM YYYY") }}</time
>
</div>
<!-- Images -->
<template v-if="step.files[0]?.type === 'image'">
<figure
class="card__images"
:data-count="
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>
</template>
<!-- All images -->
<figure
v-if="
step.value === 'clientBrief' && step.files[0]?.type === 'image'
"
class="card__images"
:data-count="
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>
<!-- First image -->
<figure v-if="step.value === 'virtualSample'" class="card__images">
<img
:key="step.files[0].uuid"
:src="step.files[0].url"
:alt="step.files[0].alt"
/>
</figure>
<!-- Document -->
<div
v-if="step.files[0]?.type === 'document'"
class="card__images"
data-icon="document"
></div>
<!-- PDF -->
<template v-if="step.files[0]?.type === 'document'">
<div
@click="showPdf"
class="card__images"
data-icon="document"
></div>
</template>
<footer v-if="step?.files[0]?.comments?.length > 0">
{{ step.files[0].comments.length }} commentaire{{
step.files[0].comments.length > 1 ? "s" : ""
@ -56,6 +67,7 @@
import dayjs from "dayjs";
import "dayjs/locale/fr";
import { usePageStore } from "../../stores/page";
import { useDialogStore } from "../../stores/dialog";
const { step } = defineProps({
step: Object,
@ -74,21 +86,16 @@ const steps = page.steps.map((item) => {
const status = setStatus();
function setStatus() {
if (page.content.currentstep === step.value) {
if (page.content.currentstep === step.id) {
return "in-progress";
}
if (steps.indexOf(step.value) < steps.indexOf(page.content.currentstep)) {
if (steps.indexOf(step.id) < steps.indexOf(page.content.currentstep)) {
return "completed";
}
if (steps.indexOf(step.value) > steps.indexOf(page.content.currentstep)) {
if (steps.indexOf(step.id) > steps.indexOf(page.content.currentstep)) {
return "uncompleted";
}
}
function showPdf(event) {
event.preventDefault();
emit("update:file", step.files[0]);
}
</script>
<style scoped>