Merge pull request #784 from NUTFes/feat/yama/781-add-addtional-edit-…

…modal 購入報告ページで申請した局&期限日を編集可能にする。
NUTFes · Jun 27, 2024 · 855ef14 · 855ef14
2 parents d34943f + 9b1e809
commit 855ef14
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 12 deletions.
diff --git a/view/next-project/src/components/purchasereports/DetailEditModal.tsx b/view/next-project/src/components/purchasereports/DetailEditModal.tsx
@@ -0,0 +1,114 @@
+import router from 'next/router';
+import { useEffect, useState } from 'react';
+import { Expense, PurchaseOrder, PurchaseReport } from '@/type/common';
+import { put } from '@/utils/api/purchaseOrder';
+import { get } from '@api/api_methods';
+import {
+  CloseButton,
+  Input,
+  Modal,
+  OutlinePrimaryButton,
+  PrimaryButton,
+  Select,
+} from '@components/common';
+
+export const DetailEditModal: React.FC<{
+  purchaseReportId: number;
+  isOpen: boolean;
+  setIsOpen: () => void;
+  onOpenInitial: () => void;
+}> = ({ purchaseReportId, setIsOpen, onOpenInitial }) => {
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [purchaseOrder, setPurchaseOrder] = useState<PurchaseOrder>({
+    id: 0,
+    deadline: '',
+    userID: 0,
+    expenseID: 0,
+    financeCheck: false,
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const purchaseReportRes: PurchaseReport = await get(
+          `${process.env.CSR_API_URI}/purchasereports/${purchaseReportId}`,
+        );
+        const purchaseOrderId = purchaseReportRes.purchaseOrderID;
+        const expensesRes: Expense[] = await get(`${process.env.CSR_API_URI}/expenses`);
+        const purchaseOrderRes: PurchaseOrder = await get(
+          `${process.env.CSR_API_URI}/purchaseorders/${purchaseOrderId}`,
+        );
+        setExpenses(expensesRes);
+        setPurchaseOrder(purchaseOrderRes);
+      } catch (error) {
+        console.error('Failed to fetch data:', error);
+      }
+    };
+    fetchData();
+  }, [purchaseReportId]);
+
+  const formatDate = (date: string) => {
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = (1 + d.getMonth()).toString().padStart(2, '0');
+    const day = d.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const submit = async () => {
+    try {
+      const updatePurchaseOrderUrl = `${process.env.CSR_API_URI}/purchaseorders/${purchaseOrder.id}`;
+      await put(updatePurchaseOrderUrl, purchaseOrder);
+    } finally {
+      router.reload();
+    }
+  };
+
+  const handleInputChange = (key: keyof PurchaseOrder, value: string | number) => {
+    setPurchaseOrder((prev) => ({ ...prev, [key]: value }));
+  };
+
+  return (
+    <Modal className='md:w-1/2'>
+      <div className='ml-auto w-fit'>
+        <CloseButton onClick={setIsOpen} />
+      </div>
+      <div className='mx-auto mb-10 w-fit text-xl text-black-600'>
+        <p>購入した局と期限日を修正</p>
+      </div>
+      <div className='mx-auto my-6 grid w-9/10 grid-cols-4 items-center justify-items-center gap-4'>
+        <p className='text-lg text-black-600'>購入した局</p>
+        <div className='col-span-3 w-full'>
+          <Select
+            value={purchaseOrder.expenseID}
+            onChange={(e) => handleInputChange('expenseID', Number(e.target.value))}
+          >
+            {expenses.map((data) => (
+              <option key={data.id} value={data.id}>
+                {data.name}
+              </option>
+            ))}
+            {!expenses.length && <option>局・団体が登録されていません</option>}
+          </Select>
+        </div>
+        <p className='text-lg text-black-600'>期限日</p>
+        <div className='col-span-3 w-full'>
+          <Input
+            type='date'
+            value={purchaseOrder.deadline ? formatDate(purchaseOrder.deadline) : ''}
+            onChange={(e) => handleInputChange('deadline', e.target.value)}
+            className='w-full'
+          />
+        </div>
+      </div>
+      <div className='flex justify-center'>
+        <OutlinePrimaryButton onClick={onOpenInitial} className='mx-2'>
+          戻る
+        </OutlinePrimaryButton>
+        <PrimaryButton onClick={submit} className='mx-2 px-4'>
+          編集完了
+        </PrimaryButton>
+      </div>
+    </Modal>
+  );
+};
diff --git a/view/next-project/src/components/purchasereports/EditModal.tsx b/view/next-project/src/components/purchasereports/EditModal.tsx
@@ -22,6 +22,7 @@ interface ModalProps {
   purchaseReportId: number;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
+  onOpenInitial: () => void;
 }
 
 export default function EditModal(props: ModalProps) {
@@ -309,12 +310,12 @@ export default function EditModal(props: ModalProps) {
                     <div className='col-span-10 grid justify-items-center'>
                       {formDataList.length > 0 ? (
                         <div className='flex'>
-                          {/* stepが1より大きい時のみ戻るボタンを表示 */}
-                          {activeStep > 1 && (
-                            <OutlinePrimaryButton onClick={prevStep} className={'mx-2'}>
-                              戻る
-                            </OutlinePrimaryButton>
-                          )}
+                          <OutlinePrimaryButton
+                            onClick={activeStep > 1 ? prevStep : props.onOpenInitial}
+                            className={'mx-2'}
+                          >
+                            戻る
+                          </OutlinePrimaryButton>
                           <PrimaryButton
                             className={'mx-2 pl-4 pr-2'}
                             onClick={() => {

diff --git a/view/next-project/src/components/purchasereports/OpenEditModalButton.tsx b/view/next-project/src/components/purchasereports/OpenEditModalButton.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { EditButton } from '@components/common';
+import { DetailEditModal } from './DetailEditModal';
+import { CloseButton, EditButton, Modal, PrimaryButton } from '@components/common';
 import EditModal from '@components/purchasereports/EditModal';
 
 interface Props {
@@ -10,15 +11,55 @@ interface Props {
   isDisabled: boolean;
 }
 
+const InitialModal: React.FC<{ setStep: (step: string) => void; closeModal: () => void }> = ({
+  setStep,
+  closeModal,
+}) => (
+  <Modal className='md:w-1/2'>
+    <div className='ml-auto w-fit'>
+      <CloseButton onClick={closeModal} />
+    </div>
+    <div className='mx-auto mb-6 w-fit text-xl text-black-600'>
+      <p>購入報告の修正</p>
+    </div>
+    <div className='flex justify-center gap-2 pb-4'>
+      <PrimaryButton onClick={() => setStep('editDetails')}>局と期限日を編集</PrimaryButton>
+      <PrimaryButton onClick={() => setStep('editPurchases')}>購入物品を編集</PrimaryButton>
+    </div>
+  </Modal>
+);
+
 const OpenEditModalButton: React.FC<Props> = (props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const onOpen = () => {
-    setIsOpen(true);
+  const [step, setStep] = useState<string | null>(null);
+
+  const onOpenInitial = () => {
+    setStep('initial');
   };
+
+  const closeModal = () => {
+    setStep(null);
+  };
+
   return (
     <>
-      <EditButton onClick={onOpen} isDisabled={props.isDisabled} />
-      {isOpen && <EditModal purchaseReportId={props.id} isOpen={isOpen} setIsOpen={setIsOpen} />}
+      <EditButton onClick={onOpenInitial} isDisabled={props.isDisabled} />
+      {step === 'initial' && <InitialModal setStep={setStep} closeModal={closeModal} />}
+      {step === 'editDetails' && (
+        <DetailEditModal
+          purchaseReportId={props.id}
+          isOpen={true}
+          setIsOpen={closeModal}
+          onOpenInitial={onOpenInitial}
+        />
+      )}
+      {step === 'editPurchases' && (
+        <EditModal
+          purchaseReportId={props.id}
+          isOpen={true}
+          setIsOpen={closeModal}
+          onOpenInitial={onOpenInitial}
+        />
+      )}
     </>
   );
 };