fix: 수주등록 모달 및 품목 검색 UI 개선
- 품목 검색 모달에서 컬럼명 대신 라벨명 표시 * ItemSelectionModal에 columnLabels prop 추가 * ModalRepeaterTableComponent에서 columns 설정의 라벨 매핑 생성 * 테이블 헤더에 한글 라벨 표시 (품번, 품명, 규격, 재질 등) - 이미 추가된 품목은 검색 결과에서 완전 제외 * filteredResults로 중복 항목 필터링 * 회색 표시 대신 목록에서 아예 제거 * 사용자 친화적인 안내 메시지 추가 - 수주등록 버튼 크기 및 렌더링 수정 * 기본 크기를 200x40에서 120x40으로 변경 (다른 버튼과 통일) * h-full w-full 클래스 적용하여 컨테이너 크기에 맞게 렌더링 * style prop의 width/height 제거하여 Tailwind 클래스 우선순위 문제 해결 - 수주등록 모달에 판매 유형 및 무역 정보 추가 * 국내/해외 판매 선택 기능 * 해외 판매 시 무역 정보 섹션 표시 (인코텀즈, 결제조건, 통화 등) * 거래처 정보 확장 (담당자, 납품처, 납품장소) - 품목 반복 테이블 컬럼 조정 * 품목번호를 품번으로 변경 * 비고 컬럼 제거 * 규격, 재질 컬럼 추가 * 납품일을 납기일로 변경
This commit is contained in:
@@ -28,6 +28,7 @@ export function ItemSelectionModal({
|
||||
alreadySelected = [],
|
||||
uniqueField,
|
||||
onSelect,
|
||||
columnLabels = {},
|
||||
}: ItemSelectionModalProps) {
|
||||
const [localSearchText, setLocalSearchText] = useState("");
|
||||
const [selectedItems, setSelectedItems] = useState<any[]>([]);
|
||||
@@ -92,6 +93,9 @@ export function ItemSelectionModal({
|
||||
);
|
||||
};
|
||||
|
||||
// 이미 추가된 항목 제외한 결과 필터링
|
||||
const filteredResults = results.filter((item) => !isAlreadyAdded(item));
|
||||
|
||||
// 선택된 항목인지 확인
|
||||
const isSelected = (item: any): boolean => {
|
||||
return selectedItems.some((selected) =>
|
||||
@@ -169,13 +173,13 @@ export function ItemSelectionModal({
|
||||
key={col}
|
||||
className="px-4 py-2 text-left font-medium text-muted-foreground"
|
||||
>
|
||||
{col}
|
||||
{columnLabels[col] || col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && results.length === 0 ? (
|
||||
{loading && filteredResults.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={sourceColumns.length + (multiSelect ? 1 : 0)}
|
||||
@@ -185,46 +189,36 @@ export function ItemSelectionModal({
|
||||
<p className="mt-2 text-muted-foreground">검색 중...</p>
|
||||
</td>
|
||||
</tr>
|
||||
) : results.length === 0 ? (
|
||||
) : filteredResults.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={sourceColumns.length + (multiSelect ? 1 : 0)}
|
||||
className="px-4 py-8 text-center text-muted-foreground"
|
||||
>
|
||||
검색 결과가 없습니다
|
||||
{results.length > 0
|
||||
? "모든 항목이 이미 추가되었습니다"
|
||||
: "검색 결과가 없습니다"}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
results.map((item, index) => {
|
||||
const alreadyAdded = isAlreadyAdded(item);
|
||||
filteredResults.map((item, index) => {
|
||||
const selected = isSelected(item);
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={index}
|
||||
className={`border-t transition-colors ${
|
||||
alreadyAdded
|
||||
? "bg-muted/50 opacity-50"
|
||||
: selected
|
||||
selected
|
||||
? "bg-primary/10"
|
||||
: "hover:bg-accent cursor-pointer"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (!alreadyAdded) {
|
||||
handleToggleItem(item);
|
||||
}
|
||||
}}
|
||||
onClick={() => handleToggleItem(item)}
|
||||
>
|
||||
{multiSelect && (
|
||||
<td className="px-4 py-2">
|
||||
<Checkbox
|
||||
checked={selected}
|
||||
disabled={alreadyAdded}
|
||||
onCheckedChange={() => {
|
||||
if (!alreadyAdded) {
|
||||
handleToggleItem(item);
|
||||
}
|
||||
}}
|
||||
onCheckedChange={() => handleToggleItem(item)}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user