Merge pull request #1386 from pateljannat/issues-85

fix: misc issues

frontend/src/components/AppSidebar.vue

@@ -109,7 +109,8 @@ import { sessionStore } from '@/stores/session'
 import { useSidebar } from '@/stores/sidebar'
 import { useSettings } from '@/stores/settings'
 import { ChevronRight, Plus } from 'lucide-vue-next'
-import { Button, createResource, TrialBanner } from 'frappe-ui'
+import { Button, createResource } from 'frappe-ui'
+import { TrialBanner } from 'frappe-ui/frappe'
 import PageModal from '@/components/Modals/PageModal.vue'
 
 const { user, sidebarSettings } = sessionStore()

frontend/src/components/Assignment.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="assignment.data"
-		class="grid grid-cols-[65%,35%] h-full"
+		class="grid grid-cols-[60%,40%] h-full"
 		:class="{ 'border rounded-lg': !showTitle }"
 	>
 		<div class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]">
@@ -115,7 +115,13 @@
 						:readonly="!canModifyAssignment"
 					/>
 				</div>
-				<div v-else>
+				<div v-if="true">
+					<div class="text-sm mb-4">
+						{{ __('Write your answer here') }}
+					</div>
+					<FormControl />
+				</div>
+				<!-- <div v-else>
 					<div class="text-sm mb-4">
 						{{ __('Write your answer here') }}
 					</div>
@@ -126,7 +132,7 @@
 						:fixedMenu="true"
 						editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
 					/>
-				</div>
+				</div> -->
 
 				<div
 					v-if="

frontend/src/components/AssignmentBlock.vue

@@ -1,4 +1,6 @@
 <template>
+	{{ user.data }}
+	{{ submission.data }}
 	<Assignment
 		v-if="user.data && submission.data"
 		:assignmentID="assignmentID"
@@ -16,7 +18,7 @@
 	</div>
 </template>
 <script setup>
-import { inject, watch } from 'vue'
+import { inject } from 'vue'
 import { Button, createResource } from 'frappe-ui'
 import Assignment from '@/components/Assignment.vue'
 

frontend/src/components/CertificationLinks.vue

@@ -2,7 +2,7 @@
 	<Button
 		v-if="certification.data && certification.data.certificate"
 		@click="downloadCertificate"
-		class="w-full"
+		class=""
 	>
 		<template #prefix>
 			<GraduationCap class="size-4 stroke-1.5" />
@@ -71,7 +71,7 @@ const certification = createResource({
 	params: {
 		course: props.courseName,
 	},
-	auto: true,
+	auto: user.data ? true : false,
 	cache: ['certificationData', user.data?.name],
 })
 

frontend/src/components/CourseCardOverlay.vue

@@ -30,7 +30,7 @@
 						</span>
 					</Button>
 				</router-link>
-				<CertificationLinks :courseName="course.data.name" />
+				<CertificationLinks :courseName="course.data.name" class="w-full" />
 			</div>
 			<router-link
 				v-else-if="course.data.paid_course"

frontend/src/components/UserDropdown.vue

@@ -234,10 +234,7 @@ const userDropdownOptions = computed(() => {
 })
 
 const loginToFrappeCloud = () => {
-	let redirect_to = '/dashboard/welcome'
-	if (userResource.data?.site_info.is_payment_method_added) {
-		redirect_to = '/dashboard/sites/' + userResource.data.sitename
-	}
+	let redirect_to = '/dashboard/sites/' + userResource.data.sitename
 	window.open(`${frappeCloudBaseEndpoint}${redirect_to}`, '_blank')
 }
 </script>

frontend/src/pages/Batches.vue

@@ -72,7 +72,7 @@
 		</div>
 		<div
 			v-else-if="!batches.list.loading"
-			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
+			class="flex flex-col items-center justify-center text-sm text-ink-gray-5 mt-48"
 		>
 			<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
 			<div class="text-lg font-medium mb-1">

frontend/src/pages/Billing.vue

@@ -245,12 +245,10 @@ const paymentLink = createResource({
 })
 
 const generatePaymentLink = () => {
-	console.log('called')
 	paymentLink.submit(
 		{},
 		{
 			validate() {
-				console.log('validation start')
 				if (!billingDetails.source) {
 					return __('Please let us know where you heard about us from.')
 				}

frontend/src/pages/Courses.vue

@@ -28,11 +28,7 @@
 			<div
 				class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4"
 			>
-				<TabButtons
-					v-if="user.data"
-					:buttons="courseTabs"
-					v-model="currentTab"
-				/>
+				<TabButtons :buttons="courseTabs" v-model="currentTab" />
 				<FormControl
 					v-model="certification"
 					:label="__('Certification')"
@@ -199,10 +195,6 @@ const updateCertificationFilter = () => {
 }
 
 const updateTabFilter = () => {
-	if (!user.data) {
-		return
-	}
-
 	delete filters.value['live']
 	delete filters.value['created']
 	delete filters.value['published_on']
@@ -295,7 +287,7 @@ const courseTabs = computed(() => {
 	]
 	if (user.data?.is_student) {
 		tabs.push({ label: __('Enrolled') })
-	} else {
+	} else if (user.data) {
 		tabs.push({ label: __('Created') })
 	}
 	return tabs

frontend/src/utils/assignment.js

@@ -5,6 +5,7 @@ import AssignmentBlock from '@/components/AssignmentBlock.vue'
 import translationPlugin from '../translation'
 import { usersStore } from '@/stores/user'
 import router from '../router'
+import { FrappeUI, setConfig, frappeRequest, pageMetaPlugin } from 'frappe-ui'
 
 export class Assignment {
 	constructor({ data, api, readOnly }) {
@@ -46,8 +47,11 @@ export class Assignment {
 			const app = createApp(AssignmentBlock, {
 				assignmentID: assignment,
 			})
+			app.use(FrappeUI)
+			setConfig('resourceFetcher', frappeRequest)
 			app.use(translationPlugin)
 			app.use(router)
+			app.use(pageMetaPlugin)
 			const { userResource } = usersStore()
 			app.provide('$user', userResource)
 			app.mount(this.wrapper)

frontend/src/utils/code.ts

@@ -1,5 +1,7 @@
 import { Code } from "lucide-vue-next"
 import { h, createApp } from "vue"
+import hljs from 'highlight.js/lib/core';
+
 
 const DEFAULT_THEMES = ['light', 'dark'];
 const COMMON_LANGUAGES = {
@@ -42,7 +44,6 @@ export class CodeBox {
 		this.selectInput = document.createElement('input');
 		this.selectDropIcon = document.createElement('i');
 
-		this._injectHighlightJSScriptElement();
 		this._injectHighlightJSCSSElement();
 
 		this.api.listeners.on(window, 'click', this._closeAllLanguageSelects, true);
@@ -150,7 +151,7 @@ export class CodeBox {
 	}
 
 	_highlightCodeArea(event) {
-		window.hljs.highlightBlock(this.codeArea);
+		hljs.highlightBlock(this.codeArea);
 	}
 
 	_handleCodeAreaPaste(event) {
@@ -167,7 +168,8 @@ export class CodeBox {
 		this.codeArea.removeAttribute('class');
 		this.data.language = language[0];
 		this.codeArea.setAttribute('class', `codeBoxTextArea ${this.config.useDefaultTheme} ${this.data.language}`);
-		window.hljs.highlightBlock(this.codeArea);
+	
+		hljs.highlightElement(this.codeArea);
 	}
 
 	_closeAllLanguageSelects() {
@@ -175,20 +177,6 @@ export class CodeBox {
 		for (let i = 0, len = selectPreviews.length; i < len; i++) selectPreviews[i].classList.remove('codeBoxShow');
 	}
 
-	_injectHighlightJSScriptElement() {
-		const highlightJSScriptElement = document.querySelector(`#${this.highlightScriptID}`);
-		const highlightJSScriptURL = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js';
-		if (!highlightJSScriptElement) {
-			const script = document.createElement('script');
-			const head = document.querySelector('head');
-			script.setAttribute('src', highlightJSScriptURL);
-			script.setAttribute('id', this.highlightScriptID);
-
-			if (head) head.appendChild(script);
-		}
-		else highlightJSScriptElement.setAttribute('src', highlightJSScriptURL);
-	}
-
 	_injectHighlightJSCSSElement() {
 		const highlightJSCSSElement = document.querySelector(`#${this.highlightCSSID}`);
 		let highlightJSCSSURL = this._getThemeURLFromConfig();

frontend/src/utils/index.js

@@ -177,9 +177,6 @@ export function getEditorTools() {
 		codeBox: {
 			class: CodeBox,
 			config: {
-				themeURL:
-					'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css',
-				themeName: 'atom-one-dark',
 				useDefaultTheme: 'dark',
 			},
 		},