Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
Baghaztra
commit
14c94f86e7
@ -107,19 +107,37 @@
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<button @click="closePopup" class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button @click="saveMove" :disabled="!selectedTrayId || isMoving"
|
||||
class="px-4 py-2 rounded text-D transition flex items-center"
|
||||
:class="(selectedTrayId && !isMoving) ? 'bg-C hover:bg-C/80' : 'bg-gray-400 cursor-not-allowed'">
|
||||
<div v-if="isMoving" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
{{ isMoving ? 'Memindahkan...' : 'Pindahkan' }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<button @click="closePopup" class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
|
||||
<button @click="showDeleteConfirm = true"
|
||||
class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
|
||||
<i class="fas fa-trash mr-2"></i>Hapus
|
||||
</button>
|
||||
|
||||
<button @click="saveMove" :disabled="!selectedTrayId || isMoving"
|
||||
class="px-4 py-2 rounded text-D transition flex items-center"
|
||||
:class="(selectedTrayId && !isMoving) ? 'bg-C hover:bg-C/80' : 'bg-gray-400 cursor-not-allowed'">
|
||||
<div v-if="isMoving" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
{{ isMoving ? 'Memindahkan...' : 'Pindahkan' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Konfirmasi Hapus -->
|
||||
<ConfirmDeleteModal
|
||||
:isOpen="showDeleteConfirm"
|
||||
title="Konfirmasi Hapus Item"
|
||||
message="Apakah kamu yakin ingin menghapus item ini?"
|
||||
confirmText="Ya, Hapus"
|
||||
cancelText="Batal"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="cancelDelete"
|
||||
/>
|
||||
|
||||
<!-- Confirm Modal untuk aksi berbahaya (jika diperlukan di masa depan) -->
|
||||
<div v-if="isConfirmModalVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
|
||||
@ -151,6 +169,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
|
||||
|
||||
const props = defineProps({
|
||||
search: {
|
||||
@ -173,6 +192,8 @@ const selectedTrayId = ref("");
|
||||
const errorMove = ref("");
|
||||
const isMoving = ref(false);
|
||||
|
||||
const showDeleteConfirm = ref(false);
|
||||
|
||||
// State modal konfirmasi
|
||||
const isConfirmModalVisible = ref(false);
|
||||
const confirmModalTitle = ref("");
|
||||
@ -221,6 +242,44 @@ const closePopup = () => {
|
||||
isMoving.value = false;
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
if (!selectedItem.value) return;
|
||||
|
||||
try {
|
||||
// Panggil API hapus item
|
||||
await axios.delete(`/api/item/${selectedItem.value.id}`, {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
|
||||
// Tampilkan alert sukses
|
||||
alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
|
||||
|
||||
// Refresh data
|
||||
await refreshData();
|
||||
|
||||
// Tutup modal & popup
|
||||
showDeleteConfirm.value = false;
|
||||
closePopup();
|
||||
|
||||
// Auto hide alert
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null; }, 3000);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Gagal menghapus item:", err.response?.data || err);
|
||||
alert.value = { error: err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi." };
|
||||
|
||||
// Auto hide alert error
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null; }, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const cancelDelete = () => {
|
||||
showDeleteConfirm.value = false;
|
||||
};
|
||||
|
||||
const saveMove = async () => {
|
||||
if (!selectedTrayId.value || !selectedItem.value || isMoving.value) return;
|
||||
|
||||
|
||||
@ -1,31 +1,59 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
|
||||
@click="$emit('click', product.id)"
|
||||
>
|
||||
<!-- Foto Produk -->
|
||||
<img
|
||||
v-if="product.foto && product.foto.length > 0"
|
||||
:src="product.foto[0].url"
|
||||
:alt="product.nama"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
|
||||
|
||||
<!-- Nama Produk di bawah -->
|
||||
<div class="relative">
|
||||
<!-- Card Produk -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
|
||||
class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
|
||||
@click="$emit('click', product.id)"
|
||||
>
|
||||
{{ product.nama }}
|
||||
<!-- Foto Produk -->
|
||||
<img
|
||||
v-if="product.foto && product.foto.length > 0"
|
||||
:src="product.foto[0].url"
|
||||
:alt="product.nama"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
|
||||
|
||||
<!-- Nama Produk di bawah -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
|
||||
>
|
||||
{{ product.nama }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifikasi Stok Menipis (di luar card) -->
|
||||
<div
|
||||
v-if="isStockLow"
|
||||
class="absolute -top-2 -right-2 group z-20"
|
||||
>
|
||||
<!-- Bulatan Merah -->
|
||||
<div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center cursor-help border-2 border-white shadow-md">
|
||||
<span class="text-white text-xs font-bold">!</span>
|
||||
</div>
|
||||
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute top-6 -right-4 bg-red-600 text-white text-xs px-3 py-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-30">
|
||||
Stok menipis: {{ product.items_count }} pcs
|
||||
<!-- Arrow untuk tooltip -->
|
||||
<div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-red-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
product: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Computed untuk mengecek apakah stok menipis (kurang dari 5)
|
||||
const isStockLow = computed(() => {
|
||||
return props.product.items_count < 5;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -49,33 +49,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Isi Card (Max tinggi 3 item + scroll kalau lebih) -->
|
||||
<div
|
||||
v-if="tray.items && tray.items.length"
|
||||
class="space-y-2 flex-1 overflow-y-auto max-h-[168px] pr-1"
|
||||
>
|
||||
<div
|
||||
v-for="item in tray.items"
|
||||
:key="item.id"
|
||||
class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
|
||||
@click="openMovePopup(item)"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
v-if="item.produk?.foto && item.produk?.foto.length > 0"
|
||||
:src="item.produk?.foto[0].url"
|
||||
alt="foto produk"
|
||||
class="size-12 object-cover rounded"
|
||||
/>
|
||||
<div class="text-D">
|
||||
<p class="text-sm">{{ item.produk?.nama }}</p>
|
||||
<p class="text-sm font-medium">{{ item.kode_item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">{{ item.produk?.berat }}g</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tray.items && tray.items.length" class="space-y-2 flex-1 overflow-y-auto max-h-[168px] pr-1">
|
||||
<div v-for="item in tray.items" :key="item.id"
|
||||
class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
|
||||
@click="openMovePopup(item)">
|
||||
<div class="flex items-center gap-3">
|
||||
<img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url"
|
||||
alt="foto produk" class="size-12 object-cover rounded" />
|
||||
<div class="text-D">
|
||||
<p class="text-sm">{{ item.produk.nama }}</p>
|
||||
<p class="text-sm font-medium">{{ item.kode_item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">{{ item.produk.berat }}g</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kalau kosong -->
|
||||
<div v-else class="text-gray-400 text-center py-4 flex-1">
|
||||
@ -107,7 +97,7 @@
|
||||
{{ selectedItem.kode_item }}
|
||||
</div>
|
||||
<div class="text-center text-gray-700 font-medium mb-3">
|
||||
{{ selectedItem.produk?.nama }}
|
||||
{{ selectedItem.produk.nama }}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-4">
|
||||
@ -128,9 +118,14 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
|
||||
<button @click="closePopup" class="px-4 py-2 rounded bg-gray-400 hover:bg-gray-500 text-white transition">
|
||||
{{ isAdmin ? 'Batal' : 'Tutup' }}
|
||||
</button>
|
||||
<button @click="showDeleteConfirm = true"
|
||||
class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
|
||||
<i class="fas fa-trash mr-2"></i>Hapus
|
||||
</button>
|
||||
<button v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
|
||||
:class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
|
||||
Simpan
|
||||
@ -138,12 +133,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Konfirmasi Hapus -->
|
||||
<ConfirmDeleteModal
|
||||
:isOpen="showDeleteConfirm"
|
||||
title="Konfirmasi Hapus Item"
|
||||
message="Apakah kamu yakin ingin menghapus item ini?"
|
||||
confirmText="Ya, Hapus"
|
||||
cancelText="Batal"
|
||||
@confirm="confirmDelete"
|
||||
@cancel="cancelDelete"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import axios from "axios";
|
||||
import InputSelect from "./InputSelect.vue";
|
||||
import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
|
||||
|
||||
const isAdmin = localStorage.getItem("role") === "owner";
|
||||
|
||||
@ -212,6 +219,47 @@ const printQR = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const showDeleteConfirm = ref(false);
|
||||
|
||||
const confirmDelete = async () => {
|
||||
if (!selectedItem.value) return;
|
||||
|
||||
try {
|
||||
// Panggil API hapus item
|
||||
await axios.delete(`/api/item/${selectedItem.value.id}`, {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
|
||||
// Tampilkan alert sukses
|
||||
alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
|
||||
|
||||
// Refresh data
|
||||
await refreshData();
|
||||
|
||||
// Tutup modal & popup
|
||||
showDeleteConfirm.value = false;
|
||||
closePopup();
|
||||
|
||||
// Auto hide alert
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null; }, 3000);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Gagal menghapus item:", err.response?.data || err);
|
||||
alert.value = { error: err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi." };
|
||||
|
||||
// Auto hide alert error
|
||||
clearTimeout(timer.value);
|
||||
timer.value = setTimeout(() => { alert.value = null; }, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const cancelDelete = () => {
|
||||
showDeleteConfirm.value = false;
|
||||
};
|
||||
|
||||
// --- Fungsi Pop-up ---
|
||||
const openMovePopup = (item) => {
|
||||
selectedItem.value = item;
|
||||
@ -248,7 +296,7 @@ const saveMove = async () => {
|
||||
// Hitung total berat
|
||||
const totalWeight = (tray) => {
|
||||
if (!tray.items) return 0;
|
||||
const total = tray.items.reduce((sum, item) => sum + (item.produk?.berat || 0), 0);
|
||||
const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
|
||||
return total.toFixed(2);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user