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

[feat] create item

Browse Source
This commit is contained in:
Baghaztra 2025-08-28 22:45:11 +07:00
parent 1a25501579
commit 8046360f6e
6 changed files with 355 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/Http/Controllers/ItemController.php
View File

@ -23,11 +23,10 @@ class ItemController extends Controller
public function store(Request $request)
{
$validated = $request->validate([
'id_produk' => 'required|in:produks.id',
'id_nampan' => 'nullable|in:nampans.id'
'id_produk' => 'required',
'id_nampan' => 'nullable'
],[
'id_produk' => 'Id produk tidak valid.',
'id_nampan' => 'Id nampan tidak valid'
]);
$item = Item::create($validated);

8
resources/css/app.css
View File

@ -5,12 +5,6 @@
@source '../**/*.blade.php';
@source '../**/*.js';
@import url('https://fonts.googleapis.com/css2?family=Platypi:wght@400;500;600;700&display=swap');
html, body {
font-family: "Platypi", sans-serif;
}
@theme {
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
@ -20,5 +14,5 @@ html, body {
--color-A: #F8F0E5;
--color-B: #EADBC8;
--color-C: #DAC0A3;
--color-D: #0F2C59;
--color-D: #024768;
}

2
resources/js/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="app">
<div>
<router-view />
</div>
</template>

187
resources/js/components/CreateItemModal.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
<div v-if="!success">
<div class="mb-4">
<p class="text-gray-600 mb-4">Produk "<strong>{{ product?.nama }}</strong>" berhasil dibuat!</p>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Pilih Nampan</label>
<select
v-model="selectedNampan"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
:disabled="loading"
>
<option value="">Brankas</option>
<option v-for="nampan in nampanList" :key="nampan.id" :value="nampan.id">
{{ nampan.nama }} ({{ nampan.items_count }} items)
</option>
</select>
</div>
</div>
<div class="flex justify-end gap-3">
<button
@click="handleClose"
:disabled="loading"
class="px-4 py-2 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
>
Batal
</button>
<button
@click="createItem"
:disabled="loading"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:bg-blue-400 disabled:cursor-not-allowed flex items-center gap-2"
>
<svg v-if="loading" class="animate-spin w-4 h-4" 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>
{{ loading ? 'Membuat...' : 'Buat Item' }}
</button>
</div>
</div>
<!-- Success State -->
<div v-else>
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<!-- QR CODe HERE -->
</div>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
<p class="text-gray-600 mb-6">
Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{ selectedNampanName }}.
</p>
<div class="flex flex-row justify-between gap-3">
<button
@click="$emit('finish')"
class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors"
>
Selesai
</button>
<button
@click="$emit('print')"
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
disabled
>
Print
</button>
<button
@click="addNewItem"
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors"
>
Tambah Item Baru
</button>
</div>
</div>
</div>
</div>
</Modal>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import axios from 'axios';
import Modal from './Modal.vue';
// Props
const props = defineProps({
isOpen: {
type: Boolean,
default: false
},
product: {
type: Object,
default: null
}
});
const emit = defineEmits(['close', 'finish', 'print', 'item-created']);
const selectedNampan = ref('');
const nampanList = ref([]);
const success = ref(false);
const loading = ref(false);
const selectedNampanName = computed(() => {
if (!selectedNampan.value) return 'Brankas';
const nampan = nampanList.value.find(n => n.id === selectedNampan.value);
return nampan ? nampan.nama : 'Brankas';
});
// Methods
const loadNampanList = async () => {
try {
const response = await axios.get('/api/nampan');
nampanList.value = response.data;
} catch (error) {
console.error('Error loading nampan list:', error);
}
};
const createItem = async () => {
if (!props.product) return;
loading.value = true;
try {
const payload = {
id_produk: props.product.id
};
if (selectedNampan.value) {
payload.id_nampan = selectedNampan.value;
}
const response = await axios.post('/api/item', payload);
success.value = true;
emit('item-created', {
item: response.data,
product: props.product,
nampan: selectedNampanName.value
});
} catch (error) {
console.error('Error creating item:', error);
alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
} finally {
loading.value = false;
}
};
const addNewItem = () => {
// Reset state untuk item baru
success.value = false;
selectedNampan.value = '';
// Emit event untuk membuat item baru
emit('item-created', {
newItem: true,
product: props.product
});
};
const handleClose = () => {
// Reset state
selectedNampan.value = '';
success.value = false;
loading.value = false;
emit('close');
};
// Watchers
watch(() => props.isOpen, (newValue) => {
if (newValue) {
selectedNampan.value = '';
success.value = false;
loading.value = false;
loadNampanList();
}
});
</script>

96
resources/js/components/Modal.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<Teleport to="body">
<Transition name="modal">
<div
v-if="active"
class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
@click="handleOverlayClick"
>
<div
class="bg-white rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto relative"
:class="sizeClass"
@click.stop
>
<slot></slot>
</div>
</div>
</Transition>
</Teleport>
</template>
<script setup>
import { computed, watch, onBeforeUnmount } from 'vue'
const props = defineProps({
active: {
type: Boolean,
default: false
},
size: {
type: String,
default: 'md',
validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'].includes(value)
},
clickOutside: {
type: [Boolean, String],
default: true
}
})
const emit = defineEmits(['close'])
const sizeClass = computed(() => {
const sizes = {
xs: 'w-full max-w-xs',
sm: 'w-full max-w-sm',
md: 'w-full max-w-md',
lg: 'w-full max-w-lg',
xl: 'w-full max-w-xl',
'2xl': 'w-full max-w-2xl',
'3xl': 'w-full max-w-3xl',
'4xl': 'w-full max-w-4xl',
full: 'w-[95vw] h-[95vh] max-w-none max-h-none'
}
return sizes[props.size] || sizes.md
})
const handleOverlayClick = () => {
if (clickOutside.value) {
emit('close')
}
}
watch(() => props.active, (newVal) => {
if (newVal) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = ''
}
})
onBeforeUnmount(() => {
document.body.style.overflow = ''
})
</script>
<style>
.modal-enter-active,
.modal-leave-active {
transition: all 0.3s ease;
}
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .bg-white,
.modal-leave-to .bg-white {
transform: scale(0.95) translateY(-20px);
}
.modal-enter-active .bg-white,
.modal-leave-active .bg-white {
transition: transform 0.3s ease;
}
</style>

73
resources/js/pages/InputProduk.vue
View File

@ -1,5 +1,15 @@
<template>
<mainLayout>
<!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
<CreateItemModal
:isOpen="openItemModal"
:product="createdProduct"
@close="closeItemModal"
@finish="goToProductList"
@print="printItem"
@item-created="handleItemCreated"
/>
<div class="p-6">
<p class="font-serif italic text-[25px] text-D">Produk Baru</p>
@ -116,11 +126,15 @@
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import InputField from "../components/InputField.vue";
import InputSelect from "../components/InputSelect.vue";
import CreateItemModal from "../components/CreateItemModal.vue";
const router = useRouter();
const form = ref({
nama: '',
@ -147,6 +161,10 @@ const fileInput = ref(null);
// TODO: Logika autentikasi user
const userId = ref(1);
// Modal item variables - Simplified karena logic sudah dipindah ke component
const openItemModal = ref(false);
const createdProduct = ref(null);
const isFormValid = computed(() => {
return form.value.nama &&
form.value.kategori &&
@ -178,6 +196,36 @@ const loadExistingPhotos = async () => {
}
};
// Simplified modal handlers
const openCreateItemModal = (product) => {
createdProduct.value = product;
openItemModal.value = true;
};
const closeItemModal = () => {
openItemModal.value = false;
createdProduct.value = null;
resetForm();
router.replace('/produk');
};
const goToProductList = () => {
closeItemModal();
};
const printItem = () => {
alert('Wak waw');
};
// Handle item creation events from modal
const handleItemCreated = (data) => {
if (data.newItem) {
return;
}
console.log('Item created:', data);
};
const triggerFileInput = () => {
if (!uploadLoading.value && uploadedImages.value.length < 6) {
fileInput.value?.click();
@ -280,6 +328,9 @@ const submitForm = async (addItem) => {
id_user: userId.value
});
const createdProductData = response.data.data;
// Reset form
form.value = {
nama: '',
kategori: '',
@ -297,7 +348,7 @@ const submitForm = async (addItem) => {
}
if (addItem) {
alert('Produk berhasil ditambahkan. Silakan tambahkan produk lainnya.');
openCreateItemModal(createdProductData);
} else {
window.location.href = '/produk?message=Produk berhasil disimpan';
}
@ -315,17 +366,29 @@ const submitForm = async (addItem) => {
}
};
const resetPhotos = async () => {
try {
const resetForm = async () => {
form.value = {
nama: '',
kategori: '',
berat: 0,
kadar: 0,
harga_per_gram: 0,
harga_jual: 0,
};
try {
await axios.delete(`/api/foto/reset/${userId.value}`);
uploadedImages.value = [];
} catch (error) {
console.error('Error resetting photos:', error);
}
uploadError.value = '';
if (fileInput.value) {
fileInput.value.value = '';
}
};
const back = () => {
resetPhotos();
resetForm();
window.history.back();
};