From 0c0820a826b07e8a3e814ae5e0b26df94eb7b983 Mon Sep 17 00:00:00 2001
From: raizasafeel <89463672+raizasafeel@users.noreply.github.com>
Date: Tue, 17 Mar 2026 00:39:37 +0530
Subject: [PATCH] feat: update batch, course form to use new member modal

---
 frontend/src/pages/Batches/BatchForm.vue      | 18 ++++++++--
 .../Batches/components/NewBatchModal.vue      | 20 ++++++++---
 frontend/src/pages/Courses/CourseForm.vue     | 34 +++++++++++++++++--
 frontend/src/pages/Courses/NewCourseModal.vue | 18 ++++++++--
 4 files changed, 78 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/Batches/BatchForm.vue b/frontend/src/pages/Batches/BatchForm.vue
index 317030d6..b457f2dd 100644
--- a/frontend/src/pages/Batches/BatchForm.vue
+++ b/frontend/src/pages/Batches/BatchForm.vue
@@ -114,11 +114,12 @@
 					<div class="grid grid-cols-2 gap-5">
 						<MultiSelect
 							v-model="instructors"
-							doctype="Course Evaluator"
+							doctype="User"
 							:label="__('Instructors')"
 							:required="true"
-							:onCreate="(close) => openSettings('Evaluators', close)"
-							:filters="{ ignore_user_type: 1 }"
+							:onCreate="() => (showMemberModal = true)"
+							url="lms.lms.api.search_users_by_role"
+							:searchParams="{ roles: JSON.stringify(['Batch Evaluator']) }"
 						/>
 						<FormControl
 							v-model="batchDetail.doc.description"
@@ -274,6 +275,11 @@
 			</div>
 		</div>
 	</div>
+	<NewMemberModal
+		v-model="showMemberModal"
+		:defaultRoles="['batch_evaluator']"
+		@created="onInstructorCreated"
+	/>
 </template>
 <script setup>
 import {
@@ -310,6 +316,7 @@ import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import Link from '@/components/Controls/Link.vue'
 import BatchCourses from '@/pages/Batches/components/BatchCourses.vue'
 import Assessments from '@/pages/Batches/components/Assessments.vue'
+import NewMemberModal from '@/components/Modals/NewMemberModal.vue'
 
 const router = useRouter()
 const user = inject('$user')
@@ -321,6 +328,11 @@ const { capture } = useTelemetry()
 const { $dialog } = app.appContext.config.globalProperties
 const isDirty = ref(false)
 const originalDoc = ref(null)
+const showMemberModal = ref(false)
+
+const onInstructorCreated = (user) => {
+	instructors.value = [...instructors.value, user.name]
+}
 
 const meta = reactive({
 	description: '',
diff --git a/frontend/src/pages/Batches/components/NewBatchModal.vue b/frontend/src/pages/Batches/components/NewBatchModal.vue
index c98b4a6a..3ad3745d 100644
--- a/frontend/src/pages/Batches/components/NewBatchModal.vue
+++ b/frontend/src/pages/Batches/components/NewBatchModal.vue
@@ -83,11 +83,12 @@
 						/>
 						<MultiSelect
 							v-model="batch.instructors"
-							doctype="Course Evaluator"
+							doctype="User"
 							:label="__('Instructors')"
 							:required="true"
-							:onCreate="(close: () => void) => openSettings('Evaluators', close)"
-							:filters="{ ignore_user_type: 1 }"
+							:onCreate="() => (showMemberModal = true)"
+							url="lms.lms.api.search_users_by_role"
+							:searchParams="{ roles: JSON.stringify(['Batch Evaluator']) }"
 						/>
 					</div>
 					<div class="">
@@ -114,6 +115,11 @@
 			</div>
 		</template>
 	</Dialog>
+	<NewMemberModal
+		v-model="showMemberModal"
+		:defaultRoles="['batch_evaluator']"
+		@created="onInstructorCreated"
+	/>
 </template>
 <script setup lang="ts">
 import { Button, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
@@ -121,14 +127,16 @@ import { useOnboarding, useTelemetry } from 'frappe-ui/frappe'
 import { computed, inject, onMounted, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { cleanError, openSettings, sanitizeHTML, escapeHTML } from '@/utils'
-import Link from '@/components/Controls/Link.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
+import Link from '@/components/Controls/Link.vue'
+import NewMemberModal from '@/components/Modals/NewMemberModal.vue'
 
 const show = defineModel<boolean>({ required: true, default: false })
 const router = useRouter()
 const { capture } = useTelemetry()
 const { updateOnboardingStep } = useOnboarding('learning')
 const user = inject<any>('$user')
+const showMemberModal = ref(false)
 
 const props = defineProps<{
 	batches: any
@@ -164,6 +172,10 @@ const batch = ref<Batch>({
 	medium: null,
 })
 
+const onInstructorCreated = (user: any) => {
+	batch.value.instructors = [...batch.value.instructors, user.name]
+}
+
 const validateFields = () => {
 	batch.value.description = sanitizeHTML(batch.value.description)
 
diff --git a/frontend/src/pages/Courses/CourseForm.vue b/frontend/src/pages/Courses/CourseForm.vue
index 3639bf40..67602809 100644
--- a/frontend/src/pages/Courses/CourseForm.vue
+++ b/frontend/src/pages/Courses/CourseForm.vue
@@ -30,8 +30,16 @@
 								v-model="instructors"
 								doctype="User"
 								:label="__('Instructors')"
-								:filters="{ ignore_user_type: 1 }"
-								:onCreate="(close) => openSettings('Members', close)"
+								url="lms.lms.api.search_users_by_role"
+								:searchParams="{
+									roles: JSON.stringify(['Course Creator', 'Batch Evaluator']),
+								}"
+								:onCreate="
+									() => {
+										memberModalRoles = ['course_creator']
+										showMemberModal = true
+									}
+								"
 								:required="true"
 								@update:modelValue="makeFormDirty()"
 							/>
@@ -250,7 +258,10 @@
 									:label="__('Evaluator')"
 									:required="courseResource.doc.paid_certificate"
 									:onCreate="
-										(value, close) => openSettings('Evaluators', close)
+										() => {
+											memberModalRoles = ['batch_evaluator']
+											showMemberModal = true
+										}
 									"
 									@update:modelValue="makeFormDirty()"
 								/>
@@ -298,6 +309,11 @@
 			</div>
 		</div>
 	</div>
+	<NewMemberModal
+		v-model="showMemberModal"
+		:defaultRoles="memberModalRoles"
+		@created="onMemberCreated"
+	/>
 </template>
 <script setup>
 import {
@@ -332,6 +348,7 @@ import CourseOutline from '@/components/CourseOutline.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import ColorSwatches from '@/components/Controls/ColorSwatches.vue'
 import Uploader from '@/components/Controls/Uploader.vue'
+import NewMemberModal from '@/components/Modals/NewMemberModal.vue'
 
 const user = inject('$user')
 const newTag = ref('')
@@ -342,6 +359,8 @@ const related_courses = ref([])
 const app = getCurrentInstance()
 const { $dialog } = app.appContext.config.globalProperties
 const isDirty = ref(false)
+const showMemberModal = ref(false)
+const memberModalRoles = ref(['course_creator'])
 
 const props = defineProps({
 	course: {
@@ -410,6 +429,15 @@ const submitCourse = () => {
 	updateCourse()
 }
 
+const onMemberCreated = (user) => {
+	if (memberModalRoles.value.includes('batch_evaluator')) {
+		courseResource.doc.evaluator = user.name
+		makeFormDirty()
+	} else {
+		instructors.value = [...instructors.value, user.name]
+	}
+}
+
 const validateFields = () => {
 	courseResource.doc.description = sanitizeHTML(courseResource.doc.description)
 
diff --git a/frontend/src/pages/Courses/NewCourseModal.vue b/frontend/src/pages/Courses/NewCourseModal.vue
index 36d86ea3..fe262bd0 100644
--- a/frontend/src/pages/Courses/NewCourseModal.vue
+++ b/frontend/src/pages/Courses/NewCourseModal.vue
@@ -30,8 +30,11 @@
 						v-model="course.instructors"
 						doctype="User"
 						:label="__('Instructors')"
-						:filters="{ ignore_user_type: 1 }"
-						:onCreate="(close: () => void) => openSettings('Members', close)"
+						url="lms.lms.api.search_users_by_role"
+						:searchParams="{
+							roles: JSON.stringify(['Course Creator', 'Batch Evaluator']),
+						}"
+						:onCreate="() => (showMemberModal = true)"
 						:required="true"
 					/>
 					<Uploader
@@ -72,6 +75,11 @@
 			</div>
 		</template>
 	</Dialog>
+	<NewMemberModal
+		v-model="showMemberModal"
+		:defaultRoles="['course_creator']"
+		@created="onInstructorCreated"
+	/>
 </template>
 <script setup lang="ts">
 import { Button, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
@@ -82,6 +90,7 @@ import { cleanError, openSettings, sanitizeHTML, escapeHTML } from '@/utils'
 import Link from '@/components/Controls/Link.vue'
 import MultiSelect from '@/components/Controls/MultiSelect.vue'
 import Uploader from '@/components/Controls/Uploader.vue'
+import NewMemberModal from '@/components/Modals/NewMemberModal.vue'
 
 const show = defineModel<boolean>({ required: true, default: false })
 const router = useRouter()
@@ -89,6 +98,7 @@ const { capture } = useTelemetry()
 const { updateOnboardingStep } = useOnboarding('learning')
 const user = inject<any>('$user')
 const courseCreated = ref(false)
+const showMemberModal = ref(false)
 
 const props = defineProps<{
 	courses: any
@@ -112,6 +122,10 @@ const course = ref<Course>({
 	image: null,
 })
 
+const onInstructorCreated = (user: any) => {
+	course.value.instructors = [...course.value.instructors, user.name]
+}
+
 const validateFields = () => {
 	course.value.description = sanitizeHTML(course.value.description)