chamomind/elearning
6
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement initial frontend for admin and instructor roles, including dashboards, course management, authentication, and core services.

Browse source
This commit is contained in:
Missez 2026-02-06 14:58:41 +07:00
parent 832a8f5067
commit 127b63de49
16 changed files with 1505 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend_management/pages/instructor/courses/[id]/index.vue
View file

@ -11,7 +11,8 @@
<div class="flex flex-col md:flex-row gap-6">
<!-- Thumbnail -->
<div
class="w-full md:w-48 h-32 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 relative group cursor-pointer overflow-hidden border border-gray-200"
class="bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 relative group cursor-pointer overflow-hidden border border-gray-200"
style="width: 192px; height: 128px;"
@click="triggerThumbnailUpload"
>
<img
@ -73,7 +74,7 @@
</div>
<div class="flex items-center gap-1">
<q-icon name="people" size="20px" />
<span>0 ผู้เรียน</span>
<span>{{ totalStudentsCount }} ผู้เรียน</span>
</div>
</div>
</div>
@ -166,6 +167,7 @@ const course = ref<CourseDetailResponse | null>(null);
const activeTab = ref('structure');
const uploadingThumbnail = ref(false);
const thumbnailInputRef = ref<HTMLInputElement | null>(null);
const totalStudentsCount = ref(0);
// Computed
const totalLessons = computed(() => {
@ -178,7 +180,13 @@ const fetchCourse = async () => {
loading.value = true;
try {
const courseId = parseInt(route.params.id as string);
course.value = await instructorService.getCourseById(courseId);
const [courseData, studentsData] = await Promise.all([
instructorService.getCourseById(courseId),
instructorService.getEnrolledStudents(courseId, 1, 1)
]);
course.value = courseData;
totalStudentsCount.value = studentsData.total;
} catch (error) {
console.error('Failed to fetch course:', error);
$q.notify({ type: 'negative', message: 'ไม่สามารถโหลดข้อมูลหลักสูตรได้', position: 'top' });
@ -187,6 +195,7 @@ const fetchCourse = async () => {
}
};
const getStatusColor = (status: string) => {
const colors: Record<string, string> = {
APPROVED: 'green',
@ -238,8 +247,8 @@ const handleThumbnailUpload = async (event: Event) => {
const requestApproval = async () => {
if (!course.value) return;
try {
await instructorService.submitCourseForApproval(course.value.id);
$q.notify({ type: 'positive', message: 'ส่งขออนุมัติสำเร็จ', position: 'top' });
const response = await instructorService.submitCourseForApproval(course.value.id);
$q.notify({ type: 'positive', message: response.message || 'ส่งขออนุมัติสำเร็จ', position: 'top' });
fetchCourse();
} catch (error: any) {
$q.notify({