22baea38e1
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
- BOM 페이지에서 모든 카테고리 이모지 제거 (깔끔한 UI) - 구매신청된 자재 비활성화 기능 개선 - 구매관리 페이지에서 선택된 프로젝트만 표시하도록 수정 - 파이프 카테고리 Excel 내보내기 개선: * 끝단처리, 압력등급 컬럼 제거 * 사용자요구(분류기 추출) 및 추가요청사항 컬럼 추가 * 품목명에서 끝단처리 정보 제거 * 납기일 P열 고정 및 관리항목 자동 채움 - 파이프 분류기에서 사용자 요구사항 추출 기능 추가 - 재질별 스케줄 표시 개선 (SUS: SCH 40S, Carbon: SCH 40)
403 lines
14 KiB
JavaScript
403 lines
14 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { exportMaterialsToExcel } from '../../../utils/excelExport';
|
||
import api from '../../../api';
|
||
import { FilterableHeader } from '../shared';
|
||
|
||
const ValveMaterialsView = ({
|
||
materials,
|
||
selectedMaterials,
|
||
setSelectedMaterials,
|
||
userRequirements,
|
||
setUserRequirements,
|
||
purchasedMaterials,
|
||
fileId,
|
||
user
|
||
}) => {
|
||
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
|
||
const [columnFilters, setColumnFilters] = useState({});
|
||
const [showFilterDropdown, setShowFilterDropdown] = useState(null);
|
||
|
||
const parseValveInfo = (material) => {
|
||
const valveDetails = material.valve_details || {};
|
||
const description = material.original_description || '';
|
||
|
||
// 밸브 타입 파싱 (GATE, BALL, CHECK, GLOBE 등) - 기존 NewMaterialsPage와 동일
|
||
let valveType = valveDetails.valve_type || '';
|
||
if (!valveType && description) {
|
||
if (description.includes('GATE')) valveType = 'GATE';
|
||
else if (description.includes('BALL')) valveType = 'BALL';
|
||
else if (description.includes('CHECK')) valveType = 'CHECK';
|
||
else if (description.includes('GLOBE')) valveType = 'GLOBE';
|
||
else if (description.includes('BUTTERFLY')) valveType = 'BUTTERFLY';
|
||
else if (description.includes('NEEDLE')) valveType = 'NEEDLE';
|
||
else if (description.includes('RELIEF')) valveType = 'RELIEF';
|
||
}
|
||
|
||
// 연결 방식 파싱 (FLG, SW, THRD 등) - 기존 NewMaterialsPage와 동일
|
||
let connectionType = '';
|
||
if (description.includes('FLG')) {
|
||
connectionType = 'FLG';
|
||
} else if (description.includes('SW X THRD')) {
|
||
connectionType = 'SW×THRD';
|
||
} else if (description.includes('SW')) {
|
||
connectionType = 'SW';
|
||
} else if (description.includes('THRD')) {
|
||
connectionType = 'THRD';
|
||
} else if (description.includes('BW')) {
|
||
connectionType = 'BW';
|
||
}
|
||
|
||
// 압력 등급 파싱
|
||
let pressure = '-';
|
||
const pressureMatch = description.match(/(\d+)LB/i);
|
||
if (pressureMatch) {
|
||
pressure = `${pressureMatch[1]}LB`;
|
||
}
|
||
|
||
// 스케줄은 밸브에는 일반적으로 없음 (기본값)
|
||
let schedule = '-';
|
||
|
||
return {
|
||
type: 'VALVE',
|
||
subtype: `${valveType} ${connectionType}`.trim() || 'VALVE', // 타입과 연결방식 결합
|
||
valveType: valveType,
|
||
connectionType: connectionType,
|
||
size: material.size_spec || '-',
|
||
pressure: pressure,
|
||
schedule: schedule,
|
||
grade: material.material_grade || '-',
|
||
quantity: Math.round(material.quantity || 0),
|
||
unit: '개',
|
||
isValve: true
|
||
};
|
||
};
|
||
|
||
// 정렬 처리
|
||
const handleSort = (key) => {
|
||
let direction = 'asc';
|
||
if (sortConfig.key === key && sortConfig.direction === 'asc') {
|
||
direction = 'desc';
|
||
}
|
||
setSortConfig({ key, direction });
|
||
};
|
||
|
||
// 필터링된 및 정렬된 자재 목록
|
||
const getFilteredAndSortedMaterials = () => {
|
||
let filtered = materials.filter(material => {
|
||
return Object.entries(columnFilters).every(([key, filterValue]) => {
|
||
if (!filterValue) return true;
|
||
const info = parseValveInfo(material);
|
||
const value = info[key]?.toString().toLowerCase() || '';
|
||
return value.includes(filterValue.toLowerCase());
|
||
});
|
||
});
|
||
|
||
if (sortConfig.key) {
|
||
filtered.sort((a, b) => {
|
||
const aInfo = parseValveInfo(a);
|
||
const bInfo = parseValveInfo(b);
|
||
const aValue = aInfo[sortConfig.key] || '';
|
||
const bValue = bInfo[sortConfig.key] || '';
|
||
|
||
if (sortConfig.direction === 'asc') {
|
||
return aValue > bValue ? 1 : -1;
|
||
} else {
|
||
return aValue < bValue ? 1 : -1;
|
||
}
|
||
});
|
||
}
|
||
|
||
return filtered;
|
||
};
|
||
|
||
// 전체 선택/해제 (구매신청된 자재 제외)
|
||
const handleSelectAll = () => {
|
||
const filteredMaterials = getFilteredAndSortedMaterials();
|
||
const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
|
||
|
||
if (selectedMaterials.size === selectableMaterials.length) {
|
||
setSelectedMaterials(new Set());
|
||
} else {
|
||
setSelectedMaterials(new Set(selectableMaterials.map(m => m.id)));
|
||
}
|
||
};
|
||
|
||
// 개별 선택 (구매신청된 자재는 선택 불가)
|
||
const handleMaterialSelect = (materialId) => {
|
||
if (purchasedMaterials.has(materialId)) {
|
||
return; // 구매신청된 자재는 선택 불가
|
||
}
|
||
|
||
const newSelected = new Set(selectedMaterials);
|
||
if (newSelected.has(materialId)) {
|
||
newSelected.delete(materialId);
|
||
} else {
|
||
newSelected.add(materialId);
|
||
}
|
||
setSelectedMaterials(newSelected);
|
||
};
|
||
|
||
// 엑셀 내보내기
|
||
const handleExportToExcel = async () => {
|
||
const selectedMaterialsData = materials.filter(m => selectedMaterials.has(m.id));
|
||
if (selectedMaterialsData.length === 0) {
|
||
alert('내보낼 자재를 선택해주세요.');
|
||
return;
|
||
}
|
||
|
||
const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
|
||
const excelFileName = `VALVE_Materials_${timestamp}.xlsx`;
|
||
|
||
const dataWithRequirements = selectedMaterialsData.map(material => ({
|
||
...material,
|
||
user_requirement: userRequirements[material.id] || ''
|
||
}));
|
||
|
||
try {
|
||
await api.post('/files/save-excel', {
|
||
file_id: fileId,
|
||
category: 'VALVE',
|
||
materials: dataWithRequirements,
|
||
filename: excelFileName,
|
||
user_id: user?.id
|
||
});
|
||
|
||
exportMaterialsToExcel(dataWithRequirements, excelFileName, {
|
||
category: 'VALVE',
|
||
filename: excelFileName,
|
||
uploadDate: new Date().toLocaleDateString()
|
||
});
|
||
|
||
alert('엑셀 파일이 생성되고 서버에 저장되었습니다.');
|
||
} catch (error) {
|
||
console.error('엑셀 저장 실패:', error);
|
||
exportMaterialsToExcel(dataWithRequirements, excelFileName, {
|
||
category: 'VALVE',
|
||
filename: excelFileName,
|
||
uploadDate: new Date().toLocaleDateString()
|
||
});
|
||
}
|
||
};
|
||
|
||
const filteredMaterials = getFilteredAndSortedMaterials();
|
||
|
||
return (
|
||
<div style={{ padding: '32px' }}>
|
||
{/* 헤더 */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
|
||
<div>
|
||
<h3 style={{
|
||
fontSize: '24px',
|
||
fontWeight: '700',
|
||
color: '#0f172a',
|
||
margin: '0 0 8px 0'
|
||
}}>
|
||
Valve Materials
|
||
</h3>
|
||
<p style={{
|
||
fontSize: '14px',
|
||
color: '#64748b',
|
||
margin: 0
|
||
}}>
|
||
{filteredMaterials.length} items • {selectedMaterials.size} selected
|
||
</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '12px' }}>
|
||
<button
|
||
onClick={handleSelectAll}
|
||
style={{
|
||
background: 'white',
|
||
color: '#6b7280',
|
||
border: '1px solid #d1d5db',
|
||
borderRadius: '8px',
|
||
padding: '10px 16px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
fontWeight: '500'
|
||
}}
|
||
>
|
||
{selectedMaterials.size === filteredMaterials.length ? 'Deselect All' : 'Select All'}
|
||
</button>
|
||
|
||
<button
|
||
onClick={handleExportToExcel}
|
||
disabled={selectedMaterials.size === 0}
|
||
style={{
|
||
background: selectedMaterials.size > 0 ? 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)' : '#e5e7eb',
|
||
color: selectedMaterials.size > 0 ? 'white' : '#9ca3af',
|
||
border: 'none',
|
||
borderRadius: '8px',
|
||
padding: '10px 16px',
|
||
cursor: selectedMaterials.size > 0 ? 'pointer' : 'not-allowed',
|
||
fontSize: '14px',
|
||
fontWeight: '500'
|
||
}}
|
||
>
|
||
Export to Excel ({selectedMaterials.size})
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 테이블 */}
|
||
<div style={{
|
||
background: 'white',
|
||
borderRadius: '12px',
|
||
overflow: 'hidden',
|
||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
|
||
}}>
|
||
{/* 헤더 */}
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
|
||
gap: '16px',
|
||
padding: '16px',
|
||
background: '#f8fafc',
|
||
borderBottom: '1px solid #e2e8f0',
|
||
fontSize: '14px',
|
||
fontWeight: '600',
|
||
color: '#374151'
|
||
}}>
|
||
<div>
|
||
<input
|
||
type="checkbox"
|
||
checked={(() => {
|
||
const selectableMaterials = filteredMaterials.filter(m => !purchasedMaterials.has(m.id));
|
||
return selectedMaterials.size === selectableMaterials.length && selectableMaterials.length > 0;
|
||
})()}
|
||
onChange={handleSelectAll}
|
||
style={{ cursor: 'pointer' }}
|
||
/>
|
||
</div>
|
||
<FilterableHeader sortKey="subtype" filterKey="subtype">Type</FilterableHeader>
|
||
<FilterableHeader sortKey="size" filterKey="size">Size</FilterableHeader>
|
||
<FilterableHeader sortKey="pressure" filterKey="pressure">Pressure</FilterableHeader>
|
||
<FilterableHeader sortKey="schedule" filterKey="schedule">Schedule</FilterableHeader>
|
||
<FilterableHeader sortKey="grade" filterKey="grade">Material Grade</FilterableHeader>
|
||
<FilterableHeader sortKey="quantity" filterKey="quantity">Quantity</FilterableHeader>
|
||
<div>Unit</div>
|
||
<div>User Requirement</div>
|
||
</div>
|
||
|
||
{/* 데이터 행들 */}
|
||
<div style={{ maxHeight: '600px', overflowY: 'auto' }}>
|
||
{filteredMaterials.map((material, index) => {
|
||
const info = parseValveInfo(material);
|
||
const isSelected = selectedMaterials.has(material.id);
|
||
const isPurchased = purchasedMaterials.has(material.id);
|
||
|
||
return (
|
||
<div
|
||
key={material.id}
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '50px 200px 120px 100px 120px 150px 80px 80px 200px',
|
||
gap: '16px',
|
||
padding: '16px',
|
||
borderBottom: index < filteredMaterials.length - 1 ? '1px solid #f1f5f9' : 'none',
|
||
background: isSelected ? '#eff6ff' : (isPurchased ? '#fef3c7' : 'white'),
|
||
transition: 'background 0.15s ease'
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
if (!isSelected && !isPurchased) {
|
||
e.target.style.background = '#f8fafc';
|
||
}
|
||
}}
|
||
onMouseLeave={(e) => {
|
||
if (!isSelected && !isPurchased) {
|
||
e.target.style.background = 'white';
|
||
}
|
||
}}
|
||
>
|
||
<div>
|
||
<input
|
||
type="checkbox"
|
||
checked={isSelected}
|
||
onChange={() => handleMaterialSelect(material.id)}
|
||
disabled={isPurchased}
|
||
style={{
|
||
cursor: isPurchased ? 'not-allowed' : 'pointer',
|
||
opacity: isPurchased ? 0.5 : 1
|
||
}}
|
||
/>
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '500' }}>
|
||
{info.subtype}
|
||
{isPurchased && (
|
||
<span style={{
|
||
marginLeft: '8px',
|
||
padding: '2px 6px',
|
||
background: '#fbbf24',
|
||
color: '#92400e',
|
||
borderRadius: '4px',
|
||
fontSize: '10px',
|
||
fontWeight: '500'
|
||
}}>
|
||
PURCHASED
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#1f2937' }}>
|
||
{info.size}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#1f2937' }}>
|
||
{info.pressure}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#1f2937' }}>
|
||
{info.schedule}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#1f2937' }}>
|
||
{info.grade}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#1f2937', fontWeight: '600', textAlign: 'right' }}>
|
||
{info.quantity}
|
||
</div>
|
||
<div style={{ fontSize: '14px', color: '#6b7280' }}>
|
||
{info.unit}
|
||
</div>
|
||
<div>
|
||
<input
|
||
type="text"
|
||
value={userRequirements[material.id] || ''}
|
||
onChange={(e) => setUserRequirements({
|
||
...userRequirements,
|
||
[material.id]: e.target.value
|
||
})}
|
||
placeholder="Enter requirement..."
|
||
style={{
|
||
width: '100%',
|
||
padding: '6px 8px',
|
||
border: '1px solid #d1d5db',
|
||
borderRadius: '4px',
|
||
fontSize: '12px'
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{filteredMaterials.length === 0 && (
|
||
<div style={{
|
||
textAlign: 'center',
|
||
padding: '60px 20px',
|
||
color: '#64748b'
|
||
}}>
|
||
<div style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
|
||
No Valve Materials Found
|
||
</div>
|
||
<div style={{ fontSize: '14px' }}>
|
||
{Object.keys(columnFilters).some(key => columnFilters[key])
|
||
? 'Try adjusting your filters'
|
||
: 'No valve materials available in this BOM'}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ValveMaterialsView;
|