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

tes api kategori & template

Browse Source
This commit is contained in:
Farhaan4 2025-09-11 14:12:05 +07:00
parent 72d25ad801
commit 1e9c6440cc
4 changed files with 107 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
proyek-frontend/app/app.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<NuxtPage /> <NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div> </div>
</template> </template>

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

@ -1,99 +1,50 @@
<template> <template>
<div> <div>
<LandingPageHeader /> <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>
<main class="container mx-auto px-4 py-16 md:py-20"> <div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
<div v-else-if="error" class="mt-12 text-center text-red-500">Gagal memuat kategori.</div>
<div class="mb-8">
<NuxtLink <div v-else-if="categories && categories.length > 0" class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
to="/" <div
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center" v-for="category in categories"
> :key="category.id"
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> @click="onCategoryClick(category)"
<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" /> class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
</svg> >
Kembali ke Beranda <img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
</NuxtLink> <div class="p-6 bg-white">
</div> <h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
<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> </div>
</div>
</main>
<Footer />
</div> </div>
</template> </template>
<script setup> <script setup>
import LandingPageHeader from '~/components/landing-page/header.vue';
import Footer from '~/components/landing-page/footer.vue';
const emit = defineEmits(['category-selected']); const emit = defineEmits(['category-selected']);
const categories = ref([]); // Gunakan useFetch yang lebih modern dan bersih
// State baru untuk loading dan error const { data: categories, pending: isLoading, error } = useFetch('http://localhost:8000/api/kategoris');
const isLoading = ref(true);
const error = ref(null);
const fetchCategories = async () => { const onCategoryClick = (category) => {
// Reset state sebelum fetch // Dan mengirimkan seluruh objek tersebut ke induk
isLoading.value = true; emit('category-selected', category);
error.value = null;
try {
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;
}
}
const onCategoryClick = (categoryName) => {
emit('category-selected', categoryName);
}; };
onMounted(() => {
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> </script>

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

@ -1,102 +1,78 @@
<template> <template>
<div> <div>
<LandingPageHeader /> <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>
<main class="container mx-auto px-4 py-16 md:py-20"> <div v-if="isLoading" class="text-center py-10">
<div class="flex items-center mb-8"> <p>Memuat template...</p>
<button </div>
@click="$emit('back')" <div v-else-if="error" class="text-center py-10 text-red-600">
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4" <p>Gagal memuat template. Silakan coba lagi.</p>
> </div>
<svg
xmlns="http://www.w3.org/2000/svg" <div v-else-if="templates && templates.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
class="h-5 w-5 mr-1"
viewBox="0 0 20 20" <div v-for="tpl in templates" :key="tpl.id" class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 flex flex-col">
fill="currentColor" <img :src="tpl.foto" :alt="tpl.nama" class="w-full h-48 object-cover" />
>
<path <div class="p-5 flex flex-col flex-grow">
fill-rule="evenodd" <h4 class="text-lg font-bold text-gray-800 truncate mb-1">{{ tpl.nama }}</h4>
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" <p class="text-green-600 font-semibold text-xl mb-4">
/> Rp {{ tpl.harga.toLocaleString('id-ID') }}
</svg> </p>
Kembali
</button>
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">
Template {{ category }}
</h1>
</div>
<!-- Loading --> <div v-if="tpl.fitur" class="mb-auto text-center">
<div v-if="isLoading" class="text-center py-10"> <span class="inline-block bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full">
<p>Memuat template...</p> {{ tpl.fitur.deskripsi }}
</div> </span>
</div>
<!-- Error -->
<div v-else-if="error" class="text-center py-10 text-red-600"> <div class="mt-6">
<p>Gagal memuat template. Silakan coba lagi.</p> <div class="flex items-center gap-3">
</div> <button class="w-full bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors">
Preview
<!-- Data Ada --> </button>
<div <button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
v-else-if="templates && templates.length > 0" Order
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" </button>
> </div>
<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> </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> </div>
</main>
<div v-else class="text-center py-10 text-gray-500">
<Footer /> <p>Belum ada template untuk kategori ini.</p>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import LandingPageHeader from '~/components/landing-page/header.vue' // Bagian <script> Anda sudah benar, tidak perlu diubah.
import Footer from '~/components/landing-page/footer.vue'
const props = defineProps({ const props = defineProps({
category: { category: { type: String, required: true },
type: String, id_category: { type: Number, required: true },
required: true, });
},
id_category: {
type: Number,
required: true,
},
})
defineEmits(['back']) defineEmits(['back']);
// Panggil API Laravel const { data: templates, pending: isLoading, error } = useFetch(
const { () => `/api/templates/category/${props.id_category}`,
data: templates, {
pending: isLoading, baseURL: 'http://localhost:8000',
error, key: () => `templates-${props.id_category}`,
} = transform: (response) => {
useFetch(() => `/api/templates?kategori_id=${props.id_category}`, { if (!response || !Array.isArray(response)) return [];
baseURL: 'http://localhost:8000', return response;
key: () => `templates-${props.id_category}`, }
transform: (res) => res ?? [] }
}) );
</script> </script>

6
proyek-frontend/nuxt.config.ts
View File

@ -19,5 +19,9 @@ export default defineNuxtConfig({
tailwindcss(), tailwindcss(),
], ],
}, },
runtimeConfig: {
public: {
apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
}
}
}) })