feat: add new member

frontend/src/components/Members.vue

@@ -9,23 +9,54 @@
 					{{ __(description) }}
 				</div>
 			</div>
-            <FormControl v-model="search" :placeholder="__('Search')" type="text" :debounce="300"/>
+			<div class="flex item-center space-x-2">
+				<FormControl
+					v-model="search"
+					:placeholder="__('Search')"
+					type="text"
+					:debounce="300"
+				/>
+				<Button @click="() => (showForm = true)">
+					<template #icon>
+						<component :is="icons['Plus']" class="h-3 w-3 stroke-1.5" />
+					</template>
+				</Button>
+			</div>
 		</div>
 		<div class="my-4">
-
 			<!-- Form to add new member -->
 			<div v-if="showForm" class="flex items-center space-x-2 mb-4">
-                <FormControl v-model="member.email" :placeholder="__('Email')" type="email" class="w-full"/>
+				<FormControl
-                <FormControl v-model="member.first_name" :placeholder="__('First Name')" type="test" class="w-full"/>
+					v-model="member.email"
-                <Button @click="addMember" variant="subtle">
+					:placeholder="__('Email')"
+					type="email"
+					class="w-full"
+				/>
+				<FormControl
+					v-model="member.first_name"
+					:placeholder="__('First Name')"
+					type="test"
+					class="w-full"
+				/>
+				<Button @click="addMember()" variant="subtle">
 					{{ __('Add') }}
 				</Button>
 			</div>
 
 			<!-- Member list -->
-            <div v-for="member in memberList" class="grid grid-cols-5 grid-flow-row py-2 cursor-pointer">
+			<div
-                <div @click="openProfile(member.username)" class="flex items-center space-x-2 col-span-2">
+				v-for="member in memberList"
-                    <Avatar :image="member.user_image" :label="member.full_name" size="sm" />
+				class="grid grid-cols-5 grid-flow-row py-2 cursor-pointer"
+			>
+				<div
+					@click="openProfile(member.username)"
+					class="flex items-center space-x-2 col-span-2"
+				>
+					<Avatar
+						:image="member.user_image"
+						:label="member.full_name"
+						size="sm"
+					/>
 					<div>
 						{{ member.full_name }}
 					</div>
@@ -41,10 +72,7 @@
 		<div v-if="hasNextPage" class="flex justify-center">
 			<Button variant="solid" @click="members.reload()">
 				<template #prefix>
-                        <component
+					<component :is="icons['RefreshCw']" class="h-3 w-3 stroke-1.5" />
-                            :is="icons['RefreshCw']"
-                            class="h-3 w-3 stroke-1.5"
-                        />
 				</template>
 				{{ __('Load More') }}
 			</Button>
@@ -58,12 +86,13 @@ import { useRouter } from 'vue-router'
 import { ref, watch, reactive } from 'vue'
 
 const router = useRouter()
-const show = defineModel("show")
+const show = defineModel('show')
 const search = ref('')
 const start = ref(0)
 const memberList = ref([])
 const hasNextPage = ref(false)
-const showForm = ref(true)
+const showForm = ref(false)
+
 const member = reactive({
 	email: '',
 	first_name: '',
@@ -84,11 +113,11 @@ const props = defineProps({
 })
 
 const members = createResource({
-    url: "lms.lms.api.get_members",
+	url: 'lms.lms.api.get_members',
 	makeParams: () => {
 		return {
 			search: search.value,
-            start: start.value
+			start: start.value,
 		}
 	},
 	onSuccess(data) {
@@ -109,6 +138,32 @@ const openProfile = (username) => {
 	})
 }
 
+const newMember = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'User',
+				first_name: member.first_name,
+				email: member.email,
+			},
+		}
+	},
+	auto: false,
+	onSuccess(data) {
+		show.value = false
+		router.push({
+			name: 'Profile',
+			params: {
+				username: data.username,
+			},
+		})
+	},
+})
+
+const addMember = () => {
+	newMember.reload()
+}
 
 watch(search, () => {
 	memberList.value = []
@@ -120,10 +175,9 @@ const getRole = (role) => {
 	const map = {
 		'LMS Student': 'Student',
 		'Course Creator': 'Instructor',
-       'Moderator': 'Moderator',
+		Moderator: 'Moderator',
-       'Batch Evaluator': 'Evaluator'
+		'Batch Evaluator': 'Evaluator',
 	}
 	return map[role]
 }
-
 </script>

frontend/src/components/Modals/Settings.vue

@@ -28,13 +28,22 @@
 						</nav>
 					</div>
 				</div>
-				<div v-if="activeTab && data.doc" class="flex flex-1 flex-col overflow-y-auto">
+				<div
-					<Members v-if="activeTab.label === 'Members'" :label="activeTab.label" :description="activeTab.description" v-model:show="show"/>
+					v-if="activeTab && data.doc"
+					class="flex flex-1 flex-col overflow-y-auto"
+				>
+					<Members
+						v-if="activeTab.label === 'Members'"
+						:label="activeTab.label"
+						:description="activeTab.description"
+						v-model:show="show"
+					/>
 					<SettingDetails
 						v-else
 						:fields="activeTab.fields"
-						:data="data"
 						:label="activeTab.label"
+						:description="activeTab.description"
+						:data="data"
 					/>
 				</div>
 			</div>
@@ -66,9 +75,16 @@ const tabs = computed(() => {
 			label: 'Settings',
 			hideLabel: true,
 			items: [
+				{
+					label: 'Members',
+					description: 'Manage the members of your learning system',
+					icon: 'UserRoundPlus',
+				},
 				{
 					label: 'Payment Gateway',
 					icon: 'DollarSign',
+					description:
+						'Configure the payment gateway and other payment related settings',
 					fields: [
 						{
 							label: 'Razorpay Key',
@@ -115,6 +131,7 @@ const tabs = computed(() => {
 				{
 					label: 'Sidebar',
 					icon: 'PanelLeftIcon',
+					description: 'Customize the sidebar as per your needs',
 					fields: [
 						{
 							label: 'Courses',
@@ -160,6 +177,7 @@ const tabs = computed(() => {
 				{
 					label: 'Email Templates',
 					icon: 'MailPlus',
+					description: 'Create email templates with the content you want',
 					fields: [
 						{
 							label: 'Batch Confirmation Template',
@@ -190,9 +208,11 @@ const tabs = computed(() => {
 				{
 					label: 'Signup',
 					icon: 'LogIn',
+					description:
+						'Customize the signup page to inform users about your terms and policies',
 					fields: [
 						{
-							label: 'Show terms of use on signup page',
+							label: 'Show terms of use on signup',
 							name: 'terms_of_use',
 							type: 'checkbox',
 						},
@@ -203,15 +223,7 @@ const tabs = computed(() => {
 							doctype: 'Web Page',
 						},
 						{
-							label: 'Ask user category during signup',
+							label: 'Show privacy policy on signup',
-							name: 'user_category',
-							type: 'checkbox',
-						},
-						{
-							type: 'Column Break',
-						},
-						{
-							label: 'Show privacy policy on signup page',
 							name: 'privacy_policy',
 							type: 'checkbox',
 						},
@@ -225,7 +237,7 @@ const tabs = computed(() => {
 							type: 'Column Break',
 						},
 						{
-							label: 'Show cookie policy on signup page',
+							label: 'Show cookie policy on signup',
 							name: 'cookie_policy',
 							type: 'checkbox',
 						},
@@ -235,19 +247,13 @@ const tabs = computed(() => {
 							type: 'Link',
 							doctype: 'Web Page',
 						},
-					],
+						{
+							label: 'Ask user category during signup',
+							name: 'user_category',
+							type: 'checkbox',
 						},
 					],
 				},
-		{
-			label: 'Settings',
-			hideLabel: true,
-			items: [
-			{
-				label: 'Members',
-				description: 'Manage the members of your learning system',
-				icon: "UserRoundPlus",
-			},
 			],
 		},
 	]

frontend/src/components/SettingDetails.vue

@@ -1,6 +1,14 @@
 <template>
-	<div class="flex flex-col justify-between h-full p-8">
+	<div class="flex flex-col justify-between h-full p-4">
-		<div class="flex space-x-8">
+		<div>
+			<div class="font-semibold mb-1">
+				{{ __(label) }}
+			</div>
+			<div class="text-xs text-gray-600">
+				{{ __(description) }}
+			</div>
+		</div>
+		<div class="flex space-x-8 my-5">
 			<div v-for="(column, index) in columns" :key="index">
 				<div class="flex flex-col space-y-4 w-60">
 					<div v-for="field in column">
@@ -43,6 +51,13 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	label: {
+		type: String,
+		required: true,
+	},
+	description: {
+		type: String,
+	},
 })
 
 const columns = computed(() => {

lms/lms/api.py

@@ -563,19 +563,22 @@ def get_categories(doctype, filters):
 
 	return categoryOptions
 
+
 @frappe.whitelist()
 def get_members(start=0, search=""):
-	filters = {
+	filters = {"enabled": 1, "name": ["not in", ["Administrator", "Guest"]]}
-			"enabled": 1,
-			"name": ["not in", ["Administrator", "Guest"]]
-		}
 
 	if search:
 		filters["full_name"] = ["like", f"%{search}%"]
 
 	print(filters)
-	members = frappe.get_all("User", filters=filters, fields=["name", "full_name", "user_image", "username"],
+	members = frappe.get_all(
-	page_length=20, start=start)
+		"User",
+		filters=filters,
+		fields=["name", "full_name", "user_image", "username"],
+		page_length=20,
+		start=start,
+	)
 
 	for member in members:
 		roles = frappe.get_roles(member.name)
@@ -589,6 +592,3 @@ def get_members(start=0, search=""):
 			member.role = "LMS Student"
 
 	return members
-		
-
-	

lms/overrides/user.py

@@ -16,6 +16,9 @@ class CustomUser(User):
 		super().validate()
 		self.validate_username_duplicates()
 
+	def after_insert(self):
+		self.add_roles("LMS Student")
+
 	def validate_username_duplicates(self):
 		while not self.username or self.username_exists():
 			self.username = append_number_if_name_exists(