694 lines
28 KiB
JavaScript
694 lines
28 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
|
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 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;
|
|
|
|
const defaultData = {
|
|
brand_name: '',
|
|
brand_type: '',
|
|
brand_model: '',
|
|
brand_manufacture: '',
|
|
is_active: true,
|
|
brand_code: '',
|
|
};
|
|
|
|
const EditBrandDevice = () => {
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
const location = useLocation();
|
|
const { setBreadcrumbItems } = useBreadcrumb();
|
|
const [brandForm] = Form.useForm();
|
|
const [errorCodeForm] = Form.useForm();
|
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
|
const [currentStep, setCurrentStep] = useState(0);
|
|
const [fileList, setFileList] = useState([]);
|
|
const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false);
|
|
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
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,
|
|
handleAddSolutionField,
|
|
handleRemoveSolutionField,
|
|
handleSolutionTypeChange,
|
|
handleSolutionStatusChange,
|
|
resetSolutionFields,
|
|
getSolutionData,
|
|
setSolutionsForExistingRecord,
|
|
} = 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 () => {
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
navigate('/signin');
|
|
return;
|
|
}
|
|
|
|
const savedPhase =
|
|
location.state?.phase || localStorage.getItem(`brand_device_edit_${id}_last_phase`);
|
|
if (savedPhase) {
|
|
setCurrentStep(parseInt(savedPhase));
|
|
localStorage.removeItem(`brand_device_edit_${id}_last_phase`);
|
|
}
|
|
|
|
setBreadcrumbItems([
|
|
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> },
|
|
{
|
|
title: (
|
|
<span
|
|
style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
|
|
onClick={() => navigate('/master/brand-device')}
|
|
>
|
|
Brand Device
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
title: (
|
|
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
|
|
Edit Brand Device
|
|
</span>
|
|
),
|
|
},
|
|
]);
|
|
|
|
try {
|
|
setLoading(true);
|
|
const response = await getBrandById(id);
|
|
|
|
if (response && response.statusCode === 200) {
|
|
const brandData = response.data;
|
|
const newFormData = {
|
|
brand_name: brandData.brand_name,
|
|
brand_type: brandData.brand_type,
|
|
brand_model: brandData.brand_model,
|
|
brand_manufacture: brandData.brand_manufacture,
|
|
is_active: brandData.is_active,
|
|
brand_code: brandData.brand_code,
|
|
};
|
|
|
|
const existingErrorCodes = brandData.error_code
|
|
? brandData.error_code.map((ec, index) => ({
|
|
key: `existing-${ec.error_code_id}`,
|
|
error_code_id: ec.error_code_id,
|
|
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.path_icon || '',
|
|
status: ec.is_active,
|
|
solution: ec.solution || [],
|
|
errorCodeIcon: ec.path_icon ? {
|
|
name: 'icon',
|
|
uploadPath: ec.path_icon,
|
|
url: (() => {
|
|
const pathParts = ec.path_icon.split('/');
|
|
const folder = pathParts[0];
|
|
const filename = pathParts.slice(1).join('/');
|
|
return getFileUrl(folder, filename);
|
|
})(),
|
|
type_solution: 'image'
|
|
} : null,
|
|
}))
|
|
: [];
|
|
|
|
setFormData(newFormData);
|
|
brandForm.setFieldsValue(newFormData);
|
|
setErrorCodes(existingErrorCodes);
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: response?.message || 'Failed to fetch brand device data',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: error.message || 'Failed to fetch brand device data',
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchBrandData();
|
|
}, [id, setBreadcrumbItems, navigate, brandForm, location]);
|
|
|
|
const handleCancel = () => {
|
|
localStorage.removeItem(`brand_device_edit_${id}_temp_data`);
|
|
navigate('/master/brand-device');
|
|
};
|
|
|
|
const handleNextStep = async () => {
|
|
try {
|
|
await brandForm.validateFields();
|
|
setCurrentStep(1);
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Harap isi semua kolom wajib untuk brand device!',
|
|
});
|
|
}
|
|
};
|
|
|
|
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) => {
|
|
// 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);
|
|
|
|
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
|
localStorage.removeItem(`brand_device_edit_${id}_temp_data`);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: response.message || 'Brand Device dan Error Codes berhasil diupdate.',
|
|
});
|
|
navigate('/master/brand-device');
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: response?.message || 'Gagal mengupdate Brand Device',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: error.message || 'Gagal mengupdate data. Silakan coba lagi.',
|
|
});
|
|
} finally {
|
|
setConfirmLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePreviewErrorCode = (record) => {
|
|
errorCodeForm.setFieldsValue({
|
|
error_code: record.error_code,
|
|
error_code_name: record.error_code_name,
|
|
error_code_description: record.error_code_description,
|
|
error_code_color: record.error_code_color,
|
|
status: record.status,
|
|
});
|
|
setErrorCodeIcon(record.errorCodeIcon || null);
|
|
setIsErrorCodeFormReadOnly(true);
|
|
setEditingErrorCodeKey(record.key);
|
|
|
|
if (record.solution && record.solution.length > 0) {
|
|
setSolutionsForExistingRecord(record.solution, errorCodeForm);
|
|
}
|
|
};
|
|
|
|
const handleEditErrorCode = (record) => {
|
|
errorCodeForm.setFieldsValue({
|
|
error_code: record.error_code,
|
|
error_code_name: record.error_code_name,
|
|
error_code_description: record.error_code_description,
|
|
error_code_color: record.error_code_color,
|
|
status: record.status,
|
|
});
|
|
setErrorCodeIcon(record.errorCodeIcon || null);
|
|
setIsErrorCodeFormReadOnly(false);
|
|
setEditingErrorCodeKey(record.key);
|
|
|
|
// Load solutions to solution form
|
|
if (record.solution && record.solution.length > 0) {
|
|
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');
|
|
if (formElement) {
|
|
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
};
|
|
|
|
const handleAddErrorCode = (newErrorCode) => {
|
|
// Include the current icon in the error code
|
|
const errorCodeWithIcon = {
|
|
...newErrorCode,
|
|
errorCodeIcon: errorCodeIcon
|
|
};
|
|
|
|
let updatedErrorCodes;
|
|
if (editingErrorCodeKey) {
|
|
updatedErrorCodes = errorCodes.map((item) =>
|
|
item.key === editingErrorCodeKey ? errorCodeWithIcon : item
|
|
);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil diupdate!',
|
|
});
|
|
} else {
|
|
updatedErrorCodes = [...errorCodes, errorCodeWithIcon];
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil ditambahkan!',
|
|
});
|
|
}
|
|
|
|
setErrorCodes(updatedErrorCodes);
|
|
resetErrorCodeForm();
|
|
};
|
|
|
|
const resetErrorCodeForm = () => {
|
|
errorCodeForm.resetFields();
|
|
errorCodeForm.setFieldsValue({
|
|
status: true,
|
|
solution_status_0: true,
|
|
solution_type_0: 'text',
|
|
});
|
|
setFileList([]);
|
|
setErrorCodeIcon(null);
|
|
resetSolutionFields();
|
|
setIsErrorCodeFormReadOnly(false);
|
|
setEditingErrorCodeKey(null);
|
|
};
|
|
|
|
const handleDeleteErrorCode = async (key) => {
|
|
if (errorCodes.length <= 1) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Setiap brand harus memiliki minimal 1 error code!',
|
|
});
|
|
return;
|
|
}
|
|
|
|
const updatedErrorCodes = errorCodes.filter((item) => item.key !== key);
|
|
setErrorCodes(updatedErrorCodes);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil dihapus!',
|
|
});
|
|
};
|
|
|
|
const handleCreateNewErrorCode = () => {
|
|
resetErrorCodeForm();
|
|
resetSolutionFields();
|
|
resetSparepartFields();
|
|
setErrorCodeIcon(null);
|
|
setSparepartImages({});
|
|
setIsErrorCodeFormReadOnly(false);
|
|
setEditingErrorCodeKey(null);
|
|
};
|
|
|
|
const handleErrorCodeIconUpload = (iconData) => {
|
|
setErrorCodeIcon(iconData);
|
|
};
|
|
|
|
const handleErrorCodeIconRemove = () => {
|
|
setErrorCodeIcon(null);
|
|
};
|
|
|
|
const handleFileView = (pathSolution, fileType) => {
|
|
localStorage.setItem(`brand_device_edit_${id}_last_phase`, currentStep.toString());
|
|
|
|
const tempData = {
|
|
errorCodes: errorCodes,
|
|
fileList: fileList,
|
|
solutionFields: solutionFields,
|
|
solutionTypes: solutionTypes,
|
|
solutionStatuses: solutionStatuses,
|
|
editingErrorCodeKey: editingErrorCodeKey,
|
|
isErrorCodeFormReadOnly: isErrorCodeFormReadOnly,
|
|
solutionsToDelete: Array.from(solutionsToDelete),
|
|
currentSolutionData: window.currentSolutionData || {},
|
|
};
|
|
localStorage.setItem(`brand_device_edit_${id}_temp_data`, JSON.stringify(tempData));
|
|
|
|
const filePath = pathSolution || '';
|
|
if (!filePath) return;
|
|
|
|
const parts = filePath.split('/');
|
|
if (parts.length < 2) return;
|
|
|
|
const [folder, filename] = parts;
|
|
const encodedFileName = encodeURIComponent(filename);
|
|
const navigationPath = `/master/brand-device/edit/${id}/files/${folder}/${encodedFileName}`;
|
|
navigate(navigationPath);
|
|
};
|
|
|
|
const handleSolutionFileUpload = (file) => {
|
|
setFileList((prevList) => [...prevList, file]);
|
|
};
|
|
|
|
const handleFileRemove = (file) => {
|
|
const newFileList = fileList.filter((item) => item.uid !== file.uid);
|
|
setFileList(newFileList);
|
|
};
|
|
|
|
const renderStepContent = () => {
|
|
if (currentStep === 0) {
|
|
return (
|
|
<BrandForm
|
|
form={brandForm}
|
|
formData={formData}
|
|
onValuesChange={(changedValues, allValues) =>
|
|
setFormData((prev) => ({ ...prev, ...allValues }))
|
|
}
|
|
isEdit={true}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (currentStep === 1) {
|
|
return (
|
|
<>
|
|
<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;
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<Title level={4} style={{ margin: '0 0 24px 0' }}>
|
|
Edit Brand Device
|
|
</Title>
|
|
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
|
<Step title="Brand Device Details" />
|
|
<Step title="Error Codes" />
|
|
</Steps>
|
|
<div style={{ position: 'relative' }}>
|
|
{loading && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.6)',
|
|
backdropFilter: 'blur(0.8px)',
|
|
filter: 'blur(0.5px)',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: 10,
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
<Spin size="large" />
|
|
</div>
|
|
)}
|
|
<div
|
|
style={{
|
|
filter: loading ? 'blur(0.5px)' : 'none',
|
|
transition: 'filter 0.3s ease',
|
|
}}
|
|
>
|
|
{renderStepContent()}
|
|
</div>
|
|
</div>
|
|
<Divider />
|
|
<FormActions
|
|
currentStep={currentStep}
|
|
onPreviousStep={() => setCurrentStep(currentStep - 1)}
|
|
onNextStep={handleNextStep}
|
|
onSave={handleFinish}
|
|
onCancel={handleCancel}
|
|
confirmLoading={confirmLoading}
|
|
isEditMode={true}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default EditBrandDevice;
|