app/pages/cmf_licence/organization.vue

<template>
  <div class="d-flex flex-column align-center">
    <h2 class="ma-4">{{ $t('cmf_structure_licence')}}</h2>
    <a
        href="https://www.cmf-musique.org/services/tarifs-preferentiels/"
        target="_blank"
    >
      {{ $t('cmf_licence_details_url')}}
    </a>

    <v-form
        ref="form"
        lazy-validation
    >
      <div class="ma-12">
        <v-btn
            v-if="!filePending && file === null"
            @click="submit"
        >
          {{ $t('generate') }}
        </v-btn>

        <v-btn
            v-else
            color="primary"
            :loading="filePending"
            :disabled="filePending"
            target="_blank"
            @click="download"
        >
          {{ $t('download') }}
        </v-btn>
      </div>
    </v-form>
  </div>
</template>

<script setup lang="ts">
import File from "~/models/Core/File"
import {ComputedRef, Ref} from "vue";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import {useSseStore} from "~/stores/sse";
import {useEntityManager} from "~/composables/data/useEntityManager";
import LicenceCmfOrganizationER from "~/models/Export/LicenceCmfOrganizationER";
import {useFileManager} from "~/composables/data/useFileManager";

const { em } = useEntityManager()
const { fetch } = useEntityFetch()
const { fileManager } = useFileManager()

const sseStore = useSseStore()
const async = () => { return sseStore.connected }

const file: Ref<File | null> = ref(null)

const submittingRequest: Ref<boolean> = ref(false)

const filePending: ComputedRef<boolean> = computed(() => {
  return submittingRequest.value || (file.value !== null && file.value.status === 'PENDING')
})

const submit = async () => {
  submittingRequest.value = true

  const exportRequest = em.newInstance(LicenceCmfOrganizationER)

  exportRequest.format = 'pdf'

  if (async()) {
    exportRequest.async = false
  } else {
    console.error('SSE unavailable - File downloaded synchronously')
  }

  // Send the export request and get the receipt
  const receipt = await em.persist(LicenceCmfOrganizationER, exportRequest)
  if (receipt.fileId === null) {
    throw new Error("Missing file's id, abort")
  }

  file.value = await em.fetch(File, receipt.fileId as number, true) as File

  submittingRequest.value = false
}

const download = async () => {
  if (file.value === null) {
    console.error("File is not defined yet, impossible to download")
    return
  }

  if (filePending.value) {
    console.error("File is still pending, impossible to download")
    return
  }

  const response = await fileManager.download(file.value.id as number)

  const blob = new Blob([response], { type: response.type })

  const url = window.URL.createObjectURL(blob)

  const link = document.createElement('a')
  link.href = url
  link.download = file.value.name ?? 'unknown'
  link.target = '_blank'
  link.click()

  link.remove()
  window.URL.revokeObjectURL(url)
}
</script>