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,60 +1,62 @@
 <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"
-      >
-        <Breadcrumbs
-          class="h-7"
-          :items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
-        />
-        <div class="flex">
-          <Select class="mr-2"
-            :options="orderOptions"
-            v-model="orderBy"
+          class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
+        >
+          <Breadcrumbs
+            class="h-7"
+            :items="[{ label: __('All Courses'), route: { name: 'Courses' } }]"
           />
-          <Button variant="solid">
-            <template #prefix>
-              <Plus class="h-4 w-4" />
-            </template>
-            {{  __("New Course") }}
-          </Button>
-        </div>
-      </header>
-   <div class="mx-5 my-10">
-    <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
-      <template #tab="{ tab, selected }">
-        <div>
-          <button
-            class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
-            :class="{ 'text-gray-900': selected }"
-          >
-            <component v-if="tab.icon" :is="tab.icon" class="h-5" />
-            {{ __(tab.label) }}
-            <Badge
-              class="group-hover:bg-gray-900"
-              :class="[selected ? 'bg-gray-900' : 'bg-gray-600']"
-              variant="solid"
-              theme="gray"
-              size="sm"
-            >
-              {{ tab.count }}
-            </Badge>
-          </button>
-        </div>
-      </template>
-      <template #default="{ tab }">
-        <div class="grid grid-cols-3 gap-8 mt-5" v-if="tab.courses && tab.courses.value.length && 0">
-          <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 class="flex">
+            <Select class="mr-2"
+              :options="orderOptions"
+              v-model="orderBy"
+            />
+            <Button variant="solid">
+              <template #prefix>
+                <Plus class="h-4 w-4" />
+              </template>
+              New Course
+            </Button>
           </div>
-        </div>
-      </template>
-    </Tabs>
+        </header>
+     <div class="mx-5 my-10">
+      <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
+        <template #tab="{ tab, selected }">
+          <div>
+            <button
+              class="group -mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+              :class="{ 'text-gray-900': selected }"
+            >
+              <component v-if="tab.icon" :is="tab.icon" class="h-5" />
+              {{ tab.label }}
+              <Badge
+                :class="{ 'text-gray-900 border border-gray-900': selected }"
+                variant="subtle"
+                theme="gray"
+                size="sm"
+              >
+                {{ tab.count }}
+              </Badge>
+            </button>
+          </div>
+        </template>
+        <template #default="{ tab }">
+          <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 {{ 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
-
-	if (!window.translatedMessages)
-		fetchTranslations().then((translations) => {
-			window.translatedMessages = translations
-		})
+	console.log(window.translatedMessages)
+	if (!window.translatedMessages) fetchTranslations()
 }
 
-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() {
-	let lang = window.lang || 'hi'
-	let translations = await createResource({
+function fetchTranslations(lang) {
+	console.log('called')
+	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
 }