60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { usePopupController } from '@/store/popupController'
|
|
import { useSuitable } from '@/hooks/useSuitable'
|
|
import { useSuitableStore } from '@/store/useSuitableStore'
|
|
|
|
export default function SuitableButton() {
|
|
const popupController = usePopupController()
|
|
const { getSuitableIds, clearSuitableStore, downloadSuitablePdf } = useSuitable()
|
|
const { selectedItems, addAllSelectedItem } = useSuitableStore()
|
|
|
|
const handleSelectAll = async () => {
|
|
addAllSelectedItem(await getSuitableIds())
|
|
}
|
|
|
|
const handleOpenPopup = () => {
|
|
if (selectedItems.size === 0) {
|
|
alert('屋根材を選択してください。')
|
|
return
|
|
}
|
|
popupController.setSuitableDetailPopup(true)
|
|
}
|
|
|
|
const handleRedirectPdfDownload = () => {
|
|
if (selectedItems.size === 0) {
|
|
alert('屋根材を選択してください。')
|
|
return
|
|
}
|
|
downloadSuitablePdf()
|
|
}
|
|
|
|
return (
|
|
<div className="float-btn-wrap">
|
|
<div className="btn-flex-wrap com">
|
|
<div className="btn-bx">
|
|
{selectedItems.size === 0 ? (
|
|
<button className="btn-frame n-blue icon" onClick={handleSelectAll}>
|
|
全選択<i className="btn-arr"></i>
|
|
</button>
|
|
) : (
|
|
<button className="btn-frame n-blue icon" onClick={() => clearSuitableStore({ items: true })}>
|
|
全て解除<i className="btn-arr"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="btn-bx">
|
|
<button className="btn-frame red icon" onClick={handleOpenPopup}>
|
|
詳細を見る<i className="btn-arr"></i>
|
|
</button>
|
|
</div>
|
|
<div className="btn-bx">
|
|
<button className="btn-frame n-blue icon" onClick={handleRedirectPdfDownload}>
|
|
選択ダウンロード<i className="btn-arr"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|