[fix] 年度別に支出の選択欄を選べるように変更

NUTFes · Mar 19, 2024 · c286b4b · c286b4b
1 parent afee1bc
commit c286b4b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/view/next-project/src/components/purchaseorders/OpenAddModalButton.tsx b/view/next-project/src/components/purchaseorders/OpenAddModalButton.tsx
@@ -2,16 +2,17 @@ import React, { useState } from 'react';
 
 import PurchaseItemNumModal from './PurchaseItemNumModal';
 import { AddButton } from '@components/common';
-import { Expense } from '@type/common';
+import { Expense, YearPeriod } from '@type/common';
 
 interface Props {
   children?: React.ReactNode;
   expenses: Expense[];
+  yearPeriods: YearPeriod[];
+  selectedyear: string;
 }
 
 export default function OpenModalButton(props: Props) {
   const [isOpen, setIsOpen] = useState(false);
-
   return (
     <>
       <AddButton
@@ -21,7 +22,7 @@ export default function OpenModalButton(props: Props) {
       >
         {props.children}
       </AddButton>
-      {isOpen && <PurchaseItemNumModal setIsOpen={setIsOpen} expenses={props.expenses} />}
+      {isOpen && <PurchaseItemNumModal setIsOpen={setIsOpen} expenses={props.expenses} yearPeriods={props.yearPeriods} selectedYear={props.selectedyear}/>}
     </>
   );
 }
diff --git a/view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx b/view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx
@@ -5,11 +5,13 @@ import { userAtom } from '@/store/atoms';
 import { post } from '@api/purchaseOrder';
 import { CloseButton, Input, Modal, PrimaryButton, Select } from '@components/common';
 import AddModal from '@components/purchaseorders/PurchaseOrderAddModal';
-import { PurchaseItem, PurchaseOrder, Expense } from '@type/common';
+import { PurchaseItem, PurchaseOrder, Expense, YearPeriod } from '@type/common';
 
 export interface PurchaseItemNumModalProps {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   expenses: Expense[];
+  yearPeriods: YearPeriod[];
+  selectedYear: string;
 }
 
 export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
@@ -95,6 +97,16 @@ export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
     setFormDataList(initialPurchaseItemList);
   };
 
+  //yearPeriodsとselectedYearを紐づける
+  const selectedYear = props.yearPeriods.find((u) => {
+    return u.year === parseInt(props.selectedYear);
+  })?.id;
+
+  console.log(selectedYear);
+  console.log(props.expenses);
+  console.log(parseInt(props.selectedYear));
+  console.log(props.yearPeriods);
+
   return (
     <>
       <Modal>
@@ -121,11 +133,13 @@ export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
               onChange={formDataHandler('expenseID')}
               className='w-full'
             >
-              {props.expenses.map((data) => (
-                <option key={data.id} value={data.id}>
-                  {data.name}
-                </option>
-              ))}
+              {props.expenses
+                .filter((expense) => selectedYear === expense.yearID)
+                .map((data) => (
+                  <option key={data.id} value={data.id}>
+                    {data.name}
+                  </option>
+                ))}
             </Select>
           </div>
           <p className='grid-cols-1 text-black-600'>購入物品数</p>

diff --git a/view/next-project/src/pages/purchaseorders/index.tsx b/view/next-project/src/pages/purchaseorders/index.tsx
@@ -215,7 +215,7 @@ export default function PurchaseOrders(props: Props) {
             </PrimaryButton>
           </div>
           <div className='hidden justify-end md:flex'>
-            <OpenAddModalButton expenses={props.expenses}>申請登録</OpenAddModalButton>
+            <OpenAddModalButton expenses={props.expenses} yearPeriods={yearPeriods} selectedyear={selectedYear}>申請登録</OpenAddModalButton>
           </div>
         </div>
         <div className='w-100 mb-2 overflow-scroll p-5'>
@@ -393,7 +393,7 @@ export default function PurchaseOrders(props: Props) {
         />
       )}
       <div className='fixed bottom-4 right-4 md:hidden'>
-        <OpenAddModalButton expenses={props.expenses} />
+        <OpenAddModalButton expenses={props.expenses} yearPeriods={props.yearPeriods} selectedyear={selectedYear}/>
       </div>
     </MainLayout>
   );