Refactor code to use optional chaining for accessing nested properties

Author: tacxou

nuxt.config.ts

@@ -38,6 +38,9 @@ export default defineNuxtConfig({
     global: true,
     dirs: [{ path: '~/components', prefix: 'sesame' }],
   },
+  appConfig: {
+    baseUrl: SESAME_APP_API_URL,
+  },
   modules: [
     '@nuxt-alt/auth',
     '@nuxt-alt/http',

package.json

@@ -28,6 +28,7 @@
     "pinia": "^2.1.7",
     "quasar": "^2.15.4",
     "radash": "^12.1.0",
+    "reconnecting-eventsource": "^1.6.2",
     "sass": "^1.70.0",
     "vue-eslint-parser": "^9.4.2",
     "yaml": "^2.4.2"

src/components/appbar/RightButtons.vue

@@ -56,7 +56,10 @@ const buttons = [
   },
 ]
 
+const emits = defineEmits(['syncing'])
+
 async function syncAll() {
+  emits('syncing', { count: badgesValues.value.TO_SYNC })
   await useHttp('/core/backends/syncall', {
     method: 'POST',
     params: {

src/components/appbar/index.vue

@@ -11,7 +11,7 @@ q-header
     //q-separator(vertical dark inset).q-mx-md
     //sesame-AppbarMenu
     q-space
-    sesame-AppbarRightButtons
+    sesame-AppbarRightButtons(@syncing="emits('syncing', $event)")
 </template>
 
 <script lang="ts" setup>
@@ -25,7 +25,7 @@ defineOptions({
 const $q = useQuasar()
 const router = useRouter()
 
-const emits = defineEmits(['closeDrawer'])
+const emits = defineEmits(['closeDrawer', 'syncing'])
 
 function backToIndex() {
   router.push({ name: 'index' })

src/layouts/default.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 q-layout
-  sesame-appbar(@closeDrawer="drawer = !drawer")
+  sesame-appbar(@closeDrawer="drawer = !drawer" @syncing="syncing")
   q-drawer.flex(v-model="drawer" side="left" :mini="true" bordered)
     template(#mini)
       q-scroll-area.fit.mini-slot.cursor-pointer
@@ -20,6 +20,19 @@ q-layout
           q-separator
   q-page-container
     nuxt-page
+    q-dialog(seamless v-model="eventSeamless" position="bottom")
+      q-card(style="width: 350px")
+        q-linear-progress(:value="eventSeamlessProgress" color="amber-9")
+        q-card-section.row.items-center.no-wrap
+          q-circular-progress.q-mr-md(indeterminate size="42px" color="amber-9")
+          //- pre(v-html="JSON.stringify(eventSeamlessCurrentJobs, null, 2)")
+          div
+            .text-weight-bold.q-px-md.text-center
+              | Synchronisation en cours&nbsp;&nbsp;
+              q-badge(color="amber-10") {{ eventSeamlessCurrent }}/{{ eventSeamlessTotal }}
+            //- .text-grey Fitz & The Tantrums
+          q-space
+          q-btn(flat round icon="mdi-close" v-close-popup)
 </template>
 
 <script lang="ts" setup>
@@ -28,11 +41,74 @@ import { IdentityState } from '~/composables'
 import { useIdentityStateStore } from '~/stores/identityState'
 import { useIdentityAffectationStore } from '~/stores/identityAffectation'
 import { useMenu } from '~/composables'
+import ReconnectingEventSource from "reconnecting-eventsource";
+
+const identityStateStore = useIdentityStateStore()
+
+const auth = useAuth()
+const config = useAppConfig()
+const esUrl = new URL(config.baseUrl + "/core/backends/sse")
+esUrl.searchParams.append("key", '' + auth.user?.sseToken)
+var es = new ReconnectingEventSource(esUrl)
+
+console.log('identityStateStore.getProcessingCount', identityStateStore.getProcessingCount)
+
+const eventSeamless = ref(false)
+const eventSeamlessTotal = ref(identityStateStore.getProcessingCount)
+const eventSeamlessCurrent = ref(0)
+const eventSeamlessCurrentJobs = ref({})
+
+const eventSeamlessProgress = computed(() => {
+  return eventSeamlessTotal.value === 0 ? 0 : eventSeamlessCurrent.value / eventSeamlessTotal.value
+})
+
+async function onmessage(event) {
+  try {
+    const data = JSON.parse(event.data)
+
+    if (/^job:/.test(data.channel)) {
+      eventSeamless.value = true
+      if (eventSeamlessTotal.value === 0) {
+        await identityStateStore.fetchProcessingCount()
+        eventSeamlessTotal.value = identityStateStore.getProcessingCount
+      }
+    }
+
+    switch (data.channel) {
+      case 'job:added':
+        eventSeamlessCurrentJobs.value[data.payload.jobId] = data.payload
+        break
+
+      case 'job:completed':
+        delete eventSeamlessCurrentJobs.value[data.payload.jobId]
+        eventSeamlessCurrent.value++
+
+        if (eventSeamlessCurrent.value >= eventSeamlessTotal.value) {
+          eventSeamlessCurrent.value = 0
+          eventSeamlessCurrentJobs.value = {}
+          setTimeout(() => {
+            eventSeamless.value = false
+          }, 2000)
+        }
+        break
+    }
+
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+es.onmessage = onmessage
+
+function syncing(payload: { count: number }) {
+  eventSeamlessTotal.value = payload.count
+  eventSeamlessCurrent.value = 0
+  eventSeamless.value = true
+}
 
 const drawer = ref(true)
 
 const router = useRouter()
-const identityStateStore = useIdentityStateStore()
 const identityAffectationStore = useIdentityAffectationStore()
 const { fetchAllStateCount } = identityStateStore
 const { fetchAllAffectationCount } = identityAffectationStore
@@ -51,10 +127,6 @@ function push(path: string) {
 function logout() {
   router.push({ name: 'login' })
 }
-
-function test() {
-  console.log('test')
-}
 </script>
 
 <style>

src/stores/identityState.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import {IdentityState} from '@/composables/useIdentityStates';
+import { IdentityState } from '@/composables/useIdentityStates';
 
 export const useIdentityStateStore = defineStore('identityStates', {
   state: () => ({

yarn.lock

@@ -5985,6 +5985,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+reconnecting-eventsource@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/reconnecting-eventsource/-/reconnecting-eventsource-1.6.2.tgz#b7f5b03b1c76291f6fbcb0203004892a57ae253b"
+  integrity sha512-vHhoxVLbA2YcfljWMKEbgR1KVTgwIrnyh/bzVJc+gfQbGcUIToLL6jNhkUL4E+9FbnAcfUVNLIw2YCiliTg/4g==
+
 redis-errors@^1.0.0, redis-errors@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad"