searchFormLeft 변환 (유역,행정 구분별 검색단 세팅) [추후 md파일작성예정]
This commit is contained in:
YangJinSoo94
@@ -1,11 +1,277 @@
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react';
|
||||
import type { SelectDataType } from '../search_input_select';
|
||||
import { SelectBox } from '../select';
|
||||
|
||||
function SearchFormLeft(props: {children: React.ReactNode}) {
|
||||
/**
|
||||
* 검색 폼 왼쪽 컴포넌트 타입
|
||||
*
|
||||
* @param isShowPart 구분 조회 여부
|
||||
* @param children 자식 컴포넌트
|
||||
* @param selectSidoData 시도 데이터
|
||||
* @param selectSigunData 시군구 데이터
|
||||
* @param selectRegionData 유역 데이터
|
||||
* @param selectUnitWaterShedData 단위유역 데이터
|
||||
* @param selectMiddleRegionData 중권역 데이터
|
||||
* @param selectEnvPartData 환경청 데이터
|
||||
* @param selectEnvPartSidoData 환경청 시도 데이터
|
||||
* @param selectEnvPartSigunData 환경청 시군구 데이터
|
||||
* @param setRtnPartValue 부분 값 변경 핸들러
|
||||
*/
|
||||
type SearchFormLeftProps = {
|
||||
isShowPart?: boolean | undefined;
|
||||
children: React.ReactNode;
|
||||
selectSidoData?: SelectDataType[] | [];
|
||||
selectSigunData?: SelectDataType[] | [];
|
||||
selectRegionData?: SelectDataType[] | [];
|
||||
selectUnitWaterShedData?: SelectDataType[] | [];
|
||||
selectMiddleRegionData?: SelectDataType[] | [];
|
||||
selectEnvPartData?: EnvPartSelectDataType[] | [];
|
||||
selectEnvPartSidoData?: SelectDataType[] | [];
|
||||
selectEnvPartSigunData?: SelectDataType[] | [];
|
||||
|
||||
setRtnPartValue?: (value: string) => void;
|
||||
setRtnSidoValue?: (value: string) => void;
|
||||
setRtnSigunValue?: (value: string) => void;
|
||||
setRtnRegionValue?: (value: string) => void;
|
||||
setRtnUnitWaterShedValue?: (value: string) => void;
|
||||
setRtnMiddleRegionValue?: (value: string) => void;
|
||||
setRtnEnvPartValue?: (value: string) => void;
|
||||
setRtnEnvPartSidoValue?: (value: string) => void;
|
||||
setRtnEnvPartSigunValue?: (value: string) => void;
|
||||
}
|
||||
|
||||
type EnvPartSelectDataType = SelectDataType & {
|
||||
adstDliStrCd: string,
|
||||
}
|
||||
|
||||
const selectPartData:SelectDataType[] = [
|
||||
{ text: "행정별", val: '0' },
|
||||
{ text: "유역별", val: '01' },
|
||||
{ text: "환경청별", val: '02' },
|
||||
];
|
||||
|
||||
function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], selectEnvPartSidoData = [], selectEnvPartSigunData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) {
|
||||
const [partValue, setPartValue] = useState<string>('0');
|
||||
const [showPart, setShowPart] = useState<string>('');
|
||||
const [sidoValue, setSidoValue] = useState<string>('0');
|
||||
const [sigunValue, setSigunValue] = useState<string>('0');
|
||||
const [regionValue, setRegionValue] = useState<string>('0');
|
||||
const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
|
||||
const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
|
||||
const [envPartValue, setEnvPartValue] = useState<string>('0');
|
||||
const [envPartSidoValue, setEnvPartSidoValue] = useState<string>('0');
|
||||
const [envPartSigunValue, setEnvPartSigunValue] = useState<string>('0');
|
||||
|
||||
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
|
||||
const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]);
|
||||
const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]);
|
||||
const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
|
||||
const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
|
||||
|
||||
// 시군구 세팅
|
||||
const initializeSigunData = (sidoCd: string) => {
|
||||
if (sidoCd === '0') {
|
||||
setSigunValue('0');
|
||||
setFilteredSigunData([{ text: "전체", val: '0' }]);
|
||||
} else {
|
||||
const newFilteredData = [
|
||||
{ text: "전체", val: '0' },
|
||||
...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
|
||||
];
|
||||
setSigunValue('0');
|
||||
setFilteredSigunData(newFilteredData);
|
||||
}
|
||||
}
|
||||
|
||||
// 단위유역 세팅
|
||||
const initializeUnitWaterShedData = (regionCd: string) => {
|
||||
if(regionCd === '0') {
|
||||
setUnitWaterShedValue('0');
|
||||
setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
|
||||
} else {
|
||||
const newFilteredData = [
|
||||
{ text: "전체", val: '0' },
|
||||
...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
|
||||
];
|
||||
setUnitWaterShedValue('0');
|
||||
setFilteredUnitWaterShedData(newFilteredData);
|
||||
}
|
||||
}
|
||||
|
||||
// 중권역 세팅
|
||||
const initializeMiddleRegionData = (unitWaterShedCd: string) => {
|
||||
if(unitWaterShedCd === '0') {
|
||||
setMiddleRegionValue('0');
|
||||
setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
|
||||
} else {
|
||||
const newFilteredData = [
|
||||
{ text: "전체", val: '0' },
|
||||
...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
|
||||
];
|
||||
setMiddleRegionValue('0');
|
||||
setFilteredMiddleRegionData(newFilteredData);
|
||||
}
|
||||
}
|
||||
|
||||
// 환경청 세팅 - 시도
|
||||
const initializeCityDataByEnvPartSido = (envPartCd: string) => {
|
||||
const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
|
||||
const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
|
||||
|
||||
// 시군구 데이터
|
||||
const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
|
||||
|
||||
// 환경청 시도 데이터
|
||||
const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
|
||||
const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
|
||||
setFilteredEnvPartSigunDataSelected(envSigunData);
|
||||
|
||||
setFilteredEnvPartSidoData([
|
||||
{ text: "전체", val: '0', adstDliStrCd:'' },
|
||||
...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd:'' }))
|
||||
]);
|
||||
}
|
||||
|
||||
// 환경청 세팅 - 시군구
|
||||
const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
|
||||
const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
|
||||
setFilteredEnvPartSigunData([
|
||||
{ text: "전체", val: '0'},
|
||||
...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
|
||||
]);
|
||||
}
|
||||
|
||||
const onSelectValue = (val: string, type: string) => {
|
||||
switch(type) {
|
||||
case 'part':
|
||||
setPartValue(val);
|
||||
if (setRtnPartValue) {
|
||||
setRtnPartValue(val);
|
||||
}
|
||||
// 구분
|
||||
if(val == '01') {
|
||||
setShowPart('01');
|
||||
initializeMiddleRegionData('0');
|
||||
initializeUnitWaterShedData('0');
|
||||
} else if(val == '02') {
|
||||
setShowPart('02');
|
||||
setFilteredEnvPartData([
|
||||
{ text: "전체", val: '0', adstDliStrCd:'' },
|
||||
...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
|
||||
]);
|
||||
setEnvPartValue('0');
|
||||
onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido');
|
||||
onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun');
|
||||
} else {
|
||||
setShowPart('0');
|
||||
initializeSigunData('0');
|
||||
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
}
|
||||
|
||||
// 다른 selectbox 전체로 초기화
|
||||
onSelectValue(selectSidoData[0]?.val || '0', 'sido');
|
||||
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
break;
|
||||
case 'sido':
|
||||
setSidoValue(val);
|
||||
if (setRtnSidoValue) {
|
||||
setRtnSidoValue(val);
|
||||
}
|
||||
initializeSigunData(val);
|
||||
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
break;
|
||||
case 'sigun':
|
||||
if (setRtnSigunValue) {
|
||||
setRtnSigunValue(val);
|
||||
}
|
||||
setSigunValue(val);
|
||||
break;
|
||||
|
||||
// 유역 세팅
|
||||
case 'region' :
|
||||
setRegionValue(val);
|
||||
if (setRtnRegionValue) {
|
||||
setRtnRegionValue(val);
|
||||
}
|
||||
initializeUnitWaterShedData(val);
|
||||
onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
|
||||
break;
|
||||
case 'unitWaterShed' :
|
||||
setUnitWaterShedValue(val);
|
||||
if (setRtnUnitWaterShedValue) {
|
||||
setRtnUnitWaterShedValue(val);
|
||||
}
|
||||
initializeMiddleRegionData(val);
|
||||
onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
|
||||
break;
|
||||
case 'middleRegion' :
|
||||
setMiddleRegionValue(val);
|
||||
if (setRtnMiddleRegionValue) {
|
||||
setRtnMiddleRegionValue(val);
|
||||
}
|
||||
break;
|
||||
|
||||
// 환경청 세팅
|
||||
case 'envPart' :
|
||||
setEnvPartValue(val);
|
||||
if (setRtnEnvPartValue) {
|
||||
setRtnEnvPartValue(val);
|
||||
}
|
||||
onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido');
|
||||
onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun');
|
||||
initializeCityDataByEnvPartSido(val);
|
||||
break;
|
||||
case 'envPartSido' :
|
||||
setEnvPartSidoValue(val);
|
||||
if (setRtnEnvPartSidoValue) {
|
||||
setRtnEnvPartSidoValue(val);
|
||||
}
|
||||
onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun');
|
||||
initializeCityDataByEnvPartSigun(val);
|
||||
break;
|
||||
case 'envPartSigun' :
|
||||
setEnvPartSigunValue(val);
|
||||
if (setRtnEnvPartSigunValue) {
|
||||
setRtnEnvPartSigunValue(val);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
isShowPart ? (
|
||||
<div className="grid grid-cols-12 gap-4 w-4/5 mx-4">
|
||||
{props.children}
|
||||
<SelectBox className="col-span-3" label={'구분'} selectArray={selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/>
|
||||
{showPart === '01' ? (
|
||||
<>
|
||||
<SelectBox className="col-span-3" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined}/>
|
||||
<SelectBox className="col-span-3" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={undefined}/>
|
||||
<SelectBox className="col-span-3" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={undefined}/>
|
||||
</>
|
||||
) : showPart === '02' ? (
|
||||
<>
|
||||
<SelectBox className="col-span-3" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={undefined}/>
|
||||
<SelectBox className="col-span-3" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={undefined}/>
|
||||
<SelectBox className="col-span-3" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={undefined}/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
|
||||
<SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
|
||||
</>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-12 gap-4 w-4/5 mx-4">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export { SearchFormLeft };
|
||||
export { SearchFormLeft };
|
||||
|
||||
Reference in New Issue
Block a user