finish client brief step
This commit is contained in:
isUnknown
parent
e4f06ad854
commit
cdeebbf8c8
11 changed files with 162 additions and 234 deletions
|
|
@ -8,210 +8,7 @@
|
|||
<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' &&
|
||||
step.id === 'clientBrief' &&
|
||||
step.files.some((file) => file.type === 'image')
|
||||
"
|
||||
>
|
||||
<hgroup class="order-last">
|
||||
<h3 class="card__title | font-serif | text-lg">
|
||||
<router-link
|
||||
:to="
|
||||
step.id === 'clientBrief'
|
||||
? '/' + page.uri + '/client-brief'
|
||||
: '/' + 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.filter((file) => file.type === 'image').length
|
||||
"
|
||||
:data-plus="
|
||||
step.files.length > 3 ? step.files.length - 3 : undefined
|
||||
"
|
||||
>
|
||||
<template v-for="image in step.files.slice(0, 3)" :key="image.uuid">
|
||||
<img
|
||||
v-if="image.type === 'image'"
|
||||
:src="image.url"
|
||||
:alt="image.alt"
|
||||
/>
|
||||
</template>
|
||||
</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.slug"
|
||||
:src="getFrontView(track).url"
|
||||
:alt="getFrontView(track).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 == 'clientBrief' &&
|
||||
step.files.find((file) => file.type === 'document')) ||
|
||||
step.id == 'proposal' ||
|
||||
(step.id == 'industrialIdeation' && step.files.length)
|
||||
"
|
||||
>
|
||||
<template v-for="(file, index) in step.files" :key="file.name">
|
||||
<article class="card" v-if="file.type === 'document'">
|
||||
<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="step.id === 'clientBrief' || 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 === 'clientBrief' && hasOneBriefType()">
|
||||
<button
|
||||
v-if="step.files.find((file) => file.type === 'document')"
|
||||
class="btn | w-full"
|
||||
@click="toImagesBrief()"
|
||||
>
|
||||
Ajouter un brief via la plateforme
|
||||
</button>
|
||||
<div class="btn | w-full" v-else>
|
||||
<label for="upload-pdf">
|
||||
Ajouter brief PDF
|
||||
<input
|
||||
id="upload-pdf"
|
||||
type="file"
|
||||
@change="addPdf($event, step.uri)"
|
||||
accept="application/pdf"
|
||||
ref="pdfInput"
|
||||
hidden
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</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>
|
||||
<component :is="cardsMap[step.id]" :step="step" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -223,19 +20,22 @@ import { usePageStore } from "../../stores/page";
|
|||
import { computed } from "vue";
|
||||
import { useProjectStore } from "../../stores/project";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useBriefStore } from "../../stores/brief";
|
||||
import ClientBrief from "./cards/ClientBrief.vue";
|
||||
|
||||
const { step } = defineProps({
|
||||
step: Object,
|
||||
});
|
||||
|
||||
const cardsMap = {
|
||||
clientBrief: ClientBrief,
|
||||
};
|
||||
|
||||
const emit = defineEmits(["update:file"]);
|
||||
const router = useRouter();
|
||||
|
||||
dayjs.locale("fr");
|
||||
|
||||
const { page } = usePageStore();
|
||||
const { addPdf } = useBriefStore();
|
||||
const { setStatus } = useProjectStore();
|
||||
|
||||
const steps = page.steps.map((item) => {
|
||||
|
|
@ -262,16 +62,6 @@ function getFrontView(track) {
|
|||
const frontView = track.files.find((file) => file.name === frontViewName);
|
||||
return frontView;
|
||||
}
|
||||
|
||||
function hasOneBriefType() {
|
||||
const hasImage = step.files.some((file) => file.type === "image");
|
||||
const hasDocument = step.files.some((file) => file.type === "document");
|
||||
return hasImage ^ hasDocument;
|
||||
}
|
||||
|
||||
function toImagesBrief() {
|
||||
router.push(location.pathname + "/client-brief?step=images");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue