refactor: course list data

frontend/src/pages/Courses.vue

@@ -8,7 +8,7 @@
 				:items="[{ label: __('Courses'), route: { name: 'Courses' } }]"
 			/>
 			<div class="flex space-x-2 justify-end">
-				<div class="w-46 md:w-44">
+				<div class="w-40 md:w-44">
 					<FormControl
 						v-if="categories.data?.length"
 						type="select"
@@ -48,6 +48,7 @@
 		</header>
 		<div class="">
 			<Tabs
+				v-if="hasCourses"
 				v-model="tabIndex"
 				tablistClass="overflow-x-visible flex-wrap !gap-3 md:flex-nowrap"
 				:tabs="makeTabs"
@@ -101,45 +102,57 @@
 							<CourseCard :course="course" />
 						</router-link>
 					</div>
-					<div v-else-if="user.data?.is_moderator || user.data?.is_instructor" class="grid grid-cols-3 p-5">
-						<router-link
-							:to="{
-								name: 'CourseForm',
-								params: {
-									courseName: 'new',
-								},
-							}"
-						>
-							<div class="bg-gray-50 py-32 px-5 rounded-md">
-								<div class="flex flex-col items-center text-center space-y-2">
-									<Plus
-										class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
-									/>
-									<div class="font-medium">
-										{{  __("Create a Course") }}
-									</div>
-									<span class="text-gray-700 text-sm leading-4">
-										{{ __("You can add chapters and lessons to it.") }}
-									</span>
-								</div>
-							</div>
-						</router-link>
-						
-					</div>
-					<div
-						v-else
-						class="text-center p-5 text-gray-600 mt-20 w-1/2 mx-auto space-y-2"
-					>
-						<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
-						<div class="text-xl font-medium">
-							{{ __("No courses found") }}
-						</div>
-						<div>
-							{{ __("There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!") }}
-						</div>
+					<div v-else class="p-5 italic text-gray-500">
+						{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
 					</div>
 				</template>
 			</Tabs>
+			<div
+				v-else-if="
+					courses.fetched &&
+					(user.data?.is_moderator || user.data?.is_instructor)
+				"
+				class="grid grid-cols-3 p-5"
+			>
+				<router-link
+					:to="{
+						name: 'CourseForm',
+						params: {
+							courseName: 'new',
+						},
+					}"
+				>
+					<div class="bg-gray-50 py-32 px-5 rounded-md">
+						<div class="flex flex-col items-center text-center space-y-2">
+							<Plus
+								class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
+							/>
+							<div class="font-medium">
+								{{ __('Create a Course') }}
+							</div>
+							<span class="text-gray-700 text-sm leading-4">
+								{{ __('You can add chapters and lessons to it.') }}
+							</span>
+						</div>
+					</div>
+				</router-link>
+			</div>
+			<div
+				v-else-if="courses.fetched && !hasCourses"
+				class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
+			>
+				<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
+				<div class="text-xl font-medium">
+					{{ __('No courses found') }}
+				</div>
+				<div>
+					{{
+						__(
+							'There are no courses available at the moment. Keep an eye out, fresh learning experiences are on the way soon!'
+						)
+					}}
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
@@ -161,7 +174,7 @@ import { updateDocumentTitle } from '@/utils'
 const user = inject('$user')
 const searchQuery = ref('')
 const currentCategory = ref(null)
-const noCoursesFound = ref(false)
+const hasCourses = ref(false)
 
 onMounted(() => {
 	let queries = new URLSearchParams(location.search)
@@ -173,7 +186,14 @@ onMounted(() => {
 const courses = createResource({
 	url: 'lms.lms.utils.get_courses',
 	cache: ['courses', user.data?.email],
-	auto: true
+	auto: true,
+	onSuccess(data) {
+		Object.keys(data).forEach((section) => {
+			if (data[section].length) {
+				hasCourses.value = true
+			}
+		})
+	},
 })
 
 const tabIndex = ref(0)