103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurveyFilterStore } from '@/store/surveyFilterStore'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
|
|
export default function SearchForm({ memberRole, userNm }: { memberRole: string; userNm: string }) {
|
|
const router = useRouter()
|
|
const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
|
|
const [searchKeyword, setSearchKeyword] = useState(keyword)
|
|
const [option, setOption] = useState(searchOption)
|
|
|
|
const handleSearch = () => {
|
|
if (option !== 'id' && searchKeyword.trim().length < 2) {
|
|
alert('2文字以上入力してください')
|
|
return
|
|
}
|
|
setKeyword(searchKeyword)
|
|
setSearchOption(option)
|
|
}
|
|
const searchOptions = memberRole === 'Partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS
|
|
|
|
return (
|
|
<div className="sale-frame">
|
|
<div className="sale-form-bx">
|
|
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/regist')}>
|
|
新規売買登録<i className="btn-arr"></i>
|
|
</button>
|
|
</div>
|
|
<div className="sale-form-bx">
|
|
<select
|
|
className="select-form"
|
|
name="search-option"
|
|
id="search-option"
|
|
value={option}
|
|
onChange={(e) => {
|
|
if (e.target.value === 'all') {
|
|
setKeyword('')
|
|
setSearchKeyword('')
|
|
setSearchOption('all')
|
|
setOption('all')
|
|
} else {
|
|
setOption(e.target.value as SEARCH_OPTIONS_ENUM)
|
|
}
|
|
}}
|
|
>
|
|
{searchOptions.map((option) => (
|
|
<option key={option.id} value={option.id}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="sale-form-bx">
|
|
<div className="search-input">
|
|
<input
|
|
type="text"
|
|
className="search-frame"
|
|
value={searchKeyword}
|
|
placeholder="タイトルを入力してください. (2文字以上)"
|
|
onChange={(e) => {
|
|
setSearchKeyword(e.target.value)
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSearch()
|
|
}
|
|
}}
|
|
/>
|
|
<button className="search-icon" onClick={handleSearch}></button>
|
|
</div>
|
|
</div>
|
|
<div className="sale-form-bx">
|
|
<div className="check-form-box">
|
|
<input
|
|
type="checkbox"
|
|
id="ch01"
|
|
checked={isMySurvey === userNm}
|
|
onChange={() => {
|
|
setIsMySurvey(isMySurvey === userNm ? null : userNm)
|
|
}}
|
|
/>
|
|
<label htmlFor="ch01">私が書いた物件</label>
|
|
</div>
|
|
</div>
|
|
<div className="sale-form-bx">
|
|
<select
|
|
className="select-form"
|
|
name="sort-option"
|
|
id="sort-option"
|
|
value={sort}
|
|
onChange={(e) => {
|
|
setSort(e.target.value as 'created' | 'updated')
|
|
}}
|
|
>
|
|
<option value="created">最近の登録日</option>
|
|
<option value="updated">最新の更新日</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|