237 lines
7.8 KiB
Vue
237 lines
7.8 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]">
|
|
<p class="font-serif italic text-[25px] text-D">SALES</p>
|
|
|
|
|
|
<div class="flex justify-end items-center mb-6">
|
|
<button
|
|
@click="tambahSales"
|
|
v-if="isAdmin"
|
|
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>
|
|
<!-- 🔹 Alert Message -->
|
|
<div class="px-6" v-if="alert">
|
|
<div
|
|
v-if="alert.error"
|
|
class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
|
|
role="alert"
|
|
>
|
|
<strong class="font-bold">Error! </strong>
|
|
<span class="block sm:inline">{{ alert.error }}</span>
|
|
</div>
|
|
<div
|
|
v-if="alert.success"
|
|
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
|
|
role="alert"
|
|
>
|
|
<strong class="font-bold">Success! </strong>
|
|
<span class="block sm:inline">{{ alert.success }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 🔹 End Alert -->
|
|
|
|
<!-- Table Section -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="bg-C text-white border-D border">
|
|
<th class="px-6 py-4 text-center border-r border-D text-D">No</th>
|
|
<th class="px-6 py-4 text-center border-r border-D text-D">Nama Sales</th>
|
|
<th class="px-6 py-4 text-center border-r border-D text-D">No HP</th>
|
|
<th class="px-6 py-4 text-center border-r border-D text-D">Alamat</th>
|
|
<th v-if="isAdmin" 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-C border-t-0 border-x hover:bg-gray-50 transition duration-150"
|
|
:class="{ 'bg-gray-50': index % 2 === 1 }"
|
|
>
|
|
<td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
|
|
{{ index + 1 }}
|
|
</td>
|
|
<td class="px-6 py-4 border-r border-C text-D">{{ item.nama }}</td>
|
|
<td class="px-6 py-4 border-r border-C text-gray-800">{{ item.no_hp }}</td>
|
|
<td class="px-6 py-4 border-r border-C text-gray-800">{{ item.alamat }}</td>
|
|
<td class="px-6 py-4 text-center" v-if="isAdmin">
|
|
<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";
|
|
|
|
const isAdmin = localStorage.getItem("role") === "owner";
|
|
|
|
// 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);
|
|
|
|
// 🔹 Alert State
|
|
const alert = ref(null);
|
|
const timer = ref(null);
|
|
|
|
function showAlert(type, message) {
|
|
alert.value = { [type]: message };
|
|
clearTimeout(timer.value);
|
|
timer.value = setTimeout(() => {
|
|
alert.value = null;
|
|
}, 5000);
|
|
}
|
|
|
|
// Fetch data dari API
|
|
const fetchSales = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const response = await axios.get("/api/sales", {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
},
|
|
});
|
|
sales.value = response.data;
|
|
} catch (error) {
|
|
console.error("Error fetching sales:", error);
|
|
showAlert("error", "Gagal memuat data sales.");
|
|
} 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}`, {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
},
|
|
});
|
|
fetchSales();
|
|
confirmDeleteOpen.value = false;
|
|
showAlert("success", "Sales berhasil dihapus.");
|
|
} catch (error) {
|
|
console.error("Error deleting sales:", error);
|
|
showAlert("error", "Gagal menghapus sales.");
|
|
}
|
|
};
|
|
|
|
const closeDeleteModal = () => {
|
|
confirmDeleteOpen.value = false;
|
|
salesToDelete.value = null;
|
|
};
|
|
|
|
// Tutup modal Create/Edit
|
|
const closeSales = () => {
|
|
creatingSales.value = false;
|
|
fetchSales();
|
|
showAlert("success", "Sales berhasil ditambahkan.");
|
|
};
|
|
|
|
const closeEditSales = () => {
|
|
editingSales.value = false;
|
|
fetchSales();
|
|
showAlert("success", "Sales berhasil diperbarui.");
|
|
};
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchSales();
|
|
});
|
|
</script>
|