1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
import * as React from "react";
import { Button } from "@/components/ui/button";
import { FileDown, Loader } from "lucide-react";
import { toast } from "sonner";
import * as ExcelJS from 'exceljs';
interface ExcelDownloadProps {
comparisonResults: Array<{
tagNo: string;
tagDesc: string;
isMatching: boolean;
attributes: Array<{
key: string;
label: string;
localValue: any;
sedpValue: any;
isMatching: boolean;
uom?: string;
}>;
}>;
formCode: string;
disabled: boolean;
}
export function ExcelDownload({ comparisonResults, formCode, disabled }: ExcelDownloadProps) {
const [isExporting, setIsExporting] = React.useState(false);
// Function to generate and download Excel file with differences
const handleExportDifferences = async () => {
try {
setIsExporting(true);
// Get only items with differences
const itemsWithDifferences = comparisonResults.filter(item => !item.isMatching);
if (itemsWithDifferences.length === 0) {
toast.info("차이가 없어 다운로드할 내용이 없습니다");
return;
}
// Create a new workbook
const workbook = new ExcelJS.Workbook();
workbook.creator = 'SEDP Compare Tool';
workbook.created = new Date();
// Add a worksheet
const worksheet = workbook.addWorksheet('SEDP Differences');
// Add headers
worksheet.columns = [
{ header: 'Tag Number', key: 'tagNo', width: 20 },
{ header: 'Tag Description', key: 'tagDesc', width: 30 },
{ header: 'Attribute', key: 'attribute', width: 25 },
{ header: 'Local Value', key: 'localValue', width: 20 },
{ header: 'SEDP Value', key: 'sedpValue', width: 20 }
];
// Style the header row
const headerRow = worksheet.getRow(1);
headerRow.eachCell((cell) => {
cell.font = { bold: true };
cell.fill = {
type: 'pattern',
pattern: 'solid',
fgColor: { argb: 'FFE0E0E0' }
};
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
};
});
// Add data rows
let rowIndex = 2;
itemsWithDifferences.forEach(item => {
const differences = item.attributes.filter(attr => !attr.isMatching);
if (differences.length === 0) return;
differences.forEach(diff => {
const row = worksheet.getRow(rowIndex++);
// Format local value with UOM
const localDisplay = diff.localValue === null || diff.localValue === undefined || diff.localValue === ''
? "(empty)"
: diff.uom ? `${diff.localValue} ${diff.uom}` : diff.localValue;
// SEDP value is displayed as-is
const sedpDisplay = diff.sedpValue === null || diff.sedpValue === undefined || diff.sedpValue === ''
? "(empty)"
: diff.sedpValue;
// Set cell values
row.getCell('tagNo').value = item.tagNo;
row.getCell('tagDesc').value = item.tagDesc;
row.getCell('attribute').value = diff.label;
row.getCell('localValue').value = localDisplay;
row.getCell('sedpValue').value = sedpDisplay;
// Style the row
row.getCell('localValue').font = { color: { argb: 'FFFF0000' } }; // Red for local value
row.getCell('sedpValue').font = { color: { argb: 'FF008000' } }; // Green for SEDP value
// Add borders
row.eachCell((cell) => {
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' }
};
});
});
// Add a blank row after each tag for better readability
rowIndex++;
});
// Generate Excel file
const buffer = await workbook.xlsx.writeBuffer();
// Create a Blob from the buffer
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// Create a download link and trigger the download
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `SEDP_Differences_${formCode}_${new Date().toISOString().slice(0, 10)}.xlsx`;
document.body.appendChild(a);
a.click();
// Clean up
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
toast.success("차이점 Excel 다운로드 완료");
} catch (error) {
console.error("Error exporting to Excel:", error);
toast.error("Excel 다운로드 실패");
} finally {
setIsExporting(false);
}
};
return (
<Button
variant="secondary"
onClick={handleExportDifferences}
disabled={disabled || isExporting}
className="flex items-center gap-2"
>
{isExporting ? (
<Loader className="h-4 w-4 animate-spin" />
) : (
<FileDown className="h-4 w-4" />
)}
차이점 Excel로 다운로드
</Button>
);
}
|
