App: Startup dialogs: Implement changes to run under dialog queue

Signed-off-by: Arturo Manzoli <[email protected]>
bluerobotics · Jan 17, 2025 · 88a2acc · 88a2acc
1 parent 4043455
commit 88a2acc
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 29 deletions.
diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-dialog v-model="internalShowDialog" :persistent="persistent" :width="maxWidth || 'auto'">
+  <v-dialog
+    v-model="internalShowDialog"
+    :persistent="persistent"
+    :width="maxWidth || 'auto'"
+    @click:outside="handleClose"
+    @close="handleClose"
+  >
     <v-card
       :width="maxWidth || 'auto'"
       class="main-dialog px-2 rounded-lg"
@@ -200,6 +206,12 @@ const iconColor = computed(() => {
 
 const hasActionsSlot = computed(() => !!slots.actions)
 
+const handleClose = (): void => {
+  if (interfaceStore.dialogQueue.length > 0) {
+    interfaceStore.openNextDialogOnQueue()
+  }
+}
+
 watch(
   () => props.showDialog,
   (newVal) => {

diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
@@ -91,20 +91,11 @@ const { showSnackbar } = useSnackbar()
 const interfaceStore = useAppInterfaceStore()
 const vehicleStore = useMainVehicleStore()
 
-const props = defineProps<{
-  /**
-   *
-   */
-  showTutorial?: boolean
-}>()
-
-const emits = defineEmits(['update:showTutorial'])
-
-const showTutorial = ref(props.showTutorial || false)
+const userHasSeenTutorial = useBlueOsStorage('cockpit-has-seen-tutorial', false)
+const showTutorial = ref((interfaceStore.activeDialog?.id === 'Tutorial' && !userHasSeenTutorial.value) || false)
 const currentTutorialStep = ref(1)
 const isVehicleConnectedVisible = ref(false)
 const tallContent = ref(false)
-const userHasSeenTutorial = useBlueOsStorage('cockpit-has-seen-tutorial', false)
 
 const steps = [
   {
@@ -345,7 +336,7 @@ const handleStepChangeDown = (newStep: number): void => {
 const dontShowTutorialAgain = (): void => {
   userHasSeenTutorial.value = true
   showTutorial.value = false
-  emits('update:showTutorial', false)
+  interfaceStore.openNextDialogOnQueue()
   showSnackbar({
     message: 'This guide can be reopened via the Settings > General menu',
     variant: 'info',
@@ -356,8 +347,6 @@ const dontShowTutorialAgain = (): void => {
 
 const alwaysShowTutorialOnStartup = (): void => {
   userHasSeenTutorial.value = false
-  showTutorial.value = true
-  emits('update:showTutorial', true)
 }
 
 const nextTutorialStep = (): void => {
@@ -379,7 +368,7 @@ const closeTutorial = (): void => {
   showTutorial.value = false
   interfaceStore.componentToHighlight = 'none'
   currentTutorialStep.value = 1
-  emits('update:showTutorial', false)
+  interfaceStore.openNextDialogOnQueue()
 }
 
 const setVehicleConnectedVisible = (): void => {

diff --git a/src/components/UpdateNotification.vue b/src/components/UpdateNotification.vue
@@ -27,6 +27,7 @@
         </template>
       </v-progress-linear>
     </template>
+    <template #actions> <v-btn variant="text" size="small" @click="handleClose">Close</v-btn> </template>
   </InteractionDialog>
 </template>
 
@@ -37,6 +38,9 @@ import { onBeforeMount, ref } from 'vue'
 import InteractionDialog, { type Action } from '@/components/InteractionDialog.vue'
 import { app_version } from '@/libs/cosmos'
 import { isElectron } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
 
 const showUpdateDialog = ref(false)
 const dialogTitle = ref('')
@@ -52,6 +56,11 @@ const updateInfo = ref({
 })
 const ignoredUpdateVersions = useStorage<string[]>('cockpit-ignored-update-versions', [])
 
+const handleClose = (): void => {
+  interfaceStore.openNextDialogOnQueue()
+  showUpdateDialog.value = false
+}
+
 const formatDate = (date: string): string => {
   return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
 }
@@ -75,7 +84,9 @@ onBeforeMount(() => {
     dialogVariant.value = 'info'
     dialogActions.value = []
     showProgress.value = false
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 
   window.electronAPI.onUpdateNotAvailable(() => {
@@ -87,7 +98,7 @@ onBeforeMount(() => {
       {
         text: 'OK',
         action: () => {
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
     ]
@@ -107,7 +118,7 @@ onBeforeMount(() => {
           console.log(`User chose to ignore version ${updateInfo.value.version}`)
           ignoredUpdateVersions.value.push(updateInfo.value.version)
           window.electronAPI!.cancelUpdate()
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
       {
@@ -121,7 +132,7 @@ onBeforeMount(() => {
               action: () => {
                 console.log('User chose to cancel the update for the Electron app.')
                 window.electronAPI!.cancelUpdate()
-                showUpdateDialog.value = false
+                interfaceStore.openNextDialogOnQueue()
                 dialogMessage.value = 'Downloading update...'
               },
             },
@@ -132,19 +143,21 @@ onBeforeMount(() => {
         text: 'Not Now',
         action: () => {
           window.electronAPI!.cancelUpdate()
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
     ]
 
     // Check if this version is in the ignored list
     if (ignoredUpdateVersions.value.includes(info.version)) {
       console.log(`Skipping ignored version ${info.version}.`)
-      showUpdateDialog.value = false
+      interfaceStore.openNextDialogOnQueue()
       return
     }
 
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 
   window.electronAPI.onDownloadProgress((progressInfo) => {
@@ -164,18 +177,20 @@ onBeforeMount(() => {
         action: () => {
           console.log('User chose to install the update for the Electron app now.')
           window.electronAPI!.installUpdate()
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
       {
         text: 'Later',
         action: () => {
           console.log('User chose to install the update for the Electron app later.')
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
     ]
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 })
 </script>
diff --git a/src/components/VehicleDiscoveryDialog.vue b/src/components/VehicleDiscoveryDialog.vue
@@ -47,15 +47,18 @@
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useSnackbar } from '@/composables/snackbar'
 import vehicleDiscover, { NetworkVehicle } from '@/libs/electron/vehicle-discovery'
 import { reloadCockpit } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import InteractionDialog, { Action } from './InteractionDialog.vue'
 
+const interfaceStore = useAppInterfaceStore()
+
 const props = defineProps<{
   /**
    *
@@ -75,7 +78,8 @@ const { showSnackbar } = useSnackbar()
 const mainVehicleStore = useMainVehicleStore()
 const discoveryService = vehicleDiscover
 
-const isOpen = ref(props.modelValue)
+const isDialogOpen = computed(() => interfaceStore.activeDialog?.id === 'VehicleDiscoveryDialog' || props.modelValue)
+const isOpen = ref(isDialogOpen.value || false)
 const searching = ref(false)
 const searched = ref(false)
 const vehicles = ref<NetworkVehicle[]>([])
@@ -85,6 +89,7 @@ const originalActions = [
   {
     text: 'Close',
     action: () => {
+      interfaceStore.openNextDialogOnQueue()
       isOpen.value = false
     },
   },
@@ -105,7 +110,6 @@ watch(
     isOpen.value = value
   }
 )
-
 watch(isOpen, (value) => {
   emit('update:modelValue', value)
 })
@@ -114,6 +118,8 @@ const searchVehicles = async (): Promise<void> => {
   searching.value = true
   disableButtons()
   vehicles.value = await discoveryService.findVehicles()
+  interfaceStore.openNextDialogOnQueue()
+  isOpen.value = false
   searching.value = false
   enableButtons()
   searched.value = true
@@ -122,6 +128,7 @@ const searchVehicles = async (): Promise<void> => {
 const selectVehicle = async (address: string): Promise<void> => {
   mainVehicleStore.globalAddress = address
   isOpen.value = false
+  interfaceStore.openNextDialogOnQueue()
   await reloadCockpit()
   showSnackbar({ message: 'Vehicle address updated', variant: 'success', duration: 5000 })
 }
@@ -131,6 +138,7 @@ const preventFutureAutoSearchs = (): void => {
   disableButtons()
   setTimeout(() => {
     isOpen.value = false
+    interfaceStore.openNextDialogOnQueue()
   }, 5000)
 }