feat: web pages for sidebar

frontend/src/components/AppSidebar.vue

@@ -16,8 +16,8 @@
 					class="mx-2 my-0.5"
 				/>
 			</div>
-			<div class="mt-4 mx-2 pt-1 border-t border-gray-200">
+			<div class="mt-4 px-2 pt-1 border-t border-gray-200">
-				<div class="flex items-center justify-between">
+				<div v-if="isModerator" class="flex items-center justify-between pl-2">
 					<span class="text-sm font-medium text-gray-600">
 						{{ __('Web Pages') }}
 					</span>
@@ -27,6 +27,14 @@
 						</template>
 					</Button>
 				</div>
+				<div v-if="sidebarSettings.data?.web_pages.length">
+					<SidebarLink
+						v-for="link in sidebarSettings.data.web_pages"
+						:link="link"
+						:isCollapsed="isSidebarCollapsed"
+						class="mx-2 my-0.5"
+					/>
+				</div>
 			</div>
 		</div>
 		<SidebarLink
@@ -47,6 +55,7 @@
 			</template>
 		</SidebarLink>
 	</div>
+	<PageModal v-model="showPageModal" v-model:reloadSidebar="sidebarSettings" />
 </template>
 
 <script setup>
@@ -54,27 +63,27 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
-import { ref, onMounted, inject } from 'vue'
+import { ref, onMounted, inject, watch } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { usersStore } from '@/stores/user'
+import { sessionStore } from '@/stores/session'
 import { Bell, Plus } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
+import PageModal from '@/components/Modals/PageModal.vue'
 
+const { user } = sessionStore()
 const { userResource } = usersStore()
-console.log(userResource)
 const socket = inject('$socket')
 const unreadCount = ref(0)
 const sidebarLinks = ref(getSidebarLinks())
 const showPageModal = ref(false)
+const isModerator = ref(false)
 
 onMounted(() => {
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
-	console.log(userResource.data)
+	addNotifications()
-	setTimeout(() => {
-		addNotifications()
-	}, 500)
 })
 
 const unreadNotifications = createResource({
@@ -84,7 +93,7 @@ const unreadNotifications = createResource({
 		return {
 			doctype: 'Notification Log',
 			filters: {
-				for_user: userResource.data?.email,
+				for_user: user,
 				read: 0,
 			},
 		}
@@ -98,11 +107,11 @@ const unreadNotifications = createResource({
 			return link
 		})
 	},
-	auto: userResource.data ? true : false,
+	auto: user ? true : false,
 })
 
 const addNotifications = () => {
-	if (userResource.data) {
+	if (user) {
 		sidebarLinks.value.push({
 			label: 'Notifications',
 			icon: Bell,
@@ -125,17 +134,6 @@ const sidebarSettings = createResource({
 				)
 			}
 		})
-		/* if (data.nav_items) {
-			data.nav_items.forEach((item) => {
-				sidebarLinks.value.push({
-					label: item.label,
-					icon: File,
-					to: item.url,
-					activeFor: [item.label],
-				})
-			})
-		} */
-		console.log(data)
 	},
 })
 
@@ -147,5 +145,11 @@ const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)
 }
 
+watch(userResource, () => {
+	if (userResource.data) {
+		isModerator.value = userResource.data.is_moderator
+	}
+})
+
 let isSidebarCollapsed = ref(getSidebarFromStorage())
 </script>

frontend/src/components/Controls/IconPicker.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="space-y-1.5">
+		<label class="block text-xs text-gray-600">
+			{{ label }}
+		</label>
+		<div class="w-full">
+			<Popover>
+				<template #target="{ togglePopover }">
+					<FormControl
+						v-model="selectedIcon"
+						@focus="openPopover(togglePopover)"
+						:placeholder="__('Choose an icon')"
+						class="w-full"
+					>
+						<template #prefix>
+							<component
+								v-if="selectedIcon"
+								class="w-4 h-4 text-gray-700 stroke-1.5"
+								:is="icons[selectedIcon]"
+							/>
+							<component
+								v-else
+								class="w-4 h-4 text-gray-700 stroke-1.5"
+								:is="icons.Folder"
+							/>
+						</template>
+					</FormControl>
+				</template>
+				<template #body-main="{ close, isOpen }" class="w-full">
+					<div class="p-3 max-h-56 overflow-auto w-full">
+						<FormControl
+							v-model="iconQuery"
+							:placeholder="__('Search for an icon')"
+							class="search-input"
+						/>
+						<div class="grid grid-cols-10 gap-4 mt-4">
+							<div v-for="(iconComponent, iconName) in filteredIcons">
+								<component
+									:is="iconComponent"
+									class="h-4 w-4 stroke-1.5 text-gray-700 cursor-pointer"
+									@click="setIcon(iconName, close)"
+								/>
+							</div>
+						</div>
+					</div>
+				</template>
+			</Popover>
+		</div>
+	</div>
+</template>
+<script setup>
+import { FormControl, Popover } from 'frappe-ui'
+import * as icons from 'lucide-vue-next'
+import { ref, computed } from 'vue'
+
+const iconQuery = ref('')
+const selectedIcon = ref('')
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const iconArray = ref(
+	Object.keys(icons)
+		.sort(() => 0.5 - Math.random())
+		.slice(0, 100)
+		.reduce((result, key) => {
+			result[key] = icons[key]
+			return result
+		}, {})
+)
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: 'Icon',
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
+})
+
+const setIcon = (icon, close) => {
+	emit('update:modelValue', icon)
+	selectedIcon.value = icon
+	iconQuery.value = ''
+	close()
+}
+
+const filteredIcons = computed(() => {
+	if (!iconQuery.value) {
+		return iconArray.value
+	}
+
+	return Object.keys(icons)
+		.filter((icon) =>
+			icon.toLowerCase().includes(iconQuery.value.toLowerCase())
+		)
+		.reduce((result, key) => {
+			result[key] = icons[key]
+			return result
+		}, {})
+})
+
+const openPopover = (togglePopover) => {
+	togglePopover()
+	setTimeout(() => {
+		document.querySelector('.search-input').focus()
+	}, 0)
+}
+</script>

frontend/src/components/Modals/PageModal.vue

@@ -3,22 +3,75 @@
 		v-model="show"
 		class="text-base"
 		:options="{
-			title: __('Apply for this job'),
+			title: __('Add web page to sidebar'),
 			size: 'lg',
 			actions: [
 				{
-					label: 'Submit',
+					label: 'Add',
 					variant: 'solid',
 					onClick: (close) => {
-						submitResume(close)
+						addWebPage(close)
 					},
 				},
 			],
 		}"
 	>
-		<template #body-content> </template>
+		<template #body-content>
+			<Link
+				v-model="page.webpage"
+				doctype="Web Page"
+				:label="__('Web Page')"
+				:filters="{
+					published: 1,
+				}"
+			/>
+			<IconPicker v-model="page.icon" :label="__('Icon')" class="mt-4" />
+		</template>
 	</Dialog>
 </template>
 <script setup>
-import { Dialog } from 'frappe-ui'
+import { Dialog, FormControl, createResource } from 'frappe-ui'
+import Link from '@/components/Controls/Link.vue'
+import { reactive } from 'vue'
+import IconPicker from '@/components/Controls/IconPicker.vue'
+import { showToast } from '@/utils'
+
+const topics = defineModel('reloadSidebar')
+const show = defineModel()
+const page = reactive({
+	icon: '',
+	webpage: '',
+})
+
+const webPage = createResource({
+	url: 'frappe.client.insert',
+	makeParams(values) {
+		return {
+			doc: {
+				doctype: 'LMS Sidebar Item',
+				web_page: page.webpage,
+				icon: page.icon,
+				parent: 'LMS Settings',
+				parentfield: 'sidebar_items',
+				parenttype: 'LMS Settings',
+			},
+		}
+	},
+})
+
+const addWebPage = (close) => {
+	webPage.submit(
+		{},
+		{
+			onSuccess() {
+				close()
+				showToast('Success', 'Web page added to sidebar', 'check')
+			},
+			onError(err) {
+				showToast('Error', err.message[0] || err, 'x')
+				close()
+			},
+		}
+	)
+}
 </script>

lms/lms/api.py

@@ -434,12 +434,12 @@ def get_sidebar_settings():
 	for item in items:
 		sidebar_items[item] = lms_settings.get(item)
 
-	if lms_settings.show_navbar_items:
+	if len(lms_settings.sidebar_items):
-		nav_items = frappe.get_all(
+		web_pages = frappe.get_all(
-			"Top Bar Item",
+			"LMS Sidebar Item",
-			["label", "url"],
+			{"parenttype": "LMS Settings", "parentfield": "sidebar_items"},
-			{"parenttype": "Website Settings", "parentfield": "top_bar_items"},
+			["web_page", "route", "title", "icon"],
 		)
-		sidebar_items.nav_items = nav_items
+		sidebar_items.web_pages = web_pages
 
 	return sidebar_items

lms/lms/doctype/lms_settings/lms_settings.json

@@ -48,7 +48,7 @@
   "statistics",
   "notifications",
   "section_break_qlss",
-  "show_navbar_items",
+  "sidebar_items",
   "mentor_request_tab",
   "mentor_request_section",
   "mentor_request_creation",
@@ -422,16 +422,16 @@
    "fieldtype": "Section Break"
   },
   {
-   "default": "0",
+   "fieldname": "sidebar_items",
-   "fieldname": "show_navbar_items",
+   "fieldtype": "Table",
-   "fieldtype": "Check",
+   "label": "Sidebar Items",
-   "label": "Show Navbar Items"
+   "options": "LMS Sidebar Item"
   }
  ],
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2024-05-28 18:29:31.609637",
+ "modified": "2024-05-31 20:17:07.362088",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Settings",

lms/lms/doctype/lms_sidebar_item/lms_sidebar_item.json

@@ -6,10 +6,10 @@
  "engine": "InnoDB",
  "field_order": [
   "web_page",
-  "route",
-  "column_break_glmh",
   "title",
-  "icon"
+  "column_break_glmh",
+  "icon",
+  "route"
  ],
  "fields": [
   {
@@ -19,48 +19,43 @@
   {
    "fieldname": "icon",
    "fieldtype": "Data",
-   "label": "Icon"
+   "in_list_view": 1,
+   "label": "Icon",
+   "read_only": 1,
+   "reqd": 1
   },
   {
    "fieldname": "web_page",
    "fieldtype": "Link",
+   "in_list_view": 1,
    "label": "Web Page",
-   "options": "Web Page"
+   "options": "Web Page",
+   "reqd": 1
   },
   {
    "fetch_from": "web_page.route",
    "fieldname": "route",
    "fieldtype": "Data",
+   "in_list_view": 1,
    "label": "Route"
   },
   {
    "fetch_from": "web_page.title",
    "fieldname": "title",
    "fieldtype": "Data",
+   "in_list_view": 1,
    "label": "Title"
   }
  ],
  "index_web_pages_for_search": 1,
+ "istable": 1,
  "links": [],
- "modified": "2024-05-29 17:14:30.525055",
+ "modified": "2024-05-31 20:19:14.629097",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Sidebar Item",
  "owner": "Administrator",
- "permissions": [
+ "permissions": [],
-  {
-   "create": 1,
-   "delete": 1,
-   "email": 1,
-   "export": 1,
-   "print": 1,
-   "read": 1,
-   "report": 1,
-   "role": "System Manager",
-   "share": 1,
-   "write": 1
-  }
- ],
  "sort_field": "creation",
  "sort_order": "DESC",
  "states": []

lms/lms/utils.py

@@ -646,14 +646,16 @@ def handle_notifications(doc, method):
 
 def create_notification_log(doc, topic):
 	users = []
-	print(topic.reference_doctype == "Course Lesson")
 	if topic.reference_doctype == "Course Lesson":
 		course = frappe.db.get_value("Course Lesson", topic.reference_docname, "course")
 		course_title = frappe.db.get_value("LMS Course", course, "title")
 		instructors = frappe.db.get_all(
 			"Course Instructor", {"parent": course}, pluck="instructor"
 		)
-		users.append(topic.owner)
+
+		if doc.owner != topic.owner:
+			users.append(topic.owner)
+
 		users += instructors
 		subject = _("New reply on the topic {0} in course {1}").format(
 			topic.title, course_title