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

repair: sollution field, handle clear form

Browse Source
This commit is contained in:
Antony Kurniawan
2025-12-13 14:15:35 +07:00
parent 49ba00d886
commit b9cdfcb1e9
2 changed files with 101 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { useEffect, useState, useCallback, useMemo } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate, useParams, useSearchParams, useLocation } from 'react-router-dom';
import {
Divider,
@@ -13,7 +13,10 @@ import {
Space,
ConfigProvider,
} from 'antd';
import { EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import {
EditOutlined,
DeleteOutlined
} from '@ant-design/icons';
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { getBrandById, createBrand, createErrorCode, getErrorCodesByBrandId, updateErrorCode, deleteErrorCode, deleteBrand } from '../../../api/master-brand';
@@ -55,8 +58,6 @@ const AddBrandDevice = () => {
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
const [currentSolutionData, setCurrentSolutionData] = useState([]);
const [confirmLoading, setConfirmLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [temporaryBrandId, setTemporaryBrandId] = useState(null);
const [isTemporaryBrand, setIsTemporaryBrand] = useState(false);
const [isAddingNewErrorCode, setIsAddingNewErrorCode] = useState(false);
@@ -65,16 +66,35 @@ const AddBrandDevice = () => {
if (!solutionForm) return [];
try {
const values = solutionForm.getFieldsValue(true);
const solutions = [];
let solutions = [];
solutionFields.forEach(fieldKey => {
let solution = null;
if (values.solution_items) {
if (Array.isArray(values.solution_items)) {
solutions = values.solution_items.filter(Boolean);
} else if (typeof values.solution_items === 'object') {
solutions = Object.values(values.solution_items).filter(Boolean);
if (values.solution_items && values.solution_items[fieldKey]) {
solution = values.solution_items[fieldKey];
}
}
if (!solution || !solution.name || solution.name.trim() === '') {
return;
}
const solutionType = solutionTypes[fieldKey] || solution.type || 'text';
let isValid = true;
if (solutionType === 'text') {
isValid = solution.text && solution.text.trim() !== '';
} else if (solutionType === 'file') {
const hasPathSolution = solution.path_solution && solution.path_solution.trim() !== '';
const hasFileUpload = (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0);
const hasFile = (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0);
isValid = hasPathSolution || hasFileUpload || hasFile;
}
if (isValid) {
solutions.push(solution);
}
});
return solutions;
} catch (error) {
@@ -83,26 +103,27 @@ const AddBrandDevice = () => {
};
const resetSolutionFields = () => {
if (solutionForm && solutionForm.resetFields) {
solutionForm.resetFields();
solutionForm.setFieldsValue({
solution_items: {
0: {
name: '',
type: 'text',
text: '',
status: true,
fileUpload: null,
file: null,
path_solution: null,
fileName: null
}
}
});
}
setSolutionFields([0]);
setSolutionTypes({ 0: 'text' });
setSolutionStatuses({ 0: true });
if (solutionForm && solutionForm.resetFields) {
solutionForm.resetFields();
setTimeout(() => {
solutionForm.setFieldsValue({
solution_items: {
0: {
name: '',
type: 'text',
text: '',
status: true,
file: null,
fileUpload: null
}
}
});
}, 100);
}
setCurrentSolutionData([]);
};
@@ -300,7 +321,8 @@ const AddBrandDevice = () => {
const loadErrorCodeData = (record) => {
setIsErrorCodeFormReadOnly(false);
setEditingErrorCodeKey(record.error_code_id);
const editingKey = record.tempId || `existing_${record.error_code_id}`;
setEditingErrorCodeKey(editingKey);
errorCodeForm.setFieldsValue({
error_code: record.error_code,
@@ -327,49 +349,6 @@ const AddBrandDevice = () => {
}
};
const handleEditErrorCode = (record) => {
loadErrorCodeData(record);
};
const handleDeleteErrorCode = (record) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi Hapus',
message: `Apakah Anda yakin ingin menghapus error code "${record.error_code}"?`,
onConfirm: async () => {
try {
const errorCodeToDelete = record.error_code_id;
const response = await deleteErrorCode(brandInfo.brand_id || id, errorCodeToDelete);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus!',
});
setTrigerFilter(prev => !prev);
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Gagal menghapus error code',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: error.message || 'Gagal menghapus error code',
});
}
},
onCancel: () => { }
});
};
const handlePreviewErrorCode = (record) => {
};
const handleSearch = () => {
setSearchText(searchValue);
setTrigerFilter((prev) => !prev);
@@ -381,154 +360,7 @@ const AddBrandDevice = () => {
setTrigerFilter((prev) => !prev);
};
const handleBrandFormValuesChange = useCallback((changedValues, allValues) => {
}, []);
const getErrorCodesData = async (params) => {
try {
const search = params.get('search') || '';
const page = parseInt(params.get('page')) || currentPage;
const limit = parseInt(params.get('limit')) || pageSize;
let allErrorCodes = [];
let paginationData = {
current_page: page,
current_limit: limit,
total_limit: 0,
total_page: 0,
};
if (brandInfo.brand_id) {
const queryParams = new URLSearchParams({
page: page.toString(),
limit: limit.toString(),
...(search && { search })
});
const response = await getErrorCodesByBrandId(brandInfo.brand_id, queryParams);
if (response && response.statusCode === 200) {
const apiErrorData = response.data || [];
allErrorCodes = apiErrorData.map(ec => ({
...ec,
tempId: `existing_${ec.error_code_id}`,
status: 'existing'
}));
if (response.paging) {
paginationData = {
current_page: response.paging.current_page || page,
current_limit: response.paging.current_limit || limit,
total_limit: response.paging.total_limit || 0,
total_page: response.paging.total_page || 0,
};
}
}
}
allErrorCodes = [...allErrorCodes, ...tempErrorCodes.filter(ec => ec.status !== 'deleted')];
if (searchText) {
allErrorCodes = allErrorCodes.filter(ec =>
ec.error_code.toLowerCase().includes(searchText.toLowerCase()) ||
ec.error_code_name.toLowerCase().includes(searchText.toLowerCase())
);
paginationData.total_limit = allErrorCodes.length;
paginationData.total_page = Math.ceil(allErrorCodes.length / limit);
}
return {
data: allErrorCodes,
paging: paginationData
};
} catch (error) {
return {
data: [],
paging: {
current_page: 1,
current_limit: pageSize,
total_limit: 0,
total_page: 0,
}
};
}
};
const errorCodeColumns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Error Code',
dataIndex: 'error_code',
key: 'error_code',
width: '20%',
render: (text, record) => (
<Space>
{text}
</Space>
),
},
{
title: 'Error Name',
dataIndex: 'error_code_name',
key: 'error_code_name',
width: '25%',
},
{
title: 'Description',
dataIndex: 'error_code_description',
key: 'error_code_description',
width: '30%',
ellipsis: true,
},
{
title: 'Actions',
key: 'actions',
width: '20%',
render: (_, record) => (
<Space>
<Button
type="text"
icon={<EyeOutlined />}
onClick={() => showPreviewModal(record)}
size="small"
/>
<Button
type="text"
icon={<EditOutlined />}
onClick={() => showEditModal(record)}
size="small"
/>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(record)}
size="small"
/>
</Space>
),
},
];
const queryParams = useMemo(() => {
const params = new URLSearchParams();
params.set('page', currentPage.toString());
params.set('limit', pageSize.toString());
if (searchValue) {
params.set('search', searchValue);
}
return params;
}, [searchValue, currentPage, pageSize]);
const handlePaginationChange = (page, size) => {
setCurrentPage(page);
setPageSize(size);
};
const resetErrorCodeForm = () => {
errorCodeForm.resetFields();
@@ -763,7 +595,6 @@ const AddBrandDevice = () => {
)}
<BrandForm
form={brandForm}
onValuesChange={handleBrandFormValuesChange}
isEdit={false}
brandInfo={brandInfo}
/>