Compare commits
3 commits
management
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
|
e02da48f7c | ||
|
|
ae32cfebe4 | ||
|
|
ea442d7815 |
19 changed files with 216 additions and 329 deletions
|
|
@ -180,19 +180,19 @@ onMounted(async () => {
|
|||
<div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen p-4 md:p-8 transition-colors duration-300">
|
||||
<div class="max-w-[1240px] mx-auto">
|
||||
<!-- ส่วนของการค้นหาคอร์ส (Catalog View) -->
|
||||
<div v-if="!showDetail" class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
|
||||
<div v-if="!showDetail" class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:!border-slate-800 min-h-[500px] mb-12 transition-colors">
|
||||
|
||||
<!-- ส่วนหัวและการค้นหา -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
|
||||
<h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('discovery.title') }}</h2>
|
||||
<h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-[#f8fafc] tracking-tight">{{ $t('discovery.title') }}</h2>
|
||||
<div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
|
||||
<div class="relative w-full sm:w-[260px] flex-1">
|
||||
<q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" />
|
||||
<input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" :placeholder="$t('discovery.searchPlaceholder')" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
|
||||
<button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
|
||||
<button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-[#3B6BE8] dark:!border-blue-400' : 'bg-white border-slate-200 dark:!bg-slate-800 dark:!border-slate-700 text-slate-400 dark:!text-slate-300 hover:bg-slate-50 dark:hover:!bg-slate-700'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
|
||||
<button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-[#3B6BE8] dark:!border-blue-400' : 'bg-white border-slate-200 dark:!bg-slate-800 dark:!border-slate-700 text-slate-400 dark:!text-slate-300 hover:bg-slate-50 dark:hover:!bg-slate-700'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,17 +203,17 @@ onMounted(async () => {
|
|||
<div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
|
||||
<button
|
||||
@click="activeCategory = 'all'"
|
||||
:class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
|
||||
:class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-transparent font-bold' : 'bg-white dark:!bg-slate-800 border-slate-200 dark:!border-slate-700 text-slate-800 dark:!text-slate-200 hover:border-slate-300 dark:hover:!border-slate-600 font-medium'"
|
||||
class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
|
||||
<q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> {{ $t('discovery.allCategory') }}
|
||||
<q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8] dark:!text-blue-400' : 'text-slate-400 dark:!text-slate-400'"/> {{ $t('discovery.allCategory') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="cat in categories" :key="cat.id"
|
||||
@click="activeCategory = cat.id"
|
||||
:class="activeCategory === cat.id ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
|
||||
class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
|
||||
<q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
|
||||
:class="activeCategory === cat.id ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-transparent font-bold' : 'bg-white dark:!bg-slate-800 border-slate-200 dark:!border-slate-700 text-slate-800 dark:!text-slate-200 hover:border-slate-300 dark:hover:!border-slate-600 font-medium'"
|
||||
class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
|
||||
<q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8] dark:!text-blue-400' : 'text-slate-600 dark:!text-slate-400'"/>
|
||||
{{ getLocalizedText(cat.name) }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -229,7 +229,7 @@ onMounted(async () => {
|
|||
<div v-else-if="filteredCourses.length > 0">
|
||||
<!-- GRID VIEW -->
|
||||
<div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div v-for="course in filteredCourses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
|
||||
<div v-for="course in filteredCourses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:!border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
|
||||
<!-- Thumbnail -->
|
||||
<div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
|
||||
<img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
|
|
@ -240,7 +240,7 @@ onMounted(async () => {
|
|||
|
||||
<!-- Body -->
|
||||
<div class="p-5 flex flex-col flex-1">
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h3>
|
||||
<h3 class="font-bold text-slate-900 dark:text-[#f8fafc] text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ getLocalizedText(course.title) }}</h3>
|
||||
|
||||
|
||||
|
||||
|
|
@ -248,8 +248,7 @@ onMounted(async () => {
|
|||
<div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
|
||||
{{ course.formatted_price }}
|
||||
</div>
|
||||
<!-- Eye icon circle button -->
|
||||
<button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
|
||||
<button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:!bg-slate-800 text-slate-400 dark:!text-slate-300 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:!bg-slate-700 dark:hover:!text-blue-400 border border-slate-100 dark:!border-slate-700 transition-colors shadow-sm outline-none">
|
||||
<q-icon name="visibility" size="18px" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -259,7 +258,7 @@ onMounted(async () => {
|
|||
|
||||
<!-- LIST VIEW -->
|
||||
<div v-else class="flex flex-col gap-5">
|
||||
<div v-for="course in filteredCourses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
|
||||
<div v-for="course in filteredCourses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:!border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
|
||||
<div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
|
||||
<img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
|
||||
|
|
@ -268,14 +267,14 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="flex flex-col flex-1 py-1">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2">{{ getLocalizedText(course.title) }}</h3>
|
||||
<h3 class="font-bold text-slate-900 dark:text-[#f8fafc] text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ getLocalizedText(course.title) }}</h3>
|
||||
|
||||
</div>
|
||||
<div class="mt-4 sm:mt-auto flex items-center justify-between">
|
||||
<div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
|
||||
{{ course.formatted_price }}
|
||||
</div>
|
||||
<button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
|
||||
<button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:!bg-slate-800 dark:!text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 hover:text-blue-600 dark:hover:!bg-slate-700 dark:hover:!text-blue-400 border border-slate-100 dark:!border-slate-700 transition-colors">
|
||||
<q-icon name="visibility" size="16px" /> {{ $t('discovery.viewDetails') }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -290,9 +289,9 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
|
||||
<div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:!bg-slate-900/50 rounded-3xl border border-dashed border-slate-200 dark:!border-slate-800">
|
||||
<q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t("discovery.emptyTitle") }}</h3>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:!text-white mb-2">{{ $t("discovery.emptyTitle") }}</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t("discovery.emptyDesc") }}</p>
|
||||
<button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; activeCategory = 'all';">
|
||||
{{ $t("discovery.showAll") }}
|
||||
|
|
|
|||
|
|
@ -449,10 +449,7 @@ const deleteAttachment = async (attachmentId: number) => {
|
|||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
v-for="item in history"
|
||||
:key="item.id"
|
||||
:title="titleMap[item.action] || item.action"
|
||||
:subtitle="formatDate(item.created_at)"
|
||||
:subtitle="formatDateTime(item.created_at)"
|
||||
:color="colorMap[item.action] || 'grey'"
|
||||
:icon="iconMap[item.action] || 'circle'"
|
||||
>
|
||||
|
|
@ -91,12 +91,7 @@ const getActorName = (item: ApprovalHistory) => {
|
|||
return actor.username || actor.email || 'Unknown User';
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString('th-TH', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short'
|
||||
});
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
|
||||
onMounted(() => {
|
||||
fetchHistory();
|
||||
|
|
|
|||
|
|
@ -450,14 +450,7 @@ const openStudentDetail = async (studentId: number) => {
|
|||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
return formatDateTime(dateStr);
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
|
|
|
|||
|
|
@ -404,8 +404,7 @@ const getStudentStatusLabel = (status: string) => {
|
|||
};
|
||||
|
||||
const formatEnrollDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
return formatDate(dateStr);
|
||||
};
|
||||
|
||||
const getLessonTypeIcon = (type: string) => {
|
||||
|
|
@ -436,8 +435,7 @@ const formatVideoTime = (seconds: number) => {
|
|||
|
||||
const formatCompletedDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short' });
|
||||
return formatDate(dateStr);
|
||||
};
|
||||
|
||||
// Fetch on mount
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
<!-- Created At Custom Column -->
|
||||
<template v-slot:body-cell-created_at="props">
|
||||
<q-td :props="props">
|
||||
{{ formatDate(props.value) }}
|
||||
{{ formatDateTime(props.value) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="text-subtitle2 text-grey">Date & Time</div>
|
||||
<div>{{ formatDate(selectedLog.created_at) }}</div>
|
||||
<div>{{ formatDateTime(selectedLog.created_at) }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useQuasar, type QTableColumn } from 'quasar';
|
||||
import { adminService, type AuditLog, type AuditLogStats } from '~/services/admin.service';
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -284,15 +284,15 @@ const pagination = ref({
|
|||
});
|
||||
|
||||
// Table setup
|
||||
const columns = [
|
||||
{ name: 'id', label: 'ID', field: 'id', align: 'left', style: 'width: 60px' },
|
||||
{ name: 'action', label: 'Action', field: 'action', align: 'left' },
|
||||
{ name: 'user', label: 'User', field: 'user', align: 'left' },
|
||||
{ name: 'entity_type', label: 'Entity Type', field: 'entity_type', align: 'left' },
|
||||
{ name: 'entity_id', label: 'Entity ID', field: 'entity_id', align: 'left' },
|
||||
const columns: QTableColumn[] = [
|
||||
{ name: 'id', label: 'ID', field: 'id', align: 'left' as const, style: 'width: 60px' },
|
||||
{ name: 'action', label: 'Action', field: 'action', align: 'left' as const },
|
||||
{ name: 'user', label: 'User', field: 'user', align: 'left' as const },
|
||||
{ name: 'entity_type', label: 'Entity Type', field: 'entity_type', align: 'left' as const },
|
||||
{ name: 'entity_id', label: 'Entity ID', field: 'entity_id', align: 'left' as const },
|
||||
|
||||
{ name: 'created_at', label: 'Date & Time', field: 'created_at', align: 'left' },
|
||||
{ name: 'actions', label: '', field: 'actions', align: 'center' }
|
||||
{ name: 'created_at', label: 'Date & Time', field: 'created_at', align: 'left' as const },
|
||||
{ name: 'actions', label: '', field: 'actions', align: 'center' as const }
|
||||
];
|
||||
|
||||
// Actions options (for filtering)
|
||||
|
|
@ -416,10 +416,7 @@ const tryFormatJson = (str: string | null) => {
|
|||
}
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
if (!date) return '-';
|
||||
return new Date(date).toLocaleString('th-TH');
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
|
||||
const ACTION_COLOR_MAP: Record<string, string> = {
|
||||
DELETE: 'negative',
|
||||
|
|
@ -453,10 +450,12 @@ onMounted(() => {
|
|||
:deep(input[type=number]::-webkit-outer-spin-button),
|
||||
:deep(input[type=number]::-webkit-inner-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(input[type=number]) {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -233,13 +233,7 @@ const fetchCategories = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
|
|
|
|||
|
|
@ -356,23 +356,7 @@ const getActionColor = (action: string) => {
|
|||
return colors[action] || 'grey';
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const formatDateTime = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
// Date formatting functions are auto-imported from utils/date.ts
|
||||
|
||||
const confirmApprove = () => {
|
||||
if (!course.value) return;
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
<div v-if="course.latest_submission" class="mt-3 text-sm text-gray-500">
|
||||
<q-icon name="send" size="16px" class="mr-1" />
|
||||
ส่งโดย {{ course.latest_submission.submitter.username }}
|
||||
เมื่อ {{ formatDate(course.latest_submission.created_at) }}
|
||||
เมื่อ {{ formatDateTime(course.latest_submission.created_at) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
<template v-slot:body-cell-submitted_at="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.row.latest_submission">
|
||||
<div class="text-xs">{{ formatDate(props.row.latest_submission.created_at) }}</div>
|
||||
<div class="text-xs">{{ formatDateTime(props.row.latest_submission.created_at) }}</div>
|
||||
<div class="text-xs text-gray-500">โดย {{ props.row.latest_submission.submitter.username }}</div>
|
||||
</div>
|
||||
<span v-else>-</span>
|
||||
|
|
@ -298,15 +298,7 @@ const getPrimaryInstructor = (course: PendingCourse) => {
|
|||
return primary?.user.username || course.creator.username;
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
|
||||
const viewCourse = (course: PendingCourse) => {
|
||||
router.push(`/admin/courses/${course.id}`);
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
<p class="text-xs text-gray-500 truncate">โดย {{ course.creator.username }}</p>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 whitespace-nowrap">
|
||||
{{ formatDate(course.created_at) }}
|
||||
{{ formatDateStr(course.created_at) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
<span class="text-gray-600 mx-1">{{ formatAction(log.action) }}</span>
|
||||
<span class="text-primary-700 font-medium">{{ log.entity_type }} #{{ log.entity_id }}</span>
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{{ formatDate(log.created_at) }}</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{{ formatDateStr(log.created_at) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -254,14 +254,7 @@ const fetchDashboardData = async () => {
|
|||
};
|
||||
|
||||
// Utilities
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
const formatDateStr = (date: string) => formatDateTime(date);
|
||||
|
||||
const getActionIcon = (action: string) => {
|
||||
if (action.includes('create')) return 'add_circle';
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { userService, type UserProfileResponse } from '~/services/user.service';
|
||||
import { userService } from '~/services/user.service';
|
||||
import { authService } from '~/services/auth.service';
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -368,20 +368,8 @@ const getRoleLabel = (role: string) => {
|
|||
return labels[role] || role;
|
||||
};
|
||||
|
||||
const formatDate = (date: string, includeTime = true) => {
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
};
|
||||
|
||||
if (includeTime) {
|
||||
options.hour = '2-digit';
|
||||
options.minute = '2-digit';
|
||||
}
|
||||
|
||||
return new Date(date).toLocaleDateString('th-TH', options);
|
||||
};
|
||||
// Use formatting utilities from utils/date.ts
|
||||
// Format functions are auto-imported
|
||||
|
||||
// Avatar upload
|
||||
const avatarInputRef = ref<HTMLInputElement | null>(null);
|
||||
|
|
@ -425,8 +413,8 @@ const handleAvatarUpload = async (event: Event) => {
|
|||
try {
|
||||
const response = await userService.uploadAvatar(file);
|
||||
|
||||
// Re-fetch profile to get presigned URL from backend
|
||||
await fetchProfile();
|
||||
// Force refresh profile cache and update local state
|
||||
await fetchProfile(true);
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
|
|
@ -457,8 +445,8 @@ const handleUpdateProfile = async () => {
|
|||
phone: editForm.value.phone || null
|
||||
});
|
||||
|
||||
// Refresh profile data from API
|
||||
await fetchProfile();
|
||||
// Force refresh profile cache and update local state
|
||||
await fetchProfile(true);
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
|
|
@ -546,13 +534,9 @@ watch(showEditModal, (newVal) => {
|
|||
}
|
||||
});
|
||||
|
||||
// Fetch profile from API
|
||||
const fetchProfile = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await userService.getProfile();
|
||||
|
||||
// Map API response to profile
|
||||
// Helper to map fullProfile to local profile state
|
||||
const mapProfileData = (data: typeof authStore.fullProfile) => {
|
||||
if (!data) return;
|
||||
profile.value = {
|
||||
fullName: `${data.profile.first_name} ${data.profile.last_name}`,
|
||||
email: data.email,
|
||||
|
|
@ -565,6 +549,14 @@ const fetchProfile = async () => {
|
|||
avatarUrl: data.profile.avatar_url,
|
||||
createdAt: data.created_at
|
||||
};
|
||||
};
|
||||
|
||||
// Fetch profile — uses auth store cache, force=true to refresh
|
||||
const fetchProfile = async (force = false) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await authStore.fetchUserProfile(force);
|
||||
mapProfileData(authStore.fullProfile);
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
|
|
@ -576,7 +568,7 @@ const fetchProfile = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// Load profile on mount
|
||||
// Load profile on mount (uses cache if available)
|
||||
onMounted(() => {
|
||||
fetchProfile();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -324,13 +324,7 @@ const getRoleBadgeColor = (roleCode: string) => {
|
|||
return colors[roleCode] || 'grey';
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
});
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
|
||||
const viewUser = (user: AdminUserResponse) => {
|
||||
selectedUser.value = user;
|
||||
|
|
|
|||
|
|
@ -449,13 +449,7 @@ const getStatusLabel = (status: string) => {
|
|||
return labels[status] || status;
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
});
|
||||
};
|
||||
// Date formatting function is auto-imported from utils/date.ts
|
||||
// Clone Dialog
|
||||
const cloneDialog = ref(false);
|
||||
const cloneLoading = ref(false);
|
||||
|
|
|
|||
|
|
@ -64,21 +64,21 @@
|
|||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<q-card class="p-6 text-center">
|
||||
<div class="text-4xl font-bold text-primary-600 mb-2">
|
||||
{{ instructorStore.stats.totalCourses }}
|
||||
{{ stats.totalCourses }}
|
||||
</div>
|
||||
<div class="text-gray-600">หลักสูตรทั้งหมด</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="p-6 text-center">
|
||||
<div class="text-4xl font-bold text-secondary-600 mb-2">
|
||||
{{ instructorStore.stats.totalStudents }}
|
||||
{{ stats.totalStudents }}
|
||||
</div>
|
||||
<div class="text-gray-600">ผู้เรียนทั้งหมด</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="p-6 text-center">
|
||||
<div class="text-4xl font-bold text-accent-600 mb-2">
|
||||
{{ instructorStore.stats.completedStudents }}
|
||||
{{ stats.completedStudents }}
|
||||
</div>
|
||||
<div class="text-gray-600">เรียนจบแล้ว</div>
|
||||
</q-card>
|
||||
|
|
@ -96,28 +96,28 @@
|
|||
<q-icon name="check_circle" color="green" size="24px" />
|
||||
<span class="font-medium text-gray-700">เผยแพร่แล้ว</span>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-green-600">{{ instructorStore.courseStatusCounts.approved }}</span>
|
||||
<span class="text-2xl font-bold text-green-600">{{ courseStatusCounts.approved }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<q-icon name="hourglass_empty" color="orange" size="24px" />
|
||||
<span class="font-medium text-gray-700">รอตรวจสอบ</span>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-orange-600">{{ instructorStore.courseStatusCounts.pending }}</span>
|
||||
<span class="text-2xl font-bold text-orange-600">{{ courseStatusCounts.pending }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<q-icon name="edit_note" color="grey" size="24px" />
|
||||
<span class="font-medium text-gray-700">แบบร่าง</span>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-gray-600">{{ instructorStore.courseStatusCounts.draft }}</span>
|
||||
<span class="text-2xl font-bold text-gray-600">{{ courseStatusCounts.draft }}</span>
|
||||
</div>
|
||||
<div v-if="instructorStore.courseStatusCounts.rejected > 0" class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
|
||||
<div v-if="courseStatusCounts.rejected > 0" class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<q-icon name="cancel" color="red" size="24px" />
|
||||
<span class="font-medium text-gray-700">ถูกปฏิเสธ</span>
|
||||
</div>
|
||||
<span class="text-2xl font-bold text-red-600">{{ instructorStore.courseStatusCounts.rejected }}</span>
|
||||
<span class="text-2xl font-bold text-red-600">{{ courseStatusCounts.rejected }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
<div class="space-y-4">
|
||||
<q-card
|
||||
v-for="course in instructorStore.recentCourses"
|
||||
v-for="course in recentCourses"
|
||||
:key="course.id"
|
||||
class="cursor-pointer hover:shadow-md transition"
|
||||
@click="router.push(`/instructor/courses/${course.id}`)"
|
||||
|
|
@ -172,6 +172,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { instructorService } from '~/services/instructor.service';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'instructor',
|
||||
|
|
@ -179,10 +180,32 @@ definePageMeta({
|
|||
});
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const instructorStore = useInstructorStore();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
|
||||
// Dashboard local state
|
||||
const stats = ref({
|
||||
totalCourses: 0,
|
||||
totalStudents: 0,
|
||||
completedStudents: 0
|
||||
});
|
||||
|
||||
const courseStatusCounts = ref({
|
||||
approved: 0,
|
||||
pending: 0,
|
||||
draft: 0,
|
||||
rejected: 0
|
||||
});
|
||||
|
||||
const recentCourses = ref<{
|
||||
id: number;
|
||||
title: string;
|
||||
students: number;
|
||||
lessons: number;
|
||||
icon: string;
|
||||
thumbnail: string | null;
|
||||
}[]>([]);
|
||||
|
||||
// Navigation functions
|
||||
const goToProfile = () => {
|
||||
router.push('/instructor/profile');
|
||||
|
|
@ -212,9 +235,41 @@ const handleLogout = () => {
|
|||
});
|
||||
};
|
||||
|
||||
// Fetch dashboard data on mount
|
||||
// Fetch dashboard data
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
const [courses, studentStats] = await Promise.all([
|
||||
instructorService.getCourses(),
|
||||
instructorService.getMyStudentsStats()
|
||||
]);
|
||||
|
||||
stats.value.totalCourses = courses.length;
|
||||
stats.value.totalStudents = studentStats.total_students;
|
||||
stats.value.completedStudents = studentStats.total_completed;
|
||||
|
||||
courseStatusCounts.value = {
|
||||
approved: courses.filter(c => c.status === 'APPROVED').length,
|
||||
pending: courses.filter(c => c.status === 'PENDING').length,
|
||||
draft: courses.filter(c => c.status === 'DRAFT').length,
|
||||
rejected: courses.filter(c => c.status === 'REJECTED').length
|
||||
};
|
||||
|
||||
recentCourses.value = courses.slice(0, 3).map(course => ({
|
||||
id: course.id,
|
||||
title: course.title.th,
|
||||
students: 0,
|
||||
lessons: 0,
|
||||
icon: 'book',
|
||||
thumbnail: course.thumbnail_url || null
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch dashboard data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch data on mount
|
||||
onMounted(() => {
|
||||
instructorStore.fetchDashboardData();
|
||||
authStore.fetchUserProfile();
|
||||
fetchDashboardData();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { userService, type UserProfileResponse } from '~/services/user.service';
|
||||
import { userService } from '~/services/user.service';
|
||||
import { authService } from '~/services/auth.service';
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -368,20 +368,8 @@ const getRoleLabel = (role: string) => {
|
|||
return labels[role] || role;
|
||||
};
|
||||
|
||||
const formatDate = (date: string, includeTime = true) => {
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
};
|
||||
|
||||
if (includeTime) {
|
||||
options.hour = '2-digit';
|
||||
options.minute = '2-digit';
|
||||
}
|
||||
|
||||
return new Date(date).toLocaleDateString('th-TH', options);
|
||||
};
|
||||
// Use formatting utilities from utils/date.ts
|
||||
// Format functions are auto-imported
|
||||
|
||||
// Avatar upload
|
||||
const avatarInputRef = ref<HTMLInputElement | null>(null);
|
||||
|
|
@ -425,8 +413,8 @@ const handleAvatarUpload = async (event: Event) => {
|
|||
try {
|
||||
const response = await userService.uploadAvatar(file);
|
||||
|
||||
// Re-fetch profile to get presigned URL from backend
|
||||
await fetchProfile();
|
||||
// Force refresh profile cache and update local state
|
||||
await fetchProfile(true);
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
|
|
@ -457,8 +445,8 @@ const handleUpdateProfile = async () => {
|
|||
phone: editForm.value.phone || null
|
||||
});
|
||||
|
||||
// Refresh profile data from API
|
||||
await fetchProfile();
|
||||
// Force refresh profile cache and update local state
|
||||
await fetchProfile(true);
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
|
|
@ -546,13 +534,9 @@ watch(showEditModal, (newVal) => {
|
|||
}
|
||||
});
|
||||
|
||||
// Fetch profile from API
|
||||
const fetchProfile = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await userService.getProfile();
|
||||
|
||||
// Map API response to profile
|
||||
// Helper to map fullProfile to local profile state
|
||||
const mapProfileData = (data: typeof authStore.fullProfile) => {
|
||||
if (!data) return;
|
||||
profile.value = {
|
||||
fullName: `${data.profile.first_name} ${data.profile.last_name}`,
|
||||
email: data.email,
|
||||
|
|
@ -565,6 +549,14 @@ const fetchProfile = async () => {
|
|||
avatarUrl: data.profile.avatar_url,
|
||||
createdAt: data.created_at
|
||||
};
|
||||
};
|
||||
|
||||
// Fetch profile — uses auth store cache, force=true to refresh
|
||||
const fetchProfile = async (force = false) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await authStore.fetchUserProfile(force);
|
||||
mapProfileData(authStore.fullProfile);
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
|
|
@ -576,7 +568,7 @@ const fetchProfile = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// Load profile on mount
|
||||
// Load profile on mount (uses cache if available)
|
||||
onMounted(() => {
|
||||
fetchProfile();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { authService } from '~/services/auth.service';
|
||||
import { userService } from '~/services/user.service';
|
||||
import { userService, type UserProfileResponse } from '~/services/user.service';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
|
|
@ -15,7 +15,8 @@ export const useAuthStore = defineStore('auth', {
|
|||
state: () => ({
|
||||
user: null as User | null,
|
||||
token: null as string | null,
|
||||
isAuthenticated: false
|
||||
isAuthenticated: false,
|
||||
fullProfile: null as UserProfileResponse | null
|
||||
}),
|
||||
|
||||
getters: {
|
||||
|
|
@ -61,6 +62,7 @@ export const useAuthStore = defineStore('auth', {
|
|||
this.user = null;
|
||||
this.token = null;
|
||||
this.isAuthenticated = false;
|
||||
this.fullProfile = null;
|
||||
|
||||
// Clear cookies
|
||||
const tokenCookie = useCookie('token');
|
||||
|
|
@ -126,10 +128,16 @@ export const useAuthStore = defineStore('auth', {
|
|||
}
|
||||
},
|
||||
|
||||
async fetchUserProfile() {
|
||||
async fetchUserProfile(force = false) {
|
||||
// Skip if already cached (unless force refresh)
|
||||
if (!force && this.fullProfile) return;
|
||||
|
||||
try {
|
||||
const response = await userService.getProfile();
|
||||
|
||||
// Cache raw API response
|
||||
this.fullProfile = response;
|
||||
|
||||
// Update local user state
|
||||
this.user = {
|
||||
id: response.id.toString(),
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { instructorService } from '~/services/instructor.service';
|
||||
|
||||
interface Course {
|
||||
id: number;
|
||||
title: string;
|
||||
students: number;
|
||||
lessons: number;
|
||||
icon: string;
|
||||
thumbnail: string | null;
|
||||
}
|
||||
|
||||
interface DashboardStats {
|
||||
totalCourses: number;
|
||||
totalStudents: number;
|
||||
completedStudents: number;
|
||||
}
|
||||
|
||||
interface CourseStatusCounts {
|
||||
approved: number;
|
||||
pending: number;
|
||||
draft: number;
|
||||
rejected: number;
|
||||
}
|
||||
|
||||
export const useInstructorStore = defineStore('instructor', {
|
||||
state: () => ({
|
||||
stats: {
|
||||
totalCourses: 0,
|
||||
totalStudents: 0,
|
||||
completedStudents: 0
|
||||
} as DashboardStats,
|
||||
|
||||
courseStatusCounts: {
|
||||
approved: 0,
|
||||
pending: 0,
|
||||
draft: 0,
|
||||
rejected: 0
|
||||
} as CourseStatusCounts,
|
||||
|
||||
recentCourses: [] as Course[],
|
||||
loading: false
|
||||
}),
|
||||
|
||||
getters: {
|
||||
getDashboardStats: (state) => state.stats,
|
||||
getRecentCourses: (state) => state.recentCourses
|
||||
},
|
||||
|
||||
actions: {
|
||||
async fetchDashboardData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
// Fetch courses and student stats in parallel
|
||||
const [courses, studentStats] = await Promise.all([
|
||||
instructorService.getCourses(),
|
||||
instructorService.getMyStudentsStats()
|
||||
]);
|
||||
|
||||
// Update student stats from dedicated API
|
||||
this.stats.totalCourses = courses.length;
|
||||
this.stats.totalStudents = studentStats.total_students;
|
||||
this.stats.completedStudents = studentStats.total_completed;
|
||||
|
||||
// Update course status counts
|
||||
this.courseStatusCounts = {
|
||||
approved: courses.filter(c => c.status === 'APPROVED').length,
|
||||
pending: courses.filter(c => c.status === 'PENDING').length,
|
||||
draft: courses.filter(c => c.status === 'DRAFT').length,
|
||||
rejected: courses.filter(c => c.status === 'REJECTED').length
|
||||
};
|
||||
|
||||
// Build recent courses list (first 3) from existing data
|
||||
this.recentCourses = courses.slice(0, 3).map(course => ({
|
||||
id: course.id,
|
||||
title: course.title.th,
|
||||
students: 0,
|
||||
lessons: 0,
|
||||
icon: 'book',
|
||||
thumbnail: course.thumbnail_url || null
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch dashboard data:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
# 📊 Test Results Index
|
||||
|
||||
> รวม link ไปยังหน้ารายงานผลการทดสอบแต่ละส่วน
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Auth
|
||||
|
||||
| ชื่อกลุ่มทดสอบ | Link |
|
||||
|---|---|
|
||||
| Login Page Tests | [เปิดผลทดสอบ](./auth/Login_Page_Tests/index.html) |
|
||||
| Register Page Tests | [เปิดผลทดสอบ](./auth/Register_Page_Tests/index.html) |
|
||||
|
||||
---
|
||||
|
||||
## 👨💼 Admin
|
||||
|
||||
| ชื่อกลุ่มทดสอบ | Link |
|
||||
|---|---|
|
||||
| Dashboard Tests | [เปิดผลทดสอบ](./Admin/Dashboard_Tests/index.html) |
|
||||
| Categories Page Tests | [เปิดผลทดสอบ](./Admin/Categories_Page_Tests/index.html) |
|
||||
| Audit Log Page Tests | [เปิดผลทดสอบ](./Admin/Audit_Log_Page_Tests/index.html) |
|
||||
| Pending Courses Page Tests | [เปิดผลทดสอบ](./Admin/Pending_Courses_Page_Tests/index.html) |
|
||||
| Recommended Courses Page Tests | [เปิดผลทดสอบ](./Admin/Recommended_Courses_Page_Tests/index.html) |
|
||||
| Users Page Tests | [เปิดผลทดสอบ](./Admin/Users_Page_Tests/index.html) |
|
||||
|
||||
---
|
||||
|
||||
## 👨🏫 Instructor
|
||||
|
||||
| ชื่อกลุ่มทดสอบ | Link |
|
||||
|---|---|
|
||||
| Dashboard Tests | [เปิดผลทดสอบ](./Instructor/Dashboard_Tests/index.html) |
|
||||
| Courses List Page Tests | [เปิดผลทดสอบ](./Instructor/Courses_List_Page_Tests/index.html) |
|
||||
| Create Course & Structure Tests | [เปิดผลทดสอบ](./Instructor/Create_Course_&_Structure_Tests/index.html) |
|
||||
| Course Detail Tabs Tests | [เปิดผลทดสอบ](./Instructor/Course_Detail_Tabs_Tests/index.html) |
|
||||
33
frontend_management/utils/date.ts
Normal file
33
frontend_management/utils/date.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/**
|
||||
* Format a date string into Thai locale format (Date only)
|
||||
* Example: 10 ม.ค. 67
|
||||
*/
|
||||
export const formatDate = (date: string | Date | null | undefined): string => {
|
||||
if (!date) return '-';
|
||||
|
||||
const d = typeof date === 'string' ? new Date(date) : date;
|
||||
|
||||
return d.toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Format a date string into Thai locale format (Date and Time)
|
||||
* Example: 10 ม.ค. 67 14:30
|
||||
*/
|
||||
export const formatDateTime = (date: string | Date | null | undefined): string => {
|
||||
if (!date) return '-';
|
||||
|
||||
const d = typeof date === 'string' ? new Date(date) : date;
|
||||
|
||||
return d.toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue