Merge pull request 'lavoce' (#20) from lavoce into main
Reviewed-on: #20
This commit is contained in:
9
src/api/notification.jsx
Normal file
9
src/api/notification.jsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { SendRequest } from '../components/Global/ApiRequest';
|
||||
|
||||
export const getAllNotification = async () => {
|
||||
const response = await SendRequest({
|
||||
method: 'get',
|
||||
prefix: 'notification',
|
||||
});
|
||||
return response.data;
|
||||
};
|
||||
@@ -1,6 +1,18 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||
import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal, ConfigProvider } from 'antd';
|
||||
import {
|
||||
Divider,
|
||||
Typography,
|
||||
Button,
|
||||
Steps,
|
||||
Form,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Spin,
|
||||
Modal,
|
||||
ConfigProvider,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { getBrandById, updateBrand } from '../../../api/master-brand';
|
||||
@@ -48,12 +60,10 @@ const EditBrandDevice = () => {
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [sparepartForm] = Form.useForm();
|
||||
|
||||
const {
|
||||
errorCodeFields,
|
||||
addErrorCode,
|
||||
removeErrorCode,
|
||||
editErrorCode,
|
||||
} = useErrorCodeLogic(errorCodeForm, fileList);
|
||||
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
|
||||
errorCodeForm,
|
||||
fileList
|
||||
);
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
@@ -83,14 +93,14 @@ const EditBrandDevice = () => {
|
||||
|
||||
// Handlers for sparepart image upload
|
||||
const handleSparepartImageUpload = (fieldKey, imageData) => {
|
||||
setSparepartImages(prev => ({
|
||||
setSparepartImages((prev) => ({
|
||||
...prev,
|
||||
[fieldKey]: imageData
|
||||
[fieldKey]: imageData,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSparepartImageRemove = (fieldKey) => {
|
||||
setSparepartImages(prev => {
|
||||
setSparepartImages((prev) => {
|
||||
const newImages = { ...prev };
|
||||
delete newImages[fieldKey];
|
||||
return newImages;
|
||||
@@ -159,17 +169,19 @@ const EditBrandDevice = () => {
|
||||
path_icon: ec.path_icon || '',
|
||||
status: ec.is_active,
|
||||
solution: ec.solution || [],
|
||||
errorCodeIcon: ec.path_icon ? {
|
||||
name: 'icon',
|
||||
uploadPath: ec.path_icon,
|
||||
url: (() => {
|
||||
const pathParts = ec.path_icon.split('/');
|
||||
const folder = pathParts[0];
|
||||
const filename = pathParts.slice(1).join('/');
|
||||
return getFileUrl(folder, filename);
|
||||
})(),
|
||||
type_solution: 'image'
|
||||
} : null,
|
||||
errorCodeIcon: ec.path_icon
|
||||
? {
|
||||
name: 'icon',
|
||||
uploadPath: ec.path_icon,
|
||||
url: (() => {
|
||||
const pathParts = ec.path_icon.split('/');
|
||||
const folder = pathParts[0];
|
||||
const filename = pathParts.slice(1).join('/');
|
||||
return getFileUrl(folder, filename);
|
||||
})(),
|
||||
type_solution: 'image',
|
||||
}
|
||||
: null,
|
||||
}))
|
||||
: [];
|
||||
|
||||
@@ -332,7 +344,7 @@ const EditBrandDevice = () => {
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach(sparepart => {
|
||||
record.sparepart.forEach((sparepart) => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
@@ -367,7 +379,7 @@ const EditBrandDevice = () => {
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach(sparepart => {
|
||||
record.sparepart.forEach((sparepart) => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
@@ -381,34 +393,81 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddErrorCode = (newErrorCode) => {
|
||||
// Include the current icon in the error code
|
||||
const errorCodeWithIcon = {
|
||||
...newErrorCode,
|
||||
errorCodeIcon: errorCodeIcon
|
||||
};
|
||||
const handleAddErrorCode = async () => {
|
||||
try {
|
||||
// Validate error code form
|
||||
const errorCodeValues = await errorCodeForm.validateFields();
|
||||
|
||||
let updatedErrorCodes;
|
||||
if (editingErrorCodeKey) {
|
||||
updatedErrorCodes = errorCodes.map((item) =>
|
||||
item.key === editingErrorCodeKey ? errorCodeWithIcon : item
|
||||
);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil diupdate!',
|
||||
});
|
||||
} else {
|
||||
updatedErrorCodes = [...errorCodes, errorCodeWithIcon];
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil ditambahkan!',
|
||||
// Get solution data from solution form
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
// Get sparepart data from sparepart form
|
||||
const sparepartData = getSparepartData();
|
||||
|
||||
if (solutionData.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap error code harus memiliki minimal 1 solution!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Create complete error code object
|
||||
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 || '',
|
||||
status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
|
||||
solution: solutionData,
|
||||
sparepart: sparepartData,
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`,
|
||||
};
|
||||
|
||||
let updatedErrorCodes;
|
||||
if (editingErrorCodeKey) {
|
||||
// Update existing error code
|
||||
updatedErrorCodes = errorCodes.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 {
|
||||
// Add new error code
|
||||
updatedErrorCodes = [...errorCodes, newErrorCode];
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil ditambahkan!',
|
||||
});
|
||||
}
|
||||
|
||||
setErrorCodes(updatedErrorCodes);
|
||||
|
||||
// Delay form reset to prevent data loss
|
||||
setTimeout(() => {
|
||||
resetErrorCodeForm();
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
|
||||
});
|
||||
}
|
||||
|
||||
setErrorCodes(updatedErrorCodes);
|
||||
resetErrorCodeForm();
|
||||
};
|
||||
|
||||
const resetErrorCodeForm = () => {
|
||||
@@ -552,7 +611,11 @@ const EditBrandDevice = () => {
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={<Title level={5} style={{ margin: 0 }}>Solutions</Title>}
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
Solutions
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
@@ -581,7 +644,11 @@ const EditBrandDevice = () => {
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={<Title level={5} style={{ margin: 0 }}>Spareparts</Title>}
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
Spareparts
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
|
||||
@@ -28,11 +28,11 @@ const BrandForm = ({ form, formData, onValuesChange, isEdit = false }) => {
|
||||
|
||||
<Form.Item label="Brand Code" name="brand_code">
|
||||
<Input
|
||||
placeholder={isEdit ? 'Brand Code Auto Fill' : 'Brand Code'}
|
||||
disabled={isEdit}
|
||||
placeholder={'Auto Fill Brand Code'}
|
||||
disabled={true}
|
||||
style={{
|
||||
backgroundColor: isEdit ? '#f5f5f5' : 'white',
|
||||
cursor: isEdit ? 'not-allowed' : 'text'
|
||||
backgroundColor: '#f5f5f5',
|
||||
cursor: 'not-allowed'
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
@@ -157,12 +157,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
icon: 'question',
|
||||
title: 'Konfirmasi',
|
||||
message: 'Apakah anda yakin hapus data "' + param.brand_name + '" ?',
|
||||
onConfirm: () => handleDelete(param.brand_id),
|
||||
onConfirm: () => handleDelete(param.brand_id, param.brand_name),
|
||||
onCancel: () => {},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async (brand_id) => {
|
||||
const handleDelete = async (brand_id, brand_name) => {
|
||||
try {
|
||||
const response = await deleteBrand(brand_id);
|
||||
|
||||
@@ -170,7 +170,7 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: response.message || 'Data Brand Device berhasil dihapus.',
|
||||
message: `Brand ${brand_name} deleted successfully.`,
|
||||
});
|
||||
doFilter(); // Refresh data
|
||||
} else {
|
||||
@@ -278,4 +278,4 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
);
|
||||
});
|
||||
|
||||
export default ListBrandDevice;
|
||||
export default ListBrandDevice;
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Form, Input, Button, Divider, Typography, Switch, Space, Card, Upload, message } from 'antd';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Divider,
|
||||
Typography,
|
||||
Switch,
|
||||
Space,
|
||||
Card,
|
||||
Upload,
|
||||
message,
|
||||
} from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import { uploadFile } from '../../../../api/file-uploads';
|
||||
|
||||
@@ -15,7 +26,7 @@ const SparepartForm = ({
|
||||
onSparepartImageUpload,
|
||||
onSparepartImageRemove,
|
||||
sparepartImages = {},
|
||||
isReadOnly = false
|
||||
isReadOnly = false,
|
||||
}) => {
|
||||
const [fieldStatuses, setFieldStatuses] = useState({});
|
||||
|
||||
@@ -32,7 +43,7 @@ const SparepartForm = ({
|
||||
useEffect(() => {
|
||||
// Update field statuses when form changes
|
||||
const newStatuses = {};
|
||||
sparepartFields.forEach(field => {
|
||||
sparepartFields.forEach((field) => {
|
||||
newStatuses[field.key] = getFieldValue(field.key);
|
||||
});
|
||||
setFieldStatuses(newStatuses);
|
||||
@@ -55,21 +66,25 @@ const SparepartForm = ({
|
||||
|
||||
try {
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
|
||||
const isImageFile = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(
|
||||
fileExtension
|
||||
);
|
||||
const fileType = isImageFile ? 'image' : 'pdf';
|
||||
const folder = 'images';
|
||||
|
||||
const uploadResponse = await uploadFile(file, folder);
|
||||
const imagePath = uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
|
||||
const imagePath =
|
||||
uploadResponse.data?.path_icon || uploadResponse.data?.path_solution || '';
|
||||
|
||||
if (imagePath) {
|
||||
onSparepartImageUpload && onSparepartImageUpload(fieldKey, {
|
||||
name: file.name,
|
||||
uploadPath: imagePath,
|
||||
fileExtension,
|
||||
isImage: isImageFile,
|
||||
size: file.size,
|
||||
});
|
||||
onSparepartImageUpload &&
|
||||
onSparepartImageUpload(fieldKey, {
|
||||
name: file.name,
|
||||
uploadPath: imagePath,
|
||||
fileExtension,
|
||||
isImage: isImageFile,
|
||||
size: file.size,
|
||||
});
|
||||
message.success(`${file.name} uploaded successfully!`);
|
||||
} else {
|
||||
message.error(`Failed to upload ${file.name}`);
|
||||
@@ -106,48 +121,40 @@ const SparepartForm = ({
|
||||
size="small"
|
||||
style={{ marginBottom: 16 }}
|
||||
title={
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text strong>Sparepart {index + 1}</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<Form.Item name={[field.name, 'status']} valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
disabled={isReadOnly}
|
||||
size="small"
|
||||
onChange={(checked) => {
|
||||
onSparepartStatusChange && onSparepartStatusChange(field.key, checked);
|
||||
setFieldStatuses(prev => ({ ...prev, [field.key]: checked }));
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: fieldStatuses[field.key] ? '#23A55A' : '#bfbfbf'
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ fontSize: 12, color: '#666' }}>
|
||||
{fieldStatuses[field.key] ? 'Active' : 'Inactive'}
|
||||
</Text>
|
||||
{!isReadOnly && sparepartFields.length > 1 && (
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => onRemoveSparepartField(field.key)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
layout="vertical"
|
||||
style={{ border: 'none' }}
|
||||
>
|
||||
<Form layout="vertical" style={{ border: 'none' }}>
|
||||
{/* Sparepart Name */}
|
||||
<Form.Item
|
||||
name={[field.name, 'name']}
|
||||
rules={[{ required: true, message: 'Sparepart name wajib diisi!' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Enter sparepart name"
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
<Input placeholder="Enter sparepart name" disabled={isReadOnly} />
|
||||
</Form.Item>
|
||||
|
||||
{/* Description */}
|
||||
<Form.Item
|
||||
name={[field.name, 'description']}
|
||||
>
|
||||
<Form.Item name={[field.name, 'description']}>
|
||||
<Input.TextArea
|
||||
placeholder="Enter sparepart description (optional)"
|
||||
rows={2}
|
||||
@@ -169,14 +176,26 @@ const SparepartForm = ({
|
||||
</Button>
|
||||
</Upload>
|
||||
) : (
|
||||
<div style={{ padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #d9d9d9',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<Text type="secondary">No upload allowed</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sparepartImages[field.key] && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={sparepartImages[field.key].uploadPath}
|
||||
alt="Sparepart Image"
|
||||
@@ -189,10 +208,16 @@ const SparepartForm = ({
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<Text style={{ fontSize: 12 }}>{sparepartImages[field.key].name}</Text>
|
||||
<Text style={{ fontSize: 12 }}>
|
||||
{sparepartImages[field.key].name}
|
||||
</Text>
|
||||
<br />
|
||||
<Text type="secondary" style={{ fontSize: 10 }}>
|
||||
Size: {(sparepartImages[field.key].size / 1024).toFixed(1)} KB
|
||||
Size:{' '}
|
||||
{(
|
||||
sparepartImages[field.key].size / 1024
|
||||
).toFixed(1)}{' '}
|
||||
KB
|
||||
</Text>
|
||||
</div>
|
||||
{!isReadOnly && (
|
||||
@@ -209,24 +234,6 @@ const SparepartForm = ({
|
||||
</div>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
{/* Delete Button */}
|
||||
{!isReadOnly && sparepartFields.length > 1 && (
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => onRemoveSparepartField(field.key)}
|
||||
style={{
|
||||
borderColor: '#ff4d4f',
|
||||
color: '#ff4d4f'
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</Card>
|
||||
))}
|
||||
@@ -243,17 +250,9 @@ const SparepartForm = ({
|
||||
</Button>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{!isReadOnly && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Text type="secondary">
|
||||
* Add at least one sparepart for this error code.
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SparepartForm;
|
||||
export default SparepartForm;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
|
||||
import { Form, Typography } from 'antd';
|
||||
import { Typography } from 'antd';
|
||||
import ListNotification from './component/ListNotification';
|
||||
import DetailNotification from './component/DetailNotification';
|
||||
|
||||
@@ -10,7 +10,6 @@ const { Text } = Typography;
|
||||
const IndexNotification = memo(function IndexNotification() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
@@ -36,19 +35,14 @@ const IndexNotification = memo(function IndexNotification() {
|
||||
useEffect(() => {
|
||||
if (actionMode === 'preview') {
|
||||
setIsModalVisible(true);
|
||||
if (selectedData) {
|
||||
form.setFieldsValue(selectedData);
|
||||
}
|
||||
} else {
|
||||
setIsModalVisible(false);
|
||||
form.resetFields();
|
||||
}
|
||||
}, [actionMode, selectedData, form]);
|
||||
}, [actionMode]);
|
||||
|
||||
const handleCancel = () => {
|
||||
setActionMode('list');
|
||||
setSelectedData(null);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -62,7 +56,6 @@ const IndexNotification = memo(function IndexNotification() {
|
||||
<DetailNotification
|
||||
visible={isModalVisible}
|
||||
onCancel={handleCancel}
|
||||
form={form}
|
||||
selectedData={selectedData}
|
||||
/>
|
||||
</React.Fragment>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user