finish client brief step

src/components/project/cards/ClientBrief.vue

@@ -0,0 +1,49 @@
+<template>
+  <Images v-if="images.length > 0" :step="step" :images="images" />
+  <Document v-if="pdf" :step="step" :pdf="pdf" />
+
+  <button
+    v-if="images.length === 0"
+    class="btn | w-full"
+    @click="goToImagesBrief()"
+  >
+    Ajouter un brief via la plateforme
+  </button>
+  <div class="btn | w-full" v-if="!pdf">
+    <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>
+
+<script setup>
+import { computed } from "vue";
+import Images from "./Images.vue";
+import Document from "./Document.vue";
+import { useBriefStore } from "../../../stores/brief";
+import { useRouter } from "vue-router";
+
+const { step } = defineProps({ step: Object });
+const { addPdf } = useBriefStore();
+const router = useRouter();
+
+const images = computed(() => {
+  return step.files.filter((file) => file.type === "image");
+});
+
+const pdf = computed(() => {
+  return step.files.find((file) => file.type === "document");
+});
+
+function goToImagesBrief() {
+  router.push(location.pathname + "/client-brief?step=images");
+}
+</script>

src/components/project/cards/DateTime.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="card__meta | flex">
+    <time
+      class="card__date | text-grey-700"
+      :datetime="dayjs(date).format('YYYY-M-DD')"
+      >{{ dayjs(date).format("DD MMMM YYYY") }}</time
+    >
+  </div>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+import "dayjs/locale/fr";
+
+const { date } = defineProps({ date: String });
+</script>

src/components/project/cards/Document.vue

@@ -0,0 +1,48 @@
+<template>
+  <article class="card">
+    <hgroup class="order-last">
+      <h3 class="card__title | font-serif | text-lg">
+        <router-link
+          :to="'/' + step.uri + '&fileIndex=' + index"
+          class="link-full"
+        >
+          {{ pdf.label.length ? pdf.label : pdf.name.replace(".pdf", "") }}
+        </router-link>
+      </h3>
+    </hgroup>
+
+    <DateTime :date="pdf.modified" />
+
+    <figure
+      v-if="pdf.cover"
+      class="card__images pdf-cover"
+      style="aspect-ratio: unset"
+    >
+      <img :src="pdf.cover" alt="" />
+    </figure>
+    <div v-else class="card__images" data-icon="document"></div>
+
+    <footer
+      v-if="pdf.comments?.length > 0"
+      class="order-last | text-sm text-primary font-medium"
+    >
+      <router-link :to="'/' + step.uri + '?comments=true'">
+        {{ pdf.comments.length }} commentaire{{
+          pdf.comments.length > 1 ? "s" : ""
+        }}
+      </router-link>
+    </footer>
+  </article>
+</template>
+<script setup>
+import DateTime from "./DateTime.vue";
+
+const { step, pdf, index } = defineProps({
+  step: Object,
+  pdf: Object,
+  index: {
+    default: 0,
+    type: Number,
+  },
+});
+</script>

src/components/project/cards/Images.vue

@@ -0,0 +1,36 @@
+<template>
+  <article class="card">
+    <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>
+    <DateTime :date="step.modified" />
+    <figure
+      class="card__images"
+      :data-count="images.length"
+      :data-plus="images.length > 3 ? images.length - 3 : undefined"
+    >
+      <template v-for="image in images.slice(0, 3)" :key="image.uuid">
+        <img :src="image.url" :alt="image.alt" />
+      </template>
+    </figure>
+    <!-- <footer
+      v-if="images[0]?.comments?.length > 0"
+      class="order-last | text-sm text-primary font-medium"
+    >
+      {{ images[0].comments.length }} commentaire{{
+        images[0].comments.length > 1 ? "s" : ""
+      }}
+    </footer> -->
+  </article>
+</template>
+<script setup>
+import DateTime from "./DateTime.vue";
+import { usePageStore } from "../../../stores/page";
+
+const { images, step } = defineProps({ images: Array, step: Object });
+const { page } = usePageStore();
+</script>