Compare commits
3 Commits
a99996940e
...
fcd7719826
Author | SHA1 | Date | |
---|---|---|---|
|
fcd7719826 | ||
|
3174b84c0a | ||
|
11954568ae |
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/75 z-50">
|
|
||||||
|
<div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
|
||||||
<div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
|
<div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
@ -31,7 +32,7 @@
|
|||||||
<button
|
<button
|
||||||
@click="saveKategori"
|
@click="saveKategori"
|
||||||
:disabled="!form.nama"
|
:disabled="!form.nama"
|
||||||
class="px-4 py-2 bg-C text-white rounded hover:bg-B disabled:opacity-50"
|
class="px-4 py-2 bg-C text-black rounded hover:bg-B"
|
||||||
>
|
>
|
||||||
Simpan
|
Simpan
|
||||||
</button>
|
</button>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="isOpen"
|
v-if="isOpen"
|
||||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
class="fixed inset-0 bg-black/65 flex items-center justify-center z-50"
|
||||||
>
|
>
|
||||||
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
|
||||||
<h2 class="text-xl font-bold mb-4">Tambah Sales</h2>
|
<h2 class="text-xl font-bold mb-4">Tambah Sales</h2>
|
||||||
@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
<div class="flex justify-end gap-2 mt-6">
|
<div class="flex justify-end gap-2 mt-6">
|
||||||
<button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
|
<button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
|
||||||
<button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Simpan</button>
|
<button type="submit" class="px-4 py-2 bg-C text-D rounded hover:bg-C/80">Simpan</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
|
<div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
|
||||||
<div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
|
<div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
|
||||||
|
|
||||||
<!-- Tombol close -->
|
<!-- Tombol close -->
|
||||||
@ -27,8 +27,8 @@
|
|||||||
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
|
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
|
||||||
Batal
|
Batal
|
||||||
</button>
|
</button>
|
||||||
<button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A">
|
<button @click="updateKategori" class="px-4 py-2 bg-B text-D rounded-md hover:bg-A">
|
||||||
Update
|
Ubah
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="isOpen"
|
v-if="isOpen"
|
||||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
class="fixed inset-0 bg-black/65 flex items-center justify-center z-50"
|
||||||
>
|
>
|
||||||
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
|
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
|
||||||
<h2 class="text-xl font-bold mb-4">Ubah Sales</h2>
|
<h2 class="text-xl font-bold mb-4">Ubah Sales</h2>
|
||||||
@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
<div class="flex justify-end gap-2 mt-6">
|
<div class="flex justify-end gap-2 mt-6">
|
||||||
<button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
|
<button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
|
||||||
<button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Update</button>
|
<button type="submit" class="px-4 py-2 bg-C text-D rounded hover:bg-C">Ubah</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@ -37,7 +37,7 @@
|
|||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
isOpen: Boolean,
|
isOpen: Boolean,
|
||||||
sales: Object, // data sales yang akan di-edit
|
sales: Object,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["close"]);
|
const emit = defineEmits(["close"]);
|
||||||
@ -48,7 +48,6 @@
|
|||||||
alamat: "",
|
alamat: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
// isi form dengan data props.sales
|
|
||||||
watch(
|
watch(
|
||||||
() => props.sales,
|
() => props.sales,
|
||||||
(val) => {
|
(val) => {
|
||||||
@ -62,11 +61,9 @@
|
|||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
try {
|
try {
|
||||||
await axios.put(`/api/sales/${props.sales.id}`, form.value);
|
await axios.put(`/api/sales/${props.sales.id}`, form.value);
|
||||||
alert("Sales berhasil diubah!");
|
|
||||||
emit("close");
|
emit("close");
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error updating sales:", error);
|
console.error("Error updating sales:", error);
|
||||||
alert("Gagal mengubah sales");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
|
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
|
||||||
message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
|
message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
|
||||||
<div class="p-6">
|
<div class="p-6 min-h-[75vh]" >
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<div class="flex justify-between items-center mb-6">
|
<div class="flex justify-between items-center mb-6">
|
||||||
<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
|
<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
|
||||||
@ -22,10 +22,10 @@
|
|||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-C text-black">
|
<tr class="bg-C text-black">
|
||||||
<th class="px-6 py-4 text-left font-semibold border-r border-C">
|
<th class="px-6 py-4 text-center font-semibold border-r border-C">
|
||||||
No
|
No
|
||||||
</th>
|
</th>
|
||||||
<th class="px-6 py-4 text-left font-semibold border-r border-C">
|
<th class="px-6 py-4 text-center font-semibold border-r border-C">
|
||||||
Nama Kategori
|
Nama Kategori
|
||||||
</th>
|
</th>
|
||||||
<th class="px-6 py-4 text-center font-semibold">
|
<th class="px-6 py-4 text-center font-semibold">
|
||||||
@ -37,10 +37,10 @@
|
|||||||
<tr v-for="(item, index) in kategori" :key="item.id"
|
<tr v-for="(item, index) in kategori" :key="item.id"
|
||||||
class="border-b border-gray-200 hover:bg-A transition duration-150"
|
class="border-b border-gray-200 hover:bg-A transition duration-150"
|
||||||
:class="{ 'bg-gray-50': index % 2 === 1 }">
|
:class="{ 'bg-gray-50': index % 2 === 1 }">
|
||||||
<td class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900">
|
<td class="px-6 py-4 border-r border-gray-200 font-medium text-center text-gray-900">
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 border-r border-gray-200 text-gray-800">
|
<td class="px-6 py-4 border-r border-gray-200 text-center text-gray-800">
|
||||||
{{ item.nama }}
|
{{ item.nama }}
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-4 text-center">
|
<td class="px-6 py-4 text-center">
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
v-if="editingSales"
|
v-if="editingSales"
|
||||||
:isOpen="editingSales"
|
:isOpen="editingSales"
|
||||||
:sales="detail"
|
:sales="detail"
|
||||||
@close="closeSales"
|
@close="closeEditSales"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Modal Delete -->
|
<!-- Modal Delete -->
|
||||||
@ -21,16 +21,16 @@
|
|||||||
title="Hapus Sales"
|
title="Hapus Sales"
|
||||||
message="Apakah Anda yakin ingin menghapus sales ini?"
|
message="Apakah Anda yakin ingin menghapus sales ini?"
|
||||||
@confirm="confirmDelete"
|
@confirm="confirmDelete"
|
||||||
@close="closeDeleteModal"
|
@cancel="closeDeleteModal"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="p-6">
|
<div class="p-6 min-h-[75vh]">
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<div class="flex justify-between items-center mb-6">
|
<div class="flex justify-between items-center mb-6">
|
||||||
<h1 class="text-2xl font-bold text-gray-800">Sales</h1>
|
<h1 class="text-2xl font-bold text-D">Sales</h1>
|
||||||
<button
|
<button
|
||||||
@click="tambahSales"
|
@click="tambahSales"
|
||||||
class="px-4 py-2 bg-[#c6a77d] text-white rounded-md hover:bg-[#b09065] transition duration-200 flex items-center gap-2"
|
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
class="w-4 h-4"
|
class="w-4 h-4"
|
||||||
@ -54,29 +54,29 @@
|
|||||||
class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
|
class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
|
||||||
>
|
>
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead>
|
<thead class="">
|
||||||
<tr class="bg-[#c6a77d] text-white">
|
<tr class="bg-C text-white">
|
||||||
<th
|
<th
|
||||||
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||||
>
|
>
|
||||||
No
|
No
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||||
>
|
>
|
||||||
Nama Sales
|
Nama Sales
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||||
>
|
>
|
||||||
No HP
|
No HP
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]"
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
||||||
>
|
>
|
||||||
Alamat
|
Alamat
|
||||||
</th>
|
</th>
|
||||||
<th class="px-6 py-4 text-center font-semibold">
|
<th class="px-6 py-4 text-center text-D">
|
||||||
Aksi
|
Aksi
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
@ -89,12 +89,12 @@
|
|||||||
:class="{ 'bg-gray-50': index % 2 === 1 }"
|
:class="{ 'bg-gray-50': index % 2 === 1 }"
|
||||||
>
|
>
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900"
|
class="px-6 py-4 border-r border-gray-200 text-center font-medium text-gray-900"
|
||||||
>
|
>
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="px-6 py-4 border-r border-gray-200 text-gray-800"
|
class="px-6 py-4 border-r border-gray-200 text-D"
|
||||||
>
|
>
|
||||||
{{ item.nama }}
|
{{ item.nama }}
|
||||||
</td>
|
</td>
|
||||||
@ -178,7 +178,7 @@ const sales = ref([]);
|
|||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const creatingSales = ref(false);
|
const creatingSales = ref(false);
|
||||||
const detail = ref(null);
|
const detail = ref(null);
|
||||||
|
const editingSales = ref(false);
|
||||||
const confirmDeleteOpen = ref(false);
|
const confirmDeleteOpen = ref(false);
|
||||||
const salesToDelete = ref(null);
|
const salesToDelete = ref(null);
|
||||||
|
|
||||||
@ -204,7 +204,7 @@ const tambahSales = () => {
|
|||||||
// Ubah
|
// Ubah
|
||||||
const ubahSales = (item) => {
|
const ubahSales = (item) => {
|
||||||
detail.value = item;
|
detail.value = item;
|
||||||
creatingSales.value = true;
|
editingSales.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Hapus
|
// Hapus
|
||||||
@ -234,6 +234,11 @@ const closeSales = () => {
|
|||||||
fetchSales();
|
fetchSales();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const closeEditSales = () => {
|
||||||
|
editingSales.value = false;
|
||||||
|
fetchSales();
|
||||||
|
};
|
||||||
|
|
||||||
// Lifecycle
|
// Lifecycle
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchSales();
|
fetchSales();
|
||||||
|
Loading…
Reference in New Issue
Block a user