Refactor code structure for improved readability and maintainability
This commit is contained in:
BIN
public/assets/defaultSparepartImg.jpg
Normal file
BIN
public/assets/defaultSparepartImg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -193,26 +193,38 @@ const DetailSparepart = (props) => {
|
|||||||
// Gunakan URL gambar yang sebelumnya jika ada, atau kosongkan
|
// Gunakan URL gambar yang sebelumnya jika ada, atau kosongkan
|
||||||
imageUrl = formData.sparepart_foto || '';
|
imageUrl = formData.sparepart_foto || '';
|
||||||
}
|
}
|
||||||
} else if (fileList.length === 0 && formData.sparepart_id) {
|
} else if (fileList.length === 0) {
|
||||||
imageUrl = '';
|
// Jika tidak ada file di fileList (termasuk saat user menghapus file), gunakan gambar default
|
||||||
|
imageUrl = '/assets/defaultSparepartImg.jpg';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Kirim semua field yang dianggap required oleh API, bahkan jika kosong
|
// Payload hanya berisi field yang tidak kosong untuk menghindari error validasi
|
||||||
const payload = {
|
const payload = {
|
||||||
sparepart_name: formData.sparepart_name, // Wajib
|
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
|
// Tambahkan field-field secara kondisional hanya jika nilainya tidak kosong
|
||||||
|
if (formData.sparepart_description && formData.sparepart_description.trim() !== '') {
|
||||||
|
payload.sparepart_description = formData.sparepart_description;
|
||||||
|
}
|
||||||
|
if (formData.sparepart_model && formData.sparepart_model.trim() !== '') {
|
||||||
|
payload.sparepart_model = formData.sparepart_model;
|
||||||
|
}
|
||||||
|
if (formData.sparepart_item_type && formData.sparepart_item_type.trim() !== '') {
|
||||||
|
payload.sparepart_item_type = formData.sparepart_item_type;
|
||||||
|
}
|
||||||
|
if (formData.sparepart_unit && formData.sparepart_unit.trim() !== '') {
|
||||||
|
payload.sparepart_unit = formData.sparepart_unit;
|
||||||
|
}
|
||||||
|
if (formData.sparepart_merk && formData.sparepart_merk.trim() !== '') {
|
||||||
|
payload.sparepart_merk = formData.sparepart_merk;
|
||||||
|
}
|
||||||
if (formData.sparepart_stok && formData.sparepart_stok.trim() !== '') {
|
if (formData.sparepart_stok && formData.sparepart_stok.trim() !== '') {
|
||||||
payload.sparepart_stok = formData.sparepart_stok.toString();
|
payload.sparepart_stok = formData.sparepart_stok.toString();
|
||||||
} else {
|
} else {
|
||||||
payload.sparepart_stok = '0'; // Set default value jika tidak diisi
|
payload.sparepart_stok = '0'; // Set default value jika tidak diisi
|
||||||
}
|
}
|
||||||
|
// Sertakan sparepart_foto hanya jika nilainya tidak kosong, agar tidak memicu validasi
|
||||||
if (imageUrl && imageUrl.trim() !== '') {
|
if (imageUrl && imageUrl.trim() !== '') {
|
||||||
payload.sparepart_foto = imageUrl;
|
payload.sparepart_foto = imageUrl;
|
||||||
}
|
}
|
||||||
@@ -267,12 +279,18 @@ const DetailSparepart = (props) => {
|
|||||||
if (props.selectedData) {
|
if (props.selectedData) {
|
||||||
setFormData(props.selectedData);
|
setFormData(props.selectedData);
|
||||||
if (props.selectedData.sparepart_foto) {
|
if (props.selectedData.sparepart_foto) {
|
||||||
|
// Buat URL lengkap dengan token untuk file yang sudah ada
|
||||||
|
const fileName = props.selectedData.sparepart_foto.split('/').pop();
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
const baseURL = import.meta.env.VITE_API_SERVER || '';
|
||||||
|
const fullUrl = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
|
||||||
|
|
||||||
setFileList([
|
setFileList([
|
||||||
{
|
{
|
||||||
uid: '-1',
|
uid: '-1',
|
||||||
name: props.selectedData.sparepart_foto.split('/').pop(),
|
name: fileName,
|
||||||
status: 'done',
|
status: 'done',
|
||||||
url: props.selectedData.sparepart_foto,
|
url: fullUrl,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -139,12 +139,10 @@ const SparepartCardList = ({
|
|||||||
style={{
|
style={{
|
||||||
backgroundColor: '#f0f0f0',
|
backgroundColor: '#f0f0f0',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
padding: '8px',
|
paddingTop: '100%', /* Ini membuat tinggi sama dengan lebar (aspect ratio 1:1) */
|
||||||
|
position: 'relative',
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
display: 'flex',
|
overflow: 'hidden',
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
aspectRatio: '1 / 1',
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{(() => {
|
{(() => {
|
||||||
@@ -156,30 +154,44 @@ const SparepartCardList = ({
|
|||||||
} else {
|
} else {
|
||||||
// Gunakan format file URL seperti di brandDevice
|
// Gunakan format file URL seperti di brandDevice
|
||||||
const fileName = item.sparepart_foto.split('/').pop();
|
const fileName = item.sparepart_foto.split('/').pop();
|
||||||
// Gunakan API getFileUrl untuk mendapatkan URL yang benar
|
|
||||||
const token = localStorage.getItem('token');
|
// Jika filename adalah default file, gunakan dari public assets
|
||||||
const baseURL = import.meta.env.VITE_API_SERVER || '';
|
if (fileName === 'defaultSparepartImg.jpg') {
|
||||||
imgSrc = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
|
imgSrc = `/assets/defaultSparepartImg.jpg`;
|
||||||
|
} else {
|
||||||
|
// Gunakan API getFileUrl untuk mendapatkan URL yang benar untuk file upload
|
||||||
|
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);
|
console.log('Image path being constructed:', imgSrc);
|
||||||
} else {
|
} else {
|
||||||
imgSrc = 'https://via.placeholder.com/150';
|
imgSrc = 'https://via.placeholder.com/150';
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<img
|
<div style={{
|
||||||
src={imgSrc}
|
position: 'absolute',
|
||||||
alt={item[header]}
|
top: 0,
|
||||||
style={{
|
left: 0,
|
||||||
maxWidth: '100%',
|
width: '100%',
|
||||||
maxHeight: '100%',
|
height: '100%',
|
||||||
objectFit: 'contain',
|
}}>
|
||||||
}}
|
<img
|
||||||
onError={(e) => {
|
src={imgSrc}
|
||||||
console.error('Image failed to load:', imgSrc);
|
alt={item[header]}
|
||||||
e.target.src = 'https://via.placeholder.com/150';
|
style={{
|
||||||
}}
|
width: '100%',
|
||||||
onLoad={() => console.log('Image loaded successfully:', imgSrc)}
|
height: '100%',
|
||||||
/>
|
objectFit: 'cover', // Mengisi container dan crop sisi berlebih
|
||||||
|
}}
|
||||||
|
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>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user