341 lines
14 KiB
TypeScript
341 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import type { SelectDataType } from '@common/business_components/ui/search_input_select';
|
|
import { SelectBox } from '@common/business_components/ui/select';
|
|
|
|
/**
|
|
* 검색 폼 왼쪽 컴포넌트 타입
|
|
*
|
|
* @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;
|
|
setRtnSidoText?: (value: string) => void;
|
|
setRtnSigunText?: (value: string) => void;
|
|
resetTrigger?: boolean;
|
|
isAdmin?: boolean;
|
|
}
|
|
|
|
export type EnvPartSelectDataType = SelectDataType & {
|
|
adstDliStrCd: string,
|
|
}
|
|
|
|
const selectPartData: SelectDataType[] = [
|
|
{ text: "행정별", val: 'A' },
|
|
{ text: "유역별", val: 'R' },
|
|
{ text: "환경청별", val: 'G' },
|
|
];
|
|
|
|
function MapSearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) {
|
|
/******************선택된 데이터******************/
|
|
const [partValue, setPartValue] = useState<string>('A');
|
|
//행정별 시도 시군구
|
|
const [sidoValue, setSidoValue] = useState<string>('0');
|
|
const [sigunValue, setSigunValue] = useState<string>('0');
|
|
const [sidoText, setSidoText] = useState<string>('');
|
|
const [sigunText, setSigunText] = useState<string>('');
|
|
//유역별
|
|
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 [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
|
|
|
|
/****************** 셀렉트 리스트 데이터. ******************/
|
|
// 조회된 조건에 맞는 시도 시군 유역
|
|
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 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) => {
|
|
let selectedSido;
|
|
let selectedSigun;
|
|
let selectedEnvPartSido;
|
|
let selectedEnvPartSigun;
|
|
|
|
switch (type) {
|
|
case 'part':
|
|
setPartValue(val);
|
|
if (setRtnPartValue) {
|
|
setRtnPartValue(val);
|
|
}
|
|
// 구분
|
|
if (val == 'R') {
|
|
initializeMiddleRegionData('0');
|
|
initializeUnitWaterShedData('0');
|
|
} else if (val == 'G') {
|
|
setFilteredEnvPartData([
|
|
{ text: "전체", val: '0', adstDliStrCd: '' },
|
|
...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
|
|
]);
|
|
setEnvPartValue('0');
|
|
initializeCityDataByEnvPartSido('0');
|
|
} else {
|
|
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);
|
|
selectedSido = selectSidoData.find(item => item.val === val);
|
|
setSidoText(selectedSido?.text || '');
|
|
if (setRtnSidoValue) {
|
|
setRtnSidoValue(val);
|
|
}
|
|
if (setRtnSidoText) {
|
|
setRtnSidoText(selectedSido?.text || '');
|
|
}
|
|
initializeSigunData(val);
|
|
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
|
break;
|
|
case 'sigun':
|
|
if (setRtnSigunValue) {
|
|
setRtnSigunValue(val);
|
|
}
|
|
setSigunValue(val);
|
|
selectedSigun = filteredSigunData.find(item => item.val === val);
|
|
if (setRtnSigunText) {
|
|
setRtnSigunText(selectedSigun?.text || '');
|
|
}
|
|
setSigunText(selectedSigun?.text || '');
|
|
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);
|
|
}
|
|
initializeCityDataByEnvPartSido(val);
|
|
onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
|
|
break;
|
|
case 'envPartSido':
|
|
setSidoValue(val);
|
|
selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val);
|
|
setSidoText(selectedEnvPartSido?.text || '');
|
|
if (setRtnEnvPartSidoValue) {
|
|
setRtnEnvPartSidoValue(val);
|
|
}
|
|
initializeCityDataByEnvPartSigun(val);
|
|
onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
|
|
break;
|
|
case 'envPartSigun':
|
|
setSigunValue(val);
|
|
selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val);
|
|
setSigunText(selectedEnvPartSigun?.text || '');
|
|
if (setRtnEnvPartSigunValue) {
|
|
setRtnEnvPartSigunValue(val);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 리셋 함수
|
|
const resetAllValues = () => {
|
|
setPartValue('A');
|
|
setSidoValue('0');
|
|
setSigunValue('0');
|
|
setRegionValue('0');
|
|
setUnitWaterShedValue('0');
|
|
setMiddleRegionValue('0');
|
|
setEnvPartValue('0');
|
|
|
|
setFilteredSigunData([{ text: "전체", val: '0' }]);
|
|
setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
|
|
setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
|
|
setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
|
setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
|
setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
|
|
|
|
if (setRtnPartValue) setRtnPartValue('A');
|
|
if (setRtnSidoValue) setRtnSidoValue('0');
|
|
if (setRtnSigunValue) setRtnSigunValue('0');
|
|
if (setRtnRegionValue) setRtnRegionValue('0');
|
|
if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
|
|
if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
|
|
if (setRtnEnvPartValue) setRtnEnvPartValue('0');
|
|
if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
|
|
if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
|
|
};
|
|
|
|
// 리셋 트리거 변경 감지
|
|
useEffect(() => {
|
|
if (resetTrigger) {
|
|
resetAllValues();
|
|
// 리셋 후 트리거를 false로 설정
|
|
if (setRtnPartValue) {
|
|
setRtnPartValue('0');
|
|
}
|
|
}
|
|
}, [resetTrigger]);
|
|
|
|
return (
|
|
isShowPart ? (
|
|
<div className="flex gap-5">
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'구분'} selectArray={isAdmin ? selectPartData.slice(0, 1) : selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={'w-32'} />
|
|
{partValue === 'R' ? (
|
|
<>
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={'w-44'} />
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={'w-44'} />
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={'w-44'} />
|
|
</>
|
|
) : partValue === 'G' ? (
|
|
<>
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'w-44'} />
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={'w-44'} />
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={'w-44'} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={'w-44'} />
|
|
<SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={'w-44'} />
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-12 gap-5 w-11/12 m-4">
|
|
{children}
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
|
|
export { MapSearchFormLeft };
|