repair: brandDevice sparepart integration
This commit is contained in:
@@ -1,76 +1,122 @@
|
||||
import React from 'react';
|
||||
import { Form, Input, Row, Col, Typography, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Input, Row, Col, Typography, Switch, Button, Card, Divider } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import SingleSparepartSelect from './SingleSparepartSelect';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const BrandForm = ({ form, formData, onValuesChange, isEdit = false }) => {
|
||||
const BrandForm = ({
|
||||
form,
|
||||
formData,
|
||||
onValuesChange,
|
||||
isEdit = false,
|
||||
selectedSparepartIds = [],
|
||||
onSparepartChange,
|
||||
showSparepartSection = false
|
||||
}) => {
|
||||
const isActive = Form.useWatch('is_active', form) ?? formData.is_active ?? true;
|
||||
const [showSparepart, setShowSparepart] = useState(showSparepartSection);
|
||||
|
||||
return (
|
||||
<Form
|
||||
layout="vertical"
|
||||
form={form}
|
||||
onValuesChange={onValuesChange}
|
||||
initialValues={formData}
|
||||
>
|
||||
<Form.Item label="Status">
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="is_active" valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
style={{ backgroundColor: isActive ? '#23A55A' : '#bfbfbf' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>
|
||||
{isActive ? 'Running' : 'Offline'}
|
||||
</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<div>
|
||||
<Form
|
||||
layout="vertical"
|
||||
form={form}
|
||||
onValuesChange={onValuesChange}
|
||||
initialValues={formData}
|
||||
>
|
||||
<Form.Item label="Status">
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="is_active" valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
style={{ backgroundColor: isActive ? '#23A55A' : '#bfbfbf' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>
|
||||
{isActive ? 'Running' : 'Offline'}
|
||||
</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="Brand Code" name="brand_code">
|
||||
<Input
|
||||
placeholder={'Auto Fill Brand Code'}
|
||||
disabled={true}
|
||||
<Form.Item label="Brand Code" name="brand_code">
|
||||
<Input
|
||||
placeholder={'Auto Fill Brand Code'}
|
||||
disabled={true}
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed'
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Brand Name"
|
||||
name="brand_name"
|
||||
rules={[{ required: true, message: 'Brand Name wajib diisi!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Manufacturer"
|
||||
name="brand_manufacture"
|
||||
rules={[{ required: true, message: 'Manufacturer wajib diisi!' }]}
|
||||
>
|
||||
<Input placeholder="Enter Manufacturer" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Brand Type" name="brand_type">
|
||||
<Input placeholder="Enter Brand Type (Optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Model" name="brand_model">
|
||||
<Input placeholder="Enter Model (Optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Add Sparepart Button */}
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setShowSparepart(!showSparepart)}
|
||||
style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed'
|
||||
width: '100%',
|
||||
borderStyle: 'dashed',
|
||||
marginBottom: showSparepart ? 16 : 0
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
>
|
||||
{showSparepart ? 'Hide Sparepart' : 'Add Sparepart'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Brand Name"
|
||||
name="brand_name"
|
||||
rules={[{ required: true, message: 'Brand Name wajib diisi!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="Manufacturer"
|
||||
name="brand_manufacture"
|
||||
rules={[{ required: true, message: 'Manufacturer wajib diisi!' }]}
|
||||
>
|
||||
<Input placeholder="Enter Manufacturer" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Brand Type" name="brand_type">
|
||||
<Input placeholder="Enter Brand Type (Optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Model" name="brand_model">
|
||||
<Input placeholder="Enter Model (Optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
{/* Sparepart Selection Section */}
|
||||
{showSparepart && (
|
||||
<Card
|
||||
title="Brand Spareparts"
|
||||
size="small"
|
||||
style={{ marginTop: 16 }}
|
||||
>
|
||||
<SingleSparepartSelect
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={onSparepartChange}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user