diff --git a/src/pages/master/tag/IndexTag.jsx b/src/pages/master/tag/IndexTag.jsx index 17ef600..b763c27 100644 --- a/src/pages/master/tag/IndexTag.jsx +++ b/src/pages/master/tag/IndexTag.jsx @@ -1,5 +1,7 @@ -import React, { memo, useEffect } from 'react'; +import React, { memo, useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import ListTag from './component/ListTag'; +import DetailTag from './component/DetailTag'; import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb'; import { Typography } from 'antd'; @@ -9,6 +11,35 @@ const IndexTag = memo(function IndexTag() { const navigate = useNavigate(); const { setBreadcrumbItems } = useBreadcrumb(); + const [actionMode, setActionMode] = useState('list'); + const [selectedData, setSelectedData] = useState(null); + const [readOnly, setReadOnly] = useState(false); + const [showModal, setShowmodal] = useState(false); + + const setMode = (param) => { + setActionMode(param); + switch (param) { + case 'add': + setReadOnly(false); + setShowmodal(true); + break; + + case 'edit': + setReadOnly(false); + setShowmodal(true); + break; + + case 'preview': + setReadOnly(true); + setShowmodal(true); + break; + + default: + setShowmodal(false); + break; + } + }; + useEffect(() => { const token = localStorage.getItem('token'); if (token) { @@ -22,9 +53,23 @@ const IndexTag = memo(function IndexTag() { }, []); return ( -
-

Tag Page

-
+ + + + ); }); diff --git a/src/pages/master/tag/component/DetailTag.jsx b/src/pages/master/tag/component/DetailTag.jsx new file mode 100644 index 0000000..754d49e --- /dev/null +++ b/src/pages/master/tag/component/DetailTag.jsx @@ -0,0 +1,286 @@ +import { useEffect, useState } from 'react'; +import { Modal, Input, Divider, Typography, Button, ConfigProvider, Select } from 'antd'; +import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif'; + +const { Text } = Typography; +const { TextArea } = Input; + +const DetailTag = (props) => { + const [confirmLoading, setConfirmLoading] = useState(false); + + const defaultData = { + tag_id: '', + tag_code: '', + tag_name: '', + tag_value: 'Off', + tag_type: 'alarm', + tag_description: '', + }; + + const [FormData, setFormData] = useState(defaultData); + + const handleCancel = () => { + props.setSelectedData(null); + props.setActionMode('list'); + }; + + const handleSave = async () => { + setConfirmLoading(true); + + // Validasi required fields + if (!FormData.tag_code) { + NotifOk({ + icon: 'warning', + title: 'Peringatan', + message: 'Kolom Tag Code Tidak Boleh Kosong', + }); + setConfirmLoading(false); + return; + } + + if (!FormData.tag_name) { + NotifOk({ + icon: 'warning', + title: 'Peringatan', + message: 'Kolom Tag Name Tidak Boleh Kosong', + }); + setConfirmLoading(false); + return; + } + + if (!FormData.tag_value) { + NotifOk({ + icon: 'warning', + title: 'Peringatan', + message: 'Kolom Tag Value Tidak Boleh Kosong', + }); + setConfirmLoading(false); + return; + } + + if (!FormData.tag_type) { + NotifOk({ + icon: 'warning', + title: 'Peringatan', + message: 'Kolom Tag Type Tidak Boleh Kosong', + }); + setConfirmLoading(false); + return; + } + + const payload = { + tag_code: FormData.tag_code, + tag_name: FormData.tag_name, + tag_value: FormData.tag_value, + tag_type: FormData.tag_type, + tag_description: FormData.tag_description, + }; + + try { + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 500)); + + const response = { + statusCode: FormData.tag_id ? 200 : 201, + data: { + tag_name: FormData.tag_name, + }, + }; + + console.log('Save Tag Response:', response); + + // Check if response is successful + if (response && (response.statusCode === 200 || response.statusCode === 201)) { + NotifOk({ + icon: 'success', + title: 'Berhasil', + message: `Data Tag "${response.data?.tag_name || FormData.tag_name}" berhasil ${ + FormData.tag_id ? 'diubah' : 'ditambahkan' + }.`, + }); + + props.setActionMode('list'); + } else { + NotifAlert({ + icon: 'error', + title: 'Gagal', + message: response?.message || 'Terjadi kesalahan saat menyimpan data.', + }); + } + } catch (error) { + console.error('Save Tag Error:', error); + NotifAlert({ + icon: 'error', + title: 'Error', + message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.', + }); + } + + setConfirmLoading(false); + }; + + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData({ + ...FormData, + [name]: value, + }); + }; + + const handleSelectChange = (name, value) => { + setFormData({ + ...FormData, + [name]: value, + }); + }; + + useEffect(() => { + const token = localStorage.getItem('token'); + if (token) { + if (props.selectedData != null) { + setFormData(props.selectedData); + } else { + setFormData(defaultData); + } + } else { + // navigate('/signin'); // Uncomment if useNavigate is imported + } + }, [props.showModal]); + + return ( + + + + + + {!props.readOnly && ( + + )} + + , + ]} + > + {FormData && ( +
+ +
+ Tag Code + * + +
+
+ Tag Name + * + +
+
+ Tag Value + * + handleSelectChange('tag_type', value)} + disabled={props.readOnly} + style={{ width: '100%' }} + placeholder="Select Type" + options={[ + { value: 'alarm', label: 'Alarm' }, + { value: 'measurement', label: 'Measurement' }, + ]} + /> +
+
+ Tag Description +