Merge branch 'develop' into intro-minio

view/next-project/src/components/common/Select/Select.tsx

@@ -7,6 +7,7 @@ interface Props {
   className?: string;
   placeholder?: string;
   value?: string | number;
+  defaultValue?: string | number;
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
   children?: React.ReactNode;
 }
@@ -21,6 +22,7 @@ function Select(props: Props): JSX.Element {
         placeholder={props.placeholder}
         className={clsx(s.select, className)}
         value={props.value}
+        defaultValue={props.defaultValue}
         onChange={props.onChange}
       >
         {props.children}

view/next-project/src/components/fund_information/AddModal.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React, { Dispatch, FC, SetStateAction, useState, useMemo } from 'react';
+import React, { Dispatch, FC, SetStateAction, useState, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { Modal, CloseButton, Input, Select, PrimaryButton } from '../common';
@@ -14,6 +14,7 @@ interface ModalProps {
   teachers: Teacher[];
   departments: Department[];
   users: User[];
+  currentUser?: User;
 }
 
 const OpenAddModal: FC<ModalProps> = (props) => {
@@ -28,9 +29,12 @@ const OpenAddModal: FC<ModalProps> = (props) => {
   const dd = String(today.getDate()).padStart(2, '0');
   const ymd = `${yyyy}-${mm}-${dd}`;
 
+  const [formUser, setFormUser] = useState<User | undefined>(props.currentUser);
+  const loginUserBureau = BUREAUS.find((bureau) => bureau.id === props.currentUser?.bureauID);
+
   const [formData, setFormData] = useState<FundInformation>({
-    userID: user.id,
-    teacherID: props.teachers[0].id || 1,
+    userID: formUser?.id || 0,
+    teacherID: loginUserBureau?.id || 1,
     price: 0,
     remark: '',
     isFirstCheck: false,
@@ -39,17 +43,28 @@ const OpenAddModal: FC<ModalProps> = (props) => {
   });
 
   // 担当者を局でフィルタを適用
-  const [bureauId, setBureauId] = useState<number>(1);
-  const filteredUsers = useMemo(() => {
-    const res = props.users
-      .filter((user) => {
-        return user.bureauID === bureauId;
-      })
-      .filter((user, index, self) => {
-        return self.findIndex((u) => u.name === user.name) === index;
-      });
-    if (res.length !== 0) setFormData({ ...formData, userID: res[0].id });
-    return res;
+  const [bureauId, setBureauId] = useState<number>(loginUserBureau?.id || 1);
+  const defaultfilteredUsers = props.users
+    .filter((user) => {
+      return user.bureauID === bureauId;
+    })
+    .filter((user, index, self) => {
+      return self.findIndex((u) => u.name === user.name) === index;
+    });
+  const [filteredUsers, setFilteredUsers] = useState<User[]>(defaultfilteredUsers);
+
+  useEffect(() => {
+    if (formUser?.bureauID !== bureauId) {
+      const filteredUsers = props.users
+        .filter((user) => {
+          return user.bureauID === bureauId;
+        })
+        .filter((user, index, self) => {
+          return self.findIndex((u) => u.name === user.name) === index;
+        });
+      setFilteredUsers(filteredUsers);
+      if (filteredUsers.length !== 0) setFormData({ ...formData, userID: filteredUsers[0].id });
+    }
   }, [bureauId]);
 
   const handler =
@@ -104,7 +119,10 @@ const OpenAddModal: FC<ModalProps> = (props) => {
         </div>
         <p className='text-black-600'>担当者の局</p>
         <div className='col-span-4 w-full'>
-          <Select value={bureauId} onChange={(e) => setBureauId(Number(e.target.value))}>
+          <Select
+            defaultValue={loginUserBureau?.id}
+            onChange={(e) => setBureauId(Number(e.target.value))}
+          >
             {BUREAUS.map((bureaus) => (
               <option key={bureaus.id} value={bureaus.id}>
                 {bureaus.name}
@@ -114,7 +132,7 @@ const OpenAddModal: FC<ModalProps> = (props) => {
         </div>
         <p className='col-span-1 text-black-600'>担当者</p>
         <div className='col-span-4 w-full'>
-          <Select className='w-full' value={formData.userID} onChange={handler('userID')}>
+          <Select className='w-full' defaultValue={formUser?.id} onChange={handler('userID')}>
             {filteredUsers.map((user) => (
               <option key={user.id} value={user.id}>
                 {user.name}

view/next-project/src/components/fund_information/EditModal.tsx

@@ -29,12 +29,23 @@ export default function EditModal(props: ModalProps) {
     receivedAt: props.fundInformation.receivedAt,
   });
 
-  const [departmentID, setDepartmentID] = useState<number | string>(1);
+  const defaultTeacher = props.teachers.find(
+    (teacher) => teacher.id === props.fundInformation.teacherID,
+  );
+  const [teacher, setTeacher] = useState<Teacher | undefined>(defaultTeacher);
+  const [departmentID, setDepartmentID] = useState<number>(defaultTeacher?.departmentID || 1);
 
   useEffect(() => {
-    const teacher = props.teachers.find((teacher) => teacher.departmentID === departmentID);
-    if (teacher && teacher.id) {
-      setFormData({ ...formData, teacherID: teacher.id });
+    if (teacher?.departmentID !== departmentID) {
+      const relatedTeachers = props.teachers.filter(
+        (teacher) => teacher.departmentID === departmentID,
+      );
+      relatedTeachers &&
+        setFormData({
+          ...formData,
+          teacherID: relatedTeachers[0]?.id || 0,
+        });
+      setTeacher(relatedTeachers[0]);
     }
   }, [departmentID]);
 

view/next-project/src/components/fund_information/OpenAddModalButton.tsx

@@ -9,6 +9,7 @@ interface Props {
   teachers: Teacher[];
   departments: Department[];
   users: User[];
+  currentUser?: User;
 }
 
 export const OpenAddModalButton = (props: Props) => {
@@ -29,6 +30,7 @@ export const OpenAddModalButton = (props: Props) => {
           teachers={props.teachers}
           departments={props.departments}
           users={props.users}
+          currentUser={props.currentUser}
         />
       )}
     </>

view/next-project/src/components/purchaseorders/EditModal.tsx

@@ -143,10 +143,14 @@ export default function EditModal(props: ModalProps) {
           </div>
           <p className='mx-auto mb-10 w-fit text-xl text-black-600'>購入物品の修正</p>
           {/* 購入物品があればステッパで表示、なければないと表示  */}
-          {formDataList.length > 0 && (
+          {formDataList && formDataList.length > 0 ? (
             <Stepper stepNum={formDataList.length} activeStep={activeStep} isDone={isDone}>
               {!isDone && <>{content(formDataList[activeStep - 1])}</>}
             </Stepper>
+          ) : (
+            <p className='text-center text-sm text-black-600'>
+              購入物品が存在しません。項目を削除した上で、再登録してください。
+            </p>
           )}
           {isDone ? (
             <div>
@@ -200,7 +204,7 @@ export default function EditModal(props: ModalProps) {
             </div>
           ) : (
             <div className='mb-5 mt-10 flex justify-center gap-5'>
-              {formDataList.length > 0 && (
+              {formDataList && formDataList.length > 0 && (
                 <>
                   {activeStep > 1 && (
                     <OutlinePrimaryButton onClick={prevStep}>戻る</OutlinePrimaryButton>

view/next-project/src/components/purchaseorders/PurchaseItemNumModal.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 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';
@@ -73,9 +72,6 @@ export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
 
   // 購入申請の登録と登録した購入申請のIDを使って購入物品を更新
   const submit = async (data: PurchaseOrder) => {
-    const addPurchaseOrderUrl = process.env.CSR_API_URI + '/purchaseorders';
-    const postRes: PurchaseOrder = await post(addPurchaseOrderUrl, data);
-    const purchaseOrderId = postRes.id;
     const initialPurchaseItemList = [];
     for (let i = 0; i < Number(purchaseItemNum.value); i++) {
       const initialPurchaseItem: PurchaseItem = {
@@ -85,7 +81,7 @@ export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
         quantity: 0,
         detail: '',
         url: '',
-        purchaseOrderID: purchaseOrderId ? purchaseOrderId : 0,
+        purchaseOrderID: 0,
         financeCheck: false,
         createdAt: '',
         updatedAt: '',
@@ -162,6 +158,7 @@ export default function PurchaseItemNumModal(props: PurchaseItemNumModalProps) {
           onClose={onClose}
           setFormDataList={setFormDataList}
           formDataList={formDataList}
+          purchaseOrder={formData}
         />
       )}
     </>

view/next-project/src/components/purchaseorders/PurchaseOrderAddModal.tsx

@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import { RiExternalLinkLine, RiFileCopyLine } from 'react-icons/ri';
 import { RiArrowDropRightLine } from 'react-icons/ri';
 
-import { del } from '@api/api_methods';
 import { post } from '@api/purchaseItem';
+import { post as postOrder } from '@api/purchaseOrder';
 import {
   PrimaryButton,
   OutlinePrimaryButton,
@@ -15,7 +15,7 @@ import {
   Stepper,
   Tooltip,
 } from '@components/common';
-import { PurchaseItem } from '@type/common';
+import { PurchaseItem, PurchaseOrder } from '@type/common';
 
 interface ModalProps {
   purchaseItemNum: PurchaseItemNum;
@@ -24,6 +24,7 @@ interface ModalProps {
   onClose: () => void;
   setFormDataList: (formDataList: PurchaseItem[]) => void;
   formDataList: PurchaseItem[];
+  purchaseOrder: PurchaseOrder;
 }
 
 interface PurchaseItemNum {
@@ -46,12 +47,6 @@ export default function AddModal(props: ModalProps) {
   const [isDone, setIsDone] = useState<boolean>(false);
   const router = useRouter();
 
-  const deletePurchaseOrder = async () => {
-    const deletePurchaseOrderUrl =
-      process.env.CSR_API_URI + '/purchaseorders/' + props.formDataList[0].purchaseOrderID;
-    await del(deletePurchaseOrderUrl);
-  };
-
   const handler =
     (stepNumber: number, input: string) =>
     (e: React.ChangeEvent<HTMLSelectElement> | React.ChangeEvent<HTMLInputElement>) => {
@@ -62,15 +57,24 @@ export default function AddModal(props: ModalProps) {
       );
     };
 
-  const addPurchaseItem = async (data: PurchaseItem[]) => {
+  const submitOrderAndItems = async (
+    purchaseOrder: PurchaseOrder,
+    purchaseItems: PurchaseItem[],
+  ) => {
+    const addPurchaseOrderUrl = process.env.CSR_API_URI + '/purchaseorders';
+    const postRes: PurchaseOrder = await postOrder(addPurchaseOrderUrl, purchaseOrder);
+    const purchaseOrderId = postRes.id || 0;
+    const purchaseItemsAddOrderInfo = purchaseItems.map((item) => {
+      return { ...item, purchaseOrderID: purchaseOrderId };
+    });
     const addPurchaseItemUrl = process.env.CSR_API_URI + '/purchaseitems';
-    data.map(async (item) => {
+    purchaseItemsAddOrderInfo.map(async (item) => {
       await post(addPurchaseItemUrl, item);
     });
   };
 
-  const submit = async (formDataList: PurchaseItem[]) => {
-    addPurchaseItem(formDataList);
+  const submit = async (purchaseOrder: PurchaseOrder, formDataList: PurchaseItem[]) => {
+    submitOrderAndItems(purchaseOrder, formDataList);
     props.onClose();
     props.numModalOnClose();
     router.reload();
@@ -81,44 +85,54 @@ export default function AddModal(props: ModalProps) {
     <>
       <div className={clsx('my-6 grid grid-cols-12 gap-4')}>
         <div className={clsx('col-span-2 mr-2 grid')}>
-          <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
+          <div className={clsx('text-md grid items-center justify-items-end text-black-600')}>
             物品名
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input value={data.item} onChange={handler(index, 'item')} />
+          <Input value={data.item} onChange={handler(index, 'item')} className='w-full' />
         </div>
         <div className={clsx('col-span-2 mr-2 grid')}>
-          <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
+          <div className={clsx('text-md grid items-center justify-items-end text-black-600')}>
             単価
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input type='number' value={data.price} onChange={handler(index, 'price')} />
+          <Input
+            type='number'
+            value={data.price}
+            onChange={handler(index, 'price')}
+            className='w-full'
+          />
         </div>
         <div className={clsx('col-span-2 mr-2 grid')}>
-          <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
+          <div className={clsx('text-md grid items-center justify-items-end text-black-600')}>
             個数
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input type='number' value={data.quantity} onChange={handler(index, 'quantity')} />
+          <Input
+            type='number'
+            value={data.quantity}
+            onChange={handler(index, 'quantity')}
+            className='w-full'
+          />
         </div>
         <div className={clsx('col-span-2 mr-2 grid')}>
-          <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
+          <div className={clsx('text-md grid items-center justify-items-end text-black-600')}>
             詳細
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input value={data.detail} onChange={handler(index, 'detail')} />
+          <Input value={data.detail} onChange={handler(index, 'detail')} className='w-full' />
         </div>
         <div className={clsx('col-span-2 mr-2 grid')}>
-          <div className={clsx('text-md flex grid items-center justify-items-end text-black-600')}>
+          <div className={clsx('text-md grid items-center justify-items-end text-black-600')}>
             URL
           </div>
         </div>
         <div className={clsx('col-span-10 grid w-full')}>
-          <Input value={data.url} onChange={handler(index, 'url')} />
+          <Input value={data.url} onChange={handler(index, 'url')} className='w-full' />
         </div>
       </div>
     </>
@@ -236,7 +250,6 @@ export default function AddModal(props: ModalProps) {
           <div className={clsx('mr-5 grid w-full justify-items-end')}>
             <CloseButton
               onClick={() => {
-                deletePurchaseOrder();
                 props.onClose();
                 props.numModalOnClose();
               }}
@@ -276,7 +289,7 @@ export default function AddModal(props: ModalProps) {
                       <PrimaryButton
                         className={'mx-2'}
                         onClick={() => {
-                          submit(props.formDataList);
+                          submit(props.purchaseOrder, props.formDataList);
                         }}
                       >
                         登録

view/next-project/src/components/purchasereports/PurchaseOrderListModal.tsx

@@ -76,8 +76,8 @@ export default function PurchaseItemNumModal() {
   };
 
   return (
-    <Modal className='mt-32 md:m-0'>
-      <div className={clsx('w-full')}>
+    <Modal className='mt-32 overflow-scroll md:m-0'>
+      <div className={clsx('w-full ')}>
         <div className={clsx('mr-5 grid w-full justify-items-end')}>
           <CloseButton onClick={closeModal} />
         </div>

view/next-project/src/components/sponsoractivities/DetailModal.tsx

@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router';
 import React, { FC, useState } from 'react';
 import { RiCloseCircleLine } from 'react-icons/ri';
-
 import DetailPage1 from './DetailPage1';
 import DetailPage2 from './DetailPage2';
 import { Modal } from '@components/common';
@@ -37,16 +36,12 @@ const DetailModal: FC<ModalProps> = (props) => {
 
   return (
     <Modal className='md:h-6/12 md:mt-5 md:w-6/12'>
-      <div className='w-full'>
-        <div className='ml-auto mr-5 w-fit'>
-          <RiCloseCircleLine size={'23px'} color={'gray'} onClick={onClose} />
-        </div>
-      </div>
       {pageNum === 1 && (
         <DetailPage1
           setPageNum={setPageNum}
           sponsorActivitiesViewItem={sponsorActivitiesView}
           id={props.id}
+          setIsOpen={props.setIsOpen}
         />
       )}
       {pageNum === 2 && (