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

Signed-off-by: Arturo Manzoli <[email protected]>

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,6 @@ const handleStepChangeDown = (newStep: number): void => {
 const dontShowTutorialAgain = (): void => {
   userHasSeenTutorial.value = true
   showTutorial.value = false
-  emits('update:showTutorial', false)
   showSnackbar({
     message: 'This guide can be reopened via the Settings > General menu',
     variant: 'info',
@@ -356,8 +346,6 @@ const dontShowTutorialAgain = (): void => {
 
 const alwaysShowTutorialOnStartup = (): void => {
   userHasSeenTutorial.value = false
-  showTutorial.value = true
-  emits('update:showTutorial', true)
 }
 
 const nextTutorialStep = (): void => {
@@ -379,7 +367,7 @@ const closeTutorial = (): void => {
   showTutorial.value = false
   interfaceStore.componentToHighlight = 'none'
   currentTutorialStep.value = 1
-  emits('update:showTutorial', false)
+  interfaceStore.isTutorialVisible = false
 }
 
 const setVehicleConnectedVisible = (): void => {
@@ -403,18 +391,19 @@ const handleKeydown = (event: KeyboardEvent): void => {
 watch(
   () => interfaceStore.isTutorialVisible,
   (val) => {
+    console.log('🚀 ~ val:', val)
     showTutorial.value = val
   }
 )
 
-watch(showTutorial, (newVal) => {
-  interfaceStore.isTutorialVisible = newVal
-})
+// watch(showTutorial, (newVal) => {
+//   interfaceStore.isTutorialVisible = newVal
+// })
 
-watch(userHasSeenTutorial, (newVal) => {
-  interfaceStore.isTutorialVisible = !newVal
-  showTutorial.value = !newVal
-})
+// watch(userHasSeenTutorial, (newVal) => {
+//   interfaceStore.isTutorialVisible = !newVal
+//   showTutorial.value = !newVal
+// })
 
 const checkUserHasSeenTutorial = (): void => {
   const lastViewedTutorialStep = localStorage.getItem('last-tutorial-step')
@@ -435,6 +424,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', handleKeydown)
+  interfaceStore.isTutorialVisible = false
 })
 </script>
 <style>

src/components/UpdateNotification.vue

@@ -27,6 +27,7 @@
         </template>
       </v-progress-linear>
     </template>
+    <template #actions> <v-btn variant="text" size="small" @click="showUpdateDialog = false">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('')
@@ -75,7 +79,10 @@ onBeforeMount(() => {
     dialogVariant.value = 'info'
     dialogActions.value = []
     showProgress.value = false
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+      return
+    }
   })
 
   window.electronAPI.onUpdateNotAvailable(() => {
@@ -144,7 +151,9 @@ onBeforeMount(() => {
       return
     }
 
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 
   window.electronAPI.onDownloadProgress((progressInfo) => {
@@ -175,7 +184,9 @@ onBeforeMount(() => {
         },
       },
     ]
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 })
 </script>

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<{
   /**
    *
@@ -69,13 +72,15 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
+  (e: 'close'): void
 }>()
 
 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,7 +90,7 @@ const originalActions = [
   {
     text: 'Close',
     action: () => {
-      isOpen.value = false
+      handleCloseDialog()
     },
   },
 ]
@@ -105,7 +110,6 @@ watch(
     isOpen.value = value
   }
 )
-
 watch(isOpen, (value) => {
   emit('update:modelValue', value)
 })
@@ -114,14 +118,17 @@ const searchVehicles = async (): Promise<void> => {
   searching.value = true
   disableButtons()
   vehicles.value = await discoveryService.findVehicles()
+
+  handleCloseDialog()
   searching.value = false
   enableButtons()
   searched.value = true
 }
 
 const selectVehicle = async (address: string): Promise<void> => {
   mainVehicleStore.globalAddress = address
-  isOpen.value = false
+  handleCloseDialog()
+
   await reloadCockpit()
   showSnackbar({ message: 'Vehicle address updated', variant: 'success', duration: 5000 })
 }
@@ -130,10 +137,15 @@ const preventFutureAutoSearchs = (): void => {
   preventAutoSearch.value = true
   disableButtons()
   setTimeout(() => {
-    isOpen.value = false
+    handleCloseDialog()
   }, 5000)
 }
 
+const handleCloseDialog = (): void => {
+  isOpen.value = false
+  emit('close')
+}
+
 const disableButtons = (): void => {
   dialogActions.value = originalActions.map((action) => ({ ...action, disabled: true }))
 }

src/views/ConfigurationGeneralView.vue

@@ -302,6 +302,7 @@ import { onMounted, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import Tutorial from '@/components/Tutorial.vue'
 import VehicleDiscoveryDialog from '@/components/VehicleDiscoveryDialog.vue'
 import { useSnackbar } from '@/composables/snackbar'
 import * as Connection from '@/libs/connection/connection'
@@ -518,9 +519,11 @@ const tryToPrettifyRtcConfig = (): void => {
 }
 
 const openTutorial = (): void => {
-  interfaceStore.isMainMenuVisible = false
-  interfaceStore.configComponent = -1
-  interfaceStore.isTutorialVisible = true
+  interfaceStore.enqueueDialog({
+    id: 'Tutorial',
+    component: Tutorial,
+    props: { modelValue: true },
+  })
 }
 
 watch(customRtcConfiguration, () => tryToPrettifyRtcConfig())