247 lines
8.7 KiB
Vue
247 lines
8.7 KiB
Vue
<template>
|
|
<mainLayout>
|
|
<!-- Modal Create/Edit Sales -->
|
|
<CreateSales
|
|
v-if="creatingSales"
|
|
:isOpen="creatingSales"
|
|
:sales="detail"
|
|
@close="closeSales"
|
|
/>
|
|
|
|
<EditSales
|
|
v-if="editingSales"
|
|
:isOpen="editingSales"
|
|
:sales="detail"
|
|
@close="closeEditSales"
|
|
/>
|
|
|
|
<!-- Modal Delete -->
|
|
<ConfirmDeleteModal
|
|
:isOpen="confirmDeleteOpen"
|
|
title="Hapus Sales"
|
|
message="Apakah Anda yakin ingin menghapus sales ini?"
|
|
@confirm="confirmDelete"
|
|
@cancel="closeDeleteModal"
|
|
/>
|
|
|
|
<div class="p-6 min-h-[75vh]">
|
|
<!-- Header Section -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-D">Sales</h1>
|
|
<button
|
|
@click="tambahSales"
|
|
class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 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 Sales
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Table Section -->
|
|
<div
|
|
class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
|
|
>
|
|
<table class="w-full">
|
|
<thead class="">
|
|
<tr class="bg-C text-white">
|
|
<th
|
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
|
>
|
|
No
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
|
>
|
|
Nama Sales
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
|
>
|
|
No HP
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-center text-D border-r border-[#b09065]"
|
|
>
|
|
Alamat
|
|
</th>
|
|
<th class="px-6 py-4 text-center text-D">
|
|
Aksi
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="(item, index) in sales"
|
|
: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 text-center font-medium text-gray-900"
|
|
>
|
|
{{ index + 1 }}
|
|
</td>
|
|
<td
|
|
class="px-6 py-4 border-r border-gray-200 text-D"
|
|
>
|
|
{{ item.nama }}
|
|
</td>
|
|
<td
|
|
class="px-6 py-4 border-r border-gray-200 text-gray-800"
|
|
>
|
|
{{ item.no_hp }}
|
|
</td>
|
|
<td
|
|
class="px-6 py-4 border-r border-gray-200 text-gray-800"
|
|
>
|
|
{{ item.alamat }}
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<div class="flex justify-center gap-2">
|
|
<button
|
|
@click="ubahSales(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="hapusSales(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="sales.length === 0 && !loading">
|
|
<td
|
|
colspan="5"
|
|
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 sales</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 CreateSales from "../components/CreateSales.vue";
|
|
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
|
import EditSales from "../components/EditSales.vue";
|
|
|
|
// State
|
|
const sales = ref([]);
|
|
const loading = ref(false);
|
|
const creatingSales = ref(false);
|
|
const detail = ref(null);
|
|
const editingSales = ref(false);
|
|
const confirmDeleteOpen = ref(false);
|
|
const salesToDelete = ref(null);
|
|
|
|
// Fetch data dari API
|
|
const fetchSales = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const response = await axios.get("/api/sales");
|
|
sales.value = response.data;
|
|
} catch (error) {
|
|
console.error("Error fetching sales:", error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// Tambah
|
|
const tambahSales = () => {
|
|
detail.value = null;
|
|
creatingSales.value = true;
|
|
};
|
|
|
|
// Ubah
|
|
const ubahSales = (item) => {
|
|
detail.value = item;
|
|
editingSales.value = true;
|
|
};
|
|
|
|
// Hapus
|
|
const hapusSales = (item) => {
|
|
salesToDelete.value = item;
|
|
confirmDeleteOpen.value = true;
|
|
};
|
|
|
|
const confirmDelete = async () => {
|
|
try {
|
|
await axios.delete(`/api/sales/${salesToDelete.value.id}`);
|
|
fetchSales();
|
|
confirmDeleteOpen.value = false;
|
|
} catch (error) {
|
|
console.error("Error deleting sales:", error);
|
|
}
|
|
};
|
|
|
|
const closeDeleteModal = () => {
|
|
confirmDeleteOpen.value = false;
|
|
salesToDelete.value = null;
|
|
};
|
|
|
|
// Tutup modal Create/Edit
|
|
const closeSales = () => {
|
|
creatingSales.value = false;
|
|
fetchSales();
|
|
};
|
|
|
|
const closeEditSales = () => {
|
|
editingSales.value = false;
|
|
fetchSales();
|
|
};
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchSales();
|
|
});
|
|
</script>
|