Работа над интерактивным обучением

resources/js/Pages/Report/Components/SelectUserModal.vue

@@ -4,6 +4,7 @@ import {useReportStore} from "../../../Stores/report.js";
 import {computed, ref, watch} from "vue";
 import {router, Link} from "@inertiajs/vue3";
 import {useDebounceFn} from "@vueuse/core";
+import {useOnboardingStore} from "../../../Stores/onboarding.js";
 const show = defineModel('show')
 
 const props = defineProps({
@@ -176,6 +177,19 @@ const onChangeDepartment = (departmentId) => {
     usersLoaded.value = false
     fetchUsers(departmentId)
 }
+
+const onboarding = useOnboardingStore()
+const onAfterEnter = () => {
+    // Если онбординг активен и текущий шаг имеет opensModal, переходим к следующему
+    if (onboarding.isActive) {
+        const currentSteps = onboarding.currentTourSteps
+        const currentStep = currentSteps[onboarding.activeStepIndex]
+        if (currentStep?.opensModal) {
+            console.log(currentStep)
+            onboarding.setStep(onboarding.activeStepIndex + 1) // переходим на шаг внутри модалки
+        }
+    }
+}
 </script>
 
 <template>
@@ -184,9 +198,10 @@ const onChangeDepartment = (departmentId) => {
             class="max-w-[420px]"
             :mask-closable="false"
             @before-leave="onAfterLeave"
+            @after-enter="onAfterEnter"
     >
         <NForm id="select-user-form" ref="formRef" :model="reportStore.reportInfo" :rules="rules">
-            <NFormItem label="Выберите отделение" path="departmentId">
+            <NFormItem id="modal-select-user-department" label="Выберите отделение" path="departmentId">
                 <NSelect :options="departments"
                          :loading="loadingDepartmentFetch"
                          @change="onChangeDepartment"
@@ -194,7 +209,7 @@ const onChangeDepartment = (departmentId) => {
                          filterable
                 />
             </NFormItem>
-            <NFormItem label="Выберите ответственного" path="userId">
+            <NFormItem id="modal-select-user-doctor" label="Выберите ответственного" path="userId">
                 <NSelect :options="users"
                          :loading="loadingUserFetch"
                          :disabled="!usersLoaded"
@@ -211,6 +226,7 @@ const onChangeDepartment = (departmentId) => {
         </NAlert>
         <template #action>
             <NButton form-id="select-user-form"
+                     id="modal-select-user-submit"
                      type="primary"
                      block
                      @click="onSubmit"