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

resources/js/Pages/Index.vue

@@ -12,6 +12,15 @@ import SelectUserModal from "./Report/Components/SelectUserModal.vue"
 import { Link, router } from "@inertiajs/vue3"
 import { useServerTime } from "../Composables/useServerTime.js"
 import { useThemeVars } from "naive-ui"
+import {useOnboardingStore} from "../Stores/onboarding.js";
+import {useModalStore} from "../Stores/modals.js";
+
+const onboarding = useOnboardingStore()
+const userStore = useAuthStore()
+const modalStore = useModalStore()
+
+// if (userStore.user.role.slug === 'dej')
+    // onboarding.startTour('welcomeDuty', 0)
 
 const authStore = useAuthStore()
 const themeVars = useThemeVars()
@@ -62,11 +71,7 @@ const showSelectUserModal = ref(false)
 const showSelectNurseUserModal = ref(false)
 
 const openReport = (path) => {
-    if (authStore.isDoctor) {
-        showSelectUserModal.value = true
-    } else {
-        router.visit(path)
-    }
+    modalStore.showSelectDutyUserModal = true
 }
 
 const openNurseReport = () => {
@@ -75,7 +80,7 @@ const openNurseReport = () => {
     // } else {
     //     router.visit('/nurse/report')
     // }
-    showSelectNurseUserModal.value = true
+    modalStore.showSelectNurseUserModal = true
 }
 
 const cardColor    = computed(() => themeVars.value.cardColor)
@@ -88,7 +93,7 @@ const dividerColor = computed(() => themeVars.value.dividerColor)
             <NFlex vertical :size="10" class="max-w-2xl w-full" style="padding: 0 16px 24px;">
 
                 <!-- Профиль -->
-                <NEl class="profile-card rounded-2xl" style="padding: 18px 22px;">
+                <NEl id="user-panel" class="profile-card rounded-2xl" style="padding: 18px 22px;">
                     <NFlex justify="space-between" align="center" :wrap="false">
 
                         <NFlex align="center" :size="12" :wrap="false" style="min-width: 0; flex: 1;">
@@ -133,13 +138,15 @@ const dividerColor = computed(() => themeVars.value.dividerColor)
                 <!-- Действия -->
                 <div class="bento-grid">
                     <ActionTile
+                        id="new-report-duty"
                         v-if="authStore.hasPermission('report.create')"
                         :icon="TbArticle"
                         title="Заполнить сводную"
                         description="Ежедневный отчёт врача"
-                        @click="openReport('/report')"
+                        @click.prevent="openReport('/report')"
                     />
                     <ActionTile
+                        id="new-report-nurse"
                         v-if="authStore.hasPermission('nurse.report.view')"
                         :icon="TbStethoscope"
                         title="Журнал пациентов"
@@ -147,6 +154,7 @@ const dividerColor = computed(() => themeVars.value.dividerColor)
                         @click="openNurseReport"
                     />
                     <ActionTile
+                        id="statistics"
                         v-if="authStore.hasPermission('stats.view')"
                         :icon="TbChartTreemap"
                         title="Статистика"
@@ -155,6 +163,7 @@ const dividerColor = computed(() => themeVars.value.dividerColor)
                         href="/statistic"
                     />
                     <ActionTile
+                        id="reports"
                         v-if="authStore.hasPermission('report.view') || authStore.hasPermission('nurse.report.view')"
                         :icon="TbReportMedical"
                         title="Отчёты"
@@ -183,9 +192,9 @@ const dividerColor = computed(() => themeVars.value.dividerColor)
             </NFlex>
         </div>
 
-        <SelectUserModal v-model:show="showSelectUserModal" :only-user-department="false" />
+        <SelectUserModal v-model:show="modalStore.showSelectDutyUserModal" :only-user-department="false" />
         <SelectUserModal
-            v-model:show="showSelectNurseUserModal"
+            v-model:show="modalStore.showSelectNurseUserModal"
             target-path="/nurse/report"
             submit-label="Перейти к журналу пациентов"
             :with-exists-check="false"

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"