Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update brankaslist,traylist,tray

Browse Source
This commit is contained in:
adityaalfarison 2025-08-28 10:28:33 +07:00
parent 7f72921758
commit fc5541b8b0
4 changed files with 184 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
.env.example
View File

@ -1,65 +0,0 @@
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US
APP_MAINTENANCE_DRIVER=file
# APP_MAINTENANCE_STORE=database
PHP_CLI_SERVER_WORKERS=4
BCRYPT_ROUNDS=12
LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=
SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null
BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database
CACHE_STORE=database
# CACHE_PREFIX=
MEMCACHED_HOST=127.0.0.1
REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_MAILER=log
MAIL_SCHEME=null
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false
VITE_APP_NAME="${APP_NAME}"

4
resources/js/components/BrankasList.vue
View File

@ -8,8 +8,8 @@
<!-- Gambar -->
<div class="flex items-center gap-3">
<img
:src="item.image"
alt="Product Image"
v-if="item.produk.foto && item.produk.foto.length > 0"
:src="item.produk.foto[0].url"
class="w-12 h-12 object-contain"
/>
<!-- Info produk -->

70
resources/js/components/TrayList.vue
View File

@ -26,34 +26,50 @@
>
<!-- Header Nampan -->
<div class="flex justify-between items-center mb-3">
<h2 class="font-bold text-lg">{{ tray.nama }}</h2>
<h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
<div class="flex gap-2">
<button class="bg-yellow-300 p-1 rounded">✏️</button>
<button class="bg-red-500 text-white p-1 rounded">🗑️</button>
<button
class="p-2 rounded bg-yellow-400 hover:bg-yellow-500"
@click="emit('edit', tray)"
>
✏️
</button>
<button
class="bg-red-500 text-white p-1 rounded"
@click="emit('delete', tray.id)"
>
🗑️
</button>
</div>
</div>
<!-- Isi Nampan -->
<div v-if="tray.items && tray.items.length > 0" class="space-y-2">
<div
v-for="item in tray.items"
:key="item.id"
class="flex justify-between items-center border rounded-lg p-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"
>
<!-- Gambar + Info -->
<div class="flex items-center gap-3">
<img
:src="item.image"
alt="Product Image"
class="w-12 h-12 object-contain"
v-if="item.produk.foto && item.produk.foto.length > 0"
:src="item.produk.foto[0].url"
alt="foto produk"
class="w-12 h-12 object-cover rounded"
/>
<div>
<p class="font-semibold">{{ item.produk.nama }}</p>
<p class="text-sm text-gray-500">{{ item.produk.id }}</p>
<p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
<p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
<p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
</div>
</div>
<!-- Berat -->
<span class="font-medium">{{ item.berat }}g</span>
<span class="font-medium">{{ item.produk.berat }}g</span>
</div>
</div>
@ -85,6 +101,8 @@ const props = defineProps({
},
});
const emit = defineEmits(["edit", "delete"])
const trays = ref([]);
const loading = ref(true);
const error = ref(null);
@ -92,15 +110,29 @@ const error = ref(null);
// hitung total berat
const totalWeight = (tray) => {
if (!tray.items) return 0;
return tray.items.reduce((sum, item) => sum + (item.berat || 0), 0);
return tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
};
// ambil data dari backend
onMounted(async () => {
try {
const res = await axios.get("/api/nampan");
trays.value = res.data; // harus array tray dengan items
console.log("Data nampan:", res.data);
const [nampanRes, itemRes] = await Promise.all([
axios.get("/api/nampan"),
axios.get("/api/item")
]);
const nampans = nampanRes.data;
const items = itemRes.data;
// mapping items ke nampan
trays.value = nampans.map(tray => {
return {
...tray,
items: items.filter(item => item.id_nampan === tray.id)
};
});
console.log("Nampan dengan items:", trays.value);
} catch (err) {
error.value = err.message || "Gagal mengambil data";
} finally {

135
resources/js/pages/Tray.vue
View File

@ -1,16 +1,141 @@
<template>
<mainLayout>
<div class="flex justify-between items-center mb-4">
<p style="font-family: 'IM FELL Great Primer', serif; font-style: italic;font-size: 25px;">NAMPAN</p>
<div class="flex gap-2">
<button
@click="openModal"
class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
style="background-color: #DAC0A3; color: #102C57;">
Tambah Nampan
</button>
<button
@click="emptyTray"
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
Kosongkan
</button>
</div>
</div>
<searchbar v-model:search="searchQuery" />
<TrayList :search="searchQuery" />
<TrayList :search="searchQuery"
@edit="editTray"
@delete="deleteTray"/>
<div
v-if="showModal"
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
>
<div class="bg-white rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4">Tambah Nampan</h2>
<label class="block mb-2 text-sm font-medium">Nama Nampan</label>
<input
v-model="trayName"
type="text"
placeholder="Contoh: A4"
class="w-full border rounded-md p-2 mb-4"
/>
<div class="flex justify-end gap-2">
<button
@click="closeModal"
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
Cancel
</button>
<button
@click="saveTray"
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md">
Save
</button>
</div>
</div>
</div>
</mainLayout>
</template>
<script setup>
import { ref } from 'vue';
import { ref } from 'vue'
import axios from 'axios'
import mainLayout from '../layouts/mainLayout.vue'
import searchbar from '../components/searchbar.vue';
import TrayList from '../components/TrayList.vue';
const searchQuery = ref("");
import searchbar from '../components/searchbar.vue'
import TrayList from '../components/TrayList.vue'
const searchQuery = ref("") // buat search
const showModal = ref(false) // <-- ini penting, biar tidak undefined
const trayName = ref("") // nama nampan baru
// buka modal
const openModal = () => {
showModal.value = true
}
// tutup modal
const closeModal = () => {
trayName.value = ""
editingTrayId.value = null
showModal.value = false
}
// simpan nampan baru
const saveTray = async () => {
if (!trayName.value.trim()) {
alert("Nama Nampan tidak boleh kosong")
return
}
try {
if (editingTrayId.value) {
// mode edit
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
alert("Nampan berhasil diupdate")
} else {
// mode tambah
await axios.post("/api/nampan", { nama: trayName.value })
alert("Nampan berhasil ditambahkan")
}
closeModal()
location.reload()
} catch (error) {
console.error(error)
alert("Gagal menyimpan nampan")
}
}
// kosongkan semua nampan
const emptyTray = async () => {
if (!confirm("Yakin ingin memindahkan semua item ke Brankas?")) return
try {
await axios.post("/api/brankas", { action: "move_all_from_tray" })
alert("Semua item berhasil dipindahkan ke Brankas")
location.reload()
} catch (error) {
console.error(error)
alert("Gagal mengosongkan nampan")
}
}
const editTray = (tray) => {
// buka modal edit, bisa pake sama seperti modal tambah
trayName.value = tray.nama
editingTrayId.value = tray.id
showModal.value = true
}
const deleteTray = async (id) => {
if (!confirm("Yakin ingin menghapus nampan ini?")) return
try {
await axios.delete(`/api/nampan/${id}`)
alert("Nampan berhasil dihapus")
location.reload()
} catch (error) {
console.error(error)
alert("Gagal menghapus nampan")
}
}
const editingTrayId = ref(null)
</script>