94 lines
3.9 KiB
Vue
94 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<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 v-if="isLoading" class="text-center py-10"><p>Memuat template...</p></div>
|
|
<div v-else-if="error" class="text-center py-10 text-red-600"><p>Gagal memuat template.</p></div>
|
|
|
|
<div v-else-if="templates && templates.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
|
|
<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">
|
|
<img :src="`http://localhost:8000${tpl.foto}`" alt="Template">
|
|
|
|
|
|
<div class="p-5 text-center">
|
|
<h4 class="text-xl font-bold text-gray-800 mb-2">{{ tpl.nama }}</h4>
|
|
<p class="text-green-600 font-semibold text-xl mb-4">
|
|
Rp {{ tpl.harga.toLocaleString('id-ID') }}
|
|
</p>
|
|
|
|
<div v-if="tpl.fitur && tpl.fitur.deskripsi" class="relative mb-4">
|
|
<button @click="toggleDropdown(tpl.id)" class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-between items-center text-center">
|
|
<span class="mx-auto text-gray-700 font-semibold">FITUR YANG TERSEDIA</span>
|
|
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
|
|
</button>
|
|
|
|
<div v-if="openDropdownId === tpl.id">
|
|
<ul class="mt-4 space-y-2 text-gray-600">
|
|
<li v-for="(feature, index) in tpl.fitur.deskripsi.split(',')" :key="index">
|
|
{{ feature.trim() }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="flex items-center gap-3">
|
|
<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">Preview</button>
|
|
<button class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-10 text-gray-500">
|
|
<p>Belum ada template untuk kategori ini.</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
// State untuk melacak ID dropdown yang sedang terbuka
|
|
const openDropdownId = ref(null);
|
|
|
|
// Fungsi untuk membuka/menutup dropdown
|
|
const toggleDropdown = (templateId) => {
|
|
if (openDropdownId.value === templateId) {
|
|
// Jika dropdown yang sama diklik lagi, tutup
|
|
openDropdownId.value = null;
|
|
} else {
|
|
// Jika dropdown lain diklik, buka yang baru
|
|
openDropdownId.value = templateId;
|
|
}
|
|
};
|
|
|
|
const props = defineProps({
|
|
category: { type: String, required: true },
|
|
id_category: { type: Number, required: true },
|
|
});
|
|
|
|
defineEmits(['back']);
|
|
|
|
const { data: templates, pending: isLoading, error } = useFetch(
|
|
() => `/api/templates/category/${props.id_category}`,
|
|
{
|
|
baseURL: 'http://localhost:8000',
|
|
key: () => `templates-${props.id_category}`,
|
|
transform: (response) => {
|
|
if (!response || !Array.isArray(response)) return [];
|
|
return response;
|
|
}
|
|
}
|
|
);
|
|
</script> |