feat: edit and delete sidebar item

frontend/package.json

@@ -22,7 +22,7 @@
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
     "frappe-ui": "^0.1.56",
-    "lucide-vue-next": "^0.309.0",
+    "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
     "socket.io-client": "^4.7.2",

frontend/src/components/AppSidebar.vue

@@ -16,8 +16,14 @@
 					class="mx-2 my-0.5"
 				/>
 			</div>
-			<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">
+			<div
+				v-if="sidebarSettings.data?.web_pages?.length || isModerator"
+				class="mt-4 pt-1 border-t border-gray-200"
+			>
+				<div
+					v-if="isModerator"
+					class="flex items-center justify-between pl-4 pr-2"
+				>
 					<span class="text-sm font-medium text-gray-600">
 						{{ __('Web Pages') }}
 					</span>
@@ -27,12 +33,18 @@
 						</template>
 					</Button>
 				</div>
-				<div v-if="sidebarSettings.data?.web_pages.length">
+				<div
+					v-if="sidebarSettings.data?.web_pages?.length"
+					class="flex flex-col overflow-y-auto"
+				>
 					<SidebarLink
 						v-for="link in sidebarSettings.data.web_pages"
 						:link="link"
 						:isCollapsed="isSidebarCollapsed"
 						class="mx-2 my-0.5"
+						:showControls="isModerator ? true : false"
+						@openModal="openPageModal"
+						@deletePage="deletePage"
 					/>
 				</div>
 			</div>
@@ -55,7 +67,11 @@
 			</template>
 		</SidebarLink>
 	</div>
-	<PageModal v-model="showPageModal" v-model:reloadSidebar="sidebarSettings" />
+	<PageModal
+		v-model="showPageModal"
+		v-model:reloadSidebar="sidebarSettings"
+		:page="pageToEdit"
+	/>
 </template>
 
 <script setup>
@@ -67,7 +83,7 @@ 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 { Plus } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 
@@ -78,6 +94,7 @@ const unreadCount = ref(0)
 const sidebarLinks = ref(getSidebarLinks())
 const showPageModal = ref(false)
 const isModerator = ref(false)
+const pageToEdit = ref(null)
 
 onMounted(() => {
 	socket.on('publish_lms_notifications', (data) => {
@@ -114,7 +131,7 @@ const addNotifications = () => {
 	if (user) {
 		sidebarLinks.value.push({
 			label: 'Notifications',
-			icon: Bell,
+			icon: 'Bell',
 			to: 'Notifications',
 			activeFor: ['Notifications'],
 			count: unreadCount.value,
@@ -137,8 +154,27 @@ const sidebarSettings = createResource({
 	},
 })
 
-const openPageModal = () => {
+const openPageModal = (link) => {
 	showPageModal.value = true
+	pageToEdit.value = link
+}
+
+const deletePage = (link) => {
+	createResource({
+		url: 'lms.lms.api.delete_sidebar_item',
+		makeParams(values) {
+			return {
+				webpage: link.web_page,
+			}
+		},
+	}).submit(
+		{},
+		{
+			onSuccess() {
+				sidebarSettings.reload()
+			},
+		}
+	)
 }
 
 const getSidebarFromStorage = () => {

frontend/src/components/Controls/IconPicker.vue

@@ -6,32 +6,35 @@
 		<div class="w-full">
 			<Popover>
 				<template #target="{ togglePopover }">
-					<FormControl
-						v-model="selectedIcon"
-						@focus="openPopover(togglePopover)"
-						:placeholder="__('Choose an icon')"
-						class="w-full"
+					<button
+						@click="openPopover(togglePopover)"
+						class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
 					>
-						<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>
+						<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"
+						/>
+						<span v-if="selectedIcon">
+							{{ selectedIcon }}
+						</span>
+						<span v-else class="text-gray-600">
+							{{ __('Choose an icon') }}
+						</span>
+					</button>
 				</template>
 				<template #body-main="{ close, isOpen }" class="w-full">
 					<div class="p-3 max-h-56 overflow-auto w-full">
 						<FormControl
+							ref="search"
 							v-model="iconQuery"
 							:placeholder="__('Search for an icon')"
-							class="search-input"
+							autocomplete="off"
 						/>
 						<div class="grid grid-cols-10 gap-4 mt-4">
 							<div v-for="(iconComponent, iconName) in filteredIcons">
@@ -51,12 +54,13 @@
 <script setup>
 import { FormControl, Popover } from 'frappe-ui'
 import * as icons from 'lucide-vue-next'
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 
 const iconQuery = ref('')
 const selectedIcon = ref('')
+const search = ref(null)
 const emit = defineEmits(['update:modelValue', 'change'])
-
+console.log(icons)
 const iconArray = ref(
 	Object.keys(icons)
 		.sort(() => 0.5 - Math.random())
@@ -78,6 +82,11 @@ const props = defineProps({
 	},
 })
 
+onMounted(() => {
+	selectedIcon.value = props.modelValue
+	console.log(search.value)
+})
+
 const setIcon = (icon, close) => {
 	emit('update:modelValue', icon)
 	selectedIcon.value = icon
@@ -102,8 +111,9 @@ const filteredIcons = computed(() => {
 
 const openPopover = (togglePopover) => {
 	togglePopover()
-	setTimeout(() => {
-		document.querySelector('.search-input').focus()
-	}, 0)
+	nextTick(() => {
+		/* search.value.focus() */
+		console.log(search.value.children)
+	})
 }
 </script>

frontend/src/components/Modals/PageModal.vue

@@ -30,40 +30,53 @@
 	</Dialog>
 </template>
 <script setup>
-import { Dialog, FormControl, createResource } from 'frappe-ui'
+import { Dialog, createResource } from 'frappe-ui'
 import Link from '@/components/Controls/Link.vue'
-import { reactive } from 'vue'
+import { reactive, watch } from 'vue'
 import IconPicker from '@/components/Controls/IconPicker.vue'
 import { showToast } from '@/utils'
 
-const topics = defineModel('reloadSidebar')
+const sidebar = defineModel('reloadSidebar')
 const show = defineModel()
 const page = reactive({
 	icon: '',
 	webpage: '',
 })
 
+const props = defineProps({
+	page: {
+		type: Object,
+		default: null,
+	},
+})
+
 const webPage = createResource({
-	url: 'frappe.client.insert',
+	url: 'lms.lms.api.update_sidebar_item',
 	makeParams(values) {
 		return {
-			doc: {
-				doctype: 'LMS Sidebar Item',
-				web_page: page.webpage,
-				icon: page.icon,
-				parent: 'LMS Settings',
-				parentfield: 'sidebar_items',
-				parenttype: 'LMS Settings',
-			},
+			webpage: page.webpage,
+			icon: page.icon,
 		}
 	},
 })
 
+watch(
+	() => props.page,
+	(newPage) => {
+		if (newPage) {
+			page.icon = newPage.icon
+			page.webpage = newPage.web_page
+		}
+	},
+	{ immediate: true }
+)
+
 const addWebPage = (close) => {
 	webPage.submit(
 		{},
 		{
 			onSuccess() {
+				sidebar.value.reload()
 				close()
 				showToast('Success', 'Web page added to sidebar', 'check')
 			},

frontend/src/components/SidebarLink.vue

@@ -6,14 +6,14 @@
 		@click="handleClick"
 	>
 		<div
-			class="flex items-center w-full duration-300 ease-in-out"
+			class="flex items-center w-full duration-300 ease-in-out group"
 			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
 		>
 			<Tooltip :text="link.label" placement="right">
 				<slot name="icon">
 					<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
 						<component
-							:is="link.icon"
+							:is="icons[link.icon]"
 							class="h-4 w-4 stroke-1.5 text-gray-800"
 						/>
 					</span>
@@ -32,16 +32,32 @@
 			<span v-if="link.count" class="!ml-auto block text-xs text-gray-600">
 				{{ link.count }}
 			</span>
+			<div
+				v-if="showControls"
+				class="flex items-center space-x-2 !ml-auto block text-xs text-gray-600 group-hover:visible invisible"
+			>
+				<component
+					:is="icons['Edit']"
+					class="h-3 w-3 stroke-1.5 text-gray-800"
+					@click.stop="openModal(link)"
+				/>
+				<component
+					:is="icons['X']"
+					class="h-3 w-3 stroke-1.5 text-gray-800"
+					@click.stop="deletePage(link)"
+				/>
+			</div>
 		</div>
 	</button>
 </template>
-
 <script setup>
-import { Tooltip } from 'frappe-ui'
-import { computed } from 'vue'
+import { Tooltip, Button } from 'frappe-ui'
+import { computed, defineEmits } from 'vue'
 import { useRouter } from 'vue-router'
+import * as icons from 'lucide-vue-next'
 
 const router = useRouter()
+const emit = defineEmits(['openModal', 'deletePage'])
 
 const props = defineProps({
 	link: {
@@ -52,17 +68,29 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	showControls: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 function handleClick() {
-	if (props.link.to.includes('/')) {
-		window.location.href = props.link.to
-	} else {
+	if (router.hasRoute(props.link.to)) {
 		router.push({ name: props.link.to })
+	} else {
+		window.location.href = `/${props.link.to}`
 	}
 }
 
-let isActive = computed(() => {
+const isActive = computed(() => {
 	return props.link?.activeFor?.includes(router.currentRoute.value.name)
 })
+
+const openModal = (link) => {
+	emit('openModal', link)
+}
+
+const deletePage = (link) => {
+	emit('deletePage', link)
+}
 </script>

frontend/src/utils/index.js

@@ -1,13 +1,5 @@
 import { toast } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
-import {
-	BookOpen,
-	Users,
-	TrendingUp,
-	Briefcase,
-	GraduationCap,
-	Bell,
-} from 'lucide-vue-next'
 import { Quiz } from '@/utils/quiz'
 import { Upload } from '@/utils/upload'
 import Header from '@editorjs/header'
@@ -331,31 +323,31 @@ export function getSidebarLinks() {
 	return [
 		{
 			label: 'Courses',
-			icon: BookOpen,
+			icon: 'BookOpen',
 			to: 'Courses',
 			activeFor: ['Courses', 'CourseDetail', 'Lesson'],
 		},
 		{
 			label: 'Batches',
-			icon: Users,
+			icon: 'Users',
 			to: 'Batches',
 			activeFor: ['Batches', 'BatchDetail', 'Batch'],
 		},
 		{
 			label: 'Certified Participants',
-			icon: GraduationCap,
+			icon: 'GraduationCap',
 			to: 'CertifiedParticipants',
 			activeFor: ['CertifiedParticipants'],
 		},
 		{
 			label: 'Jobs',
-			icon: Briefcase,
+			icon: 'Briefcase',
 			to: 'Jobs',
 			activeFor: ['Jobs', 'JobDetail'],
 		},
 		{
 			label: 'Statistics',
-			icon: TrendingUp,
+			icon: 'TrendingUp',
 			to: 'Statistics',
 			activeFor: ['Statistics'],
 		},