341 lines
15 KiB
TypeScript
341 lines
15 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 };
|