Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
Timoti313
commit
e615058a51
@ -52,8 +52,8 @@ class ItemController extends Controller
|
||||
public function update(Request $request, int $id)
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'id_produk' => 'required|in:produks.id',
|
||||
'id_nampan' => 'nullable|in:nampans.id'
|
||||
'id_produk' => 'required|exists:produks,id',
|
||||
'id_nampan' => 'nullable|exists:nampans,id'
|
||||
],[
|
||||
'id_produk' => 'Id produk tidak valid.',
|
||||
'id_nampan' => 'Id nampan tidak valid'
|
||||
|
||||
@ -28,7 +28,7 @@ class ProdukController extends Controller
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'nama' => 'required|string|max:100',
|
||||
'id_kategori' => 'required|exists:users,id',
|
||||
'id_kategori' => 'required|exists:kategoris,id',
|
||||
'berat' => 'required|numeric',
|
||||
'kadar' => 'required|integer',
|
||||
'harga_per_gram' => 'required|numeric',
|
||||
|
||||
@ -15,7 +15,7 @@ class Kategori extends Model
|
||||
|
||||
protected $hidden = ['created_at', 'updated_at', 'deleted_at'];
|
||||
|
||||
public function produks()
|
||||
public function produk()
|
||||
{
|
||||
return $this->hasMany(Produk::class, 'id_kategori');
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@ class DatabaseSeeder extends Seeder
|
||||
}
|
||||
}
|
||||
|
||||
$kategoriList = ['cincin', 'gelang', 'kalung', 'anting'];
|
||||
$kategoriList = ['cincin', 'gelang rantai', 'gelang bulat', 'kalung', 'liontin', 'anting', 'giwang'];
|
||||
foreach ($kategoriList as $kategori) {
|
||||
Kategori::factory()->create([
|
||||
'nama' => $kategori
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Berat -->
|
||||
<span class="font-medium">{{ item.berat }}g</span>
|
||||
<span class="font-medium">{{ item.produk.berat }}g</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -39,6 +39,7 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const items = ref([]);
|
||||
const produk = ref([])
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
|
||||
@ -1,30 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="text-center py-6">Loading...</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
|
||||
|
||||
<!-- Kalau hasil search kosong -->
|
||||
<div
|
||||
v-else-if="filteredTrays.length === 0"
|
||||
class="text-center text-gray-500 py-6"
|
||||
>
|
||||
<div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-6">
|
||||
Nampan tidak ditemukan.
|
||||
</div>
|
||||
|
||||
<!-- Grid nampan -->
|
||||
<div
|
||||
v-else
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
|
||||
>
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="tray in filteredTrays"
|
||||
:key="tray.id"
|
||||
class="border rounded-lg p-4 shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<!-- Header Nampan -->
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
|
||||
<div class="flex gap-2">
|
||||
@ -43,18 +32,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Isi Nampan -->
|
||||
<div
|
||||
v-if="tray.items && tray.items.length > 0"
|
||||
class="space-y-2 max-h-64 overflow-y-auto pr-2"
|
||||
>
|
||||
<div v-if="tray.items && tray.items.length > 0" class="space-y-2 max-h-64 overflow-y-auto pr-2">
|
||||
<div
|
||||
v-for="item in tray.items"
|
||||
:key="item.id"
|
||||
class="flex justify-between items-center border rounded-lg p-2"
|
||||
@click="openMovePopup(item)"
|
||||
>
|
||||
|
||||
<!-- Gambar + Info -->
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
v-if="item.produk.foto && item.produk.foto.length > 0"
|
||||
@ -68,88 +53,179 @@
|
||||
<p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Berat -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">{{ item.produk.berat }}g</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kalau nampan kosong -->
|
||||
<div v-else class="text-gray-400 text-center py-4">
|
||||
Nampan kosong.<br />
|
||||
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
|
||||
</div>
|
||||
|
||||
<!-- Total Berat -->
|
||||
<div class="border-t mt-3 pt-2 text-right font-semibold">
|
||||
Berat Total: {{ totalWeight(tray) }}g
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Pop-up pindah item -->
|
||||
<div v-if="isPopupVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 relative">
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="p-2 border border-gray-300 rounded-lg">
|
||||
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
|
||||
<div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
|
||||
<div class="flex justify-center mb-4">
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
|
||||
Cetak
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="tray-select" class="block text-sm font-medium text-gray-700 mb-1">Nama Nampan</label>
|
||||
<select
|
||||
id="tray-select"
|
||||
v-model="selectedTrayId"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
>
|
||||
<option value="" disabled>Pilih Nampan</option>
|
||||
<option v-for="tray in availableTrays" :key="tray.id" :value="tray.id">
|
||||
{{ tray.nama }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<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-100 transition"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="saveMove"
|
||||
:disabled="!selectedTrayId"
|
||||
class="px-4 py-2 rounded text-white transition"
|
||||
:class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
|
||||
>
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
// terima search dari parent
|
||||
const props = defineProps({
|
||||
search: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["edit", "delete"])
|
||||
|
||||
const emit = defineEmits(["edit", "delete"]);
|
||||
const trays = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
// hitung total berat
|
||||
const totalWeight = (tray) => {
|
||||
if (!tray.items) return 0;
|
||||
return tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
|
||||
};
|
||||
// const totalWeight = (tray) => {
|
||||
// if (!tray.items) return 0;
|
||||
// const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
|
||||
// return total.toFixed(2); // hasil string "12.34"
|
||||
// };
|
||||
// --- State untuk Pop-up ---
|
||||
const isPopupVisible = ref(false);
|
||||
const selectedItem = ref(null);
|
||||
const selectedTrayId = ref("");
|
||||
|
||||
// ambil data dari backend
|
||||
onMounted(async () => {
|
||||
// QR Code generator
|
||||
const qrCodeUrl = computed(() => {
|
||||
if (selectedItem.value) {
|
||||
const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, '')}`;
|
||||
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// --- Fungsi Pop-up ---
|
||||
const openMovePopup = (item) => {
|
||||
selectedItem.value = item;
|
||||
selectedTrayId.value = "";
|
||||
isPopupVisible.value = true;
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
isPopupVisible.value = false;
|
||||
selectedItem.value = null;
|
||||
selectedTrayId.value = "";
|
||||
};
|
||||
|
||||
const saveMove = async () => {
|
||||
if (!selectedTrayId.value || !selectedItem.value) return;
|
||||
try {
|
||||
await axios.put(`/api/item/${selectedItem.value.id}`, {
|
||||
id_nampan: selectedTrayId.value,
|
||||
id_produk: selectedItem.value.id_produk, // ikutkan id_produk karena API minta
|
||||
});
|
||||
|
||||
await refreshData();
|
||||
closePopup();
|
||||
} catch (err) {
|
||||
console.error("Gagal memindahkan item:", err.response?.data || err);
|
||||
alert("Gagal memindahkan item. Silakan coba lagi.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// --- Ambil data nampan + item ---
|
||||
const refreshData = async () => {
|
||||
try {
|
||||
const [nampanRes, itemRes] = await Promise.all([
|
||||
axios.get("/api/nampan"),
|
||||
axios.get("/api/item")
|
||||
axios.get("/api/item"),
|
||||
]);
|
||||
|
||||
const nampans = nampanRes.data;
|
||||
const items = itemRes.data;
|
||||
|
||||
// mapping items ke nampan
|
||||
trays.value = nampans.map(tray => {
|
||||
trays.value = nampans.map((tray) => {
|
||||
return {
|
||||
...tray,
|
||||
items: items.filter(item => item.id_nampan === tray.id)
|
||||
// pastikan tipe sama (string/number)
|
||||
items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
|
||||
};
|
||||
});
|
||||
|
||||
console.log("Nampan dengan items:", trays.value);
|
||||
} catch (err) {
|
||||
error.value = err.message || "Gagal mengambil data";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// filter berdasarkan nama nampan
|
||||
// Hitung total berat
|
||||
const totalWeight = (tray) => {
|
||||
if (!tray.items) return 0;
|
||||
const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
|
||||
return total.toFixed(2);
|
||||
};
|
||||
|
||||
// Filter nampan berdasarkan pencarian
|
||||
const filteredTrays = computed(() => {
|
||||
if (!props.search) return trays.value;
|
||||
return trays.value.filter((tray) =>
|
||||
tray.nama.toLowerCase().includes(props.search.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
// Daftar nampan lain (selain tempat item saat ini)
|
||||
const availableTrays = computed(() => {
|
||||
if (!selectedItem.value || !trays.value) return [];
|
||||
return trays.value.filter(
|
||||
(tray) => Number(tray.id) !== Number(selectedItem.value.id_nampan)
|
||||
);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
refreshData();
|
||||
});
|
||||
</script>
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Kategori</label>
|
||||
<InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
|
||||
<InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
@ -69,20 +69,20 @@
|
||||
<!-- Upload Button -->
|
||||
<div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
|
||||
@dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
|
||||
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
|
||||
:class="{
|
||||
'border-blue-400 bg-blue-50': isDragging,
|
||||
'cursor-not-allowed opacity-50': uploadLoading
|
||||
}">
|
||||
<div class="text-center">
|
||||
<div v-if="!uploadLoading"
|
||||
class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
|
||||
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||
<div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2">
|
||||
<svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
@ -135,19 +135,28 @@ const router = useRouter();
|
||||
|
||||
const form = ref({
|
||||
nama: '',
|
||||
kategori: '',
|
||||
id_kategori: null,
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
});
|
||||
|
||||
const category = ref([
|
||||
{ value: "cincin", label: "Cincin" },
|
||||
{ value: "gelang", label: "Gelang" },
|
||||
{ value: "kalung", label: "Kalung" },
|
||||
{ value: "anting", label: "Anting" },
|
||||
]);
|
||||
const category = ref([]);
|
||||
|
||||
const loadKategori = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/kategori');
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
category.value = response.data.map(cat => ({
|
||||
value: cat.id,
|
||||
label: cat.nama
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading categories:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const uploadLoading = ref(false);
|
||||
@ -163,7 +172,7 @@ const createdProduct = ref(null);
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return form.value.nama &&
|
||||
form.value.kategori &&
|
||||
form.value.id_kategori &&
|
||||
form.value.berat > 0 &&
|
||||
form.value.kadar > 0 &&
|
||||
form.value.harga_per_gram > 0 &&
|
||||
@ -311,7 +320,7 @@ const submitForm = async (addItem) => {
|
||||
// Reset form
|
||||
form.value = {
|
||||
nama: '',
|
||||
kategori: '',
|
||||
id_kategori: '',
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
@ -347,7 +356,7 @@ const submitForm = async (addItem) => {
|
||||
const resetForm = async () => {
|
||||
form.value = {
|
||||
nama: '',
|
||||
kategori: '',
|
||||
id_kategori: '',
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
@ -372,5 +381,6 @@ const back = () => {
|
||||
|
||||
onMounted(() => {
|
||||
loadExistingPhotos();
|
||||
loadKategori();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -21,16 +21,7 @@
|
||||
<!-- Filter -->
|
||||
<div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
|
||||
<!-- Dropdown Kategori -->
|
||||
<select
|
||||
v-model="selectedCategory"
|
||||
class="border border-gray-300 rounded-md px-3 py-2 bg-B focus:outline-none focus:ring-2 focus:ring-B w-full md:w-48"
|
||||
>
|
||||
<option value="semua">Semua</option>
|
||||
<option value="cincin">Cincin</option>
|
||||
<option value="gelang">Gelang</option>
|
||||
<option value="kalung">Kalung</option>
|
||||
<option value="anting">Anting</option>
|
||||
</select>
|
||||
<InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
|
||||
|
||||
<!-- Search -->
|
||||
<searchbar v-model:search="searchQuery" class="flex-1" />
|
||||
@ -160,10 +151,11 @@ import ProductCard from "../components/ProductCard.vue";
|
||||
import searchbar from "../components/searchbar.vue";
|
||||
import CreateItemModal from "../components/CreateItemModal.vue";
|
||||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
||||
import InputSelect from "../components/InputSelect.vue";
|
||||
|
||||
const products = ref([]);
|
||||
const searchQuery = ref("");
|
||||
const selectedCategory = ref("semua");
|
||||
const selectedCategory = ref(0);
|
||||
const creatingItem = ref(false);
|
||||
const deleting = ref(false);
|
||||
|
||||
@ -171,6 +163,36 @@ const detail = ref({});
|
||||
const showOverlay = ref(false);
|
||||
const currentFotoIndex = ref(0);
|
||||
|
||||
const kategori = ref([]);
|
||||
|
||||
const loadKategori = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/kategori');
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
kategori.value = [
|
||||
{ value: 0, label: "Semua" },
|
||||
...response.data.map(cat => ({
|
||||
value: cat.id,
|
||||
label: cat.nama
|
||||
}))
|
||||
];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading categories:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadProduk = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/produk');
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
products.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading products:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Buka modal item
|
||||
const openItemModal = () => {
|
||||
creatingItem.value = true;
|
||||
@ -181,21 +203,17 @@ const closeItemModal = () => {
|
||||
|
||||
// Fetch data awal
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await axios.get("/api/produk");
|
||||
products.value = res.data;
|
||||
} catch (error) {
|
||||
console.error("Gagal ambil data produk:", error);
|
||||
}
|
||||
loadKategori()
|
||||
loadProduk();
|
||||
});
|
||||
|
||||
// Filter produk (kategori + search)
|
||||
const filteredProducts = computed(() => {
|
||||
let hasil = products.value;
|
||||
|
||||
if (selectedCategory.value !== "semua") {
|
||||
if (selectedCategory.value != 0) {
|
||||
hasil = hasil.filter(
|
||||
(p) => p.kategori.toLowerCase() === selectedCategory.value
|
||||
(p) => p.id_kategori == selectedCategory.value
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
use App\Http\Controllers\FotoSementaraController;
|
||||
use App\Http\Controllers\ItemController;
|
||||
use App\Http\Controllers\KategoriController;
|
||||
use App\Http\Controllers\NampanController;
|
||||
use App\Http\Controllers\ProdukController;
|
||||
use App\Http\Controllers\SalesController;
|
||||
@ -17,6 +18,7 @@ Route::prefix('api')->group(function () {
|
||||
Route::apiResource('sales', SalesController::class);
|
||||
Route::apiResource('user', UserController::class);
|
||||
Route::apiResource('transaksi', TransaksiController::class);
|
||||
Route::apiResource('kategori', KategoriController::class);
|
||||
|
||||
Route::get('brankas', [ItemController::class, 'brankasItem']);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user