Refactor Add and Edit Brand Device components to include solutions and spareparts forms, enhancing error code management and UI layout
This commit is contained in:
@@ -1,15 +1,19 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||
import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal } from 'antd';
|
||||
import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal, ConfigProvider } from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { getBrandById, updateBrand } from '../../../api/master-brand';
|
||||
import { getFileUrl } from '../../../api/file-uploads';
|
||||
import BrandForm from './component/BrandForm';
|
||||
import ErrorCodeForm from './component/ErrorCodeForm';
|
||||
import ErrorCodeTable from './component/ListErrorCode';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import SparepartForm from './component/SparepartForm';
|
||||
import ErrorCodeListModal from './component/ErrorCodeListModal';
|
||||
import FormActions from './component/FormActions';
|
||||
import { useErrorCodeLogic } from './hooks/errorCode';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { useSparepartLogic } from './hooks/sparepart';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
@@ -39,21 +43,59 @@ const EditBrandDevice = () => {
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
|
||||
const [sparepartImages, setSparepartImages] = useState({});
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [sparepartForm] = Form.useForm();
|
||||
|
||||
const {
|
||||
errorCodeFields,
|
||||
addErrorCode,
|
||||
removeErrorCode,
|
||||
editErrorCode,
|
||||
} = useErrorCodeLogic(errorCodeForm, fileList);
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
firstSolutionValid,
|
||||
solutionsToDelete,
|
||||
handleAddSolutionField,
|
||||
handleRemoveSolutionField,
|
||||
handleSolutionTypeChange,
|
||||
handleSolutionStatusChange,
|
||||
resetSolutionFields,
|
||||
checkFirstSolutionValid,
|
||||
getSolutionData,
|
||||
setSolutionsForExistingRecord,
|
||||
} = useErrorCodeLogic(errorCodeForm, fileList);
|
||||
} = useSolutionLogic(solutionForm);
|
||||
|
||||
const {
|
||||
sparepartFields,
|
||||
sparepartTypes,
|
||||
sparepartStatuses,
|
||||
handleAddSparepartField,
|
||||
handleRemoveSparepartField,
|
||||
handleSparepartTypeChange,
|
||||
handleSparepartStatusChange,
|
||||
resetSparepartFields,
|
||||
getSparepartData,
|
||||
setSparepartForExistingRecord,
|
||||
} = useSparepartLogic(sparepartForm);
|
||||
|
||||
// Handlers for sparepart image upload
|
||||
const handleSparepartImageUpload = (fieldKey, imageData) => {
|
||||
setSparepartImages(prev => ({
|
||||
...prev,
|
||||
[fieldKey]: imageData
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSparepartImageRemove = (fieldKey) => {
|
||||
setSparepartImages(prev => {
|
||||
const newImages = { ...prev };
|
||||
delete newImages[fieldKey];
|
||||
return newImages;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBrandData = async () => {
|
||||
@@ -176,27 +218,65 @@ const EditBrandDevice = () => {
|
||||
const handleFinish = async () => {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
// Get current solution and sparepart data from forms
|
||||
const currentSolutionData = getSolutionData();
|
||||
const currentSparepartData = getSparepartData();
|
||||
|
||||
const finalFormData = {
|
||||
brand_name: formData.brand_name,
|
||||
brand_type: formData.brand_type || '',
|
||||
brand_model: formData.brand_model || '',
|
||||
brand_manufacture: formData.brand_manufacture,
|
||||
is_active: formData.is_active,
|
||||
error_code: errorCodes.map((ec) => ({
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name || '',
|
||||
error_code_description: ec.error_code_description || '',
|
||||
error_code_color: ec.error_code_color || '#000000',
|
||||
path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
|
||||
is_active: ec.status !== undefined ? ec.status : true,
|
||||
solution: (ec.solution || []).map((sol) => ({
|
||||
solution_name: sol.solution_name,
|
||||
type_solution: sol.type_solution,
|
||||
text_solution: sol.text_solution || '',
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
})),
|
||||
error_code: errorCodes.map((ec) => {
|
||||
// If editing current error code, get latest data from forms
|
||||
if (ec.key === editingErrorCodeKey) {
|
||||
return {
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name || '',
|
||||
error_code_description: ec.error_code_description || '',
|
||||
error_code_color: ec.error_code_color || '#000000',
|
||||
path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
|
||||
is_active: ec.status !== undefined ? ec.status : true,
|
||||
solution: currentSolutionData.map((sol) => ({
|
||||
solution_name: sol.solution_name,
|
||||
type_solution: sol.type_solution,
|
||||
text_solution: sol.text_solution || '',
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
sparepart: currentSparepartData.map((sp) => ({
|
||||
name: sp.name,
|
||||
description: sp.description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
sparepart_image: sparepartImages[sp.key || sp.id] || null,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
// Return existing data for other error codes
|
||||
return {
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name || '',
|
||||
error_code_description: ec.error_code_description || '',
|
||||
error_code_color: ec.error_code_color || '#000000',
|
||||
path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
|
||||
is_active: ec.status !== undefined ? ec.status : true,
|
||||
solution: (ec.solution || []).map((sol) => ({
|
||||
solution_name: sol.solution_name,
|
||||
type_solution: sol.type_solution,
|
||||
text_solution: sol.text_solution || '',
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
sparepart: (ec.sparepart || []).map((sp) => ({
|
||||
name: sp.name,
|
||||
description: sp.description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
sparepart_image: sp.sparepart_image || null,
|
||||
})),
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
const response = await updateBrand(id, finalFormData);
|
||||
@@ -256,8 +336,23 @@ const EditBrandDevice = () => {
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(record.key);
|
||||
|
||||
// Load solutions to solution form
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, errorCodeForm);
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
}
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach(sparepart => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
});
|
||||
setSparepartImages(newSparepartImages);
|
||||
}
|
||||
|
||||
const formElement = document.querySelector('.ant-form');
|
||||
@@ -331,6 +426,12 @@ const EditBrandDevice = () => {
|
||||
|
||||
const handleCreateNewErrorCode = () => {
|
||||
resetErrorCodeForm();
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setErrorCodeIcon(null);
|
||||
setSparepartImages({});
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
|
||||
const handleErrorCodeIconUpload = (iconData) => {
|
||||
@@ -394,73 +495,142 @@ const EditBrandDevice = () => {
|
||||
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<Row gutter={24}>
|
||||
<Col span={8}>
|
||||
<Title level={5} style={{ marginBottom: 16 }}>
|
||||
{isErrorCodeFormReadOnly
|
||||
? editingErrorCodeKey
|
||||
? 'View Error Code'
|
||||
: 'Error Code Form'
|
||||
: editingErrorCodeKey
|
||||
? 'Edit Error Code'
|
||||
: 'Tambah Error Code'}
|
||||
</Title>
|
||||
<Form
|
||||
form={errorCodeForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
status: true,
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text',
|
||||
}}
|
||||
onValuesChange={checkFirstSolutionValid}
|
||||
>
|
||||
<ErrorCodeForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||
editingErrorCodeKey={editingErrorCodeKey}
|
||||
solutionFields={solutionFields}
|
||||
solutionTypes={solutionTypes}
|
||||
solutionStatuses={solutionStatuses}
|
||||
fileList={fileList}
|
||||
solutionsToDelete={solutionsToDelete}
|
||||
firstSolutionValid={firstSolutionValid}
|
||||
onAddErrorCode={handleAddErrorCode}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
onSolutionStatusChange={handleSolutionStatusChange}
|
||||
onSolutionFileUpload={handleSolutionFileUpload}
|
||||
onFileView={handleFileView}
|
||||
onCreateNewErrorCode={handleCreateNewErrorCode}
|
||||
onResetForm={resetErrorCodeForm}
|
||||
errorCodes={errorCodes}
|
||||
errorCodeIcon={errorCodeIcon}
|
||||
onErrorCodeIconUpload={handleErrorCodeIconUpload}
|
||||
onErrorCodeIconRemove={handleErrorCodeIconRemove}
|
||||
/>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<ErrorCodeTable
|
||||
errorCodes={
|
||||
loading
|
||||
? Array.from({ length: 3 }, (_, index) => ({
|
||||
key: `loading-${index}`,
|
||||
error_code: 'Loading...',
|
||||
error_code_name: 'Loading...',
|
||||
solution: [],
|
||||
}))
|
||||
: errorCodes
|
||||
}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
onFileView={handleFileView}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
{isErrorCodeFormReadOnly
|
||||
? editingErrorCodeKey
|
||||
? 'View Error Code'
|
||||
: 'Error Code Form'
|
||||
: editingErrorCodeKey
|
||||
? 'Edit Error Code'
|
||||
: 'Tambah Error Code'}
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
form={errorCodeForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
status: true,
|
||||
}}
|
||||
>
|
||||
<ErrorCodeSimpleForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||
errorCodeIcon={errorCodeIcon}
|
||||
onErrorCodeIconUpload={handleErrorCodeIconUpload}
|
||||
onErrorCodeIconRemove={handleErrorCodeIconRemove}
|
||||
onAddErrorCode={handleAddErrorCode}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={<Title level={5} style={{ margin: 0 }}>Solutions</Title>}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
form={solutionForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text',
|
||||
}}
|
||||
>
|
||||
<SolutionForm
|
||||
solutionForm={solutionForm}
|
||||
solutionFields={solutionFields}
|
||||
solutionTypes={solutionTypes}
|
||||
solutionStatuses={solutionStatuses}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
onSolutionStatusChange={handleSolutionStatusChange}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
onFileUpload={handleSolutionFileUpload}
|
||||
onFileView={handleFileView}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={<Title level={5} style={{ margin: 0 }}>Spareparts</Title>}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
form={sparepartForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
sparepart_status_0: true,
|
||||
sparepart_type_0: 'required',
|
||||
}}
|
||||
>
|
||||
<SparepartForm
|
||||
sparepartForm={sparepartForm}
|
||||
sparepartFields={sparepartFields}
|
||||
onAddSparepartField={handleAddSparepartField}
|
||||
onRemoveSparepartField={handleRemoveSparepartField}
|
||||
onSparepartTypeChange={handleSparepartTypeChange}
|
||||
onSparepartStatusChange={handleSparepartStatusChange}
|
||||
onSparepartImageUpload={handleSparepartImageUpload}
|
||||
onSparepartImageRemove={handleSparepartImageRemove}
|
||||
sparepartImages={sparepartImages}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Button */}
|
||||
<Row justify="center">
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#23a55ade' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setShowErrorCodeModal(true)}
|
||||
style={{ minWidth: '200px' }}
|
||||
>
|
||||
View All Error Codes ({errorCodes.length})
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Modal */}
|
||||
<ErrorCodeListModal
|
||||
visible={showErrorCodeModal}
|
||||
onClose={() => setShowErrorCodeModal(false)}
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
onAddNew={handleCreateNewErrorCode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
||||
Reference in New Issue
Block a user