fix form
This commit is contained in:
Farhaan4
parent
15aa085cea
commit
eaea6bc516
@ -76,19 +76,30 @@
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
|
||||
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm">
|
||||
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
||||
</div>
|
||||
<label for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
|
||||
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
|
||||
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
||||
<button
|
||||
type="button"
|
||||
@click="removeImage(i)"
|
||||
class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold"
|
||||
aria-label="Hapus gambar"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label v-if="previewImages.length < 5" for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</form>
|
||||
|
||||
@ -125,21 +136,17 @@ const form = ref({
|
||||
kategori: "",
|
||||
harga: "",
|
||||
tanggal_pemesanan: new Date().toISOString().split("T")[0],
|
||||
|
||||
nama_pemesan: "",
|
||||
no_hp: "",
|
||||
email: "",
|
||||
|
||||
nama_lengkap_anak: "",
|
||||
nama_panggilan_anak: "",
|
||||
bapak_anak: "",
|
||||
ibu_anak: "",
|
||||
|
||||
hari_tanggal_acara: "",
|
||||
waktu_acara: "",
|
||||
alamat_acara: "",
|
||||
maps_acara: "",
|
||||
|
||||
no_rekening1: "",
|
||||
no_rekening2: "",
|
||||
link_musik: "",
|
||||
@ -155,15 +162,11 @@ onMounted(async () => {
|
||||
if (route.query.template_id) {
|
||||
try {
|
||||
const template = await $fetch(`http://localhost:8000/api/templates/${route.query.template_id}`);
|
||||
console.log("Template dari API:", template); // 🔍 debug
|
||||
|
||||
form.value.template_id = template.id;
|
||||
form.value.nama_template = template.nama_template; // ✅ sesuai JSON
|
||||
form.value.kategori_id = template.kategori_id; // ✅ numeric id
|
||||
form.value.kategori = template.kategori?.nama || "-"; // ✅ ambil nama kategori
|
||||
form.value.nama_template = template.nama_template;
|
||||
form.value.kategori_id = template.kategori_id;
|
||||
form.value.kategori = template.kategori?.nama || "-";
|
||||
form.value.harga = template.harga;
|
||||
|
||||
// kalau mau ambil fiturs
|
||||
form.value.fiturs = template.fiturs.map(f => f.deskripsi);
|
||||
} catch (err) {
|
||||
console.error("Gagal ambil template", err);
|
||||
@ -171,19 +174,32 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
// FUNGSI UNTUK MENAMBAH GAMBAR
|
||||
const handleFileUpload = (event) => {
|
||||
const files = event.target.files;
|
||||
form.value.galeri = [];
|
||||
previewImages.value = [];
|
||||
const newFiles = Array.from(event.target.files);
|
||||
const combinedFiles = [...form.value.galeri, ...newFiles];
|
||||
|
||||
for (let i = 0; i < files.length && i < 5; i++) {
|
||||
const file = files[i];
|
||||
form.value.galeri.push(file);
|
||||
// Batasi total file menjadi 5
|
||||
form.value.galeri = combinedFiles.slice(0, 5);
|
||||
|
||||
// Buat ulang array preview berdasarkan data file yang sudah final
|
||||
previewImages.value = [];
|
||||
form.value.galeri.forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => previewImages.value.push(e.target.result);
|
||||
reader.onload = (e) => {
|
||||
previewImages.value.push(e.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Reset input agar bisa memilih file yang sama lagi
|
||||
event.target.value = null;
|
||||
};
|
||||
|
||||
// FUNGSI UNTUK MENGHAPUS GAMBAR (SEKARANG DI LUAR)
|
||||
const removeImage = (index) => {
|
||||
form.value.galeri.splice(index, 1);
|
||||
previewImages.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
|
||||
@ -109,18 +109,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri</h2>
|
||||
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm">
|
||||
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
||||
</div>
|
||||
<label for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
|
||||
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
|
||||
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
||||
<button
|
||||
type="button"
|
||||
@click="removeImage(i)"
|
||||
class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold"
|
||||
aria-label="Hapus gambar"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<label v-if="previewImages.length < 5" for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
@ -209,19 +217,32 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
// FUNGSI UNTUK MENAMBAH GAMBAR
|
||||
const handleFileUpload = (event) => {
|
||||
const files = event.target.files;
|
||||
form.value.galeri = [];
|
||||
previewImages.value = [];
|
||||
const newFiles = Array.from(event.target.files);
|
||||
const combinedFiles = [...form.value.galeri, ...newFiles];
|
||||
|
||||
for (let i = 0; i < files.length && i < 10; i++) { // Batas 10 gambar
|
||||
const file = files[i];
|
||||
form.value.galeri.push(file);
|
||||
// Batasi total file menjadi 5
|
||||
form.value.galeri = combinedFiles.slice(0, 5);
|
||||
|
||||
// Buat ulang array preview berdasarkan data file yang sudah final
|
||||
previewImages.value = [];
|
||||
form.value.galeri.forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => previewImages.value.push(e.target.result);
|
||||
reader.onload = (e) => {
|
||||
previewImages.value.push(e.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Reset input agar bisa memilih file yang sama lagi
|
||||
event.target.value = null;
|
||||
};
|
||||
|
||||
// FUNGSI UNTUK MENGHAPUS GAMBAR (SEKARANG DI LUAR)
|
||||
const removeImage = (index) => {
|
||||
form.value.galeri.splice(index, 1);
|
||||
previewImages.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
|
||||
@ -73,24 +73,29 @@
|
||||
<input v-model="form.link_musik" type="text" placeholder="Link Musik Latar (Opsional)" class="input" />
|
||||
</section>
|
||||
|
||||
<!-- Galeri -->
|
||||
<section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
||||
<span class="w-1.5 h-6 bg-blue-600 rounded-full"></span> Galeri (Max 5 Foto)
|
||||
</h2>
|
||||
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload"/>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm">
|
||||
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
||||
</div>
|
||||
<label for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
<div class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">Galeri (max 5 gambar)</h2>
|
||||
<input type="file" multiple accept="image/*" @change="handleFileUpload" class="hidden" id="gallery-upload" />
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
<div v-for="(img, i) in previewImages" :key="i" class="relative w-full aspect-square rounded-lg overflow-hidden shadow-sm group">
|
||||
<img :src="img" alt="Preview" class="object-cover w-full h-full" />
|
||||
<button
|
||||
type="button"
|
||||
@click="removeImage(i)"
|
||||
class="absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity font-bold"
|
||||
aria-label="Hapus gambar"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<label v-if="previewImages.length < 5" for="gallery-upload" class="flex items-center justify-center w-full aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Submit -->
|
||||
<div class="mt-10 text-center">
|
||||
@ -128,9 +133,8 @@ const form = ref({
|
||||
nama_panggilan_anak: "",
|
||||
bapak_anak: "",
|
||||
ibu_anak: "",
|
||||
umur_dirayakan: "", // <-- Field baru ditambahkan
|
||||
anak_ke: "", // <-- Field baru ditambahkan
|
||||
|
||||
umur_dirayakan: "",
|
||||
anak_ke: "",
|
||||
hari_tanggal_acara: "",
|
||||
waktu_acara: "",
|
||||
alamat_acara: "",
|
||||
@ -159,21 +163,35 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
// FUNGSI UNTUK MENAMBAH GAMBAR
|
||||
const handleFileUpload = (event) => {
|
||||
const files = event.target.files;
|
||||
form.value.galeri = [];
|
||||
previewImages.value = [];
|
||||
const newFiles = Array.from(event.target.files);
|
||||
const combinedFiles = [...form.value.galeri, ...newFiles];
|
||||
|
||||
for (let i = 0; i < files.length && i < 5; i++) {
|
||||
const file = files[i];
|
||||
form.value.galeri.push(file);
|
||||
// Batasi total file menjadi 5
|
||||
form.value.galeri = combinedFiles.slice(0, 5);
|
||||
|
||||
// Buat ulang array preview berdasarkan data file yang sudah final
|
||||
previewImages.value = [];
|
||||
form.value.galeri.forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => previewImages.value.push(e.target.result);
|
||||
reader.onload = (e) => {
|
||||
previewImages.value.push(e.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Reset input agar bisa memilih file yang sama lagi
|
||||
event.target.value = null;
|
||||
};
|
||||
|
||||
// FUNGSI UNTUK MENGHAPUS GAMBAR (SEKARANG DI LUAR)
|
||||
const removeImage = (index) => {
|
||||
form.value.galeri.splice(index, 1);
|
||||
previewImages.value.splice(index, 1);
|
||||
};
|
||||
|
||||
|
||||
const submitForm = async () => {
|
||||
loading.value = true;
|
||||
success.value = false;
|
||||
|
||||
@ -5,6 +5,5 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Dengan Nuxt 3, komponen akan di-import secara otomatis.
|
||||
// Anda tidak perlu menulis kode apa pun di sini.
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user