designtopack/src/components/project/cards/Brief.vue

<template>
  <Images
    v-if="images.length > 0"
    :step="step"
    :images="images"
    :uri="addLocalePrefix(step.uri)"
  />
  <Document v-if="pdf" :step="step" :pdf="pdf" />

  <button
    v-if="images.length === 0 && step.id === 'clientBrief'"
    class="btn | w-full"
    @click="goToImagesBrief()"
  >
    {{ t('brief.addPlatform') }}
  </button>
  <div class="btn | w-full" v-if="!pdf && step.id === 'clientBrief'">
    <label for="upload-pdf">
      {{ t('brief.addPdf') }}
      <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";
import { useI18n } from "vue-i18n";
import { addLocalePrefix } from "../../../utils/router";

const { step } = defineProps({ step: Object });
const { addPdf } = useBriefStore();
const router = useRouter();
const { t } = useI18n();

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 + "/" + step.slug);
}
</script>