Compare commits
No commits in common. "394b885deb6f0d4cb9b2e20e72bb9c53d7db0ca6" and "538c96e6b08665643a7dcba65a32640d893b02d8" have entirely different histories.
394b885deb
...
538c96e6b0
@ -7,11 +7,11 @@
|
|||||||
class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
|
class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
|
||||||
>
|
>
|
||||||
<!-- Judul -->
|
<!-- Judul -->
|
||||||
<p class="text-lg font-semibold mb-2">{{ props.title }}?</p>
|
<p class="text-lg font-semibold mb-2">Yakin hapus produk ini?</p>
|
||||||
|
|
||||||
<!-- Deskripsi tambahan -->
|
<!-- Deskripsi tambahan -->
|
||||||
<p class="text-sm text-gray-600 mb-4">
|
<p class="text-sm text-gray-600 mb-4">
|
||||||
{{ props.message }}
|
Produk yang sudah dihapus tidak akan bisa dikembalikan.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Tombol aksi -->
|
<!-- Tombol aksi -->
|
||||||
@ -34,9 +34,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
isOpen: Boolean,
|
isOpen: Boolean,
|
||||||
title:String,
|
|
||||||
message:String
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
|
||||||
<div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h2 class="text-lg font-bold text-gray-800">
|
|
||||||
{{ product ? 'Edit Kategori' : 'Tambah Kategori Baru' }}
|
|
||||||
</h2>
|
|
||||||
<button @click="emit('close')" class="text-gray-400 hover:text-gray-600">✕</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Form -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<label class="block text-sm font-medium text-gray-700">Nama Kategori</label>
|
|
||||||
<input
|
|
||||||
v-model="form.nama"
|
|
||||||
type="text"
|
|
||||||
placeholder="Masukkan nama kategori"
|
|
||||||
class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring focus:ring-[#c6a77d]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Buttons -->
|
|
||||||
<div class="flex justify-end gap-2">
|
|
||||||
<button
|
|
||||||
@click="emit('close')"
|
|
||||||
class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
|
|
||||||
>
|
|
||||||
Batal
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
@click="saveKategori"
|
|
||||||
:disabled="!form.nama"
|
|
||||||
class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065] disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Simpan
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch } from 'vue'
|
|
||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
isOpen: Boolean,
|
|
||||||
product: Object
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['close'])
|
|
||||||
|
|
||||||
const form = ref({ nama: '' })
|
|
||||||
|
|
||||||
// Sync kalau ubah kategori
|
|
||||||
watch(() => props.product, (val) => {
|
|
||||||
form.value.nama = val ? val.nama : ''
|
|
||||||
}, { immediate: true })
|
|
||||||
|
|
||||||
const saveKategori = async () => {
|
|
||||||
try {
|
|
||||||
if (props.product) {
|
|
||||||
await axios.put(`/api/kategori/${props.product.id}`, form.value)
|
|
||||||
} else {
|
|
||||||
await axios.post('/api/kategori', form.value)
|
|
||||||
}
|
|
||||||
emit('close') // tutup modal
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
alert('Gagal menyimpan kategori')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
|
|
||||||
<div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
|
|
||||||
|
|
||||||
<!-- Tombol close -->
|
|
||||||
<button @click="$emit('close')" class="absolute top-3 right-3 text-gray-600 hover:text-black">
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Judul -->
|
|
||||||
<h2 class="text-xl font-bold text-center text-D mb-4">Edit Kategori</h2>
|
|
||||||
|
|
||||||
<!-- Input Nama Kategori -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="editKategori" class="block text-sm font-medium text-D mb-1">Nama Kategori</label>
|
|
||||||
<input
|
|
||||||
v-model="editNamaKategori"
|
|
||||||
type="text"
|
|
||||||
id="editKategori"
|
|
||||||
placeholder="Masukkan nama kategori"
|
|
||||||
class="w-full p-2 border rounded-md bg-Focus outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tombol Aksi -->
|
|
||||||
<div class="flex justify-end gap-3">
|
|
||||||
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
|
|
||||||
Batal
|
|
||||||
</button>
|
|
||||||
<button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A">
|
|
||||||
Update
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch } from "vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
kategori: { type: Object, required: true },
|
|
||||||
});
|
|
||||||
|
|
||||||
const editNamaKategori = ref("");
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.kategori,
|
|
||||||
(newVal) => {
|
|
||||||
if (newVal) {
|
|
||||||
editNamaKategori.value = newVal.nama;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
const updateKategori = () => {
|
|
||||||
if (editNamaKategori.value.trim() === "") {
|
|
||||||
alert("Nama kategori tidak boleh kosong!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Emit hasil update ke parent
|
|
||||||
emit("update", { ...props.kategori, nama: editNamaKategori.value });
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,168 +0,0 @@
|
|||||||
<template>
|
|
||||||
<mainLayout>
|
|
||||||
<CreateKategori :isOpen="creatingKategori" :product="detail" @close="closeKategori" />
|
|
||||||
|
|
||||||
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
|
|
||||||
message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
|
|
||||||
<div class="p-6">
|
|
||||||
<!-- Header Section -->
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
|
|
||||||
<button @click="tambahKategori"
|
|
||||||
class="px-4 py-2 bg-[#c6a77d] text-white rounded-md hover:bg-[#b09065] transition duration-200 flex items-center gap-2">
|
|
||||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
||||||
</svg>
|
|
||||||
Tambah Kategori
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Table Section -->
|
|
||||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
|
|
||||||
<table class="w-full">
|
|
||||||
<thead>
|
|
||||||
<tr class="bg-[#c6a77d] text-white">
|
|
||||||
<th class="px-6 py-4 text-left font-semibold border-r border-[#b09065]">
|
|
||||||
No
|
|
||||||
</th>
|
|
||||||
<th class="px-6 py-4 text-left font-semibold border-r border-[#b09065]">
|
|
||||||
Nama Kategori
|
|
||||||
</th>
|
|
||||||
<th class="px-6 py-4 text-center font-semibold">
|
|
||||||
Aksi
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-for="(item, index) in kategori" :key="item.id"
|
|
||||||
class="border-b border-gray-200 hover:bg-gray-50 transition duration-150"
|
|
||||||
:class="{ 'bg-gray-50': index % 2 === 1 }">
|
|
||||||
<td class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900">
|
|
||||||
{{ index + 1 }}
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 border-r border-gray-200 text-gray-800">
|
|
||||||
{{ item.nama }}
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-center">
|
|
||||||
<div class="flex justify-center gap-2">
|
|
||||||
<button @click="ubahKategori(item)"
|
|
||||||
class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
|
|
||||||
Ubah
|
|
||||||
</button>
|
|
||||||
<button @click="hapusKategori(item)"
|
|
||||||
class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
|
|
||||||
Hapus
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Empty State -->
|
|
||||||
<tr v-if="kategori.length === 0 && !loading">
|
|
||||||
<td colspan="3" class="px-6 py-8 text-center text-gray-500">
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
||||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
|
|
||||||
</svg>
|
|
||||||
<p>Tidak ada data kategori</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loading State -->
|
|
||||||
<div v-if="loading" class="flex justify-center items-center py-8">
|
|
||||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
|
|
||||||
<span class="ml-2 text-gray-600">Memuat data...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mainLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import axios from "axios";
|
|
||||||
import mainLayout from "../layouts/mainLayout.vue";
|
|
||||||
import CreateKategori from "../components/CreateKategori.vue";
|
|
||||||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
|
||||||
|
|
||||||
// Reactive data
|
|
||||||
const kategori = ref([]);
|
|
||||||
const loading = ref(false);
|
|
||||||
const creatingKategori = ref(false);
|
|
||||||
const detail = ref(null);
|
|
||||||
const confirmDeleteOpen = ref(false);
|
|
||||||
const kategoriToDelete = ref(null);
|
|
||||||
|
|
||||||
// Fetch data kategori dari API
|
|
||||||
const fetchKategoris = async () => {
|
|
||||||
loading.value = true;
|
|
||||||
try {
|
|
||||||
const response = await axios.get("/api/kategori");
|
|
||||||
kategori.value = response.data;
|
|
||||||
console.log("Data kategori:", response.data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching kategori:", error);
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Tambah kategori - open modal
|
|
||||||
const tambahKategori = () => {
|
|
||||||
detail.value = null; // Reset detail untuk mode create
|
|
||||||
creatingKategori.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Close modal
|
|
||||||
const closeKategori = () => {
|
|
||||||
creatingKategori.value = false;
|
|
||||||
fetchKategoris(); // Refresh data setelah modal ditutup
|
|
||||||
};
|
|
||||||
|
|
||||||
// Ubah kategori
|
|
||||||
const ubahKategori = (item) => {
|
|
||||||
detail.value = item; // Set detail untuk mode edit
|
|
||||||
creatingKategori.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Hapus kategori
|
|
||||||
const hapusKategori = (item) => {
|
|
||||||
kategoriToDelete.value = item;
|
|
||||||
confirmDeleteOpen.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 🔵 Ditambahkan: aksi konfirmasi hapus
|
|
||||||
const confirmDelete = async () => {
|
|
||||||
try {
|
|
||||||
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
|
|
||||||
console.log("Kategori berhasil dihapus");
|
|
||||||
fetchKategoris();
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error deleting kategori:", error);
|
|
||||||
} finally {
|
|
||||||
closeDeleteModal();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 🔵 Ditambahkan: tutup modal hapus
|
|
||||||
const closeDeleteModal = () => {
|
|
||||||
confirmDeleteOpen.value = false;
|
|
||||||
kategoriToDelete.value = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Lifecycle
|
|
||||||
onMounted(() => {
|
|
||||||
fetchKategoris();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* Custom styles jika diperlukan */
|
|
||||||
.table-hover-row:hover {
|
|
||||||
background-color: #f9fafb;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -12,8 +12,6 @@
|
|||||||
:isOpen="deleting"
|
:isOpen="deleting"
|
||||||
@cancel="deleting = false"
|
@cancel="deleting = false"
|
||||||
@confirm="deleteProduk"
|
@confirm="deleteProduk"
|
||||||
title="Hapus Produk"
|
|
||||||
message="Apakah Anda yakin ingin menghapus produk ini?"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
|
|||||||
@ -5,7 +5,6 @@ import Brankas from '../pages/Brankas.vue'
|
|||||||
import Tray from '../pages/Tray.vue'
|
import Tray from '../pages/Tray.vue'
|
||||||
import Kasir from '../pages/Kasir.vue'
|
import Kasir from '../pages/Kasir.vue'
|
||||||
import InputProduk from '../pages/InputProduk.vue'
|
import InputProduk from '../pages/InputProduk.vue'
|
||||||
import Kategori from '../pages/Kategori.vue'
|
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@ -39,11 +38,6 @@ const routes = [
|
|||||||
name: 'Kasir',
|
name: 'Kasir',
|
||||||
component: Kasir
|
component: Kasir
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/kategori',
|
|
||||||
name: 'Kategori',
|
|
||||||
component: Kategori
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user