fix: logout issue

frontend/src/components/AppSidebar.vue

@@ -22,7 +22,6 @@
 
 <script setup>
 import UserDropdown from '@/components/UserDropdown.vue'
-import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'

frontend/src/components/BatchCard.vue

@@ -1,27 +1,44 @@
 <template>
-    <div class="shadow rounded-md">
-        <div>
+    <div class="shadow rounded-md p-4 h-full" style="min-height: 150px;">
+        <div class="text-xl font-semibold mb-1">
             {{ batch.title }}
         </div>
-        <div>
+        <div class="short-introduction">
             {{ batch.description }}
         </div>
-        <div>
-            <Calendar class="h-4 w-4 stroke-1" />
-            {{ batch.start_date }} - {{ batch.end_date }}
-        </div>
-        <div>
-            <Clock class="h-4 w-4 stroke-1" />
-            {{ batch.start_time }} - {{ batch.end_time }}
+        <div class="mt-auto">
+            <div class="flex items-center mb-1">
+                <Calendar class="h-4 w-4 stroke-1 mr-2" />
+                {{ dayjs(batch.start_date).format("DD MMM YYYY") }} - {{ dayjs(batch.end_date).format("DD MMM YYYY") }}
+            </div>
+            <div class="flex items-center">
+                <Clock class="h-4 w-4 stroke-1 mr-2" />
+                {{ batch.start_time }} - {{ batch.end_time }}
+            </div>
         </div>
     </div>
 </template>
 <script setup>
 import { Calendar, Clock } from "lucide-vue-next"
+import { inject } from "vue"
+
+const dayjs = inject("$dayjs")
 const props = defineProps({
     batch: {
         type: Object,
         default: null,
     },
 });
-</script>
+</script>
+<style>
+.short-introduction {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	text-overflow: ellipsis;
+	width: 100%;
+	overflow: hidden;
+	margin: 0.25rem 0 1.25rem;
+    line-height: 1.5;
+}
+</style>

frontend/src/components/CourseCard.vue

@@ -69,8 +69,7 @@ import { computed } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { sessionStore } from '@/stores/session'
 
-const { isLoggedIn, getUser } = sessionStore()
-const user = computed(() => isLoggedIn && getUser())
+const { isLoggedIn, user } = sessionStore()
 
 const props = defineProps({
     course: {

frontend/src/components/CourseOutline.vue

@@ -6,7 +6,7 @@
         <div class="mt-4">
             <Disclosure v-slot="{ open }" v-for="chapter in outline.data" :key="chapter.name">
                 <DisclosureButton
-                    class="flex w-full px-2 py-4"
+                    class="flex w-full px-2 pt-2 pb-2"
                     >
                     <ChevronUp
                         :class="open ? 'rotate-180 transform' : ''"
@@ -16,9 +16,9 @@
                         {{ chapter.title }}
                     </div>
                 </DisclosureButton>
-                <DisclosurePanel class="px-10 pb-4">
+                <DisclosurePanel class="px-10 pb-2">
                     <div v-for="lesson in chapter.lessons" :key="lesson.name">
-                        <div class="flex items-center text-lg mb-2">
+                        <div class="flex items-center text-lg mb-4">
                             <MonitorPlay v-if="lesson.icon === 'icon-youtube'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
                             <HelpCircle v-else-if="lesson.icon === 'icon-quiz'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>
                             <FileText v-else-if="lesson.icon === 'icon-list'" class="h-4 w-4 text-gray-900 stroke-1 mr-2"/>

frontend/src/components/UserDropdown.vue

@@ -16,7 +16,7 @@
                         LMS
                     </div>
                     <div v-if="user" class="mt-1 text-sm text-gray-700 leading-none">
-                        {{ user.full_name }}
+                        {{ convertToTitleCase(user.split('@')[0]) }}
                     </div>
                 </div>
                 <div class="duration-300 ease-in-out" :class="isCollapsed
@@ -35,7 +35,6 @@ import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { Dropdown } from 'frappe-ui'
 import { ChevronDown } from 'lucide-vue-next'
-import { computed } from 'vue'
 
 const props = defineProps({
     isCollapsed: {
@@ -44,9 +43,9 @@ const props = defineProps({
     },
 })
 
-const { getUser, logout } = sessionStore()
+const { logout, user } = sessionStore()
 let { isLoggedIn } = sessionStore();
-const user = computed(() => isLoggedIn && getUser())
+
 const userDropdownOptions = [
     {
         icon: 'log-out',
@@ -70,5 +69,15 @@ const userDropdownOptions = [
             return !isLoggedIn
         }
     }
-]
+];
+
+function convertToTitleCase(str) {
+    if (!str) {
+        return ""
+    }
+
+    return str.toLowerCase().split(' ').map(function (word) {
+        return word.charAt(0).toUpperCase().concat(word.substr(1));
+    }).join(' ');
+}
 </script>