Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
Timoti313
commit
4dd3c5188f
65
.env.example
65
.env.example
@ -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}"
|
||||
@ -11,7 +11,7 @@ class FotoSementaraController extends Controller
|
||||
public function upload(Request $request)
|
||||
{
|
||||
$request->validate([
|
||||
'id_produk' => 'required|exists:produk,id',
|
||||
'id_user' => 'required|exists:users,id',
|
||||
'foto' => 'required|image|mimes:jpg,jpeg,png|max:2048',
|
||||
]);
|
||||
|
||||
@ -19,11 +19,11 @@ class FotoSementaraController extends Controller
|
||||
$url = asset('storage/' . $path);
|
||||
|
||||
$foto = FotoSementara::create([
|
||||
'id_produk' => $request->id_produk,
|
||||
'id_user' => $request->id_user,
|
||||
'url' => $url,
|
||||
]);
|
||||
|
||||
return response()->json(['message' => 'Foto berhasil disimpan'], 201);
|
||||
return response()->json($foto, 201);
|
||||
}
|
||||
|
||||
public function hapus($id)
|
||||
@ -45,6 +45,9 @@ class FotoSementaraController extends Controller
|
||||
public function getAll($user_id)
|
||||
{
|
||||
$data = FotoSementara::where('id_user', $user_id);
|
||||
if (!$data->exists()) {
|
||||
return response()->json(['message' => 'Tidak ada foto ditemukan'], 404);
|
||||
}
|
||||
return response()->json($data);
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ class NampanController extends Controller
|
||||
public function index()
|
||||
{
|
||||
return response()->json(
|
||||
Nampan::withCount('items')->get()
|
||||
Nampan::with('items.produk.foto')->withCount('items')->get()
|
||||
);
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ class NampanController extends Controller
|
||||
public function show(int $id)
|
||||
{
|
||||
return response()->json(
|
||||
Nampan::with('items')->find($id)
|
||||
Nampan::with('items.produk.foto')->find($id)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -13,14 +13,20 @@ class TransaksiController extends Controller
|
||||
// List semua transaksi
|
||||
public function index()
|
||||
{
|
||||
$transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->get();
|
||||
$limit = request()->query('limit', null);
|
||||
$query = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->latest();
|
||||
if ($limit) {
|
||||
$query->limit((int)$limit);
|
||||
}
|
||||
$transaksi = $query->get();
|
||||
$transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->latest()->limit(100)->get();
|
||||
return response()->json($transaksi);
|
||||
}
|
||||
|
||||
// Detail transaksi by ID
|
||||
public function show($id)
|
||||
{
|
||||
$transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk'])->findOrFail($id);
|
||||
$transaksi = Transaksi::with(['kasir', 'sales', 'items.item.produk.foto'])->findOrFail($id);
|
||||
return response()->json($transaksi);
|
||||
}
|
||||
|
||||
|
||||
@ -13,9 +13,18 @@ class Nampan extends Model
|
||||
protected $fillable = [
|
||||
'nama'
|
||||
];
|
||||
protected $appends = ['berat_total'];
|
||||
|
||||
|
||||
public function items()
|
||||
{
|
||||
return $this->hasMany(Item::class, 'id_nampan');
|
||||
}
|
||||
|
||||
public function getBeratTotalAttribute()
|
||||
{
|
||||
return $this->items()
|
||||
->join('produks', 'items.id_produk', '=', 'produks.id')
|
||||
->sum('produks.berat');
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 -->
|
||||
|
||||
48
resources/js/components/DropdownNav.vue
Normal file
48
resources/js/components/DropdownNav.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="relative inline-block text-left">
|
||||
<!-- Tombol Dropdown -->
|
||||
<button
|
||||
@click="isOpen = !isOpen"
|
||||
class="px-4 py-2 bg-white border rounded-md shadow-sm hover:bg-gray-100"
|
||||
>
|
||||
Manajemen Produk
|
||||
</button>
|
||||
|
||||
<!-- Isi Dropdown -->
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
@click="goTo(item.route)"
|
||||
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
||||
>
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const isOpen = ref(false);
|
||||
const router = useRouter();
|
||||
|
||||
const items = [
|
||||
{ label: "Brankas", route: "/brankas" },
|
||||
{ label: "Nampan", route: "/nampan" },
|
||||
{ label: "Produk", route: "/produk" },
|
||||
{ label: "Sales", route: "/sales" },
|
||||
];
|
||||
|
||||
const goTo = (route) => {
|
||||
isOpen.value = false;
|
||||
router.push(route);
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +1,68 @@
|
||||
<script setup>
|
||||
const items = ['Manajemen Produk', 'Kasir', 'Laporan', 'Akun'];
|
||||
import { ref } from "vue";
|
||||
|
||||
const isOpen = ref(false);
|
||||
|
||||
const items = [
|
||||
{ label: "Kasir", route: "/kasir" },
|
||||
{ label: "Laporan", route: "/laporan" },
|
||||
{ label: "Akun", route: "/akun" },
|
||||
];
|
||||
|
||||
const subItems = [
|
||||
{ label: "Brankas", route: "/brankas" },
|
||||
{ label: "Nampan", route: "/nampan" },
|
||||
{ label: "Produk", route: "/produk" },
|
||||
{ label: "Sales", route: "/sales" },
|
||||
];
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-25 shadow-lg shadow-D rounded-b-md">
|
||||
<div class="bg-D h-5 rounded-b-md shadow-lg">
|
||||
<div class="h-15"></div>
|
||||
<div class="w-full px-50 flex justify-between items-center h-5">
|
||||
<router-link to="/" v-for="item in items"
|
||||
class="text-center text-lg text-D hover:underline cursor-pointer">
|
||||
{{ item }}
|
||||
<div class="w-full px-50 flex justify-between items-center h-5 relative">
|
||||
|
||||
<!-- Dropdown khusus "Manajemen Produk" -->
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="toggleDropdown"
|
||||
class="text-center text-lg text-D hover:underline cursor-pointer"
|
||||
>
|
||||
Manajemen Produk
|
||||
</button>
|
||||
|
||||
<!-- isi dropdown -->
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(sub, index) in subItems"
|
||||
:key="index"
|
||||
class="px-4 py-2 hover:bg-[#DAC0A3] cursor-pointer"
|
||||
>
|
||||
<router-link :to="sub.route" class="block w-full h-full">
|
||||
{{ sub.label }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- menu lain -->
|
||||
<router-link
|
||||
v-for="item in items"
|
||||
:key="item.label"
|
||||
:to="item.route"
|
||||
class="text-center text-lg text-D hover:underline cursor-pointer"
|
||||
>
|
||||
{{ item.label }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
28
resources/js/components/InputField.vue
Normal file
28
resources/js/components/InputField.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<input
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
:placeholder="placeholder"
|
||||
class="mt-1 block w-full rounded-md shadow-sm sm:text-sm bg-A text-D border-B focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
</script>
|
||||
31
resources/js/components/InputSelect.vue
Normal file
31
resources/js/components/InputSelect.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<select
|
||||
:value="modelValue"
|
||||
@change="$emit('update:modelValue', $event.target.value)"
|
||||
class="mt-1 block w-full rounded-md shadow-sm sm:text-sm bg-A text-D border-B focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2"
|
||||
>
|
||||
<option value="" :disabled="!modelValue && placeholder" v-if="placeholder" class="hover:bg-C text-D">{{ placeholder }}</option>
|
||||
<option v-for="option in options" :key="option.value" :selected="option.selected" :value="option.value" class="hover:bg-C text-D">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
</script>
|
||||
@ -1,65 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Card Produk -->
|
||||
<div
|
||||
class="border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer"
|
||||
@click="showDetail = true"
|
||||
class="relative 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="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
|
||||
>
|
||||
<span class="text-gray-700 font-medium text-center px-2">
|
||||
{{ product.nama }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Overlay Detail -->
|
||||
<div
|
||||
v-if="showDetail"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-lg w-[90%] max-w-md p-6 relative"
|
||||
>
|
||||
<!-- Tombol Close -->
|
||||
<button
|
||||
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
|
||||
@click="showDetail = false"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<!-- Judul -->
|
||||
<h2 class="text-xl font-semibold text-D mb-4 text-center">
|
||||
Detail Produk
|
||||
</h2>
|
||||
|
||||
<!-- Data Produk -->
|
||||
<div class="space-y-2 text-gray-700">
|
||||
<p><span class="font-semibold">Nama:</span> {{ product.nama }}</p>
|
||||
<p><span class="font-semibold">Kategori:</span> {{ product.kategori }}</p>
|
||||
<p><span class="font-semibold">Berat:</span> {{ product.berat }} gram</p>
|
||||
<p><span class="font-semibold">Kadar:</span> {{ product.kadar }}%</p>
|
||||
<p><span class="font-semibold">Harga/gram:</span> Rp {{ formatHarga(product.harga_per_gram) }}</p>
|
||||
<p><span class="font-semibold">Harga Jual:</span> Rp {{ formatHarga(product.harga_jual) }}</p>
|
||||
<p><span class="font-semibold">Stok:</span> {{ product.items_count }} pcs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
product: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const showDetail = ref(false);
|
||||
|
||||
// Format rupiah
|
||||
function formatHarga(value) {
|
||||
return new Intl.NumberFormat("id-ID").format(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -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-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,34 @@ 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);
|
||||
};
|
||||
// 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"
|
||||
// };
|
||||
|
||||
// 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 {
|
||||
|
||||
384
resources/js/pages/InputProduk.vue
Normal file
384
resources/js/pages/InputProduk.vue
Normal file
@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<div class="p-6">
|
||||
<p class="font-serif italic text-[25px] text-D">Produk Baru</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row mt-5 gap-6">
|
||||
<!-- Form Section -->
|
||||
<div class="flex-1">
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Nama Produk</label>
|
||||
<InputField
|
||||
v-model="form.nama"
|
||||
type="text"
|
||||
placeholder="Masukkan nama produk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="block text-D mb-1">Kategori</label>
|
||||
<InputSelect
|
||||
v-model="form.kategori"
|
||||
:options="category"
|
||||
placeholder="Pilih kategori"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Berat (g)</label>
|
||||
<InputField
|
||||
v-model="form.berat"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan berat"
|
||||
@input="calculateHargaJual"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Kadar (K)</label>
|
||||
<InputField
|
||||
v-model="form.kadar"
|
||||
type="number"
|
||||
placeholder="Masukkan kadar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex flex-row w-full gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Harga per Gram</label>
|
||||
<InputField
|
||||
v-model="form.harga_per_gram"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan harga per gram"
|
||||
@input="calculateHargaJual"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Harga Jual</label>
|
||||
<InputField
|
||||
v-model="form.harga_jual"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Masukkan harga jual"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button
|
||||
@click="submitForm"
|
||||
:disabled="loading || !isFormValid"
|
||||
class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ loading ? 'Menyimpan...' : 'Simpan Produk' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Upload Section -->
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Foto</label>
|
||||
|
||||
<!-- Image Grid -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<!-- Uploaded Images -->
|
||||
<div
|
||||
v-for="(image, index) in uploadedImages"
|
||||
:key="`img-${image.id}`"
|
||||
class="relative group aspect-square"
|
||||
>
|
||||
<div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
|
||||
<img
|
||||
:src="image.url"
|
||||
:alt="`Foto ${index + 1}`"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<!-- Delete Button -->
|
||||
<button
|
||||
@click="removeImage(image.id)"
|
||||
:disabled="uploadLoading"
|
||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="{
|
||||
'border-blue-400 bg-blue-50': isDragging,
|
||||
'cursor-not-allowed opacity-50': uploadLoading
|
||||
}"
|
||||
>
|
||||
<div class="text-center">
|
||||
<!-- Upload Icon or Loading -->
|
||||
<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">
|
||||
<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">
|
||||
<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" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600 font-medium" v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden File Input -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/jpeg,image/jpg,image/png"
|
||||
@change="handleFileSelect"
|
||||
class="hidden"
|
||||
/>
|
||||
|
||||
<!-- Upload Info -->
|
||||
<p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
|
||||
{{ uploadError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import axios from "axios";
|
||||
import mainLayout from "../layouts/mainLayout.vue";
|
||||
import InputField from "../components/InputField.vue";
|
||||
import InputSelect from "../components/InputSelect.vue";
|
||||
|
||||
const form = ref({
|
||||
nama: '',
|
||||
kategori: '',
|
||||
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 loading = ref(false);
|
||||
const uploadLoading = ref(false);
|
||||
const uploadedImages = ref([]);
|
||||
const isDragging = ref(false);
|
||||
const uploadError = ref('');
|
||||
const fileInput = ref(null);
|
||||
const userId = ref(1); // Sesuaikan dengan user yang login
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return form.value.nama &&
|
||||
form.value.kategori &&
|
||||
form.value.berat > 0 &&
|
||||
form.value.kadar > 0 &&
|
||||
form.value.harga_per_gram > 0 &&
|
||||
form.value.harga_jual > 0;
|
||||
});
|
||||
|
||||
const calculateHargaJual = () => {
|
||||
const berat = parseFloat(form.value.berat) || 0;
|
||||
const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
|
||||
if (berat > 0 && hargaPerGram > 0) {
|
||||
form.value.harga_jual = berat * hargaPerGram;
|
||||
}
|
||||
};
|
||||
|
||||
const loadExistingPhotos = async () => {
|
||||
try {
|
||||
const response = await axios.get(`/api/foto/${userId.value}`);
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
uploadedImages.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response?.status !== 404) {
|
||||
console.error('Error loading existing photos:', error);
|
||||
}
|
||||
// 404 is expected when no photos exist yet
|
||||
}
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
if (!uploadLoading.value && uploadedImages.value.length < 6) {
|
||||
fileInput.value?.click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
uploadFiles(files);
|
||||
};
|
||||
|
||||
const handleDrop = (event) => {
|
||||
event.preventDefault();
|
||||
isDragging.value = false;
|
||||
|
||||
if (uploadLoading.value || uploadedImages.value.length >= 6) return;
|
||||
|
||||
const files = Array.from(event.dataTransfer.files);
|
||||
uploadFiles(files);
|
||||
};
|
||||
|
||||
const uploadFiles = async (files) => {
|
||||
uploadError.value = '';
|
||||
|
||||
// Validate file count
|
||||
if (uploadedImages.value.length + files.length > 6) {
|
||||
uploadError.value = 'Maksimal 6 foto yang dapat diupload';
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file types and sizes
|
||||
const validFiles = files.filter(file => {
|
||||
const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
|
||||
const isValidSize = file.size <= 2 * 1024 * 1024; // 2MB
|
||||
|
||||
if (!isValidType) {
|
||||
uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isValidSize) {
|
||||
uploadError.value = 'Ukuran file maksimal 2MB';
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
if (validFiles.length === 0) return;
|
||||
|
||||
uploadLoading.value = true;
|
||||
|
||||
try {
|
||||
for (const file of validFiles) {
|
||||
const formData = new FormData();
|
||||
formData.append('foto', file);
|
||||
formData.append('id_user', userId.value);
|
||||
|
||||
const response = await axios.post('/api/foto/upload', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
|
||||
uploadedImages.value.push(response.data);
|
||||
}
|
||||
|
||||
// Clear file input
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
|
||||
} finally {
|
||||
uploadLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const removeImage = async (imageId) => {
|
||||
try {
|
||||
await axios.delete(`/api/foto/hapus/${imageId}`);
|
||||
uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
|
||||
uploadError.value = '';
|
||||
} catch (error) {
|
||||
console.error('Delete error:', error);
|
||||
uploadError.value = 'Gagal menghapus foto';
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
if (!isFormValid.value) {
|
||||
alert('Mohon lengkapi semua field yang diperlukan');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const response = await axios.post('/api/produk', {
|
||||
...form.value,
|
||||
id_user: userId.value
|
||||
});
|
||||
|
||||
// Reset form
|
||||
form.value = {
|
||||
nama: '',
|
||||
kategori: '',
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
};
|
||||
|
||||
uploadedImages.value = [];
|
||||
uploadError.value = '';
|
||||
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
|
||||
alert('Produk berhasil disimpan!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Submit error:', error);
|
||||
|
||||
if (error.response?.data?.errors) {
|
||||
const errors = Object.values(error.response.data.errors).flat();
|
||||
alert('Error: ' + errors.join(', '));
|
||||
} else {
|
||||
alert('Gagal menyimpan produk: ' + (error.response?.data?.message || error.message));
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetPhotos = async () => {
|
||||
try {
|
||||
await axios.delete(`/api/foto/reset/${userId.value}`);
|
||||
uploadedImages.value = [];
|
||||
} catch (error) {
|
||||
console.error('Error resetting photos:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Load existing photos on component mount
|
||||
onMounted(() => {
|
||||
loadExistingPhotos();
|
||||
});
|
||||
|
||||
// Clean up photos if user leaves without saving
|
||||
onUnmounted(() => {
|
||||
// Optional: You might want to clean up temporary photos here
|
||||
// resetPhotos();
|
||||
});
|
||||
</script>
|
||||
@ -4,14 +4,27 @@
|
||||
<!-- Judul -->
|
||||
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Search -->
|
||||
<searchbar v-model:search="searchQuery" />
|
||||
<searchbar v-model:search="searchQuery" class="flex-1" />
|
||||
</div>
|
||||
|
||||
<!-- Tombol Tambah Produk -->
|
||||
<div class="mt-3 flex justify-end">
|
||||
<button
|
||||
class="bg-B text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
||||
>
|
||||
<button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
|
||||
Tambah Produk
|
||||
</button>
|
||||
</div>
|
||||
@ -22,78 +35,90 @@
|
||||
v-for="item in filteredProducts"
|
||||
:key="item.id"
|
||||
:product="item"
|
||||
@showDetail="openOverlay"
|
||||
@click="openOverlay(item.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay Detail Produk -->
|
||||
<div
|
||||
<!-- Overlay Detail Produk -->
|
||||
<div
|
||||
v-if="showOverlay"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
|
||||
class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
|
||||
@click.self="closeOverlay"
|
||||
>
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative"
|
||||
class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
|
||||
@mouseleave="closeOverlay"
|
||||
>
|
||||
<!-- Tombol Close -->
|
||||
<button
|
||||
@click="closeOverlay"
|
||||
class="absolute top-2 right-2 text-gray-500 hover:text-black"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<!-- Foto Produk -->
|
||||
<div class="border border-[#e6d3b3] p-2 mb-4 flex justify-center">
|
||||
<!-- Foto Produk dengan Slider -->
|
||||
<div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded">
|
||||
<img
|
||||
v-if="detail.gambar"
|
||||
:src="`http://127.0.0.1:8000/storage/${detail.gambar}`"
|
||||
v-if="detail.foto && detail.foto.length > 0"
|
||||
:src="detail.foto[currentFotoIndex].url"
|
||||
:alt="detail.nama"
|
||||
class="w-40 h-40 object-contain"
|
||||
class="w-full h-full object-contain"
|
||||
/>
|
||||
<span v-else class="text-gray-400 text-sm">[gambar]</span>
|
||||
|
||||
<!-- Stok (pcs) pojok kiri atas -->
|
||||
<div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
|
||||
{{ detail.item_count }} pcs
|
||||
</div>
|
||||
|
||||
<!-- Stok -->
|
||||
<p class="text-sm mb-1">{{ detail.item_count }} pcs</p>
|
||||
|
||||
<!-- Nama Produk -->
|
||||
<h2 class="text-xl font-semibold text-center mb-3">
|
||||
<!-- Nama Produk di bawah -->
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
|
||||
>
|
||||
{{ detail.nama }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Prev -->
|
||||
<button
|
||||
v-if="detail.foto && detail.foto.length > 1"
|
||||
@click.stop="prevFoto"
|
||||
class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<!-- Tombol Next -->
|
||||
<button
|
||||
v-if="detail.foto && detail.foto.length > 1"
|
||||
@click.stop="nextFoto"
|
||||
class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Detail Harga & Info -->
|
||||
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
|
||||
<p>Harga Beli : Rp. {{ formatNumber(detail.harga_beli) }}</p>
|
||||
<p class="text-right">{{ detail.kadar }} K</p>
|
||||
<div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full">
|
||||
<!-- harga beli dihapus -->
|
||||
<p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
|
||||
<p class="text-right">{{ detail.berat }} gram</p>
|
||||
<p class="text-right">{{ detail.kadar }} K</p>
|
||||
<p class="col-span-2 text-center">
|
||||
Berat : {{ detail.berat }} gram
|
||||
</p>
|
||||
<p class="col-span-2">
|
||||
Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tombol Aksi -->
|
||||
<div class="flex justify-between">
|
||||
<button
|
||||
class="bg-yellow-400 text-black px-4 py-2 rounded font-bold"
|
||||
>
|
||||
<div class="flex justify-between w-full">
|
||||
<button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
|
||||
Ubah
|
||||
</button>
|
||||
<button
|
||||
class="bg-green-400 text-black px-4 py-2 rounded font-bold"
|
||||
>
|
||||
<button class="bg-green-400 text-black px-4 py-2 rounded font-bold">
|
||||
Tambah
|
||||
</button>
|
||||
<button
|
||||
class="bg-red-500 text-white px-4 py-2 rounded font-bold"
|
||||
>
|
||||
<button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
@ -106,10 +131,12 @@ import searchbar from "../components/searchbar.vue";
|
||||
|
||||
const products = ref([]);
|
||||
const searchQuery = ref("");
|
||||
const selectedCategory = ref("semua");
|
||||
|
||||
// overlay state
|
||||
const showOverlay = ref(false);
|
||||
const detail = ref({});
|
||||
const currentFotoIndex = ref(0);
|
||||
|
||||
// Fetch data awal
|
||||
onMounted(async () => {
|
||||
@ -121,29 +148,60 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
// Filter
|
||||
// Filter gabungan (kategori + search)
|
||||
const filteredProducts = computed(() => {
|
||||
if (!searchQuery.value) return products.value;
|
||||
return products.value.filter((p) =>
|
||||
let hasil = products.value;
|
||||
|
||||
// filter kategori
|
||||
if (selectedCategory.value !== "semua") {
|
||||
hasil = hasil.filter(
|
||||
(p) => p.kategori.toLowerCase() === selectedCategory.value
|
||||
);
|
||||
}
|
||||
|
||||
// filter search
|
||||
if (searchQuery.value) {
|
||||
hasil = hasil.filter((p) =>
|
||||
p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
return hasil;
|
||||
});
|
||||
|
||||
// Fungsi buka overlay
|
||||
// buka overlay
|
||||
async function openOverlay(id) {
|
||||
try {
|
||||
const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`);
|
||||
detail.value = res.data;
|
||||
currentFotoIndex.value = 0; // reset ke foto pertama
|
||||
showOverlay.value = true;
|
||||
} catch (error) {
|
||||
console.error("Gagal fetch detail produk:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Fungsi tutup overlay
|
||||
// tutup overlay
|
||||
function closeOverlay() {
|
||||
showOverlay.value = false;
|
||||
detail.value = {};
|
||||
currentFotoIndex.value = 0;
|
||||
}
|
||||
|
||||
// foto navigation
|
||||
function nextFoto() {
|
||||
if (detail.value.foto && detail.value.foto.length > 0) {
|
||||
currentFotoIndex.value =
|
||||
(currentFotoIndex.value + 1) % detail.value.foto.length;
|
||||
}
|
||||
}
|
||||
|
||||
function prevFoto() {
|
||||
if (detail.value.foto && detail.value.foto.length > 0) {
|
||||
currentFotoIndex.value =
|
||||
(currentFotoIndex.value - 1 + detail.value.foto.length) %
|
||||
detail.value.foto.length;
|
||||
}
|
||||
}
|
||||
|
||||
// Format angka
|
||||
|
||||
@ -1,16 +1,181 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<p style="font-family: 'IM FELL Great Primer', serif; font-style: italic;font-size: 25px;">NAMPAN</p>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-4">
|
||||
<!-- Judul -->
|
||||
<p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
|
||||
NAMPAN
|
||||
</p>
|
||||
|
||||
<!-- Searchbar -->
|
||||
<div class="flex justify-end mt-2">
|
||||
<div class="w-64">
|
||||
<searchbar v-model:search="searchQuery" />
|
||||
<TrayList :search="searchQuery" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex gap-2 mt-3 justify-end">
|
||||
<!-- Tambah Nampan -->
|
||||
<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>
|
||||
|
||||
<!-- Kosongkan -->
|
||||
<button
|
||||
@click="openConfirmModal"
|
||||
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
|
||||
Kosongkan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Search + List -->
|
||||
|
||||
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
|
||||
|
||||
<!-- Modal Tambah/Edit Nampan -->
|
||||
<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" style="color: #102C57;">Tambah Nampan</h2>
|
||||
|
||||
<label class="block mb-2 text-sm font-medium" style="color: #102C57;">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-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
|
||||
style="color: #102C57;">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Konfirmasi Kosongkan -->
|
||||
<div
|
||||
v-if="showConfirmModal"
|
||||
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 text-center">
|
||||
<h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Semua item akan dimasukkan ke brankas. <br/>
|
||||
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<button
|
||||
@click="closeConfirmModal"
|
||||
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="confirmEmptyTray"
|
||||
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
|
||||
Ya
|
||||
</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("")
|
||||
const showModal = ref(false)
|
||||
const showConfirmModal = ref(false)
|
||||
const trayName = ref("")
|
||||
const editingTrayId = ref(null)
|
||||
|
||||
// buka modal tambah/edit
|
||||
const openModal = () => { showModal.value = true }
|
||||
const closeModal = () => {
|
||||
trayName.value = ""
|
||||
editingTrayId.value = null
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// simpan nampan
|
||||
const saveTray = async () => {
|
||||
if (!trayName.value.trim()) {
|
||||
alert("Nama Nampan tidak boleh kosong")
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (editingTrayId.value) {
|
||||
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
|
||||
alert("Nampan berhasil diupdate")
|
||||
} else {
|
||||
await axios.post("/api/nampan", { nama: trayName.value })
|
||||
alert("Nampan berhasil ditambahkan")
|
||||
}
|
||||
closeModal()
|
||||
location.reload()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
alert("Gagal menyimpan nampan")
|
||||
}
|
||||
}
|
||||
|
||||
// === Konfirmasi kosongkan nampan ===
|
||||
const openConfirmModal = () => { showConfirmModal.value = true }
|
||||
const closeConfirmModal = () => { showConfirmModal.value = false }
|
||||
|
||||
const confirmEmptyTray = async () => {
|
||||
try {
|
||||
await axios.post("/api/brankas", { action: "move_all_from_tray" })
|
||||
alert("Semua item berhasil dipindahkan ke Brankas")
|
||||
closeConfirmModal()
|
||||
location.reload()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
alert("Gagal mengosongkan nampan")
|
||||
}
|
||||
}
|
||||
|
||||
const editTray = (tray) => {
|
||||
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")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -4,7 +4,7 @@ import Produk from '../pages/Produk.vue'
|
||||
import Brankas from '../pages/Brankas.vue'
|
||||
import Tray from '../pages/Tray.vue'
|
||||
import Kasir from '../pages/Kasir.vue'
|
||||
|
||||
import InputProduk from '../pages/InputProduk.vue'
|
||||
|
||||
|
||||
const routes = [
|
||||
@ -18,6 +18,11 @@ const routes = [
|
||||
name: 'Produk',
|
||||
component: Produk
|
||||
},
|
||||
{
|
||||
path: '/produk/baru',
|
||||
name: 'ProdukBaru',
|
||||
component: InputProduk
|
||||
},
|
||||
{
|
||||
path: '/brankas',
|
||||
name: 'Brankas',
|
||||
|
||||
@ -19,10 +19,12 @@ Route::prefix('api')->group(function () {
|
||||
Route::apiResource('transaksi', TransaksiController::class);
|
||||
|
||||
Route::get('brankas', [ItemController::class, 'brankasItem']);
|
||||
|
||||
// Foto Sementara
|
||||
Route::post('foto/upload', [FotoSementaraController::class, 'upload']);
|
||||
Route::delete('foto/hapus/<id>', [FotoSementaraController::class, 'hapus']);
|
||||
Route::get('foto/<user_id>', [FotoSementaraController::class, 'getAll']);
|
||||
Route::delete('foto/reset/<user_id>', [FotoSementaraController::class, 'reset']);
|
||||
Route::delete('foto/hapus/{id}', [FotoSementaraController::class, 'hapus']);
|
||||
Route::get('foto/{user_id}', [FotoSementaraController::class, 'getAll']);
|
||||
Route::delete('foto/reset/{user_id}', [FotoSementaraController::class, 'reset']);
|
||||
});
|
||||
|
||||
// Frontend SPA
|
||||
|
||||
Loading…
Reference in New Issue
Block a user