join tag on unit

src/pages/master/unit/component/DetailUnit.jsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider, Select } from 'antd';
 import { NotifOk } from '../../../../components/Global/ToastNotif';
 import { createUnit, updateUnit } from '../../../../api/master-unit';
+import { getAllTag } from '../../../../api/master-tag'; // Import API untuk Tag
 import { validateRun } from '../../../../Utils/validate';
 
 const { Text } = Typography;
 
 const DetailUnit = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
+    const [tagList, setTagList] = useState([]);
+    const [loadingTags, setLoadingTags] = useState(false);
 
     const defaultData = {
         unit_id: '',
@@ -15,10 +18,28 @@ const DetailUnit = (props) => {
         unit_name: '',
         unit_description: '',
         is_active: true,
+        tag_id: null, // Tambahkan tag_id
     };
 
     const [formData, setFormData] = useState(defaultData);
 
+    // Fungsi untuk mengambil data Tag
+    const loadTags = async () => {
+        setLoadingTags(true);
+        try {
+            const params = new URLSearchParams({ limit: 1000, criteria: '' });
+            const response = await getAllTag(params);
+            if (response && response.data) {
+                const activeTags = response.data.filter((tag) => tag.is_active === true);
+                setTagList(activeTags);
+            }
+        } catch (error) {
+            console.error('Error loading tags:', error);
+        } finally {
+            setLoadingTags(false);
+        }
+    };
+
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
@@ -27,8 +48,10 @@ const DetailUnit = (props) => {
     const handleSave = async () => {
         setConfirmLoading(true);
 
-        // Daftar aturan validasi
-        const validationRules = [{ field: 'unit_name', label: 'Unit Name', required: true }];
+        const validationRules = [
+            { field: 'unit_name', label: 'Unit Name', required: true },
+            { field: 'tag_id', label: 'Tag', required: true }, // Tambah validasi untuk tag_id
+        ];
 
         if (
             validateRun(formData, validationRules, (errorMessages) => {
@@ -39,14 +62,16 @@ const DetailUnit = (props) => {
                 });
                 setConfirmLoading(false);
             })
-        )
+        ) {
             return;
+        }
 
         try {
             const payload = {
-                is_active: formData.is_active,
                 unit_name: formData.unit_name,
                 unit_description: formData.unit_description,
+                is_active: formData.is_active,
+                tag_id: formData.tag_id, // Tambahkan tag_id ke payload
             };
 
             const response =
@@ -90,6 +115,13 @@ const DetailUnit = (props) => {
         });
     };
 
+    const handleSelectChange = (name, value) => {
+        setFormData({
+            ...formData,
+            [name]: value,
+        });
+    };
+
     const handleStatusToggle = (checked) => {
         setFormData({
             ...formData,
@@ -98,6 +130,10 @@ const DetailUnit = (props) => {
     };
 
     useEffect(() => {
+        if (props.showModal) {
+            loadTags(); // Panggil fungsi loadTags saat modal muncul
+        }
+
         if (props.selectedData) {
             setFormData(props.selectedData);
         } else {
@@ -116,6 +152,7 @@ const DetailUnit = (props) => {
             } Unit`}
             open={props.showModal}
             onCancel={handleCancel}
+            width={600}
             footer={[
                 <React.Fragment key="modal-footer">
                     <ConfigProvider
@@ -175,13 +212,12 @@ const DetailUnit = (props) => {
                     </div>
                     <Divider style={{ margin: '12px 0' }} />
 
-                    {/* Unit Code - Auto Increment & Read Only */}
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Unit Code</Text>
                         <Input
                             name="unit_code"
                             value={formData.unit_code || ''}
-                            placeholder={'Unit Code Auto Fill'}
+                            placeholder="Dibuat otomatis oleh sistem"
                             disabled
                             style={{
                                 backgroundColor: '#f5f5f5',
@@ -191,6 +227,33 @@ const DetailUnit = (props) => {
                         />
                     </div>
 
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Tag</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Pilih Tag"
+                            value={formData.tag_id || undefined}
+                            onChange={(value) => handleSelectChange('tag_id', value)}
+                            disabled={props.readOnly}
+                            loading={loadingTags}
+                            showSearch
+                            allowClear
+                            optionFilterProp="children"
+                            filterOption={(input, option) => {
+                                const text = option.children;
+                                if (!text) return false;
+                                return text.toLowerCase().includes(input.toLowerCase());
+                            }}
+                        >
+                            {tagList.map((tag) => (
+                                <Select.Option key={tag.tag_id} value={tag.tag_id}>
+                                    {`${tag.tag_code || ''} - ${tag.tag_name || ''}`}
+                                </Select.Option>
+                            ))}
+                        </Select>
+                    </div>
+
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Unit Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
@@ -221,4 +284,4 @@ const DetailUnit = (props) => {
     );
 };
 
-export default DetailUnit;
+export default DetailUnit;