fix: issue with roles on profile page

frontend/src/components/Settings/Members.vue

@@ -15,7 +15,11 @@
 					:placeholder="__('Search')"
 					type="text"
 					:debounce="300"
-				/>
+				>
+					<template #prefix>
+						<Search class="size-4 stroke-1.5 text-ink-gray-6" />
+					</template>
+				</FormControl>
 				<Button @click="() => (showForm = !showForm)">
 					<template #prefix>
 						<Plus class="size-4 stroke-1.5" />
@@ -25,7 +29,7 @@
 			</div>
 		</div>
 
-		<div class="mt-2 pb-10 overflow-auto">
+		<div class="mt-5 pb-10 overflow-auto">
 			<!-- Member list -->
 			<div class="overflow-y-scroll">
 				<ul class="divide-y">
@@ -58,7 +62,7 @@
 							v-if="member.role && member.role !== 'LMS Student'"
 						>
 							<Shield class="size-4 stroke-1.5" />
-							<span>
+							<span class="text-sm">
 								{{ getRole(member.role) }}
 							</span>
 						</div>
@@ -123,7 +127,7 @@ import {
 } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, watch, reactive, inject } from 'vue'
-import { RefreshCw, Plus, X, Shield } from 'lucide-vue-next'
+import { RefreshCw, Plus, Search, Shield } from 'lucide-vue-next'
 import { useOnboarding } from 'frappe-ui/frappe'
 import type { User } from '@/components/Settings/types'
 

frontend/src/pages/Profile.vue

@@ -80,7 +80,7 @@
 					v-model="activeTab"
 				/>
 			</div>
-			<router-view :profile="profile" />
+			<router-view :profile="profile" :key="profile.data?.name" />
 		</div>
 	</div>
 	<EditProfile

frontend/src/pages/ProfileRoles.vue

@@ -45,7 +45,7 @@
 </template>
 <script setup>
 import { FormControl, createResource, toast } from 'frappe-ui'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { convertToTitleCase } from '@/utils'
 import { CircleAlert } from 'lucide-vue-next'
 
@@ -66,10 +66,9 @@ const roles = createResource({
 	url: 'lms.lms.utils.get_roles',
 	makeParams(values) {
 		return {
-			name: props.profile.data?.name,
+			name: values.member,
 		}
 	},
-	auto: true,
 	onSuccess(data) {
 		let roles = [
 			'moderator',
@@ -83,6 +82,16 @@ const roles = createResource({
 	},
 })
 
+watch(
+	() => props.profile,
+	(newValue) => {
+		roles.reload({
+			member: newValue.data?.name,
+		})
+	},
+	{ immediate: true }
+)
+
 const updateRole = createResource({
 	url: 'lms.lms.api.save_role',
 	makeParams(values) {
@@ -97,7 +106,10 @@ const updateRole = createResource({
 const changeRole = (role) => {
 	updateRole.submit(
 		{
-			role: convertToTitleCase(role.split('_').join(' ')),
+			role:
+				role == 'lms_student'
+					? 'LMS Student'
+					: convertToTitleCase(role.split('_').join(' ')),
 			value: eval(role).value,
 		},
 		{