102 lines
4.7 KiB
Vue
102 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file CategorySidebar.vue
|
|
* @description Sidebar for filtering courses by category
|
|
*/
|
|
|
|
const props = defineProps<{
|
|
categories: any[];
|
|
modelValue: number[]; // selectedCategoryIds
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "update:modelValue", value: number[]): void;
|
|
}>();
|
|
|
|
const { locale, t } = useI18n();
|
|
const showAllCategories = ref(false);
|
|
|
|
const getLocalizedText = (text: any) => {
|
|
if (!text) return "";
|
|
if (typeof text === "string") return text;
|
|
|
|
const currentLocale = locale.value as 'th' | 'en';
|
|
return text[currentLocale] || text.th || text.en || "";
|
|
};
|
|
const toggleCategory = (id: number) => {
|
|
const current = [...props.modelValue];
|
|
const index = current.indexOf(id);
|
|
if (index > -1) {
|
|
current.splice(index, 1);
|
|
} else {
|
|
current.push(id);
|
|
}
|
|
emit("update:modelValue", current);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white/60 dark:!bg-[#0f172a]/60 backdrop-blur-3xl rounded-[2.5rem] border border-slate-200 dark:border-white/10 shadow-xl shadow-blue-900/5 overflow-hidden transition-all duration-500">
|
|
<q-expansion-item
|
|
default-opened
|
|
expand-separator
|
|
header-class="py-6 px-8"
|
|
class="group"
|
|
>
|
|
<template v-slot:header>
|
|
<div class="flex items-center gap-4 w-full">
|
|
<div class="w-10 h-10 rounded-xl bg-blue-600/10 dark:bg-blue-400/10 flex items-center justify-center">
|
|
<q-icon name="category" class="text-blue-600 dark:text-blue-400" size="20px" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-lg font-black text-slate-900 dark:!text-white leading-none mb-1">{{ $t('discovery.categoryTitle') }}</div>
|
|
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ modelValue.length }} Selectable</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="px-3 pb-6 pt-2">
|
|
<div class="space-y-1">
|
|
<div
|
|
v-for="cat in showAllCategories ? categories : categories.slice(0, 5)"
|
|
:key="cat.id"
|
|
class="relative group/item"
|
|
>
|
|
<div
|
|
class="flex items-center gap-3 px-5 py-3 rounded-2xl transition-all cursor-pointer border border-transparent"
|
|
:class="modelValue.includes(cat.id) ? 'bg-blue-600/5 dark:bg-blue-400/5 border-blue-100 dark:border-blue-400/20 shadow-sm shadow-blue-500/5' : 'hover:bg-slate-50 dark:hover:bg-white/5'"
|
|
@click="toggleCategory(cat.id)"
|
|
>
|
|
<q-checkbox
|
|
:model-value="modelValue.includes(cat.id)"
|
|
@update:model-value="toggleCategory(cat.id)"
|
|
color="primary"
|
|
keep-color
|
|
dense
|
|
/>
|
|
<span
|
|
class="text-sm font-bold transition-colors truncate"
|
|
:class="modelValue.includes(cat.id) ? 'text-blue-700 dark:text-blue-400' : 'text-slate-700 dark:text-slate-400 group-hover/item:text-slate-900 dark:group-hover/item:text-white'"
|
|
>
|
|
{{ getLocalizedText(cat.name) }}
|
|
</span>
|
|
|
|
<!-- Active Indicator Dot -->
|
|
<div v-if="modelValue.includes(cat.id)" class="ml-auto w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400 shadow-lg shadow-blue-500/50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show More/Less Action -->
|
|
<div
|
|
v-if="categories.length > 5"
|
|
@click="showAllCategories = !showAllCategories"
|
|
class="mt-4 mx-2 py-3 px-5 rounded-xl border border-dashed border-slate-200 dark:border-white/10 flex items-center justify-center gap-2 cursor-pointer text-slate-500 dark:text-slate-400 hover:border-blue-300 dark:hover:border-blue-500/40 hover:text-blue-600 dark:hover:text-blue-400 transition-all font-bold text-xs uppercase tracking-widest"
|
|
>
|
|
{{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
|
|
<q-icon :name="showAllCategories ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" size="16px" />
|
|
</div>
|
|
</div>
|
|
</q-expansion-item>
|
|
</div>
|
|
</template>
|