add mercure subscription to cmf-licence/organization page

.env.local

@@ -21,4 +21,4 @@ CLIENT_TYPO3_BASE_URL=https://local.sub.opentalent.fr/###subDomain###
 # Mercure push events
 MERCURE_URL=https://local.mercure.opentalent.fr/.well-known/mercure
 MERCURE_PUBLIC_URL=https://local.mercure.opentalent.fr/.well-known/mercure
-MERCURE_JWT_SECRET=UfQm7bdbXSO0TDnxGREM6BPtwUgls7ZWJhAl21VsuwW8rSvyHG3yqOkPEpr9sEmo
+MERCURE_SUBSCRIBER_JWT_KEY=NQEupdREijrfYvCmF2mnvZQFL9zLKDH9RCYter6tUWzjemPqzicffhc2fSf0yEmM

components/Ui/Loading.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, Ref } from '@nuxtjs/composition-api'
+import { defineComponent, toRefs } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {
@@ -19,7 +19,7 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const size: Ref<number> = ref(props.size)
+    const { size } = toRefs(props)
 
     return {
       size

package.json

@@ -36,6 +36,7 @@
     "@vuex-orm/core": "1.0.0-draft.16",
     "cookieparser": "^0.1",
     "core-js": "^3.17",
+    "event-source-polyfill": "^1.0.26",
     "js-yaml": "^4.0",
     "libphonenumber-js": "^1.9.39",
     "lodash": "^4.17",
@@ -59,6 +60,7 @@
     "@nuxtjs/eslint-config-typescript": "^6.0",
     "@nuxtjs/eslint-module": "^3.0",
     "@nuxtjs/moment": "^1.6",
+    "@types/event-source-polyfill": "^1.0.0",
     "@types/jest": "^27.0",
     "@types/vue-the-mask": "^0.11.1",
     "@vue/test-utils": "^1.1",
@@ -70,7 +72,7 @@
     "eslint": "^7.32",
     "eslint-plugin-nuxt": "^2.0",
     "jest": "^27.1",
-    "jsdoc": "^3.6",
+    "jsdoc": "^3.6.10",
     "postcss-import": "^13.0",
     "postcss-loader": "^4.1",
     "postcss-url": "^10.1",

pages/cmf_licence/organization.vue

@@ -34,40 +34,79 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, Ref, ref, useContext} from "@nuxtjs/composition-api";
+import {defineComponent, onMounted, 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 } = useContext()
+    const { $config, store } = useContext()
+
     let pending: Ref<boolean> = ref(false)
     let fileUrl: Ref<string | null> = ref(null)
+    let eventSource: Ref<EventSource | null> = ref(null)
+    let async: boolean = true
 
     const submit = async () => {
+      const response = await DataPersister.request(
+        '/api/export/cmf-licence/organization',
+        HTTP_METHOD.POST,
+        { type: QUERY_TYPE.DEFAULT, data: { format: 'pdf', async: async }, withCredentials: true } as DataPersisterArgs
+      )
+      if (async) {
+        pending.value = true
+      } else {
+        console.warn('File is downloaded synchronously')
+        fileUrl.value = JSON.parse(response).url
+      }
+    }
+
+    const unsubscribe = async () => {
+      if (eventSource.value !== null) {
+        eventSource.value.onerror = null
+        eventSource.value.close()
+        eventSource.value = null
+      }
+    }
+
+    const subscribe = async () => {
+      await unsubscribe()
+
       const url = new URL($config.baseUrl_mercure)
-      url.searchParams.append('topic', "files")
-      // const eventSource = new EventSource(url.toString(), { withCredentials: true });
-      const eventSource = new EventSource(url.toString());
-      eventSource.onmessage = event => {
-        // Will be called every time an update is published by the server
+      url.searchParams.append('topic', "access/" + store.state.profile.access.id)
+
+      eventSource.value = new EventSourcePolyfill(url.toString(), { withCredentials: true });
+
+      eventSource.value.onerror = event => {
+        async = false
+        console.error('Error while subscribing to the EventSource, fallback to sync mode : ' + JSON.stringify(event))
+        unsubscribe()
+      }
+      eventSource.value.onopen = event => {
+        console.log('Listening for events...')
+      }
+      eventSource.value.onmessage = event => {
         const data = JSON.parse(event.data)
         fileUrl.value = data.url
         pending.value = false
       }
-
-      await DataPersister.request(
-        '/api/export/cmf-licence/organization',
-        HTTP_METHOD.POST,
-        { type: QUERY_TYPE.DEFAULT, data: { format: 'pdf', async: true } } as DataPersisterArgs
-      )
-      pending.value = true
     }
 
+    onMounted(() => {
+      subscribe()
+    })
+
+    onUnmounted(() => {
+      unsubscribe()
+    })
+
     return {
+      eventSource,
       submit,
+      subscribe,
       pending,
       fileUrl
     }