Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix kategori

Browse Source
This commit is contained in:
Farhaan4 2025-10-14 11:37:54 +07:00
parent 28d3155070
commit d2b2db90a6
2 changed files with 52 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
proyek-frontend/app/components/template-page/CategorySelection.vue
View File

@ -30,22 +30,12 @@
</div>
<!-- Kategori Grid -->
<div
v-else-if="categories.length > 0"
class="mt-12 flex flex-wrap justify-center gap-6"
>
<div
v-for="category in categories"
:key="category.id + '-' + category.foto"
<div v-else-if="categories.length > 0" class="mt-12 flex flex-wrap justify-center gap-6">
<div v-for="category in categories" :key="category.id + '-' + category.foto"
@click="onCategoryClick(category)"
class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
>
<img
v-if="category.foto"
:src="`http://localhost:8000${category.foto}`"
:alt="category.nama"
class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
>
class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72">
<img v-if="category.foto" :src="`http://localhost:8000${category.foto}`" :alt="category.nama"
class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
<div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
<h3 class="text-xl font-semibold mb-2">
@ -127,12 +117,11 @@
<!-- Buttons -->
<div class="flex items-center gap-3 mt-6">
<button
class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors"
@click="onTemplateClick(t)">
<button @click="$router.push(`/preview/${t.id}`)"
class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors">
Preview
</button>
<NuxtLink :to="`${t.formPath}?template_id=${t.id}`"
<NuxtLink :to="`form/${t.formPath}`"
class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
Order
</NuxtLink>
@ -263,7 +252,7 @@ const templatesWithFeatures = computed(() =>
kategori: t.kategori,
paket: paketData[index % paketData.length].paket,
fiturs: paketData[index % paketData.length].fiturs.map((f, i) => ({ id: i + 1, deskripsi: f })),
formPath: formMapping[t.nama_template] || `/form/lainny` // 🔥 ambil path form sesuai mapping
formPath: t.slug
}))
)

26
proyek-frontend/app/components/template-page/TemplateGrid.vue
View File

@ -75,14 +75,16 @@
<!-- Buttons -->
<div class="flex items-center gap-3 mt-6">
<NuxtLink :to="`/preview/${tpl.id}`"
class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors text-center">
Preview
</NuxtLink>
<NuxtLink :to="`/form/${tpl.slug}`"
<NuxtLink ::to="`/form/${tpl.kategori.nama}/${tpl.slug}`"
class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
Order
<p class="text-xs text-gray-400 mt-2">Path: {{ `/form/${tpl.kategori?.nama}/${tpl.slug}` }}</p>
<!-- <pre>{{ tpl }}</pre> -->
</NuxtLink>
</div>
</div>
</div>
@ -169,24 +171,26 @@ const fetchTemplates = async (categoryId) => {
})
templates.value = res.map(tpl => {
// Pastikan nama paket konsisten: 'Starter', 'Basic', 'Premium'
const paketKey = tpl.paket ? tpl.paket.charAt(0).toUpperCase() + tpl.paket.slice(1).toLowerCase() : 'Starter'
const paketKey = tpl.paket
? tpl.paket.charAt(0).toUpperCase() + tpl.paket.slice(1).toLowerCase()
: 'Starter'
return {
id: tpl.id,
nama_template: tpl.nama_template,
slug: tpl.slug,
harga: tpl.harga,
kategori: tpl.kategori,
kategori: tpl.kategori, // pastikan kategori berisi object { nama_kategori }
foto: tpl.foto ?? '/logo2.png',
paket: paketKey,
fiturs: (fiturPerPaket[paketKey] || []).map((f, i) => ({
id: i + 1,
deskripsi: f
})),
preview_link: tpl.preview_link ?? null,
formPath: formMapping[tpl.nama_template] || '/form/lainny'
preview_link: tpl.preview_link ?? null
}
})
} catch (err) {
console.error(err)
error.value = 'Gagal memuat template.'
@ -202,6 +206,8 @@ onMounted(() => fetchTemplates(props.id_category))
watch(() => props.id_category, (newId) => {
if (newId) fetchTemplates(newId)
})
</script>
<style scoped>