119 lines
4.2 KiB
TypeScript
119 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useEffect, useState } from 'react'
|
|
import SuitableListRaw from './SuitableListRaw'
|
|
import { useSuitableRaw } from '@/hooks/useSuitableRaw'
|
|
import { useSuitableStore } from '@/store/useSuitableStore'
|
|
import type { CommCode } from '@/types/CommCode'
|
|
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
|
|
|
|
export default function SuitableRaw() {
|
|
const [reference, setReference] = useState(true)
|
|
|
|
const { getSuitableCommCode, refetchBySearch } = useSuitableRaw()
|
|
const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
|
|
|
|
const handleInputSearch = async () => {
|
|
if (!searchValue.trim()) {
|
|
alert('屋根材の製品名を入力してください。')
|
|
return
|
|
}
|
|
setIsSearch(true)
|
|
refetchBySearch()
|
|
}
|
|
|
|
const handleInputClear = () => {
|
|
setSearchValue('')
|
|
setIsSearch(false)
|
|
refetchBySearch()
|
|
}
|
|
|
|
useEffect(() => {
|
|
refetchBySearch()
|
|
}, [selectedCategory])
|
|
|
|
useEffect(() => {
|
|
getSuitableCommCode()
|
|
return () => {
|
|
setSelectedCategory('')
|
|
setSearchValue('')
|
|
clearSelectedItems()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="border-frame">
|
|
<span>테스트1 페이지</span>
|
|
<div className="sale-form-bx">
|
|
<select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
|
|
<option value="">屋根材を選択してください.</option>
|
|
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
|
|
<option key={index} value={category.code}>
|
|
{category.codeJp}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="sale-form-bx">
|
|
<div className="search-input">
|
|
<input
|
|
type="text"
|
|
className="search-frame"
|
|
placeholder="屋根材 製品名を入力してください."
|
|
value={searchValue}
|
|
onChange={(e) => setSearchValue(e.target.value)}
|
|
/>
|
|
{searchValue && <button className="del-icon" onClick={handleInputClear} />}
|
|
<button className="search-icon" onClick={handleInputSearch} />
|
|
</div>
|
|
</div>
|
|
<div className="compliance-check-wrap">
|
|
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
|
|
<div className="check-name-wrap">
|
|
<div className="check-name">凡例</div>
|
|
<div className="check-name-btn">
|
|
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
|
|
</div>
|
|
</div>
|
|
<ul className="reference-list">
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>設置可能</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>設置不可</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>お問い合わせ</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>備考</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<SuitableListRaw />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|