From ac2b203f37499612558a341bd2aa7b204a9158e1 Mon Sep 17 00:00:00 2001
From: Farhaan4 <127176994+Farhaan4@users.noreply.github.com>
Date: Thu, 11 Sep 2025 11:26:04 +0700
Subject: [PATCH] template

---
 proyek-frontend/app/app.vue                   |  30 ++++-
 .../template-page/CategorySelection.vue       | 113 ++++++++++++------
 .../components/template-page/TemplateGrid.vue | 113 +++++++++++++-----
 proyek-frontend/app/pages/template.vue        |  34 +++---
 4 files changed, 209 insertions(+), 81 deletions(-)

diff --git a/proyek-frontend/app/app.vue b/proyek-frontend/app/app.vue
index 5b5760e..d136a2c 100644
--- a/proyek-frontend/app/app.vue
+++ b/proyek-frontend/app/app.vue
@@ -2,4 +2,32 @@
   <div>
     <NuxtPage />
   </div>
-</template>
\ No newline at end of file
+</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']);
\ No newline at end of file
diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index f8ee80d..8a66ff7 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -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>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
index ea8c0ee..0ec471c 100644
--- a/proyek-frontend/app/components/template-page/TemplateGrid.vue
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -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">
-        &larr; 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>
diff --git a/proyek-frontend/app/pages/template.vue b/proyek-frontend/app/pages/template.vue
index cad6a85..de0bd58 100644
--- a/proyek-frontend/app/pages/template.vue
+++ b/proyek-frontend/app/pages/template.vue
@@ -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