-
Kode Brand
-
*
-
-
-
+ {FormData && (
+
-
- Brand Name
- *
-
-
-
-
-
- Brand Type
- *
-
-
-
-
-
- Device Name
- *
-
-
-
-
-
- Description
-
-
-
-
-
+ )}
);
};
-export default DetailBrandDevice;
\ No newline at end of file
+export default DetailBrandDevice;
diff --git a/src/pages/master/brandDevice/component/ListBrandDevice.jsx b/src/pages/master/brandDevice/component/ListBrandDevice.jsx
index c765714..d8bd42b 100644
--- a/src/pages/master/brandDevice/component/ListBrandDevice.jsx
+++ b/src/pages/master/brandDevice/component/ListBrandDevice.jsx
@@ -1,57 +1,221 @@
-import React, { useState } from 'react';
-import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Tabs } from 'antd';
+import {
+ PlusOutlined,
+ EditOutlined,
+ DeleteOutlined,
+ SearchOutlined,
+ EyeOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
import TableList from '../../../../components/Global/TableList';
+import ListErrorMaster from './ListErrorMaster';
-const ListBrandDevice = ({
- setActionMode,
- handleEdit,
- handleDelete,
- handlePreview,
- getAllBrandDevice // Mock API function
-}) => {
- const [searchValue, setSearchValue] = useState('');
- const [formDataFilter, setFormDataFilter] = useState({ search: '' });
+// Dummy data
+const initialBrandDeviceData = [
+ {
+ brand_id: 1,
+ brandName: 'Siemens S7-1200',
+ brandType: 'PLC',
+ manufacturer: 'Siemens',
+ model: 'S7-1200',
+ status: 'Active',
+ },
+ {
+ brand_id: 2,
+ brandName: 'Allen Bradley CompactLogix',
+ brandType: 'PLC',
+ manufacturer: 'Rockwell Automation',
+ model: 'CompactLogix 5370',
+ status: 'Active',
+ },
+ {
+ brand_id: 3,
+ brandName: 'Schneider Modicon M580',
+ brandType: 'PLC',
+ manufacturer: 'Schneider Electric',
+ model: 'M580',
+ status: 'Active',
+ },
+ {
+ brand_id: 4,
+ brandName: 'Mitsubishi FX5U',
+ brandType: 'PLC',
+ manufacturer: 'Mitsubishi',
+ model: 'FX5U',
+ status: 'Inactive',
+ },
+];
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+ {
+ title: 'No',
+ key: 'no',
+ width: '5%',
+ align: 'center',
+ render: (_, __, index) => index + 1,
+ },
+ {
+ title: 'Brand Device ',
+ dataIndex: 'brandName',
+ key: 'brandName',
+ width: '20%',
+ },
+ {
+ title: 'Type',
+ dataIndex: 'brandType',
+ key: 'brandType',
+ width: '15%',
+ },
+ {
+ title: 'Manufacturer',
+ dataIndex: 'manufacturer',
+ key: 'manufacturer',
+ width: '20%',
+ },
+ {
+ title: 'model',
+ dataIndex: 'model',
+ key: 'model',
+ width: '15%',
+ },
+ {
+ title: 'status',
+ dataIndex: 'status',
+ key: 'status',
+ width: '10%',
+ align: 'center',
+ render: (_, { status }) => (
+ <>
+ {status === 'Active' ? (
+
+ Active
+
+ ) : (
+
+ Inactive
+
+ )}
+
+ ),
+ },
+ {
+ title: 'Action',
+ key: 'action',
+ align: 'center',
+ width: '15%',
+ render: (_, record) => (
+
+ }
+ onClick={() => showPreviewModal(record)}
+ style={{
+ color: '#1890ff',
+ borderColor: '#1890ff',
+ }}
+ />
+ }
+ onClick={() => showEditModal(record)}
+ style={{
+ color: '#faad14',
+ borderColor: '#faad14',
+ }}
+ />
+ }
+ onClick={() => showDeleteDialog(record)}
+ style={{
+ borderColor: '#ff4d4f',
+ }}
+ />
+
+ ),
+ },
+];
+
+const ListBrandDevice = memo(function ListBrandDevice(props) {
+ const [showFilter, setShowFilter] = useState(false);
const [trigerFilter, setTrigerFilter] = useState(false);
+ const [brandDeviceData, setBrandDeviceData] = useState(initialBrandDeviceData);
- const columns = [
- {
- title: 'Kode Brand',
- dataIndex: 'brandCode',
- key: 'brandCode',
- },
- {
- title: 'Brand Name',
- dataIndex: 'brandName',
- key: 'brandName',
- },
- {
- title: 'Brand Type',
- dataIndex: 'brandType',
- key: 'brandType',
- },
- {
- title: 'Device Name',
- dataIndex: 'deviceName',
- key: 'deviceName',
- },
- {
- title: 'Description',
- dataIndex: 'description',
- key: 'description',
- },
- {
- title: 'Aksi',
- key: 'action',
- render: (_, record) => (
-
- } onClick={() => handlePreview(record)} />
- } onClick={() => handleEdit(record)} />
- } onClick={() => handleDelete(record)} />
-
- ),
- },
- ];
+ const defaultFilter = { search: '' };
+ const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+ const [searchValue, setSearchValue] = useState('');
+
+ const navigate = useNavigate();
+
+ // Dummy data function to simulate API call - now uses state
+ const getAllBrandDevice = async (params) => {
+ // Simulate API delay
+ await new Promise((resolve) => setTimeout(resolve, 300));
+
+ // Extract URLSearchParams - TableList sends URLSearchParams object
+ const searchParam = params.get('search') || '';
+ const page = parseInt(params.get('page')) || 1;
+ const limit = parseInt(params.get('limit')) || 10;
+
+ console.log('getAllBrandDevice called with:', { searchParam, page, limit });
+
+ // Filter by search
+ let filteredBrandDevices = brandDeviceData;
+ if (searchParam) {
+ const searchLower = searchParam.toLowerCase();
+ filteredBrandDevices = brandDeviceData.filter(
+ (brand) =>
+ brand.brandName.toLowerCase().includes(searchLower) ||
+ brand.brandType.toLowerCase().includes(searchLower) ||
+ brand.manufacturer.toLowerCase().includes(searchLower) ||
+ brand.model.toLowerCase().includes(searchLower)
+ );
+ }
+
+ // Pagination logic
+ const totalData = filteredBrandDevices.length;
+ const totalPages = Math.ceil(totalData / limit);
+ const startIndex = (page - 1) * limit;
+ const endIndex = startIndex + limit;
+ const paginatedData = filteredBrandDevices.slice(startIndex, endIndex);
+
+ // Return structure that matches TableList expectation
+ return {
+ status: 200,
+ statusCode: 200,
+ data: {
+ data: paginatedData,
+ total: totalData,
+ paging: {
+ page: page,
+ limit: limit,
+ total: totalData,
+ page_total: totalPages,
+ },
+ },
+ };
+ };
+
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ if (token) {
+ if (props.actionMode == 'list') {
+ setFormDataFilter(defaultFilter);
+ doFilter();
+ }
+ } else {
+ navigate('/signin');
+ }
+ }, [props.actionMode, brandDeviceData]);
+
+ const toggleFilter = () => {
+ setFormDataFilter(defaultFilter);
+ setShowFilter((prev) => !prev);
+ };
+
+ const doFilter = () => {
+ setTrigerFilter((prev) => !prev);
+ };
const handleSearch = () => {
setFormDataFilter({ search: searchValue });
@@ -64,74 +228,167 @@ const ListBrandDevice = ({
setTrigerFilter((prev) => !prev);
};
- return (
-
-
-
- {
- const value = e.target.value;
- setSearchValue(value);
- if (value === '') {
- handleSearchClear();
- }
- }}
- onSearch={handleSearch}
- allowClear={{
- clearIcon: ✕,
- }}
- enterButton={
- }
- style={{
- backgroundColor: '#23A55A',
- borderColor: '#23A55A',
- }}
- >
- Search
-
- }
- size="large"
- />
-
-
-
- }
- onClick={() => setActionMode('add')}
- size="large"
- >
- Tambah Data
-
-
-
-
-
-
-
-
- );
-};
+ const showPreviewModal = (param) => {
+ props.setSelectedData(param);
+ props.setActionMode('preview');
+ };
-export default ListBrandDevice;
\ No newline at end of file
+ const showEditModal = (param = null) => {
+ props.setSelectedData(param);
+ props.setActionMode('edit');
+ };
+
+ const showAddModal = (param = null) => {
+ props.setSelectedData(param);
+ props.setActionMode('add');
+ };
+
+ const showDeleteDialog = (param) => {
+ NotifConfirmDialog({
+ icon: 'question',
+ title: 'Konfirmasi',
+ message: 'Apakah anda yakin hapus data "' + param.brandName + '" ?',
+ onConfirm: () => handleDelete(param.brand_id),
+ onCancel: () => props.setSelectedData(null),
+ });
+ };
+
+ const handleDelete = async (brand_id) => {
+ // Find brand name before deleting
+ const brandToDelete = brandDeviceData.find((brand) => brand.brand_id === brand_id);
+
+ // Simulate delete API call
+ await new Promise((resolve) => setTimeout(resolve, 300));
+
+ // Remove from state
+ const updatedBrands = brandDeviceData.filter((brand) => brand.brand_id !== brand_id);
+ setBrandDeviceData(updatedBrands);
+
+ NotifAlert({
+ icon: 'success',
+ title: 'Berhasil',
+ message: `Data Brand Device "${brandToDelete?.brandName || ''}" berhasil dihapus.`,
+ });
+ };
+
+ const tabItems = [
+ {
+ key: 'brandDevice',
+ label: 'Brand Device',
+ },
+ {
+ key: 'errorMaster',
+ label: 'Error Master',
+ },
+ ];
+
+ return (
+
+
+
+
+
+ {props.activeTab === 'brandDevice' && (
+
+
+
+
+ {
+ const value = e.target.value;
+ setSearchValue(value);
+ // Auto search when clearing by backspace/delete
+ if (value === '') {
+ setFormDataFilter({ search: '' });
+ setTrigerFilter((prev) => !prev);
+ }
+ }}
+ onSearch={handleSearch}
+ allowClear={{
+ clearIcon: ✕,
+ }}
+ enterButton={
+ }
+ style={{
+ backgroundColor: '#23A55A',
+ borderColor: '#23A55A',
+ }}
+ >
+ Search
+
+ }
+ size="large"
+ />
+
+
+
+
+ }
+ onClick={() => showAddModal()}
+ size="large"
+ >
+ Tambah Brand Device
+
+
+
+
+
+
+
+
+
+
+ )}
+ {props.activeTab === 'errorMaster' && (
+
+ )}
+
+
+ );
+});
+
+export default ListBrandDevice;
diff --git a/src/pages/master/brandDevice/component/ListErrorMaster.jsx b/src/pages/master/brandDevice/component/ListErrorMaster.jsx
new file mode 100644
index 0000000..78bd856
--- /dev/null
+++ b/src/pages/master/brandDevice/component/ListErrorMaster.jsx
@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { Row, Col } from 'antd';
+
+const ListErrorMaster = memo(function ListErrorMaster(props) {
+ return (
+
+
+
+
+
+ Error Master
+
+
+
+
+
+ );
+});
+
+export default ListErrorMaster;