Feat/walt/purchase report sort frontend #1044
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import React, { FC, useEffect, useMemo, useState } from 'react'; | ||
|
|
||
| import { CloseButton, Modal, OutlinePrimaryButton, Select } from '@components/common'; | ||
| import { Bureau, User } from '@type/common'; | ||
|
|
||
| interface PurchaseReportPaidByFilterModalProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| onApply: (selection: { | ||
| bureauId: number | null; | ||
| paidByUserId: number | null | undefined; | ||
| }) => void; | ||
| bureaus: Bureau[]; | ||
| users: User[]; | ||
| selectedBureauId: number | null; | ||
| selectedPaidByUserId: number | null | undefined; | ||
| } | ||
|
|
||
| const PurchaseReportPaidByFilterModal: FC<PurchaseReportPaidByFilterModalProps> = (props) => { | ||
| const { isOpen, onClose, onApply, bureaus, users, selectedBureauId, selectedPaidByUserId } = | ||
| props; | ||
|
|
||
| const [draftBureauId, setDraftBureauId] = useState<number | null>(selectedBureauId); | ||
| const [draftPaidByUserId, setDraftPaidByUserId] = useState<number | null | undefined>( | ||
| selectedPaidByUserId, | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!isOpen) return; | ||
| setDraftBureauId(selectedBureauId); | ||
| setDraftPaidByUserId(selectedPaidByUserId); | ||
| }, [isOpen, selectedBureauId, selectedPaidByUserId]); | ||
|
|
||
| const bureauNameMap = useMemo( | ||
| () => | ||
| new Map( | ||
| bureaus.map((bureau) => [bureau.id ?? 0, bureau.name] as const).filter(([id]) => id > 0), | ||
| ), | ||
| [bureaus], | ||
| ); | ||
|
|
||
| const filteredUsers = useMemo(() => { | ||
| if (!draftBureauId) return users; | ||
| return users.filter((user) => user.bureauID === draftBureauId); | ||
| }, [draftBureauId, users]); | ||
|
|
||
| const paidBySelectValue = draftPaidByUserId === null ? 'none' : draftPaidByUserId ?? ''; | ||
|
|
||
| const handleBureauChange = (event: React.ChangeEvent<HTMLSelectElement>) => { | ||
| const value = event.target.value; | ||
| const nextBureauId = value === '' ? null : Number(value); | ||
| setDraftBureauId(nextBureauId); | ||
| setDraftPaidByUserId(undefined); | ||
| }; | ||
|
|
||
| const handlePaidByChange = (event: React.ChangeEvent<HTMLSelectElement>) => { | ||
| const value = event.target.value; | ||
| if (value === '') { | ||
| setDraftPaidByUserId(undefined); | ||
| return; | ||
| } | ||
| if (value === 'none') { | ||
| setDraftPaidByUserId(null); | ||
| return; | ||
| } | ||
| setDraftPaidByUserId(Number(value)); | ||
| }; | ||
|
|
||
| const handleApply = () => { | ||
| onApply({ | ||
| bureauId: draftBureauId ?? null, | ||
| paidByUserId: draftPaidByUserId, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal className='w-[90vw] max-w-[440px] p-6 shadow-lg' onClick={onClose}> | ||
| <div className='flex justify-end'> | ||
| <CloseButton onClick={onClose} /> | ||
| </div> | ||
| <div className='mt-2 space-y-5'> | ||
| <div> | ||
| <p className='mb-2 text-sm text-black-600'>局名</p> | ||
| <Select value={draftBureauId ?? ''} onChange={handleBureauChange}> | ||
| <option value=''>絞り込みなし</option> | ||
| {bureaus.map((bureau) => ( | ||
| <option key={bureau.id ?? 0} value={bureau.id ?? 0}> | ||
| {bureau.name} | ||
| </option> | ||
| ))} | ||
| </Select> | ||
| </div> | ||
| <div> | ||
| <p className='mb-2 text-sm text-black-600'>氏名</p> | ||
| <Select value={paidBySelectValue} onChange={handlePaidByChange}> | ||
| <option value='none'>絞り込みなし</option> | ||
| {filteredUsers.map((user) => { | ||
| const bureauName = bureauNameMap.get(user.bureauID); | ||
| const label = draftBureauId || !bureauName ? user.name : `${bureauName} ${user.name}`; | ||
| return ( | ||
| <option key={user.id} value={user.id}> | ||
| {label} | ||
| </option> | ||
| ); | ||
| })} | ||
| </Select> | ||
| {/* NOTE: paid_by_user_id の NULL を絞り込む仕様が未定義のため「立替者なし」は未実装。 */} | ||
| </div> | ||
| </div> | ||
| <div className='mt-6 flex justify-center'> | ||
| <OutlinePrimaryButton onClick={handleApply}>絞り込む</OutlinePrimaryButton> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default PurchaseReportPaidByFilterModal; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface PurchaseReportSummaryAmountsProps { | ||
| unsettledAmountText: string; | ||
| unpackedAmountText: string; | ||
| className?: string; | ||
| } | ||
|
|
||
| export default function PurchaseReportSummaryAmounts({ | ||
| unsettledAmountText, | ||
| unpackedAmountText, | ||
| className = 'text-sm text-black-600 md:ml-auto', | ||
| }: PurchaseReportSummaryAmountsProps) { | ||
| return ( | ||
| <div className={className}> | ||
| <div className='inline-grid grid-cols-[auto_auto_auto] gap-1'> | ||
| <span className='whitespace-nowrap'>未清算金額</span> | ||
| <span className='whitespace-nowrap'>：</span> | ||
| <span className='min-w-[12ch] whitespace-nowrap text-right'>{unsettledAmountText} 円</span> | ||
| <span className='whitespace-nowrap'>未封詰め金額</span> | ||
| <span className='whitespace-nowrap'>：</span> | ||
| <span className='min-w-[12ch] whitespace-nowrap text-right'>{unpackedAmountText} 円</span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
draftPaidByUserIdの状態管理にnumber | null | undefinedの3つの型が使われており、コードが少し複雑になっています。現状ではnullとundefinedが両方とも「絞り込みなし」を意味するように見え、冗長です。draftBureauIdがnumber | nullで管理されているように、draftPaidByUserIdもnumber | nullに統一し、nullを「絞り込みなし」として扱うことで、コードをシンプルにし、一貫性を高めることができます。以下の提案では、関連する状態とハンドラを
nullを使うように修正しています。これに合わせて、96行目の
optionのvalueも'none'から''に変更してください:<option value=''>絞り込みなし</option>