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="flex items-center justify-between">
+			<div class="mt-4 px-2 pt-1 border-t border-gray-200">
+				<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)
-	setTimeout(() => {
-		addNotifications()
-	}, 500)
+	addNotifications()
 })
 
 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>