update ui brand device
This commit is contained in:
46
src/App.jsx
46
src/App.jsx
@@ -4,6 +4,7 @@ import SignIn from './pages/auth/SignIn';
|
||||
import SignUp from './pages/auth/Signup';
|
||||
import { ProtectedRoute } from './ProtectedRoute';
|
||||
import NotFound from './pages/blank/NotFound';
|
||||
import { BrandFormProvider } from './context/BrandFormContext';
|
||||
|
||||
// Dashboard
|
||||
import Home from './pages/home/Home';
|
||||
@@ -21,6 +22,7 @@ import IndexShift from './pages/master/shift/IndexShift';
|
||||
// Brand device
|
||||
import AddBrandDevice from './pages/master/brandDevice/AddBrandDevice';
|
||||
import EditBrandDevice from './pages/master/brandDevice/EditBrandDevice';
|
||||
import AddEditErrorCode from './pages/master/brandDevice/AddEditErrorCode';
|
||||
import ViewBrandDevice from './pages/master/brandDevice/ViewBrandDevice';
|
||||
import ViewFilePage from './pages/master/brandDevice/ViewFilePage';
|
||||
|
||||
@@ -91,25 +93,37 @@ const App = () => {
|
||||
<Route path="tag" element={<IndexTag />} />
|
||||
<Route path="unit" element={<IndexUnit />} />
|
||||
<Route path="sparepart" element={<IndexSparepart />} />
|
||||
<Route path="brand-device" element={<IndexBrandDevice />} />
|
||||
<Route path="brand-device/add" element={<AddBrandDevice />} />
|
||||
<Route path="brand-device/edit/:id" element={<EditBrandDevice />} />
|
||||
<Route path="brand-device/view/:id" element={<ViewBrandDevice />} />
|
||||
<Route
|
||||
path="brand-device/edit/:id/files/:fileType/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route
|
||||
path="brand-device/view/:id/files/:fileType/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route
|
||||
path="brand-device/view/temp/files/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route path="plant-sub-section" element={<IndexPlantSubSection />} />
|
||||
<Route path="shift" element={<IndexShift />} />
|
||||
<Route path="status" element={<IndexStatus />} />
|
||||
|
||||
{/* Brand Device Routes with BrandFormProvider */}
|
||||
<Route path="brand-device/*" element={
|
||||
<BrandFormProvider>
|
||||
<Routes>
|
||||
<Route path="" element={<IndexBrandDevice />} />
|
||||
<Route path="add" element={<AddBrandDevice />} />
|
||||
<Route path="edit/:id" element={<EditBrandDevice />} />
|
||||
<Route path="view/:id" element={<ViewBrandDevice />} />
|
||||
<Route
|
||||
path="edit/:id/files/:fileType/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route
|
||||
path="view/:id/files/:fileType/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route
|
||||
path="view/temp/files/:fileName"
|
||||
element={<ViewFilePage />}
|
||||
/>
|
||||
<Route path=":brandId/error-code/add" element={<AddEditErrorCode />} />
|
||||
<Route path=":brandId/error-code/edit/:errorCodeId" element={<AddEditErrorCode />} />
|
||||
<Route path="add/error-code/add" element={<AddEditErrorCode />} />
|
||||
<Route path="add/error-code/edit/:errorCodeId" element={<AddEditErrorCode />} />
|
||||
</Routes>
|
||||
</BrandFormProvider>
|
||||
} />
|
||||
</Route>
|
||||
|
||||
<Route path="/report" element={<ProtectedRoute />}>
|
||||
|
||||
@@ -47,4 +47,23 @@ const deleteBrand = async (id) => {
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export { getAllBrands, getBrandById, createBrand, updateBrand, deleteBrand };
|
||||
const getErrorCodesByBrandId = async (brandId, queryParams) => {
|
||||
const query = queryParams ? `?${queryParams.toString()}` : '';
|
||||
const response = await SendRequest({
|
||||
method: 'get',
|
||||
prefix: `error-code/brand/${brandId}${query}`,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
const getErrorCodeById = async (id) => {
|
||||
const response = await SendRequest({
|
||||
method: 'get',
|
||||
prefix: `error-code/${id}`,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export { getAllBrands, getBrandById, createBrand, updateBrand, deleteBrand, getErrorCodesByBrandId, getErrorCodeById };
|
||||
|
||||
624
src/context/BrandFormContext.jsx
Normal file
624
src/context/BrandFormContext.jsx
Normal file
@@ -0,0 +1,624 @@
|
||||
import React, { createContext, useContext, useReducer } from 'react';
|
||||
import { NotifAlert } from '../components/Global/ToastNotif';
|
||||
|
||||
// Initial state
|
||||
const initialState = {
|
||||
brandId: null,
|
||||
routeBrandId: null,
|
||||
errorCodeId: null,
|
||||
currentStep: 1,
|
||||
brandInfo: {
|
||||
brand_name: '',
|
||||
brand_type: '',
|
||||
brand_manufacture: '',
|
||||
brand_model: '',
|
||||
is_active: true
|
||||
},
|
||||
tempErrorCodes: [],
|
||||
existingErrorCodes: [],
|
||||
currentErrorCode: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
lastSaved: null
|
||||
};
|
||||
|
||||
// Action types
|
||||
const SET_BRAND_INFO = 'SET_BRAND_INFO';
|
||||
const SET_BRAND_ID = 'SET_BRAND_ID';
|
||||
const SET_ROUTE_BRAND_ID = 'SET_ROUTE_BRAND_ID';
|
||||
const SET_ERROR_CODE_ID = 'SET_ERROR_CODE_ID';
|
||||
const SET_CURRENT_STEP = 'SET_CURRENT_STEP';
|
||||
const UPDATE_BRAND_FIELD = 'UPDATE_BRAND_FIELD';
|
||||
const ADD_ERROR_CODE = 'ADD_ERROR_CODE';
|
||||
const UPDATE_ERROR_CODE = 'UPDATE_ERROR_CODE';
|
||||
const DELETE_ERROR_CODE = 'DELETE_ERROR_CODE';
|
||||
const MARK_AS_DELETED = 'MARK_AS_DELETED';
|
||||
const SET_TEMP_ERROR_CODES = 'SET_TEMP_ERROR_CODES';
|
||||
const SET_EXISTING_ERROR_CODES = 'SET_EXISTING_ERROR_CODES';
|
||||
const MERGE_ERROR_CODES = 'MERGE_ERROR_CODES';
|
||||
const SET_CURRENT_ERROR_CODE = 'SET_CURRENT_ERROR_CODE';
|
||||
const SET_LOADING = 'SET_LOADING';
|
||||
const SET_ERROR = 'SET_ERROR';
|
||||
const RESET_FORM = 'RESET_FORM';
|
||||
const SET_LAST_SAVED = 'SET_LAST_SAVED';
|
||||
|
||||
// Reducer function
|
||||
const brandFormReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case SET_BRAND_INFO:
|
||||
return {
|
||||
...state,
|
||||
brandInfo: action.payload
|
||||
};
|
||||
|
||||
case SET_BRAND_ID:
|
||||
return {
|
||||
...state,
|
||||
brandId: action.payload
|
||||
};
|
||||
|
||||
case SET_ROUTE_BRAND_ID:
|
||||
return {
|
||||
...state,
|
||||
routeBrandId: action.payload
|
||||
};
|
||||
|
||||
case SET_ERROR_CODE_ID:
|
||||
return {
|
||||
...state,
|
||||
errorCodeId: action.payload
|
||||
};
|
||||
|
||||
case SET_CURRENT_STEP:
|
||||
return {
|
||||
...state,
|
||||
currentStep: action.payload
|
||||
};
|
||||
|
||||
case UPDATE_BRAND_FIELD:
|
||||
return {
|
||||
...state,
|
||||
brandInfo: {
|
||||
...state.brandInfo,
|
||||
[action.payload.field]: action.payload.value
|
||||
}
|
||||
};
|
||||
|
||||
case ADD_ERROR_CODE:
|
||||
const newErrorCode = {
|
||||
tempId: Date.now(),
|
||||
error_code: '',
|
||||
error_code_name: '',
|
||||
error_code_description: '',
|
||||
error_code_color: '#000000ff',
|
||||
path_icon: '',
|
||||
is_active: true,
|
||||
solutions: [],
|
||||
spareparts: [],
|
||||
status: 'new',
|
||||
created_at: new Date().toISOString()
|
||||
};
|
||||
return {
|
||||
...state,
|
||||
tempErrorCodes: [...state.tempErrorCodes, newErrorCode]
|
||||
};
|
||||
|
||||
case UPDATE_ERROR_CODE:
|
||||
const { tempId, data } = action.payload;
|
||||
|
||||
if (tempId.startsWith('existing_')) {
|
||||
return {
|
||||
...state,
|
||||
existingErrorCodes: state.existingErrorCodes.map(ec =>
|
||||
`existing_${ec.error_code_id}` === tempId
|
||||
? {
|
||||
...ec,
|
||||
...data,
|
||||
status: 'modified',
|
||||
updated_at: new Date().toISOString()
|
||||
}
|
||||
: ec
|
||||
)
|
||||
};
|
||||
} else {
|
||||
// Update in tempErrorCodes
|
||||
return {
|
||||
...state,
|
||||
tempErrorCodes: state.tempErrorCodes.map(ec =>
|
||||
ec.tempId === tempId
|
||||
? {
|
||||
...ec,
|
||||
...data,
|
||||
status: ec.status === 'new' ? 'new' : 'modified',
|
||||
updated_at: new Date().toISOString()
|
||||
}
|
||||
: ec
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
case DELETE_ERROR_CODE:
|
||||
return {
|
||||
...state,
|
||||
tempErrorCodes: state.tempErrorCodes.filter(ec => ec.tempId !== action.payload)
|
||||
};
|
||||
|
||||
case MARK_AS_DELETED:
|
||||
const deleteTempId = action.payload;
|
||||
|
||||
// Check if it's an existing error code (format: existing_${error_code_id})
|
||||
if (deleteTempId.startsWith('existing_')) {
|
||||
return {
|
||||
...state,
|
||||
existingErrorCodes: state.existingErrorCodes.map(ec =>
|
||||
`existing_${ec.error_code_id}` === deleteTempId
|
||||
? {
|
||||
...ec,
|
||||
status: 'deleted',
|
||||
is_active: false,
|
||||
deleted_at: new Date().toISOString()
|
||||
}
|
||||
: ec
|
||||
)
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...state,
|
||||
tempErrorCodes: state.tempErrorCodes.map(ec =>
|
||||
ec.tempId === deleteTempId
|
||||
? {
|
||||
...ec,
|
||||
status: 'deleted',
|
||||
is_active: false,
|
||||
deleted_at: new Date().toISOString()
|
||||
}
|
||||
: ec
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
case SET_TEMP_ERROR_CODES:
|
||||
return {
|
||||
...state,
|
||||
tempErrorCodes: action.payload
|
||||
};
|
||||
|
||||
case SET_EXISTING_ERROR_CODES:
|
||||
return {
|
||||
...state,
|
||||
existingErrorCodes: action.payload
|
||||
};
|
||||
|
||||
case MERGE_ERROR_CODES:
|
||||
return {
|
||||
...state,
|
||||
existingErrorCodes: action.payload.existing || [],
|
||||
tempErrorCodes: action.payload.temporary || []
|
||||
};
|
||||
|
||||
case SET_LOADING:
|
||||
return {
|
||||
...state,
|
||||
isLoading: action.payload
|
||||
};
|
||||
|
||||
case SET_ERROR:
|
||||
return {
|
||||
...state,
|
||||
error: action.payload
|
||||
};
|
||||
|
||||
case RESET_FORM:
|
||||
return { ...initialState, lastSaved: state.lastSaved };
|
||||
|
||||
case SET_CURRENT_ERROR_CODE:
|
||||
return {
|
||||
...state,
|
||||
currentErrorCode: action.payload
|
||||
};
|
||||
|
||||
case SET_LAST_SAVED:
|
||||
return {
|
||||
...state,
|
||||
lastSaved: action.payload
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
// Create context
|
||||
const BrandFormContext = createContext();
|
||||
|
||||
export const BrandFormProvider = ({ children }) => {
|
||||
const [state, dispatch] = useReducer(brandFormReducer, initialState);
|
||||
|
||||
// Actions
|
||||
const actions = {
|
||||
setBrandId: (brandId) => {
|
||||
dispatch({ type: SET_BRAND_ID, payload: brandId });
|
||||
},
|
||||
|
||||
setRouteBrandId: (routeBrandId) => {
|
||||
dispatch({ type: SET_ROUTE_BRAND_ID, payload: routeBrandId });
|
||||
},
|
||||
|
||||
setErrorCodeId: (errorCodeId) => {
|
||||
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
|
||||
},
|
||||
|
||||
setCurrentStep: (step) => {
|
||||
dispatch({ type: SET_CURRENT_STEP, payload: step });
|
||||
},
|
||||
|
||||
getCurrentBrandId: () => {
|
||||
return state.brandId || state.routeBrandId;
|
||||
},
|
||||
|
||||
setBrandInfo: (brandInfo) => {
|
||||
dispatch({ type: SET_BRAND_INFO, payload: brandInfo });
|
||||
},
|
||||
|
||||
updateBrandField: (field, value) => {
|
||||
dispatch({ type: UPDATE_BRAND_FIELD, payload: { field, value } });
|
||||
},
|
||||
|
||||
addErrorCode: (errorCodeData = {}) => {
|
||||
const defaultErrorCode = {
|
||||
tempId: Date.now(),
|
||||
error_code: '',
|
||||
error_code_name: '',
|
||||
error_code_description: '',
|
||||
error_code_color: '#000000ff',
|
||||
path_icon: '',
|
||||
is_active: true,
|
||||
solutions: [],
|
||||
spareparts: [],
|
||||
status: 'new',
|
||||
created_at: new Date().toISOString()
|
||||
};
|
||||
const newErrorCode = { ...defaultErrorCode, ...errorCodeData };
|
||||
dispatch({ type: ADD_ERROR_CODE, payload: newErrorCode });
|
||||
},
|
||||
|
||||
updateErrorCode: (tempId, data) => {
|
||||
dispatch({ type: UPDATE_ERROR_CODE, payload: { tempId, data } });
|
||||
},
|
||||
|
||||
deleteErrorCode: (tempId, isPermanent = false) => {
|
||||
if (isPermanent) {
|
||||
dispatch({ type: DELETE_ERROR_CODE, payload: tempId });
|
||||
} else {
|
||||
dispatch({ type: MARK_AS_DELETED, payload: tempId });
|
||||
}
|
||||
},
|
||||
|
||||
markAsDeleted: (tempId) => {
|
||||
dispatch({ type: MARK_AS_DELETED, payload: tempId });
|
||||
},
|
||||
|
||||
setTempErrorCodes: (errorCodes) => {
|
||||
dispatch({ type: SET_TEMP_ERROR_CODES, payload: errorCodes });
|
||||
},
|
||||
|
||||
setExistingErrorCodes: (errorCodes) => {
|
||||
dispatch({ type: SET_EXISTING_ERROR_CODES, payload: errorCodes });
|
||||
},
|
||||
|
||||
mergeErrorCodes: (existing, temporary) => {
|
||||
dispatch({ type: MERGE_ERROR_CODES, payload: { existing, temporary } });
|
||||
},
|
||||
|
||||
setLoading: (isLoading) => {
|
||||
dispatch({ type: SET_LOADING, payload: isLoading });
|
||||
},
|
||||
|
||||
setError: (error) => {
|
||||
dispatch({ type: SET_ERROR, payload: error });
|
||||
},
|
||||
|
||||
resetForm: () => {
|
||||
dispatch({ type: RESET_FORM });
|
||||
},
|
||||
|
||||
setLastSaved: (timestamp) => {
|
||||
dispatch({ type: SET_LAST_SAVED, payload: timestamp });
|
||||
},
|
||||
|
||||
setCurrentErrorCode: (errorCode) => {
|
||||
dispatch({ type: SET_CURRENT_ERROR_CODE, payload: errorCode });
|
||||
},
|
||||
|
||||
// Initialize context with route parameters
|
||||
initializeFromRoute: (routeBrandId, errorCodeId = null) => {
|
||||
dispatch({ type: SET_ROUTE_BRAND_ID, payload: routeBrandId });
|
||||
if (errorCodeId) {
|
||||
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
|
||||
}
|
||||
},
|
||||
|
||||
// Navigate to specific step with parameter handling
|
||||
navigateToStep: (step, brandId = null, errorCodeId = null) => {
|
||||
dispatch({ type: SET_CURRENT_STEP, payload: step });
|
||||
if (brandId) {
|
||||
dispatch({ type: SET_BRAND_ID, payload: brandId });
|
||||
}
|
||||
if (errorCodeId) {
|
||||
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
|
||||
}
|
||||
},
|
||||
|
||||
// Utility functions
|
||||
getErrorCodeByTempId: (tempId) => {
|
||||
return state.tempErrorCodes.find(ec => ec.tempId === tempId);
|
||||
},
|
||||
|
||||
getActiveErrorCodes: () => {
|
||||
return state.tempErrorCodes.filter(ec => ec.status !== 'deleted');
|
||||
},
|
||||
|
||||
getModifiedErrorCodes: () => {
|
||||
return state.tempErrorCodes.filter(ec =>
|
||||
ec.status === 'new' || ec.status === 'modified' || ec.status === 'deleted'
|
||||
);
|
||||
},
|
||||
|
||||
hasChanges: () => {
|
||||
return state.tempErrorCodes.some(ec =>
|
||||
ec.status === 'new' || ec.status === 'modified' || ec.status === 'deleted'
|
||||
);
|
||||
},
|
||||
|
||||
validateForm: () => {
|
||||
const errors = {};
|
||||
|
||||
// Validate brand info
|
||||
if (!state.brandInfo.brand_name?.trim()) {
|
||||
errors.brand = 'Brand name is required';
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Validasi Gagal',
|
||||
message: 'Brand name wajib diisi!',
|
||||
});
|
||||
return { isValid: false, errors };
|
||||
}
|
||||
|
||||
if (!state.brandInfo.brand_manufacture?.trim()) {
|
||||
errors.brand_manufacture = 'Brand manufacture is required';
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Validasi Gagal',
|
||||
message: 'Brand manufacture wajib diisi!',
|
||||
});
|
||||
return { isValid: false, errors };
|
||||
}
|
||||
|
||||
const allActiveErrorCodes = [
|
||||
...state.existingErrorCodes,
|
||||
...state.tempErrorCodes.filter(ec => ec.status !== 'deleted')
|
||||
];
|
||||
|
||||
if (allActiveErrorCodes.length === 0) {
|
||||
errors.errorCodes = 'At least one error code is required';
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Validasi Gagal',
|
||||
message: 'Brand harus memiliki minimal 1 error code!',
|
||||
});
|
||||
return { isValid: false, errors };
|
||||
}
|
||||
|
||||
// Validate each error code
|
||||
allActiveErrorCodes.forEach((ec, index) => {
|
||||
if (!ec.error_code?.trim()) {
|
||||
errors[`errorCode_${ec.tempId || ec.error_code_id}`] = 'Error code is required';
|
||||
}
|
||||
if (!ec.error_code_name?.trim()) {
|
||||
errors[`errorCodeName_${ec.tempId || ec.error_code_id}`] = 'Error code name is required';
|
||||
}
|
||||
|
||||
let solutionsToCheck = [];
|
||||
if (ec.solution && Array.isArray(ec.solution)) {
|
||||
solutionsToCheck = ec.solution;
|
||||
} else if (ec.solutions && Array.isArray(ec.solutions)) {
|
||||
solutionsToCheck = ec.solutions;
|
||||
}
|
||||
|
||||
if (solutionsToCheck.length > 0) {
|
||||
const activeSolutions = solutionsToCheck.filter(sol => sol.status !== 'deleted');
|
||||
if (activeSolutions.length === 0) {
|
||||
errors[`solutions_${ec.tempId || ec.error_code_id}`] = 'Setiap error code harus memiliki minimal 1 solution';
|
||||
}
|
||||
} else {
|
||||
errors[`solutions_${ec.tempId || ec.error_code_id}`] = 'Setiap error code harus memiliki minimal 1 solution';
|
||||
}
|
||||
|
||||
if (ec.spareparts && Array.isArray(ec.spareparts)) {
|
||||
ec.spareparts.forEach((sp, spIndex) => {
|
||||
if (sp === undefined || sp === null || sp === '') {
|
||||
console.error(`❌ Error Code ${index}, Sparepart ${spIndex}: sparepart_id is undefined, null, or empty`);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(errors).length > 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Validasi Gagal',
|
||||
message: 'Perbaiki error yang ada sebelum melanjutkan!',
|
||||
});
|
||||
}
|
||||
|
||||
return { isValid: Object.keys(errors).length === 0, errors };
|
||||
},
|
||||
|
||||
prepareSubmissionData: (userId) => {
|
||||
const allErrorCodes = [
|
||||
...state.existingErrorCodes.map(ec => ({
|
||||
...ec,
|
||||
tempId: `existing_${ec.error_code_id}`,
|
||||
status: 'existing'
|
||||
})),
|
||||
...state.tempErrorCodes
|
||||
];
|
||||
|
||||
const finalErrorCodes = allErrorCodes
|
||||
.filter(ec => ec.status !== 'deleted')
|
||||
.map(ec => {
|
||||
const cleanedCode = {
|
||||
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 || '',
|
||||
is_active: ec.is_active === true ? 1 : 0,
|
||||
solution: [],
|
||||
spareparts: []
|
||||
};
|
||||
|
||||
if (ec.error_code_id && ec.status === 'existing') {
|
||||
cleanedCode.error_code_id = parseInt(ec.error_code_id);
|
||||
}
|
||||
|
||||
// Handle both solution and solutions fields for compatibility
|
||||
let solutions = [];
|
||||
if (ec.solution && Array.isArray(ec.solution)) {
|
||||
solutions = ec.solution;
|
||||
} else if (ec.solutions && Array.isArray(ec.solutions)) {
|
||||
solutions = ec.solutions;
|
||||
}
|
||||
|
||||
if (solutions.length > 0) {
|
||||
cleanedCode.solution = solutions
|
||||
.filter(sol => sol && sol.solution_name)
|
||||
.map(sol => ({
|
||||
solution_name: sol.solution_name || '',
|
||||
type_solution: sol.type_solution || 'text',
|
||||
text_solution: sol.text_solution || '',
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active === true ? 1 : 0
|
||||
}));
|
||||
}
|
||||
|
||||
if (ec.spareparts && Array.isArray(ec.spareparts)) {
|
||||
cleanedCode.spareparts = ec.spareparts
|
||||
.filter(sp => sp !== undefined && sp !== null && sp !== '' && sp !== 0)
|
||||
.map(sp => {
|
||||
let sparepartId = 0;
|
||||
if (typeof sp === 'object' && sp !== null) {
|
||||
sparepartId = sp.sparepart_id || sp.id || sp.sparepartId || 0;
|
||||
} else if (typeof sp === 'string' || typeof sp === 'number') {
|
||||
sparepartId = parseInt(sp) || 0;
|
||||
}
|
||||
return parseInt(sparepartId) || 0;
|
||||
})
|
||||
.filter(id => id > 0);
|
||||
}
|
||||
|
||||
return cleanedCode;
|
||||
});
|
||||
|
||||
const submissionData = {
|
||||
brand_name: state.brandInfo.brand_name || '',
|
||||
brand_type: state.brandInfo.brand_type || '',
|
||||
brand_manufacture: state.brandInfo.brand_manufacture || '',
|
||||
brand_model: state.brandInfo.brand_model || '',
|
||||
is_active: state.brandInfo.is_active === true ? 1 : 0,
|
||||
error_code: finalErrorCodes,
|
||||
updated_by: parseInt(userId) || 1
|
||||
};
|
||||
|
||||
// console.log(' Prepared flat submission data:', JSON.stringify(submissionData, null, 2));
|
||||
|
||||
return submissionData;
|
||||
},
|
||||
|
||||
getAllErrorCodes: () => {
|
||||
return [
|
||||
...state.existingErrorCodes.map(ec => ({
|
||||
...ec,
|
||||
tempId: `existing_${ec.error_code_id}`,
|
||||
status: 'existing'
|
||||
})),
|
||||
...state.tempErrorCodes
|
||||
];
|
||||
},
|
||||
|
||||
getErrorCodeById: (id) => {
|
||||
const existingCode = state.existingErrorCodes.find(ec => ec.error_code_id == id);
|
||||
if (existingCode) {
|
||||
return {
|
||||
...existingCode,
|
||||
tempId: `existing_${existingCode.error_code_id}`,
|
||||
status: 'existing'
|
||||
};
|
||||
}
|
||||
|
||||
return state.tempErrorCodes.find(ec => ec.tempId == id);
|
||||
},
|
||||
|
||||
// Enhanced error code management
|
||||
loadErrorCodesForBrand: async (brandId) => {
|
||||
dispatch({ type: SET_LOADING, payload: true });
|
||||
try {
|
||||
const { getErrorCodesByBrandId } = await import('../api/master-brand');
|
||||
const response = await getErrorCodesByBrandId(brandId);
|
||||
|
||||
if (response && response.data) {
|
||||
dispatch({ type: SET_EXISTING_ERROR_CODES, payload: response.data });
|
||||
}
|
||||
return response;
|
||||
} catch (error) {
|
||||
dispatch({ type: SET_ERROR, payload: error.message });
|
||||
throw error;
|
||||
} finally {
|
||||
dispatch({ type: SET_LOADING, payload: false });
|
||||
}
|
||||
},
|
||||
|
||||
// Smart navigation helper
|
||||
navigateToErrorCodes: (brandId) => {
|
||||
const currentId = brandId || state.brandId || state.routeBrandId;
|
||||
if (currentId) {
|
||||
dispatch({ type: SET_BRAND_ID, payload: currentId });
|
||||
dispatch({ type: SET_CURRENT_STEP, payload: 2 });
|
||||
return currentId;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
editErrorCode: (errorCodeId, brandId) => {
|
||||
const currentBrandId = brandId || state.brandId || state.routeBrandId;
|
||||
if (currentBrandId && errorCodeId) {
|
||||
dispatch({ type: SET_BRAND_ID, payload: currentBrandId });
|
||||
dispatch({ type: SET_ERROR_CODE_ID, payload: errorCodeId });
|
||||
dispatch({ type: SET_CURRENT_STEP, payload: 3 });
|
||||
return { brandId: currentBrandId, errorCodeId };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const value = {
|
||||
...state,
|
||||
...actions
|
||||
};
|
||||
|
||||
return (
|
||||
<BrandFormContext.Provider value={value}>
|
||||
{children}
|
||||
</BrandFormContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useBrandForm = () => {
|
||||
const context = useContext(BrandFormContext);
|
||||
if (!context) {
|
||||
throw new Error('useBrandForm must be used within a BrandFormProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export default BrandFormContext;
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useEffect, useState, useCallback, useMemo } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import {
|
||||
Divider,
|
||||
Typography,
|
||||
@@ -10,53 +10,54 @@ import {
|
||||
Col,
|
||||
Card,
|
||||
Spin,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
Input,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { EyeOutlined, EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import TableList from '../../../components/Global/TableList';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { createBrand } from '../../../api/master-brand';
|
||||
import BrandForm from './component/BrandForm';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import FormActions from './component/FormActions';
|
||||
import ListErrorCode from './component/ListErrorCode';
|
||||
import { useErrorCodeLogic } from './hooks/errorCode';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { EditOutlined, DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { useBrandDeviceLogic } from './hooks/useBrandDeviceLogic';
|
||||
import { useBrandForm } from '../../../context/BrandFormContext';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
|
||||
const AddBrandDevice = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [brandForm] = Form.useForm();
|
||||
const [errorCodeForm] = Form.useForm();
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
brand_name: '',
|
||||
brand_type: '',
|
||||
brand_model: '',
|
||||
brand_manufacture: '',
|
||||
is_active: true,
|
||||
});
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [pendingErrorCodes, setPendingErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
|
||||
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
|
||||
const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
|
||||
errorCodeForm,
|
||||
[]
|
||||
);
|
||||
// Context integration
|
||||
const {
|
||||
brandId,
|
||||
brandInfo,
|
||||
setBrandInfo,
|
||||
tempErrorCodes,
|
||||
addErrorCode,
|
||||
updateErrorCode,
|
||||
deleteErrorCode,
|
||||
prepareSubmissionData,
|
||||
validateForm,
|
||||
resetForm,
|
||||
} = useBrandForm();
|
||||
|
||||
// Use step from query parameter or context
|
||||
const tab = searchParams.get('tab');
|
||||
const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : 0);
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
@@ -64,7 +65,6 @@ const AddBrandDevice = () => {
|
||||
solutionStatuses,
|
||||
solutionsToDelete,
|
||||
firstSolutionValid,
|
||||
checkFirstSolutionValid,
|
||||
handleAddSolutionField,
|
||||
handleRemoveSolutionField,
|
||||
handleSolutionTypeChange,
|
||||
@@ -74,6 +74,354 @@ const AddBrandDevice = () => {
|
||||
setSolutionsForExistingRecord,
|
||||
} = useSolutionLogic(solutionForm);
|
||||
|
||||
// Navigation functions
|
||||
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 handlePrevStep = () => {
|
||||
setCurrentStep(0);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate('/master/brand-device');
|
||||
};
|
||||
|
||||
const handleAddErrorCode = () => {
|
||||
navigate(`/master/brand-device/add/error-code/add`);
|
||||
};
|
||||
|
||||
const handleEditErrorCodeNavigate = (record) => {
|
||||
const errorCodeId = record.status === 'existing' ? record.error_code_id : record.tempId;
|
||||
if (errorCodeId) {
|
||||
navigate(`/master/brand-device/add/error-code/edit/${errorCodeId}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteErrorCode = (record) => {
|
||||
NotifConfirmDialog({
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi Hapus',
|
||||
message: `Apakah Anda yakin ingin menghapus error code "${record.error_code}"?`,
|
||||
onConfirm: () => {
|
||||
const tempId = record.tempId || `existing_${record.error_code_id}`;
|
||||
deleteErrorCode(tempId, false); // false = soft delete
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil dihapus!',
|
||||
});
|
||||
setTrigerFilter(prev => !prev);
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
};
|
||||
|
||||
const handlePreviewErrorCode = (record) => {
|
||||
console.log('Preview error code:', record);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setSearchText(searchValue);
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setSearchText('');
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleBrandFormValuesChange = useCallback((changedValues, allValues) => {
|
||||
setBrandInfo(allValues);
|
||||
}, [setBrandInfo]);
|
||||
|
||||
const getErrorCodesData = async (params) => {
|
||||
try {
|
||||
const search = params.get('search') || '';
|
||||
const page = parseInt(params.get('page')) || 1;
|
||||
const limit = parseInt(params.get('limit')) || 10;
|
||||
|
||||
const allErrorCodes = tempErrorCodes.filter(ec => ec.status !== 'deleted');
|
||||
|
||||
let filteredData = allErrorCodes;
|
||||
|
||||
if (searchText) {
|
||||
filteredData = allErrorCodes.filter(ec =>
|
||||
ec.error_code.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
ec.error_code_name.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
const startIndex = 0;
|
||||
const endIndex = startIndex + limit;
|
||||
const paginatedData = filteredData.slice(startIndex, endIndex);
|
||||
|
||||
return {
|
||||
data: paginatedData,
|
||||
pagination: {
|
||||
current_page: page,
|
||||
current_limit: limit,
|
||||
total_limit: filteredData.length,
|
||||
total_page: Math.ceil(filteredData.length / limit),
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error getting error codes data:', error);
|
||||
return {
|
||||
data: [],
|
||||
pagination: {
|
||||
current_page: 1,
|
||||
current_limit: 10,
|
||||
total_limit: 0,
|
||||
total_page: 0,
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Error code columns
|
||||
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}
|
||||
{record.status === 'new' && <Tag color="green">New</Tag>}
|
||||
</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>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Query params for table
|
||||
const queryParams = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', '1');
|
||||
params.set('limit', '10');
|
||||
if (searchValue) {
|
||||
params.set('search', searchValue);
|
||||
}
|
||||
return params;
|
||||
}, [searchValue]);
|
||||
|
||||
const handleFinish = async () => {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
// Validate form using context
|
||||
const validation = validateForm();
|
||||
if (!validation.isValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const submissionData = prepareSubmissionData(1);
|
||||
|
||||
const response = await createBrand(submissionData);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: response.message || 'Brand Device berhasil ditambahkan.',
|
||||
});
|
||||
resetForm();
|
||||
navigate('/master/brand-device');
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Gagal menambahkan Brand Device',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: error.message || 'Gagal menyimpan data. Silakan coba lagi.',
|
||||
});
|
||||
} finally {
|
||||
setConfirmLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderStepContent = () => {
|
||||
if (currentStep === 0) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }}>
|
||||
{loading && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 10,
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
)}
|
||||
<BrandForm
|
||||
form={brandForm}
|
||||
onValuesChange={handleBrandFormValuesChange}
|
||||
isEdit={false}
|
||||
showSparepartSection={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search error codes..."
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchText(value);
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddErrorCode}
|
||||
size="large"
|
||||
>
|
||||
Add Error Code
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'error_code'}
|
||||
showPreviewModal={handlePreviewErrorCode}
|
||||
showEditModal={handleEditErrorCodeNavigate}
|
||||
showDeleteDialog={handleDeleteErrorCode}
|
||||
getData={getErrorCodesData}
|
||||
queryParams={queryParams}
|
||||
columns={errorCodeColumns(handlePreviewErrorCode, handleEditErrorCodeNavigate, handleDeleteErrorCode)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbItems([
|
||||
{
|
||||
@@ -99,390 +447,6 @@ const AddBrandDevice = () => {
|
||||
]);
|
||||
}, [setBreadcrumbItems, navigate]);
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate('/master/brand-device');
|
||||
};
|
||||
|
||||
const handleNextStep = async () => {
|
||||
try {
|
||||
const currentFormData = await brandForm.validateFields();
|
||||
|
||||
setFormData({
|
||||
brand_name: currentFormData.brand_name,
|
||||
brand_type: currentFormData.brand_type || '',
|
||||
brand_model: currentFormData.brand_model || '',
|
||||
brand_manufacture: currentFormData.brand_manufacture || '',
|
||||
is_active: currentFormData.is_active,
|
||||
});
|
||||
|
||||
setCurrentStep(1);
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Harap isi semua kolom wajib untuk brand device!',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinish = async () => {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
const transformedErrorCodes = pendingErrorCodes.length > 0 ? pendingErrorCodes.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 || '#ad4141ff',
|
||||
path_icon: 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
|
||||
}))
|
||||
})) : [];
|
||||
|
||||
const brandData = {
|
||||
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,
|
||||
spareparts: selectedSparepartIds,
|
||||
error_code: transformedErrorCodes,
|
||||
};
|
||||
|
||||
const response = await createBrand(brandData);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: response.message || 'Brand Device berhasil ditambahkan.',
|
||||
});
|
||||
navigate('/master/brand-device');
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Gagal menambahkan Brand Device',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: error.message || 'Gagal menyimpan 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, solutionForm);
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
}
|
||||
|
||||
const formElement = document.querySelector('.ant-form');
|
||||
if (formElement) {
|
||||
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddErrorCode = async () => {
|
||||
try {
|
||||
const errorCodeValues = await errorCodeForm.validateFields();
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
// Validate error code fields
|
||||
if (!errorCodeValues.error_code || !errorCodeValues.error_code_name) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Error code dan error name wajib diisi!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate solution data
|
||||
if (!solutionData || solutionData.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap error code harus memiliki minimal 1 solution!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate each solution has name
|
||||
const invalidSolution = solutionData.find(sol => !sol.solution_name || sol.solution_name.trim() === '');
|
||||
if (invalidSolution) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap solution harus memiliki nama!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newErrorCode = {
|
||||
error_code: errorCodeValues.error_code,
|
||||
error_code_name: errorCodeValues.error_code_name,
|
||||
error_code_description: errorCodeValues.error_code_description,
|
||||
error_code_color: errorCodeValues.error_code_color || '#000000',
|
||||
path_icon: errorCodeIcon?.uploadPath || '',
|
||||
is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
|
||||
solution: solutionData,
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`,
|
||||
};
|
||||
|
||||
let updatedPendingErrorCodes;
|
||||
if (editingErrorCodeKey) {
|
||||
updatedPendingErrorCodes = pendingErrorCodes.map((item) => {
|
||||
if (item.key === editingErrorCodeKey) {
|
||||
return {
|
||||
...item,
|
||||
...newErrorCode,
|
||||
error_code_id: item.error_code_id || newErrorCode.error_code_id,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil diupdate!',
|
||||
});
|
||||
} else {
|
||||
updatedPendingErrorCodes = [...pendingErrorCodes, newErrorCode];
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil ditambahkan!',
|
||||
});
|
||||
}
|
||||
|
||||
setPendingErrorCodes(updatedPendingErrorCodes);
|
||||
setErrorCodes(updatedPendingErrorCodes);
|
||||
|
||||
setTimeout(() => {
|
||||
resetErrorCodeForm();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const resetErrorCodeForm = () => {
|
||||
errorCodeForm.resetFields();
|
||||
errorCodeForm.setFieldsValue({
|
||||
status: true,
|
||||
});
|
||||
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();
|
||||
setErrorCodeIcon(null);
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
|
||||
const handleErrorCodeIconUpload = (iconData) => {
|
||||
setErrorCodeIcon(iconData);
|
||||
};
|
||||
|
||||
const handleErrorCodeIconRemove = () => {
|
||||
setErrorCodeIcon(null);
|
||||
};
|
||||
|
||||
const renderStepContent = () => {
|
||||
if (currentStep === 0) {
|
||||
return (
|
||||
<BrandForm
|
||||
form={brandForm}
|
||||
formData={formData}
|
||||
onValuesChange={(changedValues, allValues) =>
|
||||
setFormData((prev) => ({ ...prev, ...allValues }))
|
||||
}
|
||||
isEdit={false}
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={setSelectedSparepartIds}
|
||||
showSparepartSection={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<Col span={6}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
{isErrorCodeFormReadOnly
|
||||
? editingErrorCodeKey
|
||||
? 'View Error Code'
|
||||
: 'Error Code Form'
|
||||
: editingErrorCodeKey
|
||||
? 'Edit Error Code'
|
||||
: '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={6}>
|
||||
<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',
|
||||
}}
|
||||
onValuesChange={checkFirstSolutionValid}
|
||||
>
|
||||
<SolutionForm
|
||||
solutionForm={solutionForm}
|
||||
solutionFields={solutionFields}
|
||||
solutionTypes={solutionTypes}
|
||||
solutionStatuses={solutionStatuses}
|
||||
firstSolutionValid={firstSolutionValid}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
onSolutionStatusChange={handleSolutionStatusChange}
|
||||
checkFirstSolutionValid={checkFirstSolutionValid}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
Error Codes ({errorCodes.length})
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<ListErrorCode
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
/>
|
||||
<div style={{ marginTop: 16, textAlign: 'center' }}>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={handleCreateNewErrorCode}
|
||||
style={{
|
||||
width: '100%',
|
||||
borderColor: '#23A55A',
|
||||
color: '#23A55A'
|
||||
}}
|
||||
>
|
||||
+ Add New Error Code
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title level={4} style={{ margin: '0 0 24px 0' }}>
|
||||
@@ -524,15 +488,48 @@ const AddBrandDevice = () => {
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<FormActions
|
||||
currentStep={currentStep}
|
||||
onPreviousStep={() => setCurrentStep(currentStep - 1)}
|
||||
onNextStep={handleNextStep}
|
||||
onSave={handleFinish}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
isEditMode={false}
|
||||
/>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<Button onClick={handleCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
{currentStep === 1 && (
|
||||
<Button
|
||||
onClick={handlePrevStep}
|
||||
style={{ marginLeft: 8 }}
|
||||
>
|
||||
Back to Brand Info
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{currentStep === 0 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleNextStep}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Next to Error Codes
|
||||
</Button>
|
||||
)}
|
||||
{currentStep === 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleFinish}
|
||||
loading={confirmLoading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Save Brand Device
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
588
src/pages/master/brandDevice/AddEditErrorCode.jsx
Normal file
588
src/pages/master/brandDevice/AddEditErrorCode.jsx
Normal file
@@ -0,0 +1,588 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Card,
|
||||
Typography,
|
||||
Button,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
Spin,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
import { ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import { getBrandById, getErrorCodeById, updateBrand, getErrorCodesByBrandId } from '../../../api/master-brand';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { useBrandForm } from '../../../context/BrandFormContext';
|
||||
import { uploadFile } from '../../../api/file-uploads';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import SingleSparepartSelect from './component/SingleSparepartSelect';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const AddEditErrorCode = () => {
|
||||
const navigate = useNavigate();
|
||||
const { brandId: routeBrandId, errorCodeId } = useParams();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
|
||||
// Use BrandForm context
|
||||
const {
|
||||
brandId: contextBrandId,
|
||||
routeBrandId: contextRouteBrandId,
|
||||
setRouteBrandId,
|
||||
setErrorCodeId,
|
||||
initializeFromRoute,
|
||||
tempErrorCodes,
|
||||
existingErrorCodes,
|
||||
addErrorCode,
|
||||
updateErrorCode,
|
||||
setCurrentErrorCode
|
||||
} = useBrandForm();
|
||||
|
||||
// Use brandId from context first, fallback to route
|
||||
const currentBrandId = contextBrandId || routeBrandId;
|
||||
|
||||
// Forms
|
||||
const [errorCodeForm] = Form.useForm();
|
||||
const [solutionForm] = Form.useForm();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [fileList, setFileList] = useState([]);
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
solutionsToDelete,
|
||||
firstSolutionValid,
|
||||
handleAddSolutionField,
|
||||
handleRemoveSolutionField,
|
||||
handleSolutionTypeChange,
|
||||
handleSolutionStatusChange,
|
||||
resetSolutionFields,
|
||||
getSolutionData,
|
||||
setSolutionsForExistingRecord,
|
||||
} = useSolutionLogic(solutionForm);
|
||||
|
||||
useEffect(() => {
|
||||
const isEditMode = errorCodeId && errorCodeId !== 'add';
|
||||
setIsEdit(isEditMode);
|
||||
|
||||
// Initialize context with route parameters
|
||||
if (routeBrandId) {
|
||||
initializeFromRoute(routeBrandId, errorCodeId);
|
||||
}
|
||||
|
||||
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/edit/${currentBrandId}?tab=error-codes`)}
|
||||
>
|
||||
Edit Brand Device
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
|
||||
{isEditMode ? 'Edit Error Code' : 'Add Error Code'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
if (isEditMode && errorCodeId) {
|
||||
// For existing error codes, construct the proper tempId format
|
||||
const tempId = errorCodeId.startsWith('existing_') ? errorCodeId : `existing_${errorCodeId}`;
|
||||
loadExistingErrorCode(tempId);
|
||||
}
|
||||
}, [currentBrandId, errorCodeId, navigate, setBreadcrumbItems]);
|
||||
|
||||
const loadExistingErrorCode = async (tempId) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// console.log(' Looking for error code with tempId:', tempId);
|
||||
// console.log(' Available error codes in context:', tempErrorCodes);
|
||||
|
||||
// Find error code in tempErrorCodes first
|
||||
let existingErrorCode = tempErrorCodes.find(ec => ec.tempId === tempId);
|
||||
|
||||
// If not found, check in existingErrorCodes with format existing_${error_code_id}
|
||||
if (!existingErrorCode && tempId.startsWith('existing_')) {
|
||||
const errorId = tempId.replace('existing_', '');
|
||||
existingErrorCode = existingErrorCodes.find(ec => ec.error_code_id == errorId);
|
||||
if (existingErrorCode) {
|
||||
existingErrorCode = {
|
||||
...existingErrorCode,
|
||||
tempId: tempId
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(' Found error code in context:', existingErrorCode);
|
||||
|
||||
if (existingErrorCode) {
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: existingErrorCode.error_code,
|
||||
error_code_name: existingErrorCode.error_code_name || '',
|
||||
error_code_description: existingErrorCode.error_code_description || '',
|
||||
error_code_color: existingErrorCode.error_code_color || '#000000',
|
||||
status: existingErrorCode.is_active !== false,
|
||||
});
|
||||
|
||||
if (existingErrorCode.path_icon) {
|
||||
setErrorCodeIcon({
|
||||
name: existingErrorCode.path_icon.split('/').pop(),
|
||||
uploadPath: existingErrorCode.path_icon,
|
||||
url: existingErrorCode.path_icon,
|
||||
});
|
||||
}
|
||||
|
||||
if (existingErrorCode.solution && existingErrorCode.solution.length > 0) {
|
||||
// console.log('🔍 Setting solutions from context:', existingErrorCode.solution);
|
||||
setSolutionsForExistingRecord(existingErrorCode.solution, solutionForm);
|
||||
}
|
||||
|
||||
if (existingErrorCode.spareparts && existingErrorCode.spareparts.length > 0) {
|
||||
// console.log('🔍 Setting spareparts from context:', existingErrorCode.spareparts);
|
||||
setSelectedSparepartIds(existingErrorCode.spareparts);
|
||||
}
|
||||
} else {
|
||||
// console.log('🔍 Error code not found in context, trying API...');
|
||||
|
||||
let errorIdToUse = tempId;
|
||||
// Extract the actual error_code_id from tempId format
|
||||
if (tempId.startsWith('existing_')) {
|
||||
errorIdToUse = tempId.replace('existing_', '');
|
||||
}
|
||||
|
||||
const errorCodeResponse = await getErrorCodeById(errorIdToUse);
|
||||
|
||||
if (errorCodeResponse && errorCodeResponse.statusCode === 200) {
|
||||
const errorData = errorCodeResponse.data;
|
||||
|
||||
if (errorData) {
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: errorData.error_code,
|
||||
error_code_name: errorData.error_code_name || '',
|
||||
error_code_description: errorData.error_code_description || '',
|
||||
error_code_color: errorData.error_code_color || '#000000',
|
||||
status: errorData.is_active !== false,
|
||||
});
|
||||
|
||||
if (errorData.path_icon) {
|
||||
setErrorCodeIcon({
|
||||
name: errorData.path_icon.split('/').pop(),
|
||||
uploadPath: errorData.path_icon,
|
||||
url: errorData.path_icon,
|
||||
});
|
||||
}
|
||||
|
||||
// Set solutions from API data (include file data)
|
||||
if (errorData.solution && errorData.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(errorData.solution, solutionForm);
|
||||
}
|
||||
|
||||
// Set spareparts from API data
|
||||
if (errorData.spareparts && errorData.spareparts.length > 0) {
|
||||
const sparepartIds = errorData.spareparts.map(sp => sp.sparepart_id);
|
||||
setSelectedSparepartIds(sparepartIds);
|
||||
}
|
||||
|
||||
// Don't add to context - this is existing data from API
|
||||
// The context should already have this error code from the brand data loading
|
||||
}
|
||||
} else {
|
||||
// console.log('🔍 API Response error or not found:', errorCodeResponse);
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: '',
|
||||
error_code_name: '',
|
||||
error_code_description: '',
|
||||
error_code_color: '#000000',
|
||||
status: true,
|
||||
});
|
||||
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
message: 'Error code not found. Creating new error code.',
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load error code:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Failed to load error code data',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await errorCodeForm.validateFields();
|
||||
|
||||
const solutionValues = solutionForm.getFieldsValue();
|
||||
|
||||
const firstSolutionPath = `solution_items,${solutionFields[0]?.key || 0}`;
|
||||
const firstSolution = solutionValues[firstSolutionPath];
|
||||
|
||||
let isValid = false;
|
||||
if (firstSolution && firstSolution.name && firstSolution.name.trim() !== '') {
|
||||
const firstSolutionType = solutionTypes[solutionFields[0]?.key || 0];
|
||||
if (firstSolutionType === 'text') {
|
||||
isValid = firstSolution.text && firstSolution.text.trim() !== '';
|
||||
} else {
|
||||
isValid = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Harap lengkapi minimal 1 solution',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const errorCodeValues = errorCodeForm.getFieldsValue();
|
||||
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
// Determine the correct tempId for editing
|
||||
let updateTempId;
|
||||
if (isEdit) {
|
||||
// For existing error codes, find the correct tempId
|
||||
if (errorCodeId && !errorCodeId.startsWith('pending-')) {
|
||||
// Look for existing error code in context
|
||||
const existingEc = existingErrorCodes.find(ec => ec.error_code_id == errorCodeId);
|
||||
if (existingEc && existingEc.tempId) {
|
||||
updateTempId = existingEc.tempId;
|
||||
} else {
|
||||
updateTempId = `existing_${errorCodeId}`;
|
||||
}
|
||||
} else {
|
||||
updateTempId = errorCodeId;
|
||||
}
|
||||
} else {
|
||||
updateTempId = Date.now().toString();
|
||||
}
|
||||
|
||||
const currentErrorCode = {
|
||||
tempId: updateTempId,
|
||||
error_code_id: isEdit && errorCodeId && !errorCodeId.startsWith('pending-') ? errorCodeId : null,
|
||||
error_code: errorCodeValues.error_code || '',
|
||||
error_code_name: errorCodeValues.error_code_name || '',
|
||||
error_code_description: errorCodeValues.error_code_description || '',
|
||||
error_code_color: errorCodeValues.error_code_color || '#000000',
|
||||
path_icon: errorCodeIcon?.uploadPath || '',
|
||||
is_active: errorCodeValues.status !== undefined ? errorCodeValues.status : true,
|
||||
solution: solutionData || [],
|
||||
spareparts: selectedSparepartIds || [],
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
};
|
||||
|
||||
if (isEdit) {
|
||||
updateErrorCode(updateTempId, currentErrorCode);
|
||||
} else {
|
||||
addErrorCode(currentErrorCode);
|
||||
}
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: isEdit ? 'Error Code berhasil diupdate!' : 'Error Code berhasil ditambahkan!',
|
||||
});
|
||||
|
||||
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving error code:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: 'Gagal menyimpan error code. Silakan coba lagi.',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
|
||||
};
|
||||
|
||||
const handleErrorCodeIconUpload = async (file) => {
|
||||
if (!file) return null;
|
||||
|
||||
try {
|
||||
const folder = 'images';
|
||||
const response = await uploadFile(file, folder);
|
||||
|
||||
if (response && response.statusCode === 200) {
|
||||
const iconData = {
|
||||
name: file.name,
|
||||
uploadPath: response.data.path_document,
|
||||
url: response.data.path_document,
|
||||
};
|
||||
|
||||
setErrorCodeIcon(iconData);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code icon uploaded successfully',
|
||||
});
|
||||
return iconData;
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Failed to upload error code icon',
|
||||
});
|
||||
return null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error uploading icon:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: 'Failed to upload error code icon',
|
||||
});
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleErrorCodeIconRemove = () => {
|
||||
setErrorCodeIcon(null);
|
||||
};
|
||||
|
||||
const handleSolutionFileUpload = async (file, solutionKey) => {
|
||||
if (!file) return null;
|
||||
|
||||
try {
|
||||
// Determine folder based on file type
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const folder = ['pdf'].includes(fileExtension) ? 'pdf' : 'images';
|
||||
|
||||
const response = await uploadFile(file, folder);
|
||||
|
||||
if (response && response.statusCode === 200) {
|
||||
const fileData = {
|
||||
name: file.name,
|
||||
uploadPath: response.data.path_document,
|
||||
url: response.data.path_document,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
};
|
||||
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Solution file uploaded successfully',
|
||||
});
|
||||
return fileData;
|
||||
} else {
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: response?.message || 'Failed to upload solution file',
|
||||
});
|
||||
return null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error uploading solution file:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
message: 'Failed to upload solution file',
|
||||
});
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSolutionFileView = (fileData) => {
|
||||
if (fileData && fileData.url) {
|
||||
window.open(fileData.url, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
errorCodeForm.resetFields();
|
||||
errorCodeForm.setFieldsValue({
|
||||
status: true,
|
||||
});
|
||||
setErrorCodeIcon(null);
|
||||
resetSolutionFields();
|
||||
setSelectedSparepartIds([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 24
|
||||
}}>
|
||||
<Title level={4} style={{ margin: 0 }}>
|
||||
{isEdit ? 'Edit Error Code' : 'Add Error Code'}
|
||||
</Title>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Back to Brand Device
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ position: 'relative', minHeight: 500 }}>
|
||||
{loading && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Row gutter={[24, 24]}>
|
||||
{/* Error Code Form */}
|
||||
<Col xs={24} lg={8}>
|
||||
<Card
|
||||
title="Error Code Details"
|
||||
size="small"
|
||||
style={{ height: 'fit-content' }}
|
||||
>
|
||||
<Form
|
||||
form={errorCodeForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
status: true,
|
||||
error_code_color: '#000000',
|
||||
}}
|
||||
>
|
||||
<ErrorCodeSimpleForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={false}
|
||||
errorCodeIcon={errorCodeIcon}
|
||||
onErrorCodeIconUpload={handleErrorCodeIconUpload}
|
||||
onErrorCodeIconRemove={handleErrorCodeIconRemove}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Solutions Form */}
|
||||
<Col xs={24} lg={8}>
|
||||
<Card
|
||||
title="Solutions"
|
||||
size="small"
|
||||
style={{ height: 'fit-content' }}
|
||||
>
|
||||
<Form
|
||||
form={solutionForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
solution_items: [{
|
||||
status: true,
|
||||
type: 'text',
|
||||
}]
|
||||
}}
|
||||
>
|
||||
<SolutionForm
|
||||
solutionForm={solutionForm}
|
||||
solutionFields={solutionFields}
|
||||
solutionTypes={solutionTypes}
|
||||
solutionStatuses={solutionStatuses}
|
||||
firstSolutionValid={firstSolutionValid}
|
||||
checkFirstSolutionValid={() => {
|
||||
// console.log('🔍 checkFirstSolutionValid function:', typeof checkFirstSolutionValid);
|
||||
return checkFirstSolutionValid();
|
||||
}}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
onSolutionStatusChange={handleSolutionStatusChange}
|
||||
onSolutionFileUpload={handleSolutionFileUpload}
|
||||
onFileView={handleSolutionFileView}
|
||||
fileList={fileList}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Sparepart Selection */}
|
||||
<Col xs={24} lg={8}>
|
||||
<Card
|
||||
title="Spareparts"
|
||||
size="small"
|
||||
style={{ height: 'fit-content' }}
|
||||
>
|
||||
<SingleSparepartSelect
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={setSelectedSparepartIds}
|
||||
isReadOnly={false}
|
||||
brandId={currentBrandId}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Save Button */}
|
||||
<div style={{ marginTop: 24, textAlign: 'right' }}>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{isEdit ? 'Update Error Code' : 'Save Error Code'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddEditErrorCode;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,21 +1,14 @@
|
||||
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';
|
||||
import React from 'react';
|
||||
import { Form, Input, Row, Col, Typography, Switch } from 'antd';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
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);
|
||||
const isActive = Form.useWatch('is_active', form) ?? true;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -23,7 +16,13 @@ const BrandForm = ({
|
||||
layout="vertical"
|
||||
form={form}
|
||||
onValuesChange={onValuesChange}
|
||||
initialValues={formData}
|
||||
initialValues={{
|
||||
brand_name: '',
|
||||
brand_type: '',
|
||||
brand_model: '',
|
||||
brand_manufacture: '',
|
||||
is_active: true,
|
||||
}}
|
||||
>
|
||||
<Form.Item label="Status">
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
@@ -83,39 +82,6 @@ const BrandForm = ({
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Add Sparepart Button */}
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setShowSparepart(!showSparepart)}
|
||||
style={{
|
||||
width: '100%',
|
||||
borderStyle: 'dashed',
|
||||
marginBottom: showSparepart ? 16 : 0
|
||||
}}
|
||||
>
|
||||
{showSparepart ? 'Hide Sparepart' : 'Add Sparepart'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Sparepart Selection Section */}
|
||||
{showSparepart && (
|
||||
<Card
|
||||
title="Brand Spareparts"
|
||||
size="small"
|
||||
style={{ marginTop: 16 }}
|
||||
>
|
||||
<SingleSparepartSelect
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={onSparepartChange}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
483
src/pages/master/brandDevice/component/CustomSparepartCard.jsx
Normal file
483
src/pages/master/brandDevice/component/CustomSparepartCard.jsx
Normal file
@@ -0,0 +1,483 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Typography, Tag, Button, Modal, Row, Col, Space } from 'antd';
|
||||
import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
const CustomSparepartCard = ({
|
||||
sparepart,
|
||||
isSelected = false,
|
||||
isReadOnly = false,
|
||||
showPreview = true,
|
||||
showDelete = false,
|
||||
onPreview,
|
||||
onDelete,
|
||||
onCardClick,
|
||||
loading = false,
|
||||
size = 'small',
|
||||
style = {},
|
||||
}) => {
|
||||
const [previewModalVisible, setPreviewModalVisible] = useState(false);
|
||||
|
||||
// Construct image source with proper fallback
|
||||
const getImageSrc = () => {
|
||||
if (sparepart.sparepart_foto) {
|
||||
if (sparepart.sparepart_foto.startsWith('http')) {
|
||||
return sparepart.sparepart_foto;
|
||||
} else {
|
||||
const fileName = sparepart.sparepart_foto.split('/').pop();
|
||||
if (fileName === 'defaultSparepartImg.jpg') {
|
||||
return `/assets/defaultSparepartImg.jpg`;
|
||||
} else {
|
||||
const token = localStorage.getItem('token');
|
||||
const baseURL = import.meta.env.VITE_API_SERVER || '';
|
||||
return `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
return 'https://via.placeholder.com/150';
|
||||
};
|
||||
|
||||
const handlePreview = () => {
|
||||
if (onPreview) {
|
||||
onPreview(sparepart);
|
||||
} else {
|
||||
setPreviewModalVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCardClick = () => {
|
||||
if (!isReadOnly && onCardClick) {
|
||||
onCardClick(sparepart);
|
||||
}
|
||||
};
|
||||
|
||||
const getCardActions = () => {
|
||||
const actions = [];
|
||||
|
||||
// Preview button
|
||||
if (showPreview) {
|
||||
actions.push(
|
||||
<Button
|
||||
key="preview"
|
||||
type="text"
|
||||
icon={<EyeOutlined />}
|
||||
title="Lihat Detail"
|
||||
style={{ color: '#1890ff' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePreview();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Delete button without confirmation
|
||||
if (showDelete && !isReadOnly) {
|
||||
actions.push(
|
||||
<Button
|
||||
key="delete"
|
||||
type="text"
|
||||
icon={<DeleteOutlined />}
|
||||
title="Hapus"
|
||||
style={{ color: '#ff4d4f' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete?.(sparepart);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
||||
// Get card styling based on size
|
||||
const getCardStyle = () => {
|
||||
const baseStyle = {
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
border: isSelected ? '2px solid #1890ff' : '1px solid #E0E0E0',
|
||||
cursor: isReadOnly ? 'default' : 'pointer',
|
||||
position: 'relative',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
|
||||
transition: 'all 0.3s ease'
|
||||
};
|
||||
|
||||
switch (size) {
|
||||
case 'small':
|
||||
return {
|
||||
...baseStyle,
|
||||
height: '180px',
|
||||
minHeight: '180px'
|
||||
};
|
||||
case 'large':
|
||||
return {
|
||||
...baseStyle,
|
||||
height: '280px',
|
||||
minHeight: '280px'
|
||||
};
|
||||
default:
|
||||
return {
|
||||
...baseStyle,
|
||||
height: '220px',
|
||||
minHeight: '220px'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
hoverable={!!onCardClick && !isReadOnly}
|
||||
style={getCardStyle()}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 'calc(100% - 48px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
actions={getCardActions()}
|
||||
onClick={handleCardClick}
|
||||
>
|
||||
<div style={{ display: 'flex', height: '100%' }}>
|
||||
{/* Image Section */}
|
||||
<div style={{
|
||||
width: size === 'small' ? '90px' : '110px',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: size === 'small' ? '12px' : '16px',
|
||||
backgroundColor: '#fafafa',
|
||||
borderRight: '1px solid #f0f0f0',
|
||||
position: 'relative'
|
||||
}}>
|
||||
{sparepart.sparepart_item_type && (
|
||||
<Tag
|
||||
color="blue"
|
||||
style={{
|
||||
marginBottom: '8px',
|
||||
fontSize: '10px',
|
||||
fontWeight: 500
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
width: size === 'small' ? '65px' : '75px',
|
||||
height: size === 'small' ? '65px' : '75px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid #e8e8e8'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={getImageSrc()}
|
||||
alt={sparepart.sparepart_name || 'Sparepart'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/75';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Selection Indicator */}
|
||||
{isSelected && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
right: '8px',
|
||||
backgroundColor: '#52c41a',
|
||||
borderRadius: '50%',
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
|
||||
zIndex: 2
|
||||
}}
|
||||
>
|
||||
<CheckOutlined style={{ color: 'white', fontSize: '10px' }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div style={{
|
||||
flex: 1,
|
||||
padding: size === 'small' ? '12px' : '16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{ flex: 1, overflow: 'hidden' }}>
|
||||
<Title
|
||||
level={size === 'small' ? 5 : 4}
|
||||
style={{
|
||||
margin: `0 0 ${size === 'small' ? '6px' : '8px'} 0`,
|
||||
fontSize: size === 'small' ? '12px' : '14px',
|
||||
fontWeight: 600,
|
||||
lineHeight: '1.4',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: size === 'small' ? 2 : 3,
|
||||
WebkitBoxOrient: 'vertical'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_name || sparepart.name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
{size !== 'small' && (
|
||||
<>
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
Stock: {sparepart.sparepart_stock || sparepart.sparepart_stok || '0'} {sparepart.sparepart_unit || 'pcs'}
|
||||
</Text>
|
||||
|
||||
<div style={{ marginBottom: '6px' }}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{size === 'small' && (
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '10px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
display: 'block',
|
||||
marginBottom: '4px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{(sparepart.sparepart_merk || sparepart.sparepart_model) && (
|
||||
<div style={{
|
||||
fontSize: size === 'small' ? '10px' : '11px',
|
||||
color: '#666',
|
||||
lineHeight: '1.4',
|
||||
marginBottom: '4px'
|
||||
}}>
|
||||
{sparepart.sparepart_merk && (
|
||||
<div>Brand: {sparepart.sparepart_merk}</div>
|
||||
)}
|
||||
{sparepart.sparepart_model && (
|
||||
<div>Model: {sparepart.sparepart_model}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{
|
||||
fontSize: size === 'small' ? '9px' : '10px',
|
||||
marginTop: 'auto',
|
||||
paddingTop: '4px',
|
||||
borderTop: '1px solid #f0f0f0'
|
||||
}}
|
||||
>
|
||||
{sparepart.updated_at && dayjs(sparepart.updated_at).format('DD MMM YYYY')}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Preview Modal */}
|
||||
<Modal
|
||||
title="Sparepart Details"
|
||||
open={previewModalVisible}
|
||||
onCancel={() => setPreviewModalVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setPreviewModalVisible(false)}>
|
||||
Close
|
||||
</Button>
|
||||
]}
|
||||
width={700}
|
||||
centered
|
||||
bodyStyle={{ padding: '24px' }}
|
||||
>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col span={8}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#f0f0f0',
|
||||
width: '200px',
|
||||
height: '200px',
|
||||
margin: '0 auto 16px',
|
||||
position: 'relative',
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #E0E0E0',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={getImageSrc()}
|
||||
alt={sparepart.sparepart_name || 'Sparepart'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{sparepart.sparepart_item_type && (
|
||||
<Tag color="blue" style={{ marginTop: '12px' }}>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={16}>
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: '16px' }}>
|
||||
{sparepart.sparepart_name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Code:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_code || 'N/A'}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Status:
|
||||
</Text>
|
||||
<Tag
|
||||
color={sparepart.is_active ? 'green' : 'red'}
|
||||
style={{ marginLeft: '8px', fontSize: '14px' }}
|
||||
>
|
||||
{sparepart.is_active ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{sparepart.sparepart_description && (
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Description:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_description}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Stock:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_stock || sparepart.sparepart_stok || '0'}
|
||||
{sparepart.sparepart_unit ? ` ${sparepart.sparepart_unit}` : ' units'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
{sparepart.sparepart_merk && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Brand:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_merk}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{sparepart.sparepart_model && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Model:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_model}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{sparepart.sparepart_unit && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Unit:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{sparepart.sparepart_unit}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{sparepart.updated_at && (
|
||||
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
|
||||
<Text type="secondary" style={{ fontSize: '14px' }}>
|
||||
Last updated: {dayjs(sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomSparepartCard;
|
||||
297
src/pages/master/brandDevice/component/ErrorCodeTable.jsx
Normal file
297
src/pages/master/brandDevice/component/ErrorCodeTable.jsx
Normal file
@@ -0,0 +1,297 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Spin, Modal, Form, Typography } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
SearchOutlined,
|
||||
EyeOutlined,
|
||||
SolutionOutlined,
|
||||
ToolOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { NotifAlert, NotifConfirmDialog, NotifOk } from '../../../../components/Global/ToastNotif';
|
||||
import TableList from '../../../../components/Global/TableList';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const columns = (onView, onEdit, onDelete) => [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Error Code',
|
||||
dataIndex: 'error_code',
|
||||
key: 'error_code',
|
||||
width: '15%',
|
||||
render: (text, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{record.path_icon && (
|
||||
<img
|
||||
src={record.path_icon}
|
||||
alt="icon"
|
||||
style={{ width: 24, height: 24, objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<span style={{
|
||||
color: record.error_code_color || '#000000',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Error Name',
|
||||
dataIndex: 'error_code_name',
|
||||
key: 'error_code_name',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'error_code_description',
|
||||
key: 'error_code_description',
|
||||
width: '20%',
|
||||
render: (text) => text || '-',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Solutions',
|
||||
key: 'solutions_count',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
<Tag color="blue">
|
||||
{record.solution ? record.solution.length : 0} Solutions
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: '12%',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const statusColor = record.is_active ? 'green' : 'red';
|
||||
const statusText = record.is_active ? 'Active' : 'Inactive';
|
||||
|
||||
// Show modification status if applicable
|
||||
if (record.status === 'new') {
|
||||
return (
|
||||
<Space direction="vertical" size={2}>
|
||||
<Tag color="blue" style={{ margin: 0 }}>NEW</Tag>
|
||||
<Tag color={statusColor} style={{ margin: 0 }}>{statusText}</Tag>
|
||||
</Space>
|
||||
);
|
||||
} else if (record.status === 'modified') {
|
||||
return (
|
||||
<Space direction="vertical" size={2}>
|
||||
<Tag color="orange" style={{ margin: 0 }}>MODIFIED</Tag>
|
||||
<Tag color={statusColor} style={{ margin: 0 }}>{statusText}</Tag>
|
||||
</Space>
|
||||
);
|
||||
} else if (record.status === 'deleted') {
|
||||
return (
|
||||
<Space direction="vertical" size={2}>
|
||||
<Tag color="red" style={{ margin: 0 }}>DELETED</Tag>
|
||||
<Tag color="default" style={{ margin: 0 }}>Inactive</Tag>
|
||||
</Space>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Tag color={statusColor}>
|
||||
{statusText}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => onView(record)}
|
||||
size="small"
|
||||
style={{
|
||||
color: '#1890ff',
|
||||
borderColor: '#1890ff',
|
||||
}}
|
||||
title="View Details"
|
||||
/>
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => onEdit(record)}
|
||||
size="small"
|
||||
style={{
|
||||
color: '#faad14',
|
||||
borderColor: '#faad14',
|
||||
}}
|
||||
title="Edit Error Code"
|
||||
/>
|
||||
<Button
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => onDelete(record)}
|
||||
size="small"
|
||||
title="Delete Error Code"
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const ErrorCodeTable = memo(function ErrorCodeTable({
|
||||
errorCodes = [],
|
||||
loading = false,
|
||||
brandId,
|
||||
onAddErrorCode,
|
||||
onEditErrorCode,
|
||||
onDeleteErrorCode,
|
||||
onViewErrorCode,
|
||||
trigger,
|
||||
}) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const [formDataFilter, setFormDataFilter] = useState({ search: '' });
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
// Trigger table refresh when parent component data changes
|
||||
useEffect(() => {
|
||||
if (trigger !== undefined) {
|
||||
setTrigerFilter(prev => !prev);
|
||||
}
|
||||
}, [trigger]);
|
||||
|
||||
// Simulate API data for error codes
|
||||
const getErrorCodesData = async (params) => {
|
||||
console.log('📋 ErrorCodeTable getErrorCodesData called with:', params);
|
||||
console.log('📋 Available errorCodes:', errorCodes);
|
||||
|
||||
// This would be your actual API call
|
||||
const filteredData = errorCodes.filter(code =>
|
||||
!params.search ||
|
||||
code.error_code.toLowerCase().includes(params.search.toLowerCase()) ||
|
||||
code.error_code_name.toLowerCase().includes(params.search.toLowerCase())
|
||||
);
|
||||
|
||||
console.log('📋 Filtered result:', filteredData);
|
||||
|
||||
return {
|
||||
data: filteredData,
|
||||
total: filteredData.length,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setTrigerFilter(prev => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter(prev => !prev);
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="Error Codes"
|
||||
size="small"
|
||||
>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={16} lg={18}>
|
||||
<Input.Search
|
||||
placeholder="Search error code..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
if (value === '') {
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter(prev => !prev);
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={onAddErrorCode}
|
||||
size="large"
|
||||
>
|
||||
Add Error Code
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'error_code_name'}
|
||||
showPreviewModal={onViewErrorCode}
|
||||
showEditModal={onEditErrorCode}
|
||||
showDeleteDialog={onDeleteErrorCode}
|
||||
getData={getErrorCodesData}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns(
|
||||
onViewErrorCode,
|
||||
onEditErrorCode,
|
||||
onDeleteErrorCode
|
||||
)}
|
||||
triger={trigerFilter}
|
||||
loading={loading}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
);
|
||||
});
|
||||
|
||||
export default ErrorCodeTable;
|
||||
@@ -250,7 +250,7 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
}}
|
||||
size="large"
|
||||
>
|
||||
Add Brand Device
|
||||
Add data
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Select, Card, Typography, Tag, Spin, Empty, Button, Image, Row, Col, Modal } from 'antd';
|
||||
import { Select, Typography, Tag, Spin, Empty, Button, Row, Col } from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons';
|
||||
import { getAllSparepart } from '../../../../api/sparepart';
|
||||
import dayjs from 'dayjs';
|
||||
import CustomSparepartCard from './CustomSparepartCard';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
const { Option } = Select;
|
||||
@@ -16,7 +16,6 @@ const SingleSparepartSelect = ({
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedSpareparts, setSelectedSpareparts] = useState([]);
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [previewModal, setPreviewModal] = useState({ visible: false, sparepart: null });
|
||||
|
||||
useEffect(() => {
|
||||
fetchSpareparts();
|
||||
@@ -102,219 +101,23 @@ const SingleSparepartSelect = ({
|
||||
onSparepartChange(newSelectedIds);
|
||||
};
|
||||
|
||||
const handlePreviewSparepart = (sparepart) => {
|
||||
setPreviewModal({ visible: true, sparepart });
|
||||
};
|
||||
|
||||
const handlePreviewModalClose = () => {
|
||||
setPreviewModal({ visible: false, sparepart: null });
|
||||
};
|
||||
|
||||
const renderSparepartCard = (sparepart, isSelected = false) => {
|
||||
const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id);
|
||||
|
||||
let imgSrc;
|
||||
if (sparepart.sparepart_foto) {
|
||||
if (sparepart.sparepart_foto.startsWith('http')) {
|
||||
imgSrc = sparepart.sparepart_foto;
|
||||
} else {
|
||||
const fileName = sparepart.sparepart_foto.split('/').pop();
|
||||
if (fileName === 'defaultSparepartImg.jpg') {
|
||||
imgSrc = `/assets/defaultSparepartImg.jpg`;
|
||||
} else {
|
||||
const token = localStorage.getItem('token');
|
||||
const baseURL = import.meta.env.VITE_API_SERVER || '';
|
||||
imgSrc = `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
imgSrc = 'https://via.placeholder.com/150';
|
||||
}
|
||||
|
||||
return (
|
||||
<Col xs={24} sm={12} md={8} lg={6} key={sparepart.sparepart_id}>
|
||||
<Card
|
||||
hoverable={!isSelected && !isReadOnly && !isAlreadySelected}
|
||||
<Col xs={24} sm={24} md={12} lg={12} key={sparepart.sparepart_id}>
|
||||
<CustomSparepartCard
|
||||
sparepart={sparepart}
|
||||
isSelected={isSelected}
|
||||
isReadOnly={isReadOnly}
|
||||
showPreview={true}
|
||||
showDelete={isAlreadySelected && !isReadOnly} // Show delete only for already selected items
|
||||
onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
|
||||
onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
|
||||
style={{
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
border: isSelected ? '2px solid #1890ff' : isAlreadySelected ? '2px solid #52c41a' : '1px solid #E0E0E0',
|
||||
border: isAlreadySelected ? '2px solid #52c41a' : undefined,
|
||||
}}
|
||||
bodyStyle={{ padding: 0 }}
|
||||
onClick={!isSelected && !isReadOnly && !isAlreadySelected ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
|
||||
actions={[
|
||||
// Preview action (selalu available)
|
||||
<EyeOutlined
|
||||
key="preview"
|
||||
style={{ color: '#1890ff' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePreviewSparepart(sparepart);
|
||||
}}
|
||||
/>,
|
||||
// Delete action (hanya untuk selected items)
|
||||
isSelected && !isReadOnly && (
|
||||
<DeleteOutlined
|
||||
key="delete"
|
||||
style={{ color: '#ff1818' }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveSparepart(sparepart.sparepart_id);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
].filter(Boolean)}
|
||||
>
|
||||
<Row>
|
||||
<Col span={8}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
padding: '16px 8px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_item_type && (
|
||||
<Tag
|
||||
color="blue"
|
||||
style={{
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#f0f0f0',
|
||||
width: '100%',
|
||||
paddingTop: '100%',
|
||||
position: 'relative',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}>
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt={sparepart.sparepart_name || 'Sparepart'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/150';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{isAlreadySelected && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 6,
|
||||
right: 6,
|
||||
backgroundColor: '#52c41a',
|
||||
borderRadius: '50%',
|
||||
width: 16,
|
||||
height: 16,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
|
||||
}}
|
||||
>
|
||||
<CheckOutlined style={{ color: 'white', fontSize: 8 }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<div
|
||||
style={{
|
||||
padding: '16px',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{/* Title dengan proper hierarchy */}
|
||||
<Title
|
||||
level={5}
|
||||
style={{
|
||||
margin: 0,
|
||||
marginBottom: '8px',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_name || sparepart.name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
{/* Stock Information */}
|
||||
<Text type="secondary" style={{ fontSize: '14px', display: 'block', marginBottom: '8px' }}>
|
||||
Available Stock: {sparepart.sparepart_stock || '0'}
|
||||
</Text>
|
||||
|
||||
<div style={{ margin: '8px 0' }} />
|
||||
|
||||
{/* Code */}
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '3px'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_code || 'No code'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Brand/Model/Unit Information */}
|
||||
{(sparepart.sparepart_merk || sparepart.sparepart_model || sparepart.sparepart_unit) && (
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>
|
||||
{sparepart.sparepart_merk && (
|
||||
<div>Brand: {sparepart.sparepart_merk}</div>
|
||||
)}
|
||||
{sparepart.sparepart_model && (
|
||||
<div>Model: {sparepart.sparepart_model}</div>
|
||||
)}
|
||||
{sparepart.sparepart_unit && (
|
||||
<div>Unit: {sparepart.sparepart_unit}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Last Updated */}
|
||||
{sparepart.updated_at && (
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
marginTop: '8px',
|
||||
display: 'block',
|
||||
}}
|
||||
>
|
||||
Last updated: {dayjs(sparepart.updated_at).format('DD MMM YYYY')}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
/>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
@@ -360,7 +163,7 @@ const SingleSparepartSelect = ({
|
||||
<Title level={5} style={{ marginBottom: 16 }}>
|
||||
Selected Spareparts ({selectedSpareparts.length})
|
||||
</Title>
|
||||
<Row gutter={[12, 12]}>
|
||||
<Row gutter={[16, 16]}>
|
||||
{selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
|
||||
</Row>
|
||||
</div>
|
||||
@@ -373,175 +176,6 @@ const SingleSparepartSelect = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Modal */}
|
||||
<Modal
|
||||
title="Sparepart Details"
|
||||
open={previewModal.visible}
|
||||
onCancel={handlePreviewModalClose}
|
||||
footer={[
|
||||
<Button key="close" onClick={handlePreviewModalClose}>
|
||||
Close
|
||||
</Button>
|
||||
]}
|
||||
width={800}
|
||||
centered
|
||||
bodyStyle={{ padding: '24px' }}
|
||||
>
|
||||
{previewModal.sparepart && (
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={8}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#f0f0f0',
|
||||
width: '200px',
|
||||
height: '200px',
|
||||
margin: '0 auto 16px',
|
||||
position: 'relative',
|
||||
borderRadius: '8px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid #E0E0E0',
|
||||
}}
|
||||
>
|
||||
{previewModal.sparepart.sparepart_foto ? (
|
||||
<img
|
||||
src={previewModal.sparepart.sparepart_foto.startsWith('http')
|
||||
? previewModal.sparepart.sparepart_foto
|
||||
: `${import.meta.env.VITE_API_SERVER || ''}/file-uploads/images/${encodeURIComponent(previewModal.sparepart.sparepart_foto.split('/').pop())}?token=${encodeURIComponent(localStorage.getItem('token') || '')}`
|
||||
}
|
||||
alt={previewModal.sparepart.sparepart_name || 'Sparepart'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/200x200/d9d9d9/666666?text=No+Image';
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '14px',
|
||||
color: '#999'
|
||||
}}>
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{previewModal.sparepart.sparepart_item_type && (
|
||||
<Tag color="blue" style={{ marginTop: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_item_type}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={16}>
|
||||
<div>
|
||||
<Title level={4} style={{ marginBottom: '16px' }}>
|
||||
{previewModal.sparepart.sparepart_name || 'Unnamed'}
|
||||
</Title>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||
Code:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '16px', marginLeft: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_code || 'N/A'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{previewModal.sparepart.sparepart_description && (
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Description:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_description}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Status:
|
||||
</Text>
|
||||
<Tag
|
||||
color={previewModal.sparepart.is_active ? 'green' : 'red'}
|
||||
style={{ marginLeft: '8px', fontSize: '13px' }}
|
||||
>
|
||||
{previewModal.sparepart.is_active ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Text strong style={{ fontSize: '14px', color: '#262626' }}>
|
||||
Stock:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '14px', marginLeft: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_stock || '0'}
|
||||
{previewModal.sparepart_unit ? ` ${previewModal.sparepart.unit}` : ' units'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: '16px' }}>
|
||||
{previewModal.sparepart.sparepart_merk && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '13px', color: '#262626' }}>
|
||||
Brand:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '13px', marginLeft: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_merk}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{previewModal.sparepart.sparepart_model && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '13px', color: '#262626' }}>
|
||||
Model:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '13px', marginLeft: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_model}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
{previewModal.sparepart.sparepart_unit && (
|
||||
<Col span={8}>
|
||||
<div>
|
||||
<Text strong style={{ fontSize: '13px', color: '#262626' }}>
|
||||
Unit:
|
||||
</Text>
|
||||
<Text style={{ fontSize: '13px', marginLeft: '8px' }}>
|
||||
{previewModal.sparepart.sparepart_unit}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
{previewModal.sparepart.updated_at && (
|
||||
<div style={{ marginTop: '24px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
|
||||
<Text type="secondary" style={{ fontSize: '13px' }}>
|
||||
Last updated: {dayjs(previewModal.sparepart.updated_at).format('DD MMMM YYYY, HH:mm')}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,18 +10,31 @@ const SolutionForm = ({
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
fileList,
|
||||
solutionsToDelete,
|
||||
firstSolutionValid,
|
||||
onAddSolutionField,
|
||||
onRemoveSolutionField,
|
||||
onSolutionTypeChange,
|
||||
onSolutionStatusChange,
|
||||
checkFirstSolutionValid,
|
||||
onSolutionFileUpload,
|
||||
onFileView,
|
||||
fileList,
|
||||
isReadOnly = false,
|
||||
onAddSolution,
|
||||
}) => {
|
||||
// Debug props
|
||||
console.log('🔍 SolutionForm props:', {
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
firstSolutionValid,
|
||||
onAddSolutionField: typeof onAddSolutionField,
|
||||
onRemoveSolutionField: typeof onRemoveSolutionField,
|
||||
checkFirstSolutionValid: typeof checkFirstSolutionValid,
|
||||
onSolutionFileUpload: typeof onSolutionFileUpload,
|
||||
onFileView: typeof onFileView,
|
||||
fileList: fileList ? fileList.length : 0
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={{ marginBottom: 0 }}>
|
||||
<Form
|
||||
@@ -44,17 +57,17 @@ const SolutionForm = ({
|
||||
overflowY: 'auto',
|
||||
paddingRight: '8px'
|
||||
}}>
|
||||
{solutionFields.map((field, index) => (
|
||||
{solutionFields.map((field) => (
|
||||
<SolutionFieldNew
|
||||
key={field.key}
|
||||
fieldKey={field.key}
|
||||
fieldName={field.name}
|
||||
index={index}
|
||||
solutionType={solutionTypes[field.key]}
|
||||
solutionStatus={solutionStatuses[field.key]}
|
||||
key={field}
|
||||
fieldKey={field}
|
||||
fieldName={['solution_items', field]}
|
||||
index={field}
|
||||
solutionType={solutionTypes[field]}
|
||||
solutionStatus={solutionStatuses[field]}
|
||||
onTypeChange={onSolutionTypeChange}
|
||||
onStatusChange={onSolutionStatusChange}
|
||||
onRemove={() => onRemoveSolutionField(field.key)}
|
||||
onRemove={() => onRemoveSolutionField(field)}
|
||||
onFileUpload={onSolutionFileUpload}
|
||||
onFileView={onFileView}
|
||||
fileList={fileList}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Row, Col, Image, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd';
|
||||
import { CheckCircleOutlined, CloseCircleOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
import { Card, Row, Col, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { getAllSparepart } from '../../../../api/sparepart';
|
||||
import { addSparepartToBrand, removeSparepartFromBrand } from '../../../../api/master-brand';
|
||||
import CustomSparepartCard from './CustomSparepartCard';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
@@ -196,121 +197,27 @@ const SparepartCardSelect = ({
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{filteredSpareparts.map(sparepart => (
|
||||
<Col span={8} key={sparepart.sparepart_id}>
|
||||
<Card
|
||||
size="small"
|
||||
hoverable
|
||||
style={{
|
||||
border: isSelected(sparepart.sparepart_id)
|
||||
? '2px solid #23A55A'
|
||||
: '1px solid #d9d9d9',
|
||||
backgroundColor: isSelected(sparepart.sparepart_id)
|
||||
? '#f6ffed'
|
||||
: 'white',
|
||||
cursor: isReadOnly ? 'default' : 'pointer',
|
||||
position: 'relative'
|
||||
<Col xs={24} sm={12} md={12} lg={12} key={sparepart.sparepart_id}>
|
||||
<CustomSparepartCard
|
||||
sparepart={sparepart}
|
||||
isSelected={isSelected(sparepart.sparepart_id)}
|
||||
isReadOnly={isReadOnly}
|
||||
showPreview={true}
|
||||
showDelete={true}
|
||||
onCardClick={() => handleSparepartToggle(sparepart.sparepart_id)}
|
||||
onDelete={() => {
|
||||
// When delete button is clicked, remove from selection
|
||||
const newSelectedIds = selectedSparepartIds.filter(id => id !== sparepart.sparepart_id);
|
||||
onSparepartChange(newSelectedIds);
|
||||
|
||||
// Also remove from database if brandId exists
|
||||
if (brandId) {
|
||||
removeSparepartFromBrand(brandId, sparepart.sparepart_id)
|
||||
.then(() => message.success('Sparepart removed successfully'))
|
||||
.catch(error => message.error(error.message || 'Failed to remove sparepart'));
|
||||
}
|
||||
}}
|
||||
onClick={() => handleSparepartToggle(sparepart.sparepart_id)}
|
||||
>
|
||||
<div style={{ position: 'absolute', top: 8, right: 8 }}>
|
||||
{isSelected(sparepart.sparepart_id) ? (
|
||||
<CheckCircleOutlined
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
color: '#23A55A',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<CloseCircleOutlined
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
color: '#d9d9d9',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '50%'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center', marginBottom: 12 }}>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: 120,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#f5f5f5',
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{sparepart.sparepart_foto ? (
|
||||
<Image
|
||||
src={sparepart.sparepart_foto}
|
||||
alt={sparepart.sparepart_name}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
preview={false}
|
||||
fallback="/assets/defaultSparepartImg.jpg"
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
color: '#bfbfbf',
|
||||
fontSize: 12
|
||||
}}>
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text
|
||||
strong
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: '14px',
|
||||
marginBottom: 4,
|
||||
color: isSelected(sparepart.sparepart_id) ? '#23A55A' : 'inherit'
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_name}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
display: 'block',
|
||||
marginBottom: 4
|
||||
}}
|
||||
>
|
||||
{sparepart.sparepart_description || 'No description'}
|
||||
</Text>
|
||||
|
||||
<Space size="small" style={{ marginBottom: 4 }}>
|
||||
<Tag color="blue" style={{ margin: 0 }}>
|
||||
{sparepart.sparepart_code}
|
||||
</Tag>
|
||||
<Tag color="geekblue" style={{ margin: 0 }}>
|
||||
{sparepart.sparepart_merk || 'N/A'}
|
||||
</Tag>
|
||||
</Space>
|
||||
|
||||
{sparepart.sparepart_model && (
|
||||
<div style={{
|
||||
fontSize: '12px',
|
||||
color: '#666'
|
||||
}}>
|
||||
Model: {sparepart.sparepart_model}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
@@ -11,8 +11,8 @@ const SparepartForm = ({
|
||||
isReadOnly = false
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<Card size="small" title="Spareparts">
|
||||
<div style={{ minHeight: '400px' }}>
|
||||
<Card title="Spareparts" style={{ minHeight: '100%' }}>
|
||||
<SparepartCardSelect
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={onSparepartChange}
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export const useSolutionLogic = (solutionForm) => {
|
||||
const [solutionFields, setSolutionFields] = useState([
|
||||
{ name: ['solution_items', 0], key: 0 }
|
||||
]);
|
||||
const [solutionFields, setSolutionFields] = useState([0]);
|
||||
const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
|
||||
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
|
||||
const [solutionsToDelete, setSolutionsToDelete] = useState([]);
|
||||
|
||||
const handleAddSolutionField = () => {
|
||||
const newKey = Date.now(); // Use timestamp for unique key
|
||||
const newField = { name: ['solution_items', newKey], key: newKey };
|
||||
const newKey = Date.now();
|
||||
|
||||
setSolutionFields(prev => [...prev, newField]);
|
||||
setSolutionFields(prev => [...prev, newKey]);
|
||||
setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' }));
|
||||
setSolutionStatuses(prev => ({ ...prev, [newKey]: true }));
|
||||
|
||||
@@ -27,7 +24,7 @@ export const useSolutionLogic = (solutionForm) => {
|
||||
|
||||
const handleRemoveSolutionField = (key) => {
|
||||
if (solutionFields.length <= 1) {
|
||||
return; // Keep at least one solution field
|
||||
return;
|
||||
}
|
||||
|
||||
setSolutionFields(prev => prev.filter(field => field.key !== key));
|
||||
@@ -67,13 +64,21 @@ export const useSolutionLogic = (solutionForm) => {
|
||||
|
||||
const checkFirstSolutionValid = () => {
|
||||
const values = solutionForm.getFieldsValue();
|
||||
const firstSolution = values.solution_items?.[0];
|
||||
|
||||
const firstField = solutionFields[0];
|
||||
if (!firstField) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const solutionKey = firstField.key || firstField;
|
||||
const solutionPath = `solution_items,${solutionKey}`;
|
||||
const firstSolution = values[solutionPath];
|
||||
|
||||
if (!firstSolution || !firstSolution.name || firstSolution.name.trim() === '') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (solutionTypes[0] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) {
|
||||
if (solutionTypes[solutionKey] === 'text' && (!firstSolution.text || firstSolution.text.trim() === '')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -83,13 +88,12 @@ export const useSolutionLogic = (solutionForm) => {
|
||||
const getSolutionData = () => {
|
||||
const values = solutionForm.getFieldsValue();
|
||||
|
||||
const result = solutionFields.map(field => {
|
||||
const key = field.key;
|
||||
// Access form values using the key from field.name (AntD stores with comma)
|
||||
const solutionPath = field.name.join(',');
|
||||
const solution = values[solutionPath];
|
||||
const result = solutionFields.map(key => {
|
||||
const solution = values[`solution_items,${key}`];
|
||||
|
||||
const validSolution = solution && solution.name && solution.name.trim() !== '';
|
||||
if (!solution) return null;
|
||||
|
||||
const validSolution = solution.name && solution.name.trim() !== '';
|
||||
|
||||
if (validSolution) {
|
||||
return {
|
||||
@@ -97,7 +101,7 @@ export const useSolutionLogic = (solutionForm) => {
|
||||
type_solution: solutionTypes[key] || 'text',
|
||||
text_solution: solution.text || '',
|
||||
path_solution: solution.file || '',
|
||||
is_active: solution.status !== false, // Use form value directly
|
||||
is_active: solution.status !== false,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
@@ -109,14 +113,10 @@ export const useSolutionLogic = (solutionForm) => {
|
||||
const setSolutionsForExistingRecord = (solutions, form) => {
|
||||
if (!solutions || solutions.length === 0) return;
|
||||
|
||||
const newFields = solutions.map((solution, index) => ({
|
||||
name: ['solution_items', solution.id || index],
|
||||
key: solution.id || index
|
||||
}));
|
||||
const newFields = solutions.map((solution, index) => solution.id || index);
|
||||
|
||||
setSolutionFields(newFields);
|
||||
|
||||
// Set solution values
|
||||
const solutionsValues = {};
|
||||
const newTypes = {};
|
||||
const newStatuses = {};
|
||||
|
||||
Reference in New Issue
Block a user