fix: lesson auto save

frontend/src/components/AppSidebar.vue

@@ -100,7 +100,7 @@ import { ChevronRight, Plus } from 'lucide-vue-next'
 import { createResource, Button } from 'frappe-ui'
 import PageModal from '@/components/Modals/PageModal.vue'
 
-const { user } = sessionStore()
+const { user, sidebarSettings } = sessionStore()
 const { userResource } = usersStore()
 const socket = inject('$socket')
 const unreadCount = ref(0)
@@ -115,6 +115,20 @@ onMounted(() => {
 		unreadNotifications.reload()
 	})
 	addNotifications()
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
+			},
+		}
+	)
 })
 
 const unreadNotifications = createResource({
@@ -153,21 +167,6 @@ const addNotifications = () => {
 	}
 }
 
-const sidebarSettings = createResource({
-	url: 'lms.lms.api.get_sidebar_settings',
-	cache: 'Sidebar Settings',
-	auto: true,
-	onSuccess(data) {
-		Object.keys(data).forEach((key) => {
-			if (!parseInt(data[key])) {
-				sidebarLinks.value = sidebarLinks.value.filter(
-					(link) => link.label.toLowerCase().split(' ').join('_') !== key
-				)
-			}
-		})
-	},
-})
-
 const openPageModal = (link) => {
 	showPageModal.value = true
 	pageToEdit.value = link

frontend/src/components/CourseOutline.vue

@@ -50,7 +50,7 @@
 							<div class="outline-lesson pl-8 py-2 pr-4">
 								<router-link
 									:to="{
-										name: allowEdit ? 'CreateLesson' : 'Lesson',
+										name: allowEdit ? 'LessonForm' : 'Lesson',
 										params: {
 											courseName: courseName,
 											chapterNumber: lesson.number.split('.')[0],
@@ -89,7 +89,7 @@
 					<div v-if="allowEdit" class="flex mt-2 mb-4 pl-8">
 						<router-link
 							:to="{
-								name: 'CreateLesson',
+								name: 'LessonForm',
 								params: {
 									courseName: courseName,
 									chapterNumber: chapter.idx,

frontend/src/components/MobileLayout.vue

@@ -4,14 +4,14 @@
 			<slot />
 		</div>
 		<div
-			v-if="tabs"
+			v-if="sidebarSettings.data"
 			class="fixed flex justify-around border-t border-gray-300 bottom-0 z-10 w-full bg-white standalone:pb-4"
 			:style="{
-				gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))`,
+				gridTemplateColumns: `repeat(${sidebarLinks.length}, minmax(0, 1fr))`,
 			}"
 		>
 			<button
-				v-for="tab in tabs"
+				v-for="tab in sidebarLinks"
 				:key="tab.label"
 				:class="isVisible(tab) ? 'block' : 'hidden'"
 				class="flex flex-col items-center justify-center py-3 transition active:scale-95"
@@ -29,21 +29,38 @@
 <script setup>
 import { getSidebarLinks } from '../utils'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/user'
 import * as icons from 'lucide-vue-next'
 
-const { logout, user } = sessionStore()
+const { logout, user, sidebarSettings } = sessionStore()
 let { isLoggedIn } = sessionStore()
 const router = useRouter()
 let { userResource } = usersStore()
+const sidebarLinks = ref(getSidebarLinks())
 
-const tabs = computed(() => {
-	let links = getSidebarLinks()
+onMounted(() => {
+	sidebarSettings.reload(
+		{},
+		{
+			onSuccess(data) {
+				Object.keys(data).forEach((key) => {
+					if (!parseInt(data[key])) {
+						sidebarLinks.value = sidebarLinks.value.filter(
+							(link) => link.label.toLowerCase().split(' ').join('_') !== key
+						)
+					}
+				})
+				addAccessLinks()
+			},
+		}
+	)
+})
 
+const addAccessLinks = () => {
 	if (user) {
-		links.push({
+		sidebarLinks.value.push({
 			label: 'Profile',
 			icon: 'UserRound',
 			activeFor: [
@@ -54,18 +71,17 @@ const tabs = computed(() => {
 				'ProfileRoles',
 			],
 		})
-		links.push({
+		sidebarLinks.value.push({
 			label: 'Log out',
 			icon: 'LogOut',
 		})
 	} else {
-		links.push({
+		sidebarLinks.value.push({
 			label: 'Log in',
 			icon: 'LogIn',
 		})
 	}
-	return links
-})
+}
 
 let isActive = (tab) => {
 	return tab.activeFor?.includes(router.currentRoute.value.name)