app_vue2/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="!pending && fileUrl === null"
          @click="submit"
        >
          {{ $t('generate') }}
        </v-btn>

        <v-btn
          v-else
          color="primary"
          :loading="pending"
          :disabled="pending"
          :href="fileUrl">
          {{ $t('download') }}
        </v-btn>
      </div>
    </v-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, onBeforeMount, onBeforeUnmount, onMounted, onServerPrefetch, onUnmounted, Ref, ref, useContext} from "@nuxtjs/composition-api";
import {HTTP_METHOD, QUERY_TYPE} from "~/types/enums";
import DataPersister from "~/services/data/dataPersister";
import {DataPersisterArgs} from "~/types/interfaces";
import { EventSourcePolyfill } from "event-source-polyfill";

export default defineComponent({
  name: 'OrganizationCmfLicence',
  setup() {
    const { $config, store } = useContext()

    let pending: Ref<boolean> = ref(false)
    let fileUrl: Ref<string | null> = ref(null)
    let eventSource: Ref<EventSource | null> = ref(null)

    const sseOpened = () => {
      return eventSource.value !== null && eventSource.value?.readyState === EventSource.OPEN
    }

    const submit = async () => {
      const response = await DataPersister.request(
        '/api/export/cmf-licence/organization',
        HTTP_METHOD.POST,
        { type: QUERY_TYPE.DEFAULT, data: { format: 'pdf', async: sseOpened() }, withCredentials: true } as DataPersisterArgs
      )
      if (sseOpened()) {
        pending.value = true
      } else {
        console.warn('File downloaded synchronously')
        fileUrl.value = JSON.parse(response).url
      }
    }

    const unsubscribe = async () => {
      if (eventSource.value === null || eventSource.value.readyState === EventSource.CLOSED) {
        return
      }
      console.log('SSE - Close subscription')
      eventSource.value.close()
    }

    const subscribe = async () => {
      if (sseOpened()) {
        console.error('SSE - Already subscribed to the event source')
        return
      }
      if (process.server) {
        console.error('SSE - Cannot subscribe on server side')
        return
      }

      const url = new URL($config.baseUrl_mercure)
      url.searchParams.append('topic', "access/" + store.state.profile.access.id)

      eventSource.value = new EventSourcePolyfill(
        url.toString(),
        { withCredentials: true, heartbeatTimeout: 3600 * 1000 }
      );

      eventSource.value.onerror = (event) => {
        console.error('SSE - An error happened : ' + JSON.stringify(event))
        eventSource.value?.close()
      }
      eventSource.value.onopen = () => {
        console.log('SSE - Listening for events...')
      }
      eventSource.value.onmessage = event => {
        const data = JSON.parse(event.data)
        fileUrl.value = data.url
        pending.value = false
      }
    }

    onMounted(() => {
      subscribe()
    })

    onBeforeUnmount(() => {
      unsubscribe()
    })

    return {
      submit,
      pending,
      fileUrl
    }
  }
})
</script>