Merge branch 'develop' of https://github.com/frappe/lms into video-player

frontend/src/components/Controls/IconPicker.vue

@@ -60,7 +60,7 @@ 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())
@@ -84,7 +84,6 @@ const props = defineProps({
 
 onMounted(() => {
 	selectedIcon.value = props.modelValue
-	console.log(search.value)
 })
 
 const setIcon = (icon, close) => {
@@ -111,9 +110,5 @@ const filteredIcons = computed(() => {
 
 const openPopover = (togglePopover) => {
 	togglePopover()
-	nextTick(() => {
-		/* search.value.focus() */
-		console.log(search.value.children)
-	})
 }
 </script>

frontend/src/pages/CreateCourse.vue

@@ -377,7 +377,7 @@ const submitCourse = () => {
 				})
 			},
 			onError(err) {
-				showToast(err)
+				showToast('Error', err.messages?.[0] || err, 'x')
 			},
 		})
 	}

frontend/src/pages/CreateLesson.vue

@@ -69,26 +69,18 @@
 	</div>
 </template>
 <script setup>
-import {
-	Breadcrumbs,
-	FormControl,
-	createResource,
-	Button,
-	createDocumentResource,
-} from 'frappe-ui'
+import { Breadcrumbs, FormControl, createResource, Button } from 'frappe-ui'
 import { computed, reactive, onMounted, inject, ref, watch } from 'vue'
 import EditorJS from '@editorjs/editorjs'
 import { createToast } from '../utils'
 import LessonPlugins from '@/components/LessonPlugins.vue'
 import { getEditorTools } from '../utils'
 import { ChevronRight } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
 
 const editor = ref(null)
 const instructorEditor = ref(null)
 const user = inject('$user')
 const openInstructorEditor = ref(false)
-const router = useRouter()
 
 const props = defineProps({
 	courseName: {

frontend/src/pages/Lesson.vue

@@ -146,7 +146,7 @@
 				</div>
 				<div class="mt-20">
 					<Discussions
-						v-if="allowDiscussions()"
+						v-if="allowDiscussions"
 						:title="'Questions'"
 						:doctype="'Course Lesson'"
 						:docname="lesson.data.name"
@@ -185,7 +185,7 @@
 </template>
 <script setup>
 import { createResource, Breadcrumbs, Button } from 'frappe-ui'
-import { computed, watch, ref, inject, createApp } from 'vue'
+import { computed, watch, inject, ref } from 'vue'
 import CourseOutline from '@/components/CourseOutline.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { useRoute } from 'vue-router'
@@ -198,7 +198,9 @@ import CourseInstructors from '@/components/CourseInstructors.vue'
 
 const user = inject('$user')
 const route = useRoute()
-let editor, instructorEditor
+const allowDiscussions = ref(false)
+const editor = ref(null)
+const instructorEditor = ref(null)
 
 const props = defineProps({
 	courseName: {
@@ -228,13 +230,21 @@ const lesson = createResource({
 	auto: true,
 	onSuccess(data) {
 		markProgress(data)
-
-		if (data.content) editor = renderEditor('editor', data.content)
+		if (data.content) editor.value = renderEditor('editor', data.content)
 		if (data.instructor_content?.blocks?.length)
-			instructorEditor = renderEditor(
+			instructorEditor.value = renderEditor(
 				'instructor-content',
 				data.instructor_content
 			)
+		editor.value?.isReady.then(() => {
+			checkIfDiscussionsAllowed()
+		})
+
+		if (!editor.value && data.body) {
+			const quizRegex = /\{\{ Quiz\(".*"\) \}\}/
+			const hasQuiz = quizRegex.test(data.body)
+			if (!hasQuiz) allowDiscussions.value = true
+		}
 	},
 })
 
@@ -292,6 +302,9 @@ watch(
 		[oldChapterNumber, oldLessonNumber]
 	) => {
 		if (newChapterNumber || newLessonNumber) {
+			editor.value = null
+			instructorEditor.value = null
+			allowDiscussions.value = false
 			lesson.submit({
 				chapter: newChapterNumber,
 				lesson: newLessonNumber,
@@ -300,12 +313,19 @@ watch(
 	}
 )
 
-const allowDiscussions = () => {
-	return (
-		lesson.data?.membership ||
-		user.data?.is_moderator ||
-		user.data?.is_instructor
+const checkIfDiscussionsAllowed = () => {
+	let quizPresent = false
+	JSON.parse(lesson.data?.content)?.blocks?.forEach((block) => {
+		if (block.type === 'quiz') quizPresent = true
+	})
+
+	if (
+		!quizPresent &&
+		(lesson.data?.membership ||
+			user.data?.is_moderator ||
+			user.data?.is_instructor)
 	)
+		allowDiscussions.value = true
 }
 
 const allowEdit = () => {

frontend/src/pages/Profile.vue

@@ -87,7 +87,7 @@
 </template>
 <script setup>
 import { Breadcrumbs, createResource, Button, TabButtons } from 'frappe-ui'
-import { computed, inject, reactive, ref, onMounted, watchEffect } from 'vue'
+import { computed, inject, watch, ref, onMounted, watchEffect } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { Edit } from 'lucide-vue-next'
 import UserAvatar from '@/components/UserAvatar.vue'
@@ -119,11 +119,13 @@ onMounted(() => {
 
 const profile = createResource({
 	url: 'frappe.client.get',
-	params: {
-		doctype: 'User',
-		filters: {
-			username: props.username,
-		},
+	makeParams(values) {
+		return {
+			doctype: 'User',
+			filters: {
+				username: props.username,
+			},
+		}
 	},
 })
 
@@ -165,6 +167,13 @@ watchEffect(() => {
 	}
 })
 
+watch(
+	() => props.username,
+	() => {
+		profile.reload()
+	}
+)
+
 const editProfile = () => {
 	showProfileModal.value = true
 }

frontend/src/pages/ProfileAbout.vue

@@ -12,12 +12,12 @@
 			{{ __('No introduction') }}
 		</div>
 	</div>
-	<div class="mt-7 mb-10">
+	<div class="mt-7 mb-10" v-if="badges.data">
 		<h2 class="mb-3 text-lg font-semibold text-gray-900">
 			{{ __('Achievements') }}
 		</h2>
 		<div class="grid grid-cols-5 gap-4">
-			<div v-if="badges.data" v-for="badge in badges.data">
+			<div v-for="badge in badges.data">
 				<Popover trigger="hover" :leaveDelay="Number(0.01)">
 					<template #target>
 						<div class="relative">
@@ -67,18 +67,24 @@
 											size="sm"
 											@click="shareOnSocial(badge, 'LinkedIn')"
 										>
-											<template #icon>
-												<LinkedinIcon
-													class="h-3 w-3 stroke-1.5 text-gray-700"
-												/>
+											<template #prefix>
+												<LinkedinIcon class="h-3 w-3 text-gray-700" />
 											</template>
+											<span class="text-xs">
+												{{ __('LinkedIn') }}
+											</span>
 										</Button>
 										<Button
 											variant="outline"
 											size="sm"
 											@click="shareOnSocial(badge, 'Twitter')"
 										>
-											<Twitter class="h-3 w-3 stroke-1.5 text-gray-700" />
+											<template #prefix>
+												<Twitter class="h-3 w-3 text-gray-700" />
+											</template>
+											<span class="text-xs">
+												{{ __('Twitter') }}
+											</span>
 										</Button>
 									</div>
 								</div>