fix: allow attaching payment information for batch enrollment

frontend/src/components/Controls/Autocomplete.vue

@@ -99,18 +99,17 @@
 												name="item-label"
 												v-bind="{ active, selected, option }"
 											>
-												<div class="flex flex-col space-y-1 text-ink-gray-8">
-													<div>
-														{{ option.label }}
+												<div class="flex flex-col gap-1 p-1">
+													<div class="text-base font-medium text-ink-gray-8">
+														{{
+															option.value == option.label
+																? option.description
+																: option.label
+														}}
+													</div>
+													<div class="text-sm text-ink-gray-5">
+														{{ option.value }}
 													</div>
-													<div
-														v-if="
-															option.description &&
-															option.description != option.label
-														"
-														class="text-xs text-ink-gray-7"
-														v-html="option.description"
-													></div>
 												</div>
 											</slot>
 										</li>

frontend/src/components/Modals/StudentModal.vue

@@ -2,7 +2,7 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Add a Student'),
+			title: __('Enroll a Student'),
 			size: 'sm',
 			actions: [
 				{
@@ -19,9 +19,24 @@
 					doctype="User"
 					v-model="student"
 					:filters="{ ignore_user_type: 1 }"
+					placeholder=" "
+					:label="__('Student')"
 					:onCreate="
-						(value, close) => {
-							openSettings('Members', close)
+						() => {
+							openSettings('Members')
+							show = false
+						}
+					"
+					:required="true"
+				/>
+				<Link
+					doctype="LMS Payment"
+					v-model="payment"
+					placeholder=" "
+					:label="__('Payment')"
+					:onCreate="
+						() => {
+							openSettings('Transactions')
 							show = false
 						}
 					"
@@ -31,15 +46,16 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, createResource, toast } from 'frappe-ui'
+import { call, Dialog, toast } from 'frappe-ui'
 import { ref, inject } from 'vue'
-import Link from '@/components/Controls/Link.vue'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { openSettings } from '@/utils'
+import Link from '@/components/Controls/Link.vue'
 
 const students = defineModel('reloadStudents')
 const batchModal = defineModel('batchModal')
-const student = ref()
+const student = ref(null)
+const payment = ref(null)
 const user = inject('$user')
 const { updateOnboardingStep } = useOnboarding('learning')
 const show = defineModel()
@@ -51,36 +67,28 @@ const props = defineProps({
 	},
 })
 
-const studentResource = createResource({
-	url: 'frappe.client.insert',
-	makeParams(values) {
-		return {
-			doc: {
-				doctype: 'LMS Batch Enrollment',
-				batch: props.batch,
-				member: student.value,
-			},
-		}
-	},
-})
-
 const addStudent = (close) => {
-	studentResource.submit(
-		{},
-		{
-			onSuccess() {
-				if (user.data?.is_system_manager)
-					updateOnboardingStep('add_batch_student')
+	call('frappe.client.insert', {
+		doc: {
+			doctype: 'LMS Batch Enrollment',
+			batch: props.batch,
+			member: student.value,
+			payment: payment.value,
+		},
+	})
+		.then(() => {
+			if (user.data?.is_system_manager)
+				updateOnboardingStep('add_batch_student')
 
-				students.value.reload()
-				batchModal.value.reload()
-				student.value = null
-				close()
-			},
-			onError(err) {
-				toast.error(err.messages?.[0] || err)
-			},
-		}
-	)
+			students.value.reload()
+			batchModal.value.reload()
+			student.value = null
+			payment.value = null
+			close()
+		})
+		.catch((err) => {
+			toast.error(err.messages?.[0] || err)
+			console.error(err)
+		})
 }
 </script>