Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry
This commit is contained in:
commit
f7abbdc973
9
package-lock.json
generated
9
package-lock.json
generated
@ -14,7 +14,6 @@
|
|||||||
"@tanstack/react-query-devtools": "^5.71.0",
|
"@tanstack/react-query-devtools": "^5.71.0",
|
||||||
"@types/nodemailer": "^6.4.17",
|
"@types/nodemailer": "^6.4.17",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
"crypto-js": "^4.2.0",
|
|
||||||
"env-cmd": "^10.1.0",
|
"env-cmd": "^10.1.0",
|
||||||
"iron-session": "^8.0.4",
|
"iron-session": "^8.0.4",
|
||||||
"lucide": "^0.503.0",
|
"lucide": "^0.503.0",
|
||||||
@ -33,7 +32,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/crypto-js": "^4.2.2",
|
|
||||||
"@types/mysql": "^2.15.27",
|
"@types/mysql": "^2.15.27",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
@ -2142,13 +2140,6 @@
|
|||||||
"integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
|
"integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@types/crypto-js": {
|
|
||||||
"version": "4.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
|
|
||||||
"integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@types/mysql": {
|
"node_modules/@types/mysql": {
|
||||||
"version": "2.15.27",
|
"version": "2.15.27",
|
||||||
"resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.27.tgz",
|
"resolved": "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.27.tgz",
|
||||||
|
|||||||
@ -21,7 +21,6 @@
|
|||||||
"@tanstack/react-query-devtools": "^5.71.0",
|
"@tanstack/react-query-devtools": "^5.71.0",
|
||||||
"@types/nodemailer": "^6.4.17",
|
"@types/nodemailer": "^6.4.17",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
"crypto-js": "^4.2.0",
|
|
||||||
"env-cmd": "^10.1.0",
|
"env-cmd": "^10.1.0",
|
||||||
"iron-session": "^8.0.4",
|
"iron-session": "^8.0.4",
|
||||||
"lucide": "^0.503.0",
|
"lucide": "^0.503.0",
|
||||||
@ -40,7 +39,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/crypto-js": "^4.2.2",
|
|
||||||
"@types/mysql": "^2.15.27",
|
"@types/mysql": "^2.15.27",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
import SuitableDownloadPdf from '@/components/pdf/SuitableDownloadPdf'
|
|
||||||
|
|
||||||
export default function page() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SuitableDownloadPdf />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from 'react'
|
|
||||||
import generatePDF, { Margin, Options, Resolution, usePDF } from 'react-to-pdf'
|
|
||||||
import { useSuitable } from '@/hooks/useSuitable'
|
|
||||||
import { useSuitableStore } from '@/store/useSuitableStore'
|
|
||||||
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
|
|
||||||
|
|
||||||
export default function SuitableDownloadPdf() {
|
|
||||||
const [fileName, setFileName] = useState<string[]>([])
|
|
||||||
const [createTime, setCreateTime] = useState('')
|
|
||||||
const targetRef = useRef<HTMLDivElement>(null)
|
|
||||||
const { toCodeName, toSuitableDetail, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
|
|
||||||
const { selectedCategory, suitableCommCode, selectedItemsSearching, setSelectedItemsSearching } = useSuitableStore()
|
|
||||||
|
|
||||||
const handleDownPdf = () => {
|
|
||||||
const options: Options = {
|
|
||||||
filename: `${fileName.join('_')}.pdf`,
|
|
||||||
method: 'open' as const,
|
|
||||||
resolution: Resolution.HIGH,
|
|
||||||
page: {
|
|
||||||
margin: Margin.SMALL,
|
|
||||||
format: 'A4',
|
|
||||||
orientation: 'landscape' as const,
|
|
||||||
},
|
|
||||||
canvas: {
|
|
||||||
mimeType: 'image/png' as const,
|
|
||||||
qualityRatio: 1,
|
|
||||||
},
|
|
||||||
overrides: {
|
|
||||||
pdf: {
|
|
||||||
compress: true,
|
|
||||||
},
|
|
||||||
canvas: {
|
|
||||||
useCORS: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
generatePDF(targetRef, options)
|
|
||||||
// generatePDF(targetRef, { filename: 'page.pdf' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatDateString = () => {
|
|
||||||
const now = new Date()
|
|
||||||
const year = now.getFullYear()
|
|
||||||
const month = now.getMonth() + 1
|
|
||||||
const day = now.getDate()
|
|
||||||
const hours = now.getHours()
|
|
||||||
const minutes = now.getMinutes()
|
|
||||||
|
|
||||||
return `${year}年${month}月${day}日 ${hours}:${minutes.toString().padStart(2, '0')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCreateTime(formatDateString())
|
|
||||||
setFileName([
|
|
||||||
`(${suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp})`,
|
|
||||||
'屋根材適合表',
|
|
||||||
])
|
|
||||||
if (!selectedItemsSearching) {
|
|
||||||
setSelectedItemsSearching(true)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (!selectedCategory) return <div>잘못된 접근입니다.</div>
|
|
||||||
if (isSelectedSuitablesLoading) return <div>Loading...</div>
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* <button onClick={() => handleDownPdf()}>PDFダウンロード</button> */}
|
|
||||||
<div className="pdf-table-wrap" ref={targetRef}>
|
|
||||||
<div className="pdf-intro-page">
|
|
||||||
<div className="pdf-intro-tit-wrap">
|
|
||||||
<div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
|
|
||||||
<div className="pdf-intro-tit mb20">{fileName.join(' ')}</div>
|
|
||||||
<div className="pdf-intro-date">{createTime}</div>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-intro-cont-wrap">
|
|
||||||
<p>本適合表は参考資料としてご使用下さい。</p>
|
|
||||||
<p>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</p>
|
|
||||||
<p>又、現場環境(働き、勾配、瓦桟木条件等)により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。</p>
|
|
||||||
<p>屋根材以外の設置条件(垂木、野地板等の設置基準)も必ずご確認下さい。</p>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-intro-foot-date">{createTime}</div>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-table-content">
|
|
||||||
<div className="pdf-table-grid-wrap">
|
|
||||||
{selectedSuitables?.map((item: Suitable) => (
|
|
||||||
<div className="pdf-table-card" key={item.id}>
|
|
||||||
<div className="pdf-table-tit-wrap">
|
|
||||||
<span>{item.productName}</span>
|
|
||||||
<span>{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</span>
|
|
||||||
<span>{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</span>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-roof-table">
|
|
||||||
<table>
|
|
||||||
<colgroup>
|
|
||||||
<col width={'18%'} />
|
|
||||||
<col width={'23%'} />
|
|
||||||
<col width={'18%'} />
|
|
||||||
<col />
|
|
||||||
</colgroup>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>金具タイプ</th>
|
|
||||||
<th>金具名</th>
|
|
||||||
<th>設置可否</th>
|
|
||||||
<th>備考</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
|
|
||||||
<tr key={subItem.id}>
|
|
||||||
<td>{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</td>
|
|
||||||
<td>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</td>
|
|
||||||
<td>{subItem.trestleManufacturerProductName}</td>
|
|
||||||
<td>{subItem.memo}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="pdf-intro-foot-date">{createTime}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -5,16 +5,14 @@ import { useCallback, useEffect, useState } from 'react'
|
|||||||
import SuitableDetailPopupButton from './SuitableDetailPopupButton'
|
import SuitableDetailPopupButton from './SuitableDetailPopupButton'
|
||||||
import { useSuitable } from '@/hooks/useSuitable'
|
import { useSuitable } from '@/hooks/useSuitable'
|
||||||
import { usePopupController } from '@/store/popupController'
|
import { usePopupController } from '@/store/popupController'
|
||||||
import { useSuitableStore } from '@/store/useSuitableStore'
|
|
||||||
import { useSpinnerStore } from '@/store/spinnerStore'
|
|
||||||
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
|
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
|
||||||
|
|
||||||
export default function SuitableDetailPopup() {
|
export default function SuitableDetailPopup() {
|
||||||
const popupController = usePopupController()
|
const popupController = usePopupController()
|
||||||
const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
|
const { toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo, getSelectedSuitables } = useSuitable()
|
||||||
const { setSelectedItemsSearching } = useSuitableStore()
|
|
||||||
|
|
||||||
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
||||||
|
const [selectedSuitables, setSelectedSuitables] = useState<Suitable[]>([])
|
||||||
|
|
||||||
/* 아이템 열기/닫기 */
|
/* 아이템 열기/닫기 */
|
||||||
const toggleItemOpen = useCallback((itemId: number) => {
|
const toggleItemOpen = useCallback((itemId: number) => {
|
||||||
@ -25,13 +23,10 @@ export default function SuitableDetailPopup() {
|
|||||||
})
|
})
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
/* 데이터 로딩 상태 처리 */
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
useSpinnerStore.getState().setIsShow(isSelectedSuitablesLoading)
|
getSelectedSuitables().then((res) => {
|
||||||
}, [isSelectedSuitablesLoading])
|
setSelectedSuitables(res)
|
||||||
|
})
|
||||||
useEffect(() => {
|
|
||||||
setSelectedItemsSearching(true)
|
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -19,6 +19,7 @@ export default function SuitableDetailPopupButton() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className="float-btn-wrap">
|
||||||
<div className="btn-flex-wrap com">
|
<div className="btn-flex-wrap com">
|
||||||
<div className="btn-bx">
|
<div className="btn-bx">
|
||||||
<button className="btn-frame n-blue icon" onClick={handleClosePopup}>
|
<button className="btn-frame n-blue icon" onClick={handleClosePopup}>
|
||||||
@ -36,5 +37,6 @@ export default function SuitableDetailPopupButton() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,7 +21,7 @@ export default function SuitableList() {
|
|||||||
isLoading,
|
isLoading,
|
||||||
suitableCheckIcon,
|
suitableCheckIcon,
|
||||||
} = useSuitable()
|
} = useSuitable()
|
||||||
const { selectedItems, addSelectedItem, removeSelectedItem, setSelectedItemsSearching } = useSuitableStore()
|
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
|
||||||
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
||||||
const observerTarget = useRef<HTMLDivElement>(null)
|
const observerTarget = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
@ -49,7 +49,6 @@ export default function SuitableList() {
|
|||||||
/* 아이템 클릭 */
|
/* 아이템 클릭 */
|
||||||
const handleItemClick = useCallback(
|
const handleItemClick = useCallback(
|
||||||
(mainId: number, detailId?: number, detailIds?: Set<number>): void => {
|
(mainId: number, detailId?: number, detailIds?: Set<number>): void => {
|
||||||
setSelectedItemsSearching(false)
|
|
||||||
isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
|
isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
|
||||||
},
|
},
|
||||||
[isItemSelected, addSelectedItem, removeSelectedItem],
|
[isItemSelected, addSelectedItem, removeSelectedItem],
|
||||||
|
|||||||
@ -7,11 +7,12 @@ import type { CommCode } from '@/types/CommCode'
|
|||||||
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
|
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
|
||||||
|
|
||||||
export default function SuitableSearch() {
|
export default function SuitableSearch() {
|
||||||
const [searchValue, setSearchValue] = useState('')
|
const [searchValue, setSearchValue] = useState<string>('')
|
||||||
|
|
||||||
const { getSuitableCommCode, clearSuitableStore } = useSuitable()
|
const { getSuitableCommCode, clearSuitableStore } = useSuitable()
|
||||||
const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
|
const { suitableCommCode, searchCategory, setSearchCategory, setSearchKeyword } = useSuitableStore()
|
||||||
|
|
||||||
|
/* 키워드 입력 글자 제한 */
|
||||||
const handleInputChange = (value: string) => {
|
const handleInputChange = (value: string) => {
|
||||||
if (Array.from(value).length > 30) {
|
if (Array.from(value).length > 30) {
|
||||||
alert('検索ワードは最大30文字まで入力できます。')
|
alert('検索ワードは最大30文字まで入力できます。')
|
||||||
@ -21,6 +22,7 @@ export default function SuitableSearch() {
|
|||||||
setSearchValue(value)
|
setSearchValue(value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 키워드 검색 */
|
||||||
const handleInputSearch = async () => {
|
const handleInputSearch = async () => {
|
||||||
if (!searchValue.trim()) {
|
if (!searchValue.trim()) {
|
||||||
alert('屋根材の製品名を入力してください。')
|
alert('屋根材の製品名を入力してください。')
|
||||||
@ -29,6 +31,7 @@ export default function SuitableSearch() {
|
|||||||
setSearchKeyword(searchValue)
|
setSearchKeyword(searchValue)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 키워드 초기화 */
|
||||||
const handleInputClear = () => {
|
const handleInputClear = () => {
|
||||||
setSearchValue('')
|
setSearchValue('')
|
||||||
clearSuitableStore({ items: true, keyword: true })
|
clearSuitableStore({ items: true, keyword: true })
|
||||||
@ -42,7 +45,7 @@ export default function SuitableSearch() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="sale-form-bx">
|
<div className="sale-form-bx">
|
||||||
<select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
|
<select className="select-form" name="" id="" value={searchCategory || ''} onChange={(e) => setSearchCategory(e.target.value)}>
|
||||||
<option value="">屋根材を選択してください.</option>
|
<option value="">屋根材を選択してください.</option>
|
||||||
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.map((category: CommCode, index: number) => (
|
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.map((category: CommCode, index: number) => (
|
||||||
<option key={index} value={category.code}>
|
<option key={index} value={category.code}>
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
|
import { useInfiniteQuery } from '@tanstack/react-query'
|
||||||
import { SHA256 } from 'crypto-js'
|
|
||||||
import { transformObjectKeys } from '@/libs/axios'
|
import { transformObjectKeys } from '@/libs/axios'
|
||||||
import { useSuitableStore } from '@/store/useSuitableStore'
|
import { useSuitableStore } from '@/store/useSuitableStore'
|
||||||
import { useAxios } from './useAxios'
|
import { useAxios } from './useAxios'
|
||||||
@ -13,13 +12,12 @@ export function useSuitable() {
|
|||||||
itemPerPage,
|
itemPerPage,
|
||||||
suitableCommCode,
|
suitableCommCode,
|
||||||
setSuitableCommCode,
|
setSuitableCommCode,
|
||||||
selectedCategory,
|
searchCategory,
|
||||||
clearSelectedCategory,
|
clearSearchCategory,
|
||||||
searchKeyword,
|
searchKeyword,
|
||||||
clearSearchKeyword,
|
clearSearchKeyword,
|
||||||
selectedItems,
|
selectedItems,
|
||||||
clearSelectedItems,
|
clearSelectedItems,
|
||||||
selectedItemsSearching,
|
|
||||||
} = useSuitableStore()
|
} = useSuitableStore()
|
||||||
|
|
||||||
const getSuitables = async ({
|
const getSuitables = async ({
|
||||||
@ -50,7 +48,7 @@ export function useSuitable() {
|
|||||||
const getSuitableIds = async (): Promise<SuitableIds[]> => {
|
const getSuitableIds = async (): Promise<SuitableIds[]> => {
|
||||||
try {
|
try {
|
||||||
const params: Record<string, string> = {}
|
const params: Record<string, string> = {}
|
||||||
if (selectedCategory) params.category = selectedCategory
|
if (searchCategory) params.category = searchCategory
|
||||||
if (searchKeyword) params.keyword = searchKeyword
|
if (searchKeyword) params.keyword = searchKeyword
|
||||||
const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
|
const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
|
||||||
return response.data
|
return response.data
|
||||||
@ -118,13 +116,13 @@ export function useSuitable() {
|
|||||||
// isError,
|
// isError,
|
||||||
// error,
|
// error,
|
||||||
} = useInfiniteQuery<Suitable[]>({
|
} = useInfiniteQuery<Suitable[]>({
|
||||||
queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
|
queryKey: ['suitables', 'list', searchCategory, searchKeyword],
|
||||||
queryFn: async (context) => {
|
queryFn: async (context) => {
|
||||||
const pageParam = context.pageParam as number
|
const pageParam = context.pageParam as number
|
||||||
if (pageParam === 1) clearSuitableStore({ items: true })
|
if (pageParam === 1) clearSuitableStore({ items: true })
|
||||||
return await getSuitables({
|
return await getSuitables({
|
||||||
pageNumber: pageParam,
|
pageNumber: pageParam,
|
||||||
...(selectedCategory && { category: selectedCategory }),
|
...(searchCategory && { category: searchCategory }),
|
||||||
...(searchKeyword && { keyword: searchKeyword }),
|
...(searchKeyword && { keyword: searchKeyword }),
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -134,48 +132,12 @@ export function useSuitable() {
|
|||||||
initialPageParam: 1,
|
initialPageParam: 1,
|
||||||
staleTime: 1000 * 60 * 10,
|
staleTime: 1000 * 60 * 10,
|
||||||
gcTime: 1000 * 60 * 10,
|
gcTime: 1000 * 60 * 10,
|
||||||
enabled: selectedCategory !== '' || searchKeyword !== '',
|
enabled: searchCategory !== '' || searchKeyword !== '',
|
||||||
})
|
|
||||||
|
|
||||||
const serializeSelectedItems = (): { ids: string; detailIds: string } => {
|
|
||||||
const ids: string[] = []
|
|
||||||
const detailIds: string[] = []
|
|
||||||
for (const [key, value] of selectedItems) {
|
|
||||||
ids.push(String(key))
|
|
||||||
for (const id of value) detailIds.push(String(id))
|
|
||||||
}
|
|
||||||
return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
|
|
||||||
}
|
|
||||||
|
|
||||||
const getSelectedItemsHash = (): string => {
|
|
||||||
const entries = Array.from(selectedItems.entries())
|
|
||||||
.map(([key, value]) => `${key}:${Array.from(value).sort().join(',')}`)
|
|
||||||
.sort()
|
|
||||||
.join('|')
|
|
||||||
return SHA256(entries).toString()
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: selectedSuitables,
|
|
||||||
isLoading: isSelectedSuitablesLoading,
|
|
||||||
// refetch: refetchSelectedSuitables,
|
|
||||||
} = useQuery<Suitable[]>({
|
|
||||||
queryKey: ['suitables', 'selectedItems', getSelectedItemsHash(), selectedItemsSearching],
|
|
||||||
queryFn: async () => {
|
|
||||||
const { ids, detailIds } = serializeSelectedItems()
|
|
||||||
return await getSuitableDetails(ids, detailIds)
|
|
||||||
},
|
|
||||||
staleTime: Infinity,
|
|
||||||
gcTime: Infinity,
|
|
||||||
enabled: selectedItemsSearching,
|
|
||||||
refetchOnMount: false,
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
refetchOnReconnect: false,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const clearSuitableStore = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
|
const clearSuitableStore = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
|
||||||
if (items) clearSelectedItems()
|
if (items) clearSelectedItems()
|
||||||
if (category) clearSelectedCategory()
|
if (category) clearSearchCategory()
|
||||||
if (keyword) clearSearchKeyword()
|
if (keyword) clearSearchKeyword()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -198,11 +160,26 @@ export function useSuitable() {
|
|||||||
return `${value}で設置可`
|
return `${value}で設置可`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const serializeSelectedItems = (): { ids: string; detailIds: string } => {
|
||||||
|
const ids: string[] = []
|
||||||
|
const detailIds: string[] = []
|
||||||
|
for (const [key, value] of selectedItems) {
|
||||||
|
ids.push(String(key))
|
||||||
|
for (const id of value) detailIds.push(String(id))
|
||||||
|
}
|
||||||
|
return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSelectedSuitables = async (): Promise<Suitable[]> => {
|
||||||
|
const { ids, detailIds } = serializeSelectedItems()
|
||||||
|
return await getSuitableDetails(ids, detailIds)
|
||||||
|
}
|
||||||
|
|
||||||
const downloadSuitablePdf = async (): Promise<void> => {
|
const downloadSuitablePdf = async (): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
const { ids, detailIds } = serializeSelectedItems()
|
const { ids, detailIds } = serializeSelectedItems()
|
||||||
const fileTitle = `(${
|
const fileTitle = `(${
|
||||||
suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp
|
suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === searchCategory)?.codeJp
|
||||||
}) 屋根材適合表`
|
}) 屋根材適合表`
|
||||||
|
|
||||||
const form = document.createElement('form')
|
const form = document.createElement('form')
|
||||||
@ -240,7 +217,6 @@ export function useSuitable() {
|
|||||||
return {
|
return {
|
||||||
getSuitables,
|
getSuitables,
|
||||||
getSuitableIds,
|
getSuitableIds,
|
||||||
getSuitableDetails,
|
|
||||||
getSuitableCommCode,
|
getSuitableCommCode,
|
||||||
toCodeName,
|
toCodeName,
|
||||||
toSuitableDetail,
|
toSuitableDetail,
|
||||||
@ -250,8 +226,7 @@ export function useSuitable() {
|
|||||||
hasNextPage,
|
hasNextPage,
|
||||||
isFetchingNextPage,
|
isFetchingNextPage,
|
||||||
isLoading,
|
isLoading,
|
||||||
selectedSuitables,
|
getSelectedSuitables,
|
||||||
isSelectedSuitablesLoading,
|
|
||||||
clearSuitableStore,
|
clearSuitableStore,
|
||||||
suitableCheckIcon,
|
suitableCheckIcon,
|
||||||
suitableCheckMemo,
|
suitableCheckMemo,
|
||||||
|
|||||||
@ -11,43 +11,38 @@ interface SuitableState {
|
|||||||
/* 공통코드 설정 */
|
/* 공통코드 설정 */
|
||||||
setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
|
setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
|
||||||
|
|
||||||
/* 선택된 카테고리 */
|
/* 검색 카테고리 */
|
||||||
selectedCategory: string
|
searchCategory: string
|
||||||
/* 선택된 카테고리 설정 */
|
/* 검색 카테고리 설정 */
|
||||||
setSelectedCategory: (category: string) => void
|
setSearchCategory: (category: string) => void
|
||||||
/* 선택된 카테고리 초기화 */
|
/* 검색 카테고리 초기화 */
|
||||||
clearSelectedCategory: () => void
|
clearSearchCategory: () => void
|
||||||
|
|
||||||
/* 검색 값 */
|
/* 검색 키워드 */
|
||||||
searchKeyword: string
|
searchKeyword: string
|
||||||
/* 검색 값 설정 */
|
/* 검색 키워드 설정 */
|
||||||
setSearchKeyword: (value: string) => void
|
setSearchKeyword: (value: string) => void
|
||||||
/* 검색 값 초기화 */
|
/* 검색 키워드 초기화 */
|
||||||
clearSearchKeyword: () => void
|
clearSearchKeyword: () => void
|
||||||
|
|
||||||
/* 선택된 아이템 리스트 */
|
/* 선택된 아이템 리스트 */
|
||||||
selectedItems: Map<number, Set<number>>
|
selectedItems: Map<number, Set<number>>
|
||||||
/* 선택 아이템 추가 */
|
/* 선택 아이템 추가 */
|
||||||
addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => void
|
addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => void
|
||||||
/* 아이템 전체 추가 */
|
/* 선택 아이템 전체 추가 */
|
||||||
addAllSelectedItem: (suitableIds: SuitableIds[]) => void
|
addAllSelectedItem: (suitableIds: SuitableIds[]) => void
|
||||||
/* 선택된 아이템 제거 */
|
/* 선택 아이템 제거 */
|
||||||
removeSelectedItem: (mainId: number, detailId?: number) => void
|
removeSelectedItem: (mainId: number, detailId?: number) => void
|
||||||
/* 선택된 아이템 모두 제거 */
|
/* 선택 아이템 모두 제거 */
|
||||||
clearSelectedItems: () => void
|
clearSelectedItems: () => void
|
||||||
/* 선택된 아이템 검색 상태 */
|
|
||||||
selectedItemsSearching: boolean
|
|
||||||
/* 선택된 아이템 검색 상태 설정 */
|
|
||||||
setSelectedItemsSearching: (value: boolean) => void
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useSuitableStore = create<SuitableState>((set) => ({
|
export const useSuitableStore = create<SuitableState>((set) => ({
|
||||||
itemPerPage: 100 as number,
|
itemPerPage: 100 as number,
|
||||||
suitableCommCode: new Map() as Map<string, CommCode[]>,
|
suitableCommCode: new Map() as Map<string, CommCode[]>,
|
||||||
selectedCategory: '' as string,
|
searchCategory: '' as string,
|
||||||
searchKeyword: '' as string,
|
searchKeyword: '' as string,
|
||||||
selectedItems: new Map() as Map<number, Set<number>>,
|
selectedItems: new Map() as Map<number, Set<number>>,
|
||||||
selectedItemsSearching: false as boolean,
|
|
||||||
|
|
||||||
/* 공통코드 설정 */
|
/* 공통코드 설정 */
|
||||||
setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
|
setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
|
||||||
@ -55,20 +50,20 @@ export const useSuitableStore = create<SuitableState>((set) => ({
|
|||||||
suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
|
suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
|
||||||
})),
|
})),
|
||||||
|
|
||||||
/* 선택된 카테고리 설정 */
|
/* 검색 카테고리 설정 */
|
||||||
setSelectedCategory: (category: string) => set({ selectedCategory: category }),
|
setSearchCategory: (category: string) => set({ searchCategory: category }),
|
||||||
/* 선택된 카테고리 초기화 */
|
/* 검색 카테고리 초기화 */
|
||||||
clearSelectedCategory: () => set({ selectedCategory: '' }),
|
clearSearchCategory: () => set({ searchCategory: '' }),
|
||||||
|
|
||||||
/* 검색 값 설정 */
|
/* 검색 키워드 설정 */
|
||||||
setSearchKeyword: (value: string) => set({ searchKeyword: value }),
|
setSearchKeyword: (value: string) => set({ searchKeyword: value }),
|
||||||
/* 검색 값 초기화 */
|
/* 검색 키워드 초기화 */
|
||||||
clearSearchKeyword: () => set({ searchKeyword: '' }),
|
clearSearchKeyword: () => set({ searchKeyword: '' }),
|
||||||
|
|
||||||
/* 선택된 아이템 추가 */
|
/* 선택 아이템 추가 */
|
||||||
addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
|
addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
|
||||||
if (detailId) {
|
if (detailId) {
|
||||||
// 디테일(하위) 아이템 추가
|
/* 디테일(하위) 아이템 추가 */
|
||||||
set((state) => {
|
set((state) => {
|
||||||
const detailSet = state.selectedItems.get(mainId) || new Set()
|
const detailSet = state.selectedItems.get(mainId) || new Set()
|
||||||
detailSet.add(detailId)
|
detailSet.add(detailId)
|
||||||
@ -76,7 +71,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
|
|||||||
return { selectedItems: state.selectedItems }
|
return { selectedItems: state.selectedItems }
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
// 메인(상위) 아이템 추가
|
/* 메인(상위) 아이템 추가 */
|
||||||
set((state) => {
|
set((state) => {
|
||||||
state.selectedItems.set(mainId, detailIds || new Set())
|
state.selectedItems.set(mainId, detailIds || new Set())
|
||||||
return { selectedItems: state.selectedItems }
|
return { selectedItems: state.selectedItems }
|
||||||
@ -84,7 +79,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 아이템 전체 추가 */
|
/* 선택 아이템 전체 추가 */
|
||||||
addAllSelectedItem: (suitableIds: SuitableIds[]) => {
|
addAllSelectedItem: (suitableIds: SuitableIds[]) => {
|
||||||
set(() => {
|
set(() => {
|
||||||
const newSelectedItems = new Map()
|
const newSelectedItems = new Map()
|
||||||
@ -95,31 +90,28 @@ export const useSuitableStore = create<SuitableState>((set) => ({
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 선택된 아이템 제거 */
|
/* 선택 아이템 제거 */
|
||||||
removeSelectedItem: (mainId: number, detailId?: number) => {
|
removeSelectedItem: (mainId: number, detailId?: number) => {
|
||||||
set((state) => {
|
set((state) => {
|
||||||
const newSelectedItems = new Map(state.selectedItems)
|
const newSelectedItems = new Map(state.selectedItems)
|
||||||
|
|
||||||
if (!detailId) {
|
if (!detailId) {
|
||||||
// 메인(상위) 아이템 제거
|
/* 메인(상위) 아이템 제거 */
|
||||||
newSelectedItems.delete(mainId)
|
newSelectedItems.delete(mainId)
|
||||||
return { selectedItems: newSelectedItems }
|
return { selectedItems: newSelectedItems }
|
||||||
}
|
}
|
||||||
|
|
||||||
// 디테일(하위) 아이템 제거
|
/* 디테일(하위) 아이템 제거 */
|
||||||
const detailSet = state.selectedItems.get(mainId) || new Set()
|
const detailSet = state.selectedItems.get(mainId) || new Set()
|
||||||
detailSet.delete(detailId)
|
detailSet.delete(detailId)
|
||||||
|
|
||||||
// 디테일(하위)하위 아이템이 모두 제거되면 메인 아이템도 제거
|
/* 디테일(하위)하위 아이템이 모두 제거되면 메인 아이템도 제거 */
|
||||||
detailSet.size === 0 ? newSelectedItems.delete(mainId) : newSelectedItems.set(mainId, detailSet)
|
detailSet.size === 0 ? newSelectedItems.delete(mainId) : newSelectedItems.set(mainId, detailSet)
|
||||||
|
|
||||||
return { selectedItems: newSelectedItems }
|
return { selectedItems: newSelectedItems }
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 선택된 아이템 모두 제거 */
|
/* 선택 아이템 모두 제거 */
|
||||||
clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
|
clearSelectedItems: () => set({ selectedItems: new Map() as Map<number, Set<number>> }),
|
||||||
|
|
||||||
/* 선택된 아이템 검색 상태 설정 */
|
|
||||||
setSelectedItemsSearching: (value: boolean) => set({ selectedItemsSearching: value }),
|
|
||||||
}))
|
}))
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user