eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rating component

Browse Source
This commit is contained in:
Jannat Patel
2023-12-20 10:35:12 +05:30
parent fbe219a888
commit eb3afbbad1
10 changed files with 267 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/pages/Courses.vue
View File

@@ -1,58 +1,64 @@
<template>
<div v-if="courses.data" 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">
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
<div class="h-screen">
<div v-if="courses.data">
<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">
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4" />
</template>
{{ __("New Course") }}
</Button>
</div>
</header>
<div class="mx-5 py-5">
<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>
{{ __("New Course") }}
</Button>
</div>
</header>
<div class="mx-5 py-5">
<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 v-if="tab.courses && tab.courses.value.length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5">
<router-link v-for="course in tab.courses.value"
:to="
course.membership && course.current_lesson
? {name: 'Lesson', params: {
courseName: course.name,
chapterNumber: course.current_lesson.split('.')[0],
lessonNumber: course.current_lesson.split('.')[1] }}
: course.membership ? { name: 'Lesson', params: {
courseName: course.name,
chapterNumber: 1,
lessonNumber: 1 }
} : { name: 'CourseDetail', params: { courseName: 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()) }}
<template #default="{ tab }">
<div v-if="tab.courses && tab.courses.value.length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5">
<router-link v-for="course in tab.courses.value"
:to="course.membership && course.current_lesson
? {
name: 'Lesson', params: {
courseName: course.name,
chapterNumber: course.current_lesson.split('.')[0],
lessonNumber: course.current_lesson.split('.')[1]
}
}
: course.membership ? {
name: 'Lesson', params: {
courseName: course.name,
chapterNumber: 1,
lessonNumber: 1
}
} : { name: 'CourseDetail', params: { courseName: 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>
</div>
</div>
</template>
</Tabs>
</template>
</Tabs>
</div>
</div>
</div>
</template>