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

30:70 interface brand device

Browse Source
This commit is contained in:
Vinix
2025-10-28 12:20:54 +07:00
parent 1d408ef3c1
commit 9a483aa873
2 changed files with 193 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/master/brandDevice/AddBrandDevice.jsx
View File

@@ -49,16 +49,29 @@ const AddBrandDevice = () => {
handleSolutionStatusChange,
resetSolutionFields,
checkFirstSolutionValid,
setSolutionsForExistingRecord
setSolutionsForExistingRecord,
} = useErrorCodeLogic(errorCodeForm, fileList);
useEffect(() => {
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', cursor: 'pointer' }}
onClick={() => navigate('/master/brand-device')}
>
Brand Device
</span>
),
},
{
title: (
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
Tambah Brand Device
</span>
),
},
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>Tambah Brand Device</span> }
]);
}, [setBreadcrumbItems, navigate]);
@@ -71,25 +84,29 @@ const AddBrandDevice = () => {
await brandForm.validateFields();
setCurrentStep(1);
} catch (error) {
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' });
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib untuk brand device!',
});
}
};
const handleFinish = async () => {
setConfirmLoading(true);
try {
const transformedErrorCodes = errorCodes.map(ec => ({
const transformedErrorCodes = errorCodes.map((ec) => ({
error_code: ec.error_code,
error_code_name: ec.error_code_name || '',
error_code_description: ec.error_code_description || '',
is_active: ec.status !== undefined ? ec.status : true,
solution: (ec.solution || []).map(sol => ({
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
}))
is_active: sol.is_active !== false,
})),
}));
const finalFormData = {
@@ -98,23 +115,26 @@ const AddBrandDevice = () => {
brand_model: formData.brand_model || '',
brand_manufacture: formData.brand_manufacture,
is_active: formData.is_active,
error_code: transformedErrorCodes.length > 0 ? transformedErrorCodes : [
{
error_code: "DEFAULT",
error_code_name: "Default Error Code",
error_code_description: "Default error description",
is_active: true,
solution: [
{
solution_name: "Default Solution",
type_solution: "text",
text_solution: "Default solution text",
path_solution: "",
is_active: true
}
]
}
]
error_code:
transformedErrorCodes.length > 0
? transformedErrorCodes
: [
{
error_code: 'DEFAULT',
error_code_name: 'Default Error Code',
error_code_description: 'Default error description',
is_active: true,
solution: [
{
solution_name: 'Default Solution',
type_solution: 'text',
text_solution: 'Default solution text',
path_solution: '',
is_active: true,
},
],
},
],
};
const response = await createBrand(finalFormData);
@@ -135,9 +155,9 @@ const AddBrandDevice = () => {
}
} catch (error) {
NotifAlert({
icon: "error",
title: "Gagal",
message: error.message || "Gagal menyimpan data. Silakan coba lagi.",
icon: 'error',
title: 'Gagal',
message: error.message || 'Gagal menyimpan data. Silakan coba lagi.',
});
} finally {
setConfirmLoading(false);
@@ -178,12 +198,14 @@ const AddBrandDevice = () => {
const handleAddErrorCode = async (newErrorCode) => {
if (editingErrorCodeKey) {
const updatedCodes = errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item);
const updatedCodes = errorCodes.map((item) =>
item.key === editingErrorCodeKey ? newErrorCode : item
);
setErrorCodes(updatedCodes);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil diupdate!'
message: 'Error code berhasil diupdate!',
});
} else {
const updatedCodes = [...errorCodes, newErrorCode];
@@ -191,7 +213,7 @@ const AddBrandDevice = () => {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil ditambahkan!'
message: 'Error code berhasil ditambahkan!',
});
}
@@ -203,7 +225,7 @@ const AddBrandDevice = () => {
errorCodeForm.setFieldsValue({
status: true,
solution_status_0: true,
solution_type_0: 'text'
solution_type_0: 'text',
});
setFileList([]);
resetSolutionFields();
@@ -220,16 +242,16 @@ const AddBrandDevice = () => {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap brand harus memiliki minimal 1 error code!'
message: 'Setiap brand harus memiliki minimal 1 error code!',
});
return;
}
setErrorCodes(errorCodes.filter(item => item.key !== key));
setErrorCodes(errorCodes.filter((item) => item.key !== key));
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus!'
message: 'Error code berhasil dihapus!',
});
};
@@ -248,12 +270,17 @@ const AddBrandDevice = () => {
const handleSolutionFileUpload = async (file) => {
try {
const isAllowedType = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'].includes(file.type);
const isAllowedType = [
'application/pdf',
'image/jpeg',
'image/png',
'image/gif',
].includes(file.type);
if (!isAllowedType) {
NotifAlert({
icon: 'error',
title: 'Error',
message: `${file.name} bukan file PDF atau gambar yang diizinkan.`
message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
});
return;
}
@@ -271,17 +298,17 @@ const AddBrandDevice = () => {
file.solution_name = file.name;
file.solutionId = solutionFields[0];
file.type_solution = fileType;
setFileList(prevList => [...prevList, file]);
setFileList((prevList) => [...prevList, file]);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `${file.name} berhasil diupload!`
message: `${file.name} berhasil diupload!`,
});
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: `Gagal mengupload ${file.name}`
message: `Gagal mengupload ${file.name}`,
});
}
} catch (error) {
@@ -289,13 +316,13 @@ const AddBrandDevice = () => {
NotifAlert({
icon: 'error',
title: 'Error',
message: `Gagal mengupload ${file.name}. Silakan coba lagi.`
message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
});
}
};
const handleFileRemove = (file) => {
const newFileList = fileList.filter(item => item.uid !== file.uid);
const newFileList = fileList.filter((item) => item.uid !== file.uid);
setFileList(newFileList);
};
@@ -305,7 +332,9 @@ const AddBrandDevice = () => {
<BrandForm
form={brandForm}
formData={formData}
onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))}
onValuesChange={(changedValues, allValues) =>
setFormData((prev) => ({ ...prev, ...allValues }))
}
isEdit={false}
/>
);
@@ -314,17 +343,22 @@ const AddBrandDevice = () => {
if (currentStep === 1) {
return (
<Row gutter={24}>
<Col span={12}>
<Col span={8}>
<Title level={5} style={{ marginBottom: 16 }}>
{isErrorCodeFormReadOnly
? 'View Error Code'
: (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code')
}
: editingErrorCodeKey
? 'Edit Error Code'
: 'Tambah Error Code'}
</Title>
<Form
form={errorCodeForm}
layout="vertical"
initialValues={{ status: true, solution_status_0: true, solution_type_0: 'text' }}
initialValues={{
status: true,
solution_status_0: true,
solution_type_0: 'text',
}}
onValuesChange={checkFirstSolutionValid}
>
<ErrorCodeForm
@@ -350,7 +384,7 @@ const AddBrandDevice = () => {
/>
</Form>
</Col>
<Col span={12}>
<Col span={16}>
<ErrorCodeTable
errorCodes={errorCodes}
loading={loading}
@@ -368,14 +402,14 @@ const AddBrandDevice = () => {
return (
<Card>
<Title level={4} style={{ margin: '0 0 24px 0' }}>Tambah Brand Device</Title>
<Title level={4} style={{ margin: '0 0 24px 0' }}>
Tambah Brand Device
</Title>
<Steps current={currentStep} style={{ marginBottom: 24 }}>
<Step title="Brand Device Details" />
<Step title="Error Codes" />
</Steps>
<div style={{ marginTop: 24 }}>
{renderStepContent()}
</div>
<div style={{ marginTop: 24 }}>{renderStepContent()}</div>
<Divider />
<FormActions
currentStep={currentStep}

171
src/pages/master/brandDevice/EditBrandDevice.jsx
View File

@@ -50,7 +50,7 @@ const EditBrandDevice = () => {
handleSolutionStatusChange,
resetSolutionFields,
checkFirstSolutionValid,
setSolutionsForExistingRecord
setSolutionsForExistingRecord,
} = useErrorCodeLogic(errorCodeForm, fileList);
useEffect(() => {
@@ -61,7 +61,8 @@ const EditBrandDevice = () => {
return;
}
const savedPhase = location.state?.phase || localStorage.getItem(`brand_device_edit_${id}_last_phase`);
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`);
@@ -70,9 +71,22 @@ const EditBrandDevice = () => {
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', cursor: 'pointer' }}
onClick={() => navigate('/master/brand-device')}
>
Brand Device
</span>
),
},
{
title: (
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
Edit Brand Device
</span>
),
},
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>Edit Brand Device</span> }
]);
try {
@@ -90,20 +104,21 @@ const EditBrandDevice = () => {
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 || '',
status: ec.is_active,
solution: ec.solution || []
})) : [];
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 || '',
status: ec.is_active,
solution: ec.solution || [],
}))
: [];
setFormData(newFormData);
brandForm.setFieldsValue(newFormData);
setErrorCodes(existingErrorCodes);
} else {
NotifAlert({
icon: 'error',
@@ -135,7 +150,11 @@ const EditBrandDevice = () => {
await brandForm.validateFields();
setCurrentStep(1);
} catch (error) {
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' });
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib untuk brand device!',
});
}
};
@@ -148,19 +167,19 @@ const EditBrandDevice = () => {
brand_model: formData.brand_model || '',
brand_manufacture: formData.brand_manufacture,
is_active: formData.is_active,
error_code: errorCodes.map(ec => ({
error_code: errorCodes.map((ec) => ({
error_code: ec.error_code,
error_code_name: ec.error_code_name || '',
error_code_description: ec.error_code_description || '',
is_active: ec.status !== undefined ? ec.status : true,
solution: (ec.solution || []).map(sol => ({
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
}))
}))
is_active: sol.is_active !== false,
})),
})),
};
const response = await updateBrand(id, finalFormData);
@@ -182,9 +201,9 @@ const EditBrandDevice = () => {
}
} catch (error) {
NotifAlert({
icon: "error",
title: "Gagal",
message: error.message || "Gagal mengupdate data. Silakan coba lagi.",
icon: 'error',
title: 'Gagal',
message: error.message || 'Gagal mengupdate data. Silakan coba lagi.',
});
} finally {
setConfirmLoading(false);
@@ -226,22 +245,23 @@ const EditBrandDevice = () => {
}
};
const handleAddErrorCode = (newErrorCode) => {
let updatedErrorCodes;
if (editingErrorCodeKey) {
updatedErrorCodes = errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item);
updatedErrorCodes = errorCodes.map((item) =>
item.key === editingErrorCodeKey ? newErrorCode : item
);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil diupdate!'
message: 'Error code berhasil diupdate!',
});
} else {
updatedErrorCodes = [...errorCodes, newErrorCode];
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil ditambahkan!'
message: 'Error code berhasil ditambahkan!',
});
}
@@ -254,7 +274,7 @@ const EditBrandDevice = () => {
errorCodeForm.setFieldsValue({
status: true,
solution_status_0: true,
solution_type_0: 'text'
solution_type_0: 'text',
});
setFileList([]);
resetSolutionFields();
@@ -267,17 +287,17 @@ const EditBrandDevice = () => {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Setiap brand harus memiliki minimal 1 error code!'
message: 'Setiap brand harus memiliki minimal 1 error code!',
});
return;
}
const updatedErrorCodes = errorCodes.filter(item => item.key !== key);
const updatedErrorCodes = errorCodes.filter((item) => item.key !== key);
setErrorCodes(updatedErrorCodes);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus!'
message: 'Error code berhasil dihapus!',
});
};
@@ -297,7 +317,7 @@ const EditBrandDevice = () => {
editingErrorCodeKey: editingErrorCodeKey,
isErrorCodeFormReadOnly: isErrorCodeFormReadOnly,
solutionsToDelete: Array.from(solutionsToDelete),
currentSolutionData: window.currentSolutionData || {}
currentSolutionData: window.currentSolutionData || {},
};
localStorage.setItem(`brand_device_edit_${id}_temp_data`, JSON.stringify(tempData));
@@ -314,11 +334,11 @@ const EditBrandDevice = () => {
};
const handleSolutionFileUpload = (file) => {
setFileList(prevList => [...prevList, file]);
setFileList((prevList) => [...prevList, file]);
};
const handleFileRemove = (file) => {
const newFileList = fileList.filter(item => item.uid !== file.uid);
const newFileList = fileList.filter((item) => item.uid !== file.uid);
setFileList(newFileList);
};
@@ -328,7 +348,9 @@ const EditBrandDevice = () => {
<BrandForm
form={brandForm}
formData={formData}
onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))}
onValuesChange={(changedValues, allValues) =>
setFormData((prev) => ({ ...prev, ...allValues }))
}
isEdit={true}
/>
);
@@ -337,17 +359,24 @@ const EditBrandDevice = () => {
if (currentStep === 1) {
return (
<Row gutter={24}>
<Col span={12}>
<Col span={8}>
<Title level={5} style={{ marginBottom: 16 }}>
{isErrorCodeFormReadOnly
? (editingErrorCodeKey ? 'View Error Code' : 'Error Code Form')
: (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code')
}
? 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' }}
initialValues={{
status: true,
solution_status_0: true,
solution_type_0: 'text',
}}
onValuesChange={checkFirstSolutionValid}
>
<ErrorCodeForm
@@ -373,16 +402,17 @@ const EditBrandDevice = () => {
/>
</Form>
</Col>
<Col span={12}>
<Col span={16}>
<ErrorCodeTable
errorCodes={loading ?
Array.from({ length: 3 }, (_, index) => ({
key: `loading-${index}`,
error_code: 'Loading...',
error_code_name: 'Loading...',
solution: []
})) :
errorCodes
errorCodes={
loading
? Array.from({ length: 3 }, (_, index) => ({
key: `loading-${index}`,
error_code: 'Loading...',
error_code_name: 'Loading...',
solution: [],
}))
: errorCodes
}
loading={loading}
onPreview={handlePreviewErrorCode}
@@ -399,32 +429,41 @@ const EditBrandDevice = () => {
return (
<Card>
<Title level={4} style={{ margin: '0 0 24px 0' }}>Edit Brand Device</Title>
<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'
}}>
<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' }}>
<div
style={{
filter: loading ? 'blur(0.5px)' : 'none',
transition: 'filter 0.3s ease',
}}
>
{renderStepContent()}
</div>
</div>