feat: [item-master] 항목 탭 검색 기능 추가
- 항목명, 입력타입, 카테고리, 설명, ID로 실시간 필터링 - 검색 결과 건수 표시 및 초기화 버튼
This commit is contained in:
@@ -6,12 +6,14 @@
|
||||
* - item_fields WHERE section_id IS NULL로 통합
|
||||
* - 향후 FieldTab으로 리네임 예정
|
||||
*/
|
||||
import { useState, useMemo } from 'react';
|
||||
import type { ItemMasterField } from '@/contexts/ItemMasterContext';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { getPresetStyle } from '@/lib/utils/status-config';
|
||||
import { Plus, Edit, Trash2 } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, Search, X } from 'lucide-react';
|
||||
|
||||
// 입력방식 옵션 (ItemMasterDataManagement에서 사용하는 상수)
|
||||
const INPUT_TYPE_OPTIONS = [
|
||||
@@ -50,6 +52,21 @@ export function MasterFieldTab({
|
||||
hasUnsavedChanges: _hasUnsavedChanges,
|
||||
pendingChanges: _pendingChanges
|
||||
}: MasterFieldTabProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const filteredFields = useMemo(() => {
|
||||
if (!searchQuery.trim()) return itemMasterFields;
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
return itemMasterFields.filter(field => {
|
||||
const fieldName = field.field_name?.toLowerCase() || '';
|
||||
const fieldType = INPUT_TYPE_OPTIONS.find(t => t.value === field.field_type)?.label?.toLowerCase() || '';
|
||||
const category = field.category?.toLowerCase() || '';
|
||||
const description = field.description?.toLowerCase() || '';
|
||||
const fieldId = String(field.id);
|
||||
return fieldName.includes(query) || fieldType.includes(query) || category.includes(query) || description.includes(query) || fieldId.includes(query);
|
||||
});
|
||||
}, [itemMasterFields, searchQuery]);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -70,6 +87,25 @@ export function MasterFieldTab({
|
||||
<Plus className="h-4 w-4 mr-2" />항목 추가
|
||||
</Button>
|
||||
</div>
|
||||
{itemMasterFields.length > 0 && (
|
||||
<div className="relative mt-3">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="항목명, 입력타입, 카테고리, ID로 검색..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 pr-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{itemMasterFields.length === 0 ? (
|
||||
@@ -81,7 +117,17 @@ export function MasterFieldTab({
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{itemMasterFields.map((field, index) => (
|
||||
{searchQuery && (
|
||||
<p className="text-sm text-muted-foreground mb-2">
|
||||
{filteredFields.length}건 검색됨 (전체 {itemMasterFields.length}건)
|
||||
</p>
|
||||
)}
|
||||
{filteredFields.length === 0 && searchQuery ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-muted-foreground">"{searchQuery}"에 대한 검색 결과가 없습니다</p>
|
||||
</div>
|
||||
) : null}
|
||||
{filteredFields.map((field, index) => (
|
||||
<div key={`masterfield-${field.id}-${index}`} className="flex items-center justify-between p-4 border rounded hover:bg-gray-50 transition-colors">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user