template
This commit is contained in:
Farhaan4
parent
ed60c36fa1
commit
ac2b203f37
@ -2,4 +2,32 @@
|
||||
<div>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- <script setup>
|
||||
const props = defineProps({
|
||||
category: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
id_category: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
}) -->
|
||||
|
||||
// const templates = ref([])
|
||||
|
||||
// const fetchTemplates = async () => {
|
||||
// try {
|
||||
// templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
|
||||
// } catch (error) {
|
||||
// console.error('Gagal ambil template:', error)
|
||||
// }
|
||||
// }
|
||||
|
||||
// onMounted(() => {
|
||||
// fetchTemplates()
|
||||
// })
|
||||
|
||||
// defineEmits(['back']);
|
||||
@ -1,50 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-8">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Kembali ke Beranda
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
|
||||
Pilih Template Favoritmu
|
||||
</h1>
|
||||
<p class="mt-2 text-center text-gray-500">
|
||||
"Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."
|
||||
</p>
|
||||
<LandingPageHeader />
|
||||
|
||||
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
@click="onCategoryClick(category.nama)"
|
||||
class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
|
||||
<div class="p-6 bg-white">
|
||||
<h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
|
||||
<main class="container mx-auto px-4 py-16 md:py-20">
|
||||
|
||||
<div class="mb-8">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Kembali ke Beranda
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
|
||||
Pilih Template Favoritmu
|
||||
</h1>
|
||||
<p class="mt-2 text-center text-gray-500">
|
||||
"Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."
|
||||
</p>
|
||||
|
||||
<div class="mt-12">
|
||||
<div v-if="isLoading" class="text-center text-gray-500">
|
||||
<p>Memuat kategori...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="text-center text-red-500 bg-red-100 p-4 rounded-lg">
|
||||
<p><strong>Oops, terjadi kesalahan:</strong></p>
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-if="categories.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
@click="onCategoryClick(category.nama)"
|
||||
class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
<img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
|
||||
<div class="p-6 bg-white">
|
||||
<h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center text-gray-500">
|
||||
<p>Saat ini belum ada kategori yang tersedia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LandingPageHeader from '~/components/landing-page/header.vue';
|
||||
import Footer from '~/components/landing-page/footer.vue';
|
||||
|
||||
const emit = defineEmits(['category-selected']);
|
||||
|
||||
const categories = ref([])
|
||||
const categories = ref([]);
|
||||
// State baru untuk loading dan error
|
||||
const isLoading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
// Ambil data kategori dari Laravel API pakai $fetch
|
||||
const fetchCategories = async () => {
|
||||
// Reset state sebelum fetch
|
||||
isLoading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
categories.value = await $fetch('http://localhost:8000/api/kategoris')
|
||||
} catch (error) {
|
||||
console.error('Gagal ambil kategori:', error)
|
||||
const data = await $fetch('http://localhost:8000/api/kategoris');
|
||||
categories.value = data;
|
||||
} catch (err) {
|
||||
console.error('Gagal ambil kategori:', err);
|
||||
// Set pesan error yang akan ditampilkan ke pengguna
|
||||
error.value = 'Tidak dapat terhubung ke server. Silakan coba lagi nanti.';
|
||||
} finally {
|
||||
// Set loading ke false setelah selesai (baik sukses maupun gagal)
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,6 +92,8 @@ const onCategoryClick = (categoryName) => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchCategories()
|
||||
})
|
||||
</script>
|
||||
fetchCategories();
|
||||
});
|
||||
// Cukup satu baris ini untuk mengambil data dan mengelola semua state!
|
||||
// const { data: categories, pending: isLoading, error } = await useFetch('http://localhost:8000/api/kategoris');
|
||||
</script>
|
||||
@ -1,25 +1,80 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center mb-8">
|
||||
<button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold mr-4">
|
||||
← Kembali ke Kategori
|
||||
</button>
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">
|
||||
Pilih Template {{ category }} Favoritmu
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div v-for="tpl in templates" :key="tpl.id" class="border rounded-lg p-4 text-center">
|
||||
<img :src="tpl.foto" :alt="tpl.nama" class="bg-gray-200 h-40 mb-4 rounded-md object-cover w-full" />
|
||||
<h4 class="font-semibold">{{ tpl.nama }}</h4>
|
||||
<p class="text-gray-500">Rp {{ tpl.harga }}</p>
|
||||
<LandingPageHeader />
|
||||
|
||||
<main class="container mx-auto px-4 py-16 md:py-20">
|
||||
<div class="flex items-center mb-8">
|
||||
<button
|
||||
@click="$emit('back')"
|
||||
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 mr-1"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Kembali
|
||||
</button>
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">
|
||||
Template {{ category }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="text-center py-10">
|
||||
<p>Memuat template...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="text-center py-10 text-red-600">
|
||||
<p>Gagal memuat template. Silakan coba lagi.</p>
|
||||
</div>
|
||||
|
||||
<!-- Data Ada -->
|
||||
<div
|
||||
v-else-if="templates && templates.length > 0"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
<div
|
||||
v-for="tpl in templates"
|
||||
:key="tpl.id"
|
||||
class="border rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<img
|
||||
:src="`http://localhost:8000/storage/${tpl.foto}`"
|
||||
:alt="tpl.nama_template"
|
||||
class="bg-gray-200 h-48 w-full object-cover"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold truncate">{{ tpl.nama_template }}</h4>
|
||||
<p class="text-gray-500">
|
||||
Rp {{ Number(tpl.harga ?? 0).toLocaleString('id-ID') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Kosong -->
|
||||
<div v-else class="text-center py-10 text-gray-500">
|
||||
<p>Belum ada template untuk kategori ini.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LandingPageHeader from '~/components/landing-page/header.vue'
|
||||
import Footer from '~/components/landing-page/footer.vue'
|
||||
|
||||
const props = defineProps({
|
||||
category: {
|
||||
type: String,
|
||||
@ -27,23 +82,21 @@ const props = defineProps({
|
||||
},
|
||||
id_category: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const templates = ref([])
|
||||
defineEmits(['back'])
|
||||
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
|
||||
} catch (error) {
|
||||
console.error('Gagal ambil template:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTemplates()
|
||||
// Panggil API Laravel
|
||||
const {
|
||||
data: templates,
|
||||
pending: isLoading,
|
||||
error,
|
||||
} =
|
||||
useFetch(() => `/api/templates?kategori_id=${props.id_category}`, {
|
||||
baseURL: 'http://localhost:8000',
|
||||
key: () => `templates-${props.id_category}`,
|
||||
transform: (res) => res ?? []
|
||||
})
|
||||
|
||||
defineEmits(['back']);
|
||||
</script>
|
||||
|
||||
@ -1,27 +1,33 @@
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<TemplatePageCategorySelection
|
||||
v-if="!selectedCategory"
|
||||
@category-selected="handleCategorySelect"
|
||||
/>
|
||||
<div>
|
||||
<main class="container mx-auto px-4 py-16">
|
||||
<TemplatePageCategorySelection
|
||||
v-if="!selectedCategory"
|
||||
@category-selected="handleCategorySelect"
|
||||
/>
|
||||
|
||||
<TemplatePageTemplateGrid
|
||||
v-else
|
||||
:category="selectedCategory"
|
||||
@back="goBack"
|
||||
/>
|
||||
<TemplatePageTemplateGrid
|
||||
v-else
|
||||
:id_category="selectedCategory.id"
|
||||
:category="selectedCategory.nama"
|
||||
@back="goBack"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
// 1. Impor komponen anak yang Anda gunakan
|
||||
import TemplatePageCategorySelection from '~/components/template-page/CategorySelection.vue'; // Pastikan path ini benar
|
||||
import TemplatePageTemplateGrid from '~/components/template-page/TemplateGrid.vue'; // Pastikan path ini benar
|
||||
|
||||
// State untuk menyimpan kategori yang sedang dipilih
|
||||
// 2. State untuk menyimpan SELURUH OBJEK kategori yang dipilih
|
||||
const selectedCategory = ref(null);
|
||||
|
||||
// Fungsi ini akan menangkap event dari CategorySelection
|
||||
const handleCategorySelect = (categoryName) => {
|
||||
selectedCategory.value = categoryName;
|
||||
// Fungsi ini sekarang akan menerima seluruh objek { id, nama }
|
||||
const handleCategorySelect = (categoryObject) => {
|
||||
selectedCategory.value = categoryObject;
|
||||
};
|
||||
|
||||
// Fungsi ini akan menangkap event 'back' dari TemplateGrid
|
||||
|
||||
Loading…
Reference in New Issue
Block a user