repair: brandDevice sparepart integration

This commit is contained in:
2025-12-02 11:10:36 +07:00
parent 1c2ddca9d4
commit 1797058526
15 changed files with 1544 additions and 1279 deletions

View File

@@ -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>
);
};