yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

template card or table in component table list

Browse Source
This commit is contained in:
Fachba
2025-10-16 14:55:57 +07:00
parent 9bb07b1224
commit 9f46908d79
5 changed files with 183 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/pages/master/device/component/ListDevice.jsx
View File

@@ -1,15 +1,5 @@
import React, { memo, useState, useEffect } from 'react';
import {
Space,
Tag,
ConfigProvider,
Button,
Row,
Col,
Card,
Input,
Segmented,
} from 'antd';
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Segmented } from 'antd';
import {
PlusOutlined,
EditOutlined,
@@ -23,11 +13,6 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
import { useNavigate } from 'react-router-dom';
import { deleteDevice, getAllDevice } from '../../../../api/master-device';
import TableList from '../../../../components/Global/TableList';
import CardDevice from './CardDevice';
import { getFilterData } from '../../../../components/Global/DataFilter';
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
import logoPiEnergi from '../../../../assets/images/logo/pi-energi.png';
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
@@ -113,10 +98,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
];
const ListDevice = memo(function ListDevice(props) {
const [showFilter, setShowFilter] = useState(false);
const [trigerFilter, setTrigerFilter] = useState(false);
const [viewMode, setViewMode] = useState('card');
const [deviceData, setDeviceData] = useState([]);
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -124,15 +106,6 @@ const ListDevice = memo(function ListDevice(props) {
const navigate = useNavigate();
const fetchData = async () => {
try {
const response = await getAllDevice(formDataFilter);
setDeviceData(response.data.data);
} catch (error) {
console.error("Failed to fetch device data:", error);
}
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
@@ -145,15 +118,6 @@ const ListDevice = memo(function ListDevice(props) {
}
}, [props.actionMode]);
useEffect(() => {
fetchData();
}, [trigerFilter]);
const toggleFilter = () => {
setFormDataFilter(defaultFilter);
setShowFilter((prev) => !prev);
};
const doFilter = () => {
setTrigerFilter((prev) => !prev);
};
@@ -213,85 +177,6 @@ const ListDevice = memo(function ListDevice(props) {
}
};
const generatePdf = () => {
props.setActionMode('generatepdf');
};
const exportExcel = async () => {
const data = getFilterData();
const workbook = new ExcelJS.Workbook();
const sheet = workbook.addWorksheet('Data APD');
let rowCursor = 1;
if (logoPiEnergi) {
const response = await fetch(logoPiEnergi);
const blob = await response.blob();
const buffer = await blob.arrayBuffer();
const imageId = workbook.addImage({
buffer,
extension: 'png',
});
sheet.addImage(imageId, {
tl: { col: 0.2, row: 0.8 },
ext: { width: 163, height: 80 },
});
sheet.getRow(5).height = 15;
rowCursor = 3;
}
const titleCell = sheet.getCell(`C${rowCursor}`);
titleCell.value = 'Data APD';
titleCell.font = { size: 20, bold: true, color: { argb: 'FF00AEEF' } };
titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
sheet.mergeCells(`C${rowCursor}:F${rowCursor}`);
const headers = [
'ID APD',
'Nama APD',
'Deskripsi',
'Jenis Permit Default',
'Aktif',
'Dibuat',
'Diubah',
];
sheet.addRow(headers);
const headerRow = sheet.getRow(6);
headerRow.font = { bold: true, size: 12 };
headerRow.eachCell((cell) => {
cell.alignment = {
horizontal: 'center',
vertical: 'middle',
};
});
data.forEach((item) => {
sheet.addRow([
item.id_apd,
item.nama_apd,
item.deskripsi_apd ?? '',
item.jenis_permit_default ?? '',
item.is_active ? 'Ya' : 'Tidak',
new Date(item.created_at).toLocaleString(),
new Date(item.updated_at).toLocaleString(),
]);
});
sheet.columns.forEach((col) => {
let maxLength = 10;
col.eachCell({ includeEmpty: true }, (cell) => {
const len = cell.value?.toString().length || 0;
if (len > maxLength) maxLength = len;
});
col.width = maxLength + 2;
});
const buffer = await workbook.xlsx.writeBuffer();
saveAs(new Blob([buffer]), 'Data_APD.xlsx');
};
return (
<React.Fragment>
<Card>
@@ -331,14 +216,6 @@ const ListDevice = memo(function ListDevice(props) {
</Col>
<Col>
<Space wrap size="small">
<Segmented
options={[
{ value: 'card', icon: <AppstoreOutlined /> },
{ value: 'table', icon: <TableOutlined /> },
]}
value={viewMode}
onChange={setViewMode}
/>
<ConfigProvider
theme={{
token: { colorBgContainer: '#E9F6EF' },
@@ -366,21 +243,18 @@ const ListDevice = memo(function ListDevice(props) {
</Row>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
{viewMode === 'card' ? (
<CardDevice
data={deviceData}
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
/>
) : (
<TableList
getData={getAllDevice}
queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter}
/>
)}
<TableList
mobile
cardColor={'#42AAFF'}
header={'device_name'}
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
getData={getAllDevice}
queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter}
/>
</Col>
</Row>
</Card>