feat: fetch translations

frontend/src/main.js

@@ -4,6 +4,7 @@ import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
 import { createPinia } from 'pinia'
+import translationPlugin from './translation'
 
 import {
 	FrappeUI,
@@ -12,7 +13,6 @@ import {
 	frappeRequest,
 	resourcesPlugin,
 } from 'frappe-ui'
-import translationPlugin from './translation'
 
 // create a pinia instance
 let pinia = createPinia()

frontend/src/pages/Courses.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="h-screen">
     <header
           class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
         >
@@ -15,7 +16,7 @@
               <template #prefix>
                 <Plus class="h-4 w-4" />
               </template>
-            {{  __("New Course") }}
+              New Course
             </Button>
           </div>
         </header>
@@ -28,11 +29,10 @@
               :class="{ 'text-gray-900': selected }"
             >
               <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-            {{ __(tab.label) }}
+              {{ tab.label }}
               <Badge
-              class="group-hover:bg-gray-900"
+                :class="{ 'text-gray-900 border border-gray-900': selected }"
-              :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
+                variant="subtle"
-              variant="solid"
                 theme="gray"
                 size="sm"
               >
@@ -42,19 +42,21 @@
           </div>
         </template>
         <template #default="{ tab }">
-        <div class="grid grid-cols-3 gap-8 mt-5" v-if="tab.courses && tab.courses.value.length && 0">
+          <div class="grid grid-cols-3 gap-8 mt-5" v-if="tab.courses && tab.courses.value.length">
             <router-link v-for="course in tab.courses.value" :to="{ name: 'CourseDetail', params: { course: course.name } }">
               <CourseCard :course="course" />
             </router-link>
           </div>
           <div v-else class="grid flex-1 place-items-center text-xl font-medium text-gray-500">
             <div class="flex flex-col items-center justify-center mt-4">
-            <div>{{  __('No {0} courses found').format(tab.label.toLowerCase()) }}</div>
+              <div>No {{ tab.label.toLowerCase() }} courses found</div>
             </div>
           </div>
         </template>
       </Tabs>
     </div>
+  </div>
+    
 </template>
 
 <script setup>

frontend/src/translation.js

@@ -1,22 +1,22 @@
 import { createResource } from 'frappe-ui'
+
 export default function translationPlugin(app) {
 	app.config.globalProperties.__ = translate
-	// fetch translations
+	console.log(window.translatedMessages)
-
+	if (!window.translatedMessages) fetchTranslations()
-	if (!window.translatedMessages)
-		fetchTranslations().then((translations) => {
-			window.translatedMessages = translations
-		})
 }
 
-async function translate(message) {
+function translate(message) {
 	let lang = window.lang || 'hi'
-	let translatedMessage = /* window.translatedMessages[message] || */ message
+	let translatedMessages = window.translatedMessages || {
+		'All Courses': 'सभी पाठ्यक्रम',
+		Live: 'लाइव',
+	}
+	let translatedMessage = translatedMessages[message] || message
 	const hasPlaceholders = /{\d+}/.test(message)
-
-	console.log(translatedMessage)
 	console.log(hasPlaceholders)
 	if (!hasPlaceholders) {
+		console.log(translatedMessage)
 		return translatedMessage
 	}
 	return {
@@ -24,9 +24,6 @@ async function translate(message) {
 			return translatedMessage.replace(
 				/{(\d+)}/g,
 				function (match, number) {
-					console.log(match, number)
-					console.log(args[number])
-
 					return typeof args[number] != 'undefined'
 						? args[number]
 						: match
@@ -36,18 +33,15 @@ async function translate(message) {
 	}
 }
 
-async function fetchTranslations() {
+function fetchTranslations(lang) {
-	let lang = window.lang || 'hi'
+	console.log('called')
-	let translations = await createResource({
+	createResource({
 		url: 'lms.lms.api.get_translations',
 		cache: 'translations',
 		auto: true,
+		transform: (data) => {
+			console.log(data)
+			window.translatedMessages = data.message
+		},
 	})
-	let translatedMessages = {}
-	console.log(translations.data)
-	translations.forEach((translation) => {
-		translatedMessages[translation.source_text] =
-			translation.translated_text
-	})
-	window.translatedMessages = translatedMessages
 }

lms/lms/api.py

@@ -161,12 +161,10 @@ def get_user_info(user=None):
 	return users
 
 
-@frappe.whitelist()
+@frappe.whitelist(allow_guest=True)
 def get_translations():
 	if frappe.session.user != "Guest":
 		language = frappe.db.get_value("User", frappe.session.user, "language")
 	else:
 		language = frappe.db.get_single_value("System Settings", "language")
-	print("language", language)
-	print(get_all_translations(language))
 	return get_all_translations(language)