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

lavoce #27

Merged
bragaz_rexita merged 42 commits from lavoce into main 2025-12-22 09:28:35 +00:00
Conversation 0 Commits 42 Files Changed 48 +158 -77
1 changed files with 158 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2e98dc168a - Show all commits

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

@@ -12,7 +12,7 @@ import {
Col, Col,
Image, Image,
} from 'antd'; } from 'antd';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif'; import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createSparepart, updateSparepart } from '../../../../api/sparepart'; import { createSparepart, updateSparepart } from '../../../../api/sparepart';
import { uploadFile } from '../../../../api/file-uploads'; import { uploadFile } from '../../../../api/file-uploads';
@@ -35,13 +35,14 @@ const DetailSparepart = (props) => {
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState(''); const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState(''); const [previewTitle, setPreviewTitle] = useState('');
const [isHovering, setIsHovering] = useState(false);
const defaultData = { const defaultData = {
sparepart_id: '', sparepart_id: '',
sparepart_name: '', sparepart_name: '',
sparepart_description: '', sparepart_description: '',
sparepart_model: '', sparepart_model: '',
sparepart_item_type: '', sparepart_item_type: null,
sparepart_unit: '', sparepart_unit: '',
sparepart_merk: '', sparepart_merk: '',
sparepart_stok: '0', sparepart_stok: '0',
@@ -69,6 +70,10 @@ const DetailSparepart = (props) => {
const handleChange = ({ fileList: newFileList }) => setFileList(newFileList); const handleChange = ({ fileList: newFileList }) => setFileList(newFileList);
const handleRemove = () => {
setFileList([]);
};
const handleSave = async () => { const handleSave = async () => {
setConfirmLoading(true); setConfirmLoading(true);
@@ -364,7 +369,106 @@ const DetailSparepart = (props) => {
{formData && ( {formData && (
<div> <div>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
<Col span={12}> {/* Kolom untuk foto */}
<Col span={10} style={{ display: 'flex', flexDirection: 'column' }}>
<Text strong>Foto</Text>
<div
style={{
flexGrow: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
}}
>
{fileList.length > 0 ? (
<div
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
style={{
position: 'relative',
width: '180px', // Fixed width for square
height: '180px', // Fixed height
border: '1px solid #d9d9d9',
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image
src={fileList[0].url || fileList[0].thumbUrl}
alt="preview"
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
}}
preview={false} // Disable default preview
/>
{isHovering && !props.readOnly && (
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'rgba(0, 0, 0, 0.5)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: 'white',
gap: '16px',
fontSize: '20px',
borderRadius: '8px',
cursor: 'pointer',
}}
>
<EyeOutlined
onClick={() => handlePreview(fileList[0])}
/>
<DeleteOutlined onClick={handleRemove} />
</div>
)}
</div>
) : (
<Upload
name="file"
multiple={false}
fileList={fileList}
onChange={handleChange}
beforeUpload={() => false}
maxCount={1}
disabled={props.readOnly}
showUploadList={false}
>
<div
style={{
width: '180px', // Fixed width for square
height: '180px',
border: '1px dashed #d9d9d9',
borderRadius: '8px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
gap: '8px',
}}
>
<PlusOutlined />
<div>Upload</div>
</div>
</Upload>
)}
</div>
</Col>
{/* Kolom untuk field lainnya */}
<Col span={14}>
<Row gutter={[16, 16]}>
<Col span={24}>
<Text strong>Sparepart Name</Text> <Text strong>Sparepart Name</Text>
<Text style={{ color: 'red' }}> *</Text> <Text style={{ color: 'red' }}> *</Text>
<Input <Input
@@ -375,7 +479,7 @@ const DetailSparepart = (props) => {
readOnly={props.readOnly} readOnly={props.readOnly}
/> />
</Col> </Col>
<Col span={12}> <Col span={24}>
<Text strong>Item Type</Text> <Text strong>Item Type</Text>
<Select <Select
name="sparepart_item_type" name="sparepart_item_type"
@@ -383,7 +487,7 @@ const DetailSparepart = (props) => {
onChange={(value) => onChange={(value) =>
handleSelectChange('sparepart_item_type', value) handleSelectChange('sparepart_item_type', value)
} }
placeholder="Select Item Type" placeholder="Enter Item Type"
disabled={props.readOnly} disabled={props.readOnly}
style={{ width: '100%' }} style={{ width: '100%' }}
> >
@@ -391,16 +495,13 @@ const DetailSparepart = (props) => {
<Select.Option value="Compressor">Compressor</Select.Option> <Select.Option value="Compressor">Compressor</Select.Option>
</Select> </Select>
</Col> </Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={12}> <Col span={12}>
<Text strong>Stock</Text> <Text strong>Stock</Text>
<Input <Input
name="sparepart_stok" name="sparepart_stok"
value={formData.sparepart_stok} value={formData.sparepart_stok}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="Initial stock quantity" placeholder="Initial stock"
readOnly={props.readOnly} readOnly={props.readOnly}
type="number" type="number"
/> />
@@ -411,38 +512,15 @@ const DetailSparepart = (props) => {
name="sparepart_unit" name="sparepart_unit"
value={formData.sparepart_unit} value={formData.sparepart_unit}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="e.g., pcs, box, roll" placeholder="e.g., pcs"
readOnly={props.readOnly} readOnly={props.readOnly}
/> />
</Col> </Col>
</Row> </Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Text strong>Foto</Text>
<Upload
listType="picture-card"
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
beforeUpload={() => false}
maxCount={1}
disabled={props.readOnly}
>
{fileList.length >= 1 ? null : uploadButton}
</Upload>
<Modal
open={previewOpen}
title={previewTitle}
footer={null}
onCancel={handlePreviewCancel}
>
<img alt="preview" style={{ width: '100%' }} src={previewImage} />
</Modal>
</Col> </Col>
</Row> </Row>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
<Col span={12}> <Col span={12}>
<Text strong>Brand</Text> <Text strong>Brand</Text>
<Input <Input
@@ -465,7 +543,7 @@ const DetailSparepart = (props) => {
</Col> </Col>
</Row> </Row>
<Row gutter={[16, 16]}> <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
<Col span={24}> <Col span={24}>
<Text strong>Description</Text> <Text strong>Description</Text>
<TextArea <TextArea
@@ -480,6 +558,9 @@ const DetailSparepart = (props) => {
</Row> </Row>
</div> </div>
)} )}
<Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handlePreviewCancel}>
<img alt="preview" style={{ width: '100%' }} src={previewImage} />
</Modal>
</Modal> </Modal>
); );
}; };