modified: .gitignore

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

@@ -1,7 +1,7 @@
 <script setup>
 import { NSelect, NModal, NForm, NFormItem, NButton, NAlert } from 'naive-ui'
 import {useReportStore} from "../../../Stores/report.js";
-import {computed, onMounted, ref, watch} from "vue";
+import {computed, ref, watch} from "vue";
 import {router, Link} from "@inertiajs/vue3";
 import {useDebounceFn} from "@vueuse/core";
 const show = defineModel('show')
@@ -10,6 +10,8 @@ const formRef = ref()
 
 const rawUsers = ref([])
 const rawDepartments = ref([])
+const usersLoaded = ref(false)
+const departmentsLoaded = ref(false)
 const reportExists = ref(false)
 const existingReportId = ref(null)
 
@@ -24,16 +26,20 @@ const departments = computed(() => rawDepartments.value.map(itm => ({
 })))
 
 const fetchUsers = () => {
+    if (usersLoaded.value) return
     axios.get('/api/mis/department-users')
         .then((res) => {
             rawUsers.value = res.data
+            usersLoaded.value = true
         })
 }
 
 const fetchDepartments = () => {
+    if (departmentsLoaded.value) return
     axios.get('/api/app/departments')
         .then((res) => {
             rawDepartments.value = res.data
+            departmentsLoaded.value = true
         })
 }
 
@@ -104,12 +110,14 @@ const rules = {
     },
 }
 
-onMounted(() => {
+watch(() => show.value, (opened) => {
+    if (!opened) return
+
     reportStore.reportInfo.userId = null
     reportStore.reportInfo.departmentId = null
     fetchUsers()
     fetchDepartments()
-})
+}, {immediate: false})
 
 const onSubmit = (e) => {
     e.preventDefault()