yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add onGetData callback to TableList and enhance DetailSparepart with improved image handling

Browse Source
This commit is contained in:
vinix
2025-11-27 13:30:45 +07:00
parent 572042ab53
commit ed4570e8dd
4 changed files with 334 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Global/TableList.jsx
View File

@@ -22,6 +22,7 @@ const TableList = memo(function TableList({
columnDynamic = false,
cardComponent, // New prop for custom card component
onStockUpdate, // Prop to pass to card component
onGetData, // Callback to execute when data is received
}) {
const [gridLoading, setGridLoading] = useState(false);
@@ -105,7 +106,14 @@ const TableList = memo(function TableList({
setColumnsDynamic([...defaultColumns, ...numericColumns]);
}
setData(resData?.data ?? []);
const fetchedData = resData?.data ?? [];
// Panggil callback jika disediakan
if (onGetData && typeof onGetData === 'function') {
onGetData(fetchedData);
}
setData(fetchedData);
const pagingData = resData?.paging;

182
src/pages/master/sparepart/component/DetailSparepart.jsx
View File

@@ -1,5 +1,17 @@
import React, { useState, useEffect } from 'react';
import { Modal, Input, Select, Divider, Typography, Button, ConfigProvider, Upload, Row, Col, Image } from 'antd';
import {
Modal,
Input,
Select,
Divider,
Typography,
Button,
ConfigProvider,
Upload,
Row,
Col,
Image,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createSparepart, updateSparepart } from '../../../../api/sparepart';
@@ -33,7 +45,7 @@ const DetailSparepart = (props) => {
sparepart_unit: '',
sparepart_merk: '',
sparepart_stok: '0',
image_url: '',
sparepart_foto: '',
};
const [formData, setFormData] = useState(defaultData);
@@ -60,7 +72,9 @@ const DetailSparepart = (props) => {
const handleSave = async () => {
setConfirmLoading(true);
const validationRules = [{ field: 'sparepart_name', label: 'Sparepart Name', required: true }];
const validationRules = [
{ field: 'sparepart_name', label: 'Sparepart Name', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
@@ -71,40 +85,153 @@ const DetailSparepart = (props) => {
return;
try {
let imageUrl = formData.image_url;
let imageUrl = formData.sparepart_foto;
const newFile = fileList.length > 0 ? fileList[0] : null;
if (newFile && newFile.originFileObj) {
console.log('Uploading file:', newFile.originFileObj);
const uploadResponse = await uploadFile(newFile.originFileObj, 'images');
if (uploadResponse && uploadResponse.file_url) {
imageUrl = uploadResponse.file_url;
// Log untuk debugging
console.log('Upload response:', uploadResponse);
// Cek berbagai kemungkinan struktur respons dari API
let uploadedUrl = null;
// Cek berbagai kemungkinan struktur respons dari API
// Cek langsung properti file_url atau url
if (uploadResponse && typeof uploadResponse === 'object') {
// Cek jika uploadResponse langsung memiliki file_url
if (uploadResponse.file_url) {
uploadedUrl = uploadResponse.file_url;
}
// Cek jika uploadResponse memiliki data yang berisi file_url
else if (uploadResponse.data && uploadResponse.data.file_url) {
uploadedUrl = uploadResponse.data.file_url;
}
// Cek jika uploadResponse memiliki data yang berisi url
else if (uploadResponse.data && uploadResponse.data.url) {
uploadedUrl = uploadResponse.data.url;
}
// Cek jika uploadResponse langsung memiliki url
else if (uploadResponse.url) {
uploadedUrl = uploadResponse.url;
}
// Cek jika uploadResponse.data adalah string URL
else if (uploadResponse.data && typeof uploadResponse.data === 'string') {
uploadedUrl = uploadResponse.data;
}
// Cek jika uploadResponse.data adalah objek yang berisi file URL dalam format berbeda
else if (uploadResponse.data && typeof uploadResponse.data === 'object') {
// Cek kemungkinan nama field lain
if (uploadResponse.data.file) {
uploadedUrl = uploadResponse.data.file;
} else if (uploadResponse.data.filename) {
// Jika hanya nama file dikembalikan, bangun URL
const baseUrl = import.meta.env.VITE_API_SERVER || '';
uploadedUrl = `${baseUrl}/uploads/images/${uploadResponse.data.filename}`;
} else if (uploadResponse.data.path) {
uploadedUrl = uploadResponse.data.path;
} else if (uploadResponse.data.location) {
uploadedUrl = uploadResponse.data.location;
}
// Tambahkan kemungkinan lain berdasarkan struktur respons umum
else if (uploadResponse.data.filePath) {
uploadedUrl = uploadResponse.data.filePath;
} else if (uploadResponse.data.file_path) {
uploadedUrl = uploadResponse.data.file_path;
} else if (uploadResponse.data.publicUrl) {
uploadedUrl = uploadResponse.data.publicUrl;
} else if (uploadResponse.data.public_url) {
uploadedUrl = uploadResponse.data.public_url;
}
// Berdasarkan log yang ditampilkan, API mengembalikan path_document atau path_solution
else if (uploadResponse.data.path_document) {
uploadedUrl = uploadResponse.data.path_document;
} else if (uploadResponse.data.path_solution) {
uploadedUrl = uploadResponse.data.path_solution;
} else if (uploadResponse.data.file_upload_name) {
// Jika hanya nama file dikembalikan, bangun URL
const baseUrl = import.meta.env.VITE_API_SERVER || '';
uploadedUrl = `${baseUrl}/uploads/images/${uploadResponse.data.file_upload_name}`;
}
}
}
// Jika respons adalah string, mungkin itu adalah URL
else if (uploadResponse && typeof uploadResponse === 'string') {
uploadedUrl = uploadResponse;
}
if (uploadedUrl) {
console.log('Successfully extracted image URL:', uploadedUrl);
imageUrl = uploadedUrl;
} else {
throw new Error('Image upload failed or did not return a URL.');
console.error('Upload response structure:', uploadResponse);
console.error('Available properties:', Object.keys(uploadResponse || {}));
console.error('Response type:', typeof uploadResponse);
console.error(
'Is response an object?',
uploadResponse && typeof uploadResponse === 'object'
);
if (uploadResponse && typeof uploadResponse === 'object') {
console.error('Response keys:', Object.keys(uploadResponse));
console.error(
'Response data keys:',
uploadResponse.data
? Object.keys(uploadResponse.data)
: 'No data property'
);
}
// Tampilkan notifikasi bahwa upload gagal tapi lanjutkan penyimpanan
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Upload gambar gagal. Data akan disimpan tanpa gambar.',
});
// Gunakan URL gambar yang sebelumnya jika ada, atau kosongkan
imageUrl = formData.sparepart_foto || '';
}
} else if (fileList.length === 0 && formData.sparepart_id) {
imageUrl = '';
}
// Kirim semua field yang dianggap required oleh API, bahkan jika kosong
const payload = {
sparepart_name: formData.sparepart_name,
sparepart_item_type: formData.sparepart_item_type,
sparepart_stok: formData.sparepart_stok || '0',
image_url: imageUrl,
sparepart_merk: formData.sparepart_merk,
sparepart_model: formData.sparepart_model,
sparepart_description: formData.sparepart_description,
sparepart_unit: formData.sparepart_unit,
sparepart_name: formData.sparepart_name, // Wajib
sparepart_description: formData.sparepart_description || '', // Diperlukan oleh API
sparepart_model: formData.sparepart_model || '', // Diperlukan oleh API
sparepart_item_type: formData.sparepart_item_type || '', // Diperlukan oleh API
sparepart_unit: formData.sparepart_unit || '', // Diperlukan oleh API
sparepart_merk: formData.sparepart_merk || '', // Diperlukan oleh API
};
// Tambahkan field-field yang tidak dianggap required jika ada nilainya
if (formData.sparepart_stok && formData.sparepart_stok.trim() !== '') {
payload.sparepart_stok = formData.sparepart_stok.toString();
} else {
payload.sparepart_stok = '0'; // Set default value jika tidak diisi
}
if (imageUrl && imageUrl.trim() !== '') {
payload.sparepart_foto = imageUrl;
}
console.log('Sending payload:', payload);
const response = formData.sparepart_id
? await updateSparepart(formData.sparepart_id, payload)
: await createSparepart(payload);
console.log('API response:', response);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Sparepart berhasil ${formData.sparepart_id ? 'diubah' : 'ditambahkan'}.`,
message: `Data Sparepart berhasil ${
formData.sparepart_id ? 'diubah' : 'ditambahkan'
}.`,
});
props.setActionMode('list');
setFileList([]);
@@ -139,13 +266,13 @@ const DetailSparepart = (props) => {
useEffect(() => {
if (props.selectedData) {
setFormData(props.selectedData);
if (props.selectedData.image_url) {
if (props.selectedData.sparepart_foto) {
setFileList([
{
uid: '-1',
name: props.selectedData.image_url.split('/').pop(),
name: props.selectedData.sparepart_foto.split('/').pop(),
status: 'done',
url: props.selectedData.image_url,
url: props.selectedData.sparepart_foto,
},
]);
} else {
@@ -167,7 +294,11 @@ const DetailSparepart = (props) => {
return (
<Modal
title={`${
props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Sparepart`}
open={props.showModal}
onCancel={handleCancel}
@@ -231,7 +362,9 @@ const DetailSparepart = (props) => {
<Select
name="sparepart_item_type"
value={formData.sparepart_item_type}
onChange={(value) => handleSelectChange('sparepart_item_type', value)}
onChange={(value) =>
handleSelectChange('sparepart_item_type', value)
}
placeholder="Select Item Type"
disabled={props.readOnly}
style={{ width: '100%' }}
@@ -280,7 +413,12 @@ const DetailSparepart = (props) => {
>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
<Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handlePreviewCancel}>
<Modal
open={previewOpen}
title={previewTitle}
footer={null}
onCancel={handlePreviewCancel}
>
<img alt="preview" style={{ width: '100%' }} src={previewImage} />
</Modal>
</Col>

6
src/pages/master/sparepart/component/ListSparepart.jsx
View File

@@ -268,6 +268,12 @@ const ListSparepart = memo(function ListSparepart(props) {
triger={trigerFilter}
cardComponent={SparepartCardList} // Pass the custom component here
onStockUpdate={doFilter}
onGetData={(data) => {
if(data && data.length > 0) {
console.log('Sample sparepart data from API:', data[0]);
console.log('Available fields:', Object.keys(data[0] || {}));
}
}} // Log untuk debugging field-field yang tersedia
/>
</Col>
</Row>

166
src/pages/master/sparepart/component/SparepartCardList.jsx
View File

@@ -29,7 +29,11 @@ const SparepartCardList = ({
const handleUpdateStock = async (item) => {
const quantityToAdd = updateQuantities[item.sparepart_id] || 0;
if (quantityToAdd === 0) {
NotifAlert({ icon: 'info', title: 'Info', message: 'Please change the quantity first.' });
NotifAlert({
icon: 'info',
title: 'Info',
message: 'Please change the quantity first.',
});
return;
}
@@ -39,32 +43,55 @@ const SparepartCardList = ({
return;
}
setLoadingQuantities(prev => ({ ...prev, [item.sparepart_id]: true }));
setLoadingQuantities((prev) => ({ ...prev, [item.sparepart_id]: true }));
const payload = {
...item,
sparepart_stok: newStock,
sparepart_stok: newStock.toString(), // Convert number to string as required by API
};
// Remove unnecessary keys if the API doesn't like them
delete payload.key;
delete payload.id;
// Hanya tambahkan field jika nilainya tidak kosong untuk menghindari validasi error
if (item.sparepart_unit && item.sparepart_unit.trim() !== '') {
payload.sparepart_unit = item.sparepart_unit;
}
if (item.sparepart_merk && item.sparepart_merk.trim() !== '') {
payload.sparepart_merk = item.sparepart_merk;
}
if (item.sparepart_model && item.sparepart_model.trim() !== '') {
payload.sparepart_model = item.sparepart_model;
}
if (item.sparepart_description && item.sparepart_description.trim() !== '') {
payload.sparepart_description = item.sparepart_description;
}
try {
const response = await updateSparepart(item.sparepart_id, payload);
if (response.statusCode === 200) {
NotifOk({ icon: 'success', title: 'Success', message: 'Stock updated successfully.' });
// Periksa apakah response valid sebelum mengakses propertinya
if (response && response.statusCode === 200) {
NotifOk({
icon: 'success',
title: 'Success',
message: 'Stock updated successfully.',
});
if (onStockUpdate) {
onStockUpdate();
}
handleQuantityChange(item.sparepart_id, 0); // Reset quantity
} else {
NotifAlert({ icon: 'error', title: 'Failed', message: response.message || 'Failed to update stock.' });
NotifAlert({
icon: 'error',
title: 'Failed',
message: response?.message || 'Failed to update stock.',
});
}
} catch (error) {
NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'An error occurred.' });
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'An error occurred.',
});
} finally {
setLoadingQuantities(prev => ({ ...prev, [item.sparepart_id]: false }));
setLoadingQuantities((prev) => ({ ...prev, [item.sparepart_id]: false }));
}
};
@@ -80,7 +107,9 @@ const SparepartCardList = ({
style={{
borderRadius: '8px',
overflow: 'hidden',
border: `1px solid ${fieldColor ? item[fieldColor] : cardColor || '#E0E0E0'}`,
border: `1px solid ${
fieldColor ? item[fieldColor] : cardColor || '#E0E0E0'
}`,
}}
bodyStyle={{ padding: 0 }}
>
@@ -106,7 +135,8 @@ const SparepartCardList = ({
{item.sparepart_item_type}
</Tag>
)}
<div style={{
<div
style={{
backgroundColor: '#f0f0f0',
width: '100%',
padding: '8px',
@@ -115,33 +145,69 @@ const SparepartCardList = ({
alignItems: 'center',
justifyContent: 'center',
aspectRatio: '1 / 1',
}}>
}}
>
{(() => {
// Debug: log the image path construction
let imgSrc;
if (item.sparepart_foto) {
if (item.sparepart_foto.startsWith('http')) {
imgSrc = item.sparepart_foto;
} else {
// Gunakan format file URL seperti di brandDevice
const fileName = item.sparepart_foto.split('/').pop();
// Gunakan API getFileUrl untuk mendapatkan URL yang benar
const token = localStorage.getItem('token');
const baseURL = import.meta.env.VITE_API_SERVER || '';
imgSrc = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
}
console.log('Image path being constructed:', imgSrc);
} else {
imgSrc = 'https://via.placeholder.com/150';
}
return (
<img
src={item.image_url || "https://via.placeholder.com/150"}
src={imgSrc}
alt={item[header]}
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
}}
onError={(e) => {
console.error('Image failed to load:', imgSrc);
e.target.src = 'https://via.placeholder.com/150';
}}
onLoad={() => console.log('Image loaded successfully:', imgSrc)}
/>
);
})()}
</div>
</div>
</Col>
<Col span={16}>
<div style={{ padding: '16px', position: 'relative', height: '100%' }}>
<div
style={{
padding: '16px',
position: 'relative',
height: '100%',
}}
>
<div
style={{
position: 'absolute',
top: 8,
right: 8,
display: 'flex',
gap: '8px'
gap: '8px',
}}
>
{showEditModal && (
<Button
style={{ color: '#faad14', borderColor: '#faad14' }}
style={{
color: '#faad14',
borderColor: '#faad14',
}}
icon={<EditOutlined />}
key="edit"
onClick={() => showEditModal(item)}
@@ -158,7 +224,17 @@ const SparepartCardList = ({
/>
)}
</div>
<Title level={5} style={{ margin: 0, marginBottom: '8px', paddingRight: '60px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
<Title
level={5}
style={{
margin: 0,
marginBottom: '8px',
paddingRight: '60px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item[header]}
</Title>
<Text type="secondary">
@@ -166,21 +242,47 @@ const SparepartCardList = ({
</Text>
<Divider style={{ margin: '8px 0' }} />
<Space align="center" style={{ marginBottom: '8px', display: 'flex', justifyContent: 'center' }}>
<Space
align="center"
style={{
marginBottom: '8px',
display: 'flex',
justifyContent: 'center',
}}
>
<Button
icon={<MinusOutlined />}
onClick={() => handleQuantityChange(item.sparepart_id, quantity - 1)}
onClick={() =>
handleQuantityChange(
item.sparepart_id,
quantity - 1
)
}
disabled={isLoading}
style={{ width: 28, height: 28 }}
/>
<Text strong style={{ padding: '0 8px', fontSize: '16px' }}>{quantity}</Text>
<Text
strong
style={{ padding: '0 8px', fontSize: '16px' }}
>
{quantity}
</Text>
<Button
icon={<PlusOutlined />}
onClick={() => handleQuantityChange(item.sparepart_id, quantity + 1)}
onClick={() =>
handleQuantityChange(
item.sparepart_id,
quantity + 1
)
}
disabled={isLoading}
style={{ width: 28, height: 28 }}
/>
<Text type="secondary">{item.sparepart_unit ? ` / ${item.sparepart_unit}` : ' / pcs'}</Text>
<Text type="secondary">
{item.sparepart_unit
? ` / ${item.sparepart_unit}`
: ' / pcs'}
</Text>
</Space>
<Button
@@ -194,8 +296,18 @@ const SparepartCardList = ({
</Button>
<br />
<Text type="secondary" style={{ fontSize: '12px', marginTop: '8px', display: 'inline-block' }}>
Last updated: {item.updated_at ? dayjs(item.updated_at).format('DD MMM YYYY') : 'N/A'}
<Text
type="secondary"
style={{
fontSize: '12px',
marginTop: '8px',
display: 'inline-block',
}}
>
Last updated:{' '}
{item.updated_at
? dayjs(item.updated_at).format('DD MMM YYYY')
: 'N/A'}
</Text>
</div>
</Col>