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 && file().value === null"
          @click="submit"
        >
          {{ $t('generate') }}
        </v-btn>

        <v-btn
          v-else
          color="primary"
          :loading="pending"
          :disabled="pending"
          :href="file().value ? file().value.url : ''">
          {{ $t('download') }}
        </v-btn>
      </div>
    </v-form>
    <!-- <<< for debugging purposes, TODO: remove before deploying -->
    <div v-if="file !== null">
      {{ file().value }}
    </div>
<!--    <ul>-->
<!--      <li v-for="event in events">{{ event }}</li>-->
<!--    </ul>-->
    <!-- >>> for debugging purposes -->
  </div>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent, Ref, ref, useContext} from "@nuxtjs/composition-api";
import {DENORMALIZER_TYPE, QUERY_TYPE} from "~/types/enums";
import DataPersister from "~/services/data/dataPersister";
import {DataPersisterArgs} from "~/types/interfaces";
import { Context } from "@nuxt/types";
import {Repository as VuexRepository} from "@vuex-orm/core/dist/src/repository/Repository";
import {Model, Query} from "@vuex-orm/core";
import {repositoryHelper} from "~/services/store/repository";
import {File} from "~/models/Core/File";
import {queryHelper} from "~/services/store/query";
import Serializer from "~/services/serializer/serializer";

export default defineComponent({
  name: 'OrganizationCmfLicence',
  setup() {
    const context = useContext()


    let fileId: Ref<number | null> = ref(null)

    const file: ComputedRef<File | null> = computed(() => {
      if (fileId.value === null)
        return null
      return queryHelper.getItem(query, fileId.value) as File
    })

    let pending: ComputedRef<boolean> = computed(() => {
      return file.value !== null && file.value.status === 'PENDING'
    })

    const async = () => { return context.store.state.sse.connected }

    const repository: VuexRepository<Model> = repositoryHelper.getRepository(File)
    const query: Query = repository.query()

    const submit = async () => {
      const dataPersister = new DataPersister()
      dataPersister.initCtx(context as unknown as Context)

      const response = await dataPersister.invoke(
        {
          url: '/api/export/cmf-licence/organization',
          type: QUERY_TYPE.DEFAULT,
          data: { format: 'pdf', async: true },
          withCredentials: true
        } as DataPersisterArgs
      )

      if (async()) {
        // pending.value = true
        console.log(response)
        let entry = Serializer.denormalize(response.data, DENORMALIZER_TYPE.HYDRA)
        let model = repositoryHelper.persist(File, entry.data) as any

        console.log(model)
        fileId.value = model.id
        // file.value = () => { return queryHelper.getItem(query, model.id) as File }
        // file.value = queryHelper.getItem(query, model.id) as File

      } else {
        console.error('SSE unavailable - File downloaded synchronously')
        // file.value = response
      }
    }

    // const onMessage = (eventData) => {
    //   fileUrl.value = eventData.url
    //   pending.value = false
    // }

    return {
      submit,
      pending,
      file: () => file
    }
  }
})

function useSse(): { sseConnected: any; } {
    throw new Error("Function not implemented.");
}
</script>