Merge pull request #749 from NUTFes/develop

5/20に伴うリリース
NUTFes · May 20, 2024 · 0891ea6 · 0891ea6
2 parents ec9f8e1 + abafb21
commit 0891ea6
Show file tree

Hide file tree

Showing 16 changed files with 1,741 additions and 374 deletions.
diff --git a/finansu-ER.drawio b/finansu-ER.drawio
diff --git a/view/next-project/src/components/common/Modal.tsx b/view/next-project/src/components/common/Modal.tsx
@@ -8,7 +8,7 @@ interface Props {
 
 export default function Modal(props: Props) {
   const className =
-    'relative my-6 mx-auto bg-white-0 rounded-lg p-5' +
+    'relative sm:my-6 mx-auto bg-white-0 rounded-lg p-5' +
     (props.className ? ` ${props.className}` : '');
 
   return (

diff --git a/view/next-project/src/components/common/MultiSelect/MultiSelect.tsx b/view/next-project/src/components/common/MultiSelect/MultiSelect.tsx
@@ -10,16 +10,23 @@ interface MultiSelectProps {
   options: Option[];
   values?: Option[];
   onChange: (value: Option[]) => void;
+  placeholder?: string;
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ options, onChange, values = [options[0]] }) => {
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  options,
+  onChange,
+  values = [options[0]],
+  placeholder,
+}) => {
   const [selected, setSelected] = useState<{ value: string; label: string }[]>(values);
 
   return (
     <Select
       isMulti
       options={options}
       value={selected}
+      placeholder={placeholder}
       onChange={(_, actionMeta) => {
         switch (actionMeta.action) {
           case 'select-option':

diff --git a/view/next-project/src/components/common/SearchSelect/SearchSelect.tsx b/view/next-project/src/components/common/SearchSelect/SearchSelect.tsx
@@ -0,0 +1,65 @@
+import { Dispatch, useEffect, useState, SetStateAction } from 'react';
+import Select from 'react-select';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SearchSelectProps {
+  options?: Option[];
+  value?: Option;
+  onChange?: (value: Option) => void;
+  setID?: Dispatch<SetStateAction<string>>;
+  noOptionMessage?: string;
+  placeholder?: string;
+}
+
+const SearchSelect: React.FC<SearchSelectProps> = ({
+  options,
+  value,
+  onChange,
+  setID,
+  noOptionMessage,
+  placeholder,
+}) => {
+  const [selected, setSelected] = useState<Option | null>(value || (options && options[0]) || null);
+
+  useEffect(() => {
+    setSelected(value || (options && options[0]) || null);
+  }, [options]);
+
+  return (
+    <Select
+      options={options}
+      value={selected}
+      noOptionsMessage={() => noOptionMessage}
+      placeholder={placeholder}
+      onChange={(option, actionMeta) => {
+        switch (actionMeta.action) {
+          case 'select-option':
+            if (option) {
+              setSelected(option);
+              setID && setID(option?.value || '0');
+            }
+            break;
+          case 'remove-value':
+          case 'pop-value':
+            if (actionMeta.removedValue) {
+              setSelected(null);
+              setID && setID('');
+            }
+            break;
+          case 'clear':
+            setSelected(null);
+            setID && setID('');
+            break;
+          default:
+            break;
+        }
+      }}
+    />
+  );
+};
+
+export default SearchSelect;
diff --git a/view/next-project/src/components/common/SearchSelect/index.ts b/view/next-project/src/components/common/SearchSelect/index.ts
@@ -0,0 +1 @@
+export { default } from './SearchSelect';
diff --git a/view/next-project/src/components/common/index.ts b/view/next-project/src/components/common/index.ts
@@ -25,3 +25,4 @@ export { default as BureauLabel } from './BureauLabel';
 export { default as Header } from './Header';
 export { default as SideNav } from './SideNav';
 export { default as MultiSelect } from './MultiSelect/MultiSelect';
+export { default as SearchSelect } from './SearchSelect';
diff --git a/view/next-project/src/components/fund_information/OpenAddModalButton.tsx b/view/next-project/src/components/fund_information/OpenAddModalButton.tsx
@@ -18,6 +18,7 @@ export const OpenAddModalButton = (props: Props) => {
   return (
     <>
       <AddButton
+        className='fixed bottom-4 right-4 md:static md:bottom-auto md:right-auto md:z-auto'
         onClick={() => {
           setIsOpen(true);
         }}

diff --git a/view/next-project/src/components/sponsoractivities/AddPdfDetailModal.tsx b/view/next-project/src/components/sponsoractivities/AddPdfDetailModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import { createSponsoractivitiesPDF } from '@/utils/createSponsoractivitiesReceiptPDF';
-import { PreviewPDF } from '@/utils/createSponsoractivitiesReceiptPDF';
+import { createSponsorActivitiesPDF } from '@/utils/createSponsorActivitiesInvoicesPDF';
+import { PreviewPDF } from '@/utils/createSponsorActivitiesInvoicesPDF';
 import { CloseButton, Input, Modal, PrimaryButton } from '@components/common';
 import { SponsorActivityView } from '@type/common';
 
@@ -102,7 +102,7 @@ export default function AddPdfDetailModal(props: ModalProps) {
         <div className='mb-3 flex w-full justify-center'>
           <PrimaryButton
             onClick={async () => {
-              createSponsoractivitiesPDF(
+              createSponsorActivitiesPDF(
                 props.sponsorActivitiesViewItem,
                 formatDate(formData.receivedAt),
                 formatDate(formData.billIssuedAt, false),

diff --git a/view/next-project/src/components/sponsoractivities/EditModal.tsx b/view/next-project/src/components/sponsoractivities/EditModal.tsx
@@ -12,7 +12,7 @@ import {
   Input,
   Textarea,
 } from '@components/common';
-import { MultiSelect } from '@components/common';
+import { MultiSelect, SearchSelect } from '@components/common';
 import { BUREAUS } from '@constants/bureaus';
 import { DESIGNER_VALUES } from '@constants/designers';
 import {
@@ -46,6 +46,7 @@ export default function EditModal(props: ModalProps) {
 
   // 協賛企業のリスト
   const [formData, setFormData] = useState<SponsorActivity>(props.sponsorActivity);
+  const [formDataSponsorID, setFormDataSponsorID] = useState<string>(String(formData.sponsorID));
   const [selectedYear, setSelectedYear] = useState<string>(props.year);
   const [sponsors, setSponsors] = useState<Sponsor[]>(props.sponsors || []);
 
@@ -194,6 +195,22 @@ export default function EditModal(props: ModalProps) {
     return res;
   }, [bureauId]);
 
+  const sponsorOptions = useMemo(() => {
+    const options = sponsors
+      ? sponsors.map((sponsor) => {
+          return { value: String(sponsor?.id) || '', label: sponsor.name };
+        })
+      : null;
+
+    return options;
+  }, [sponsors]);
+
+  useEffect(() => {
+    setFormData({ ...formData, sponsorID: Number(formDataSponsorID) });
+  }, [formDataSponsorID]);
+
+  const NO_SPONSORS_MESSAGE = '企業が登録されていません';
+
   // 協賛企業の情報
   const content = (data: SponsorActivity) => (
     <div className='my-4 grid grid-cols-5 items-center justify-items-center gap-2'>
@@ -215,20 +232,25 @@ export default function EditModal(props: ModalProps) {
       </div>
       <p className='text-black-600'>企業名</p>
       <div className='col-span-4 w-full'>
-        <Select className='w-full' onChange={handler('sponsorID')} value={data.sponsorID}>
-          {sponsors &&
-            sponsors.map((sponsor) => (
-              <option key={sponsor.id} value={sponsor.id}>
-                {sponsor.name}
-              </option>
-            ))}
-          {!sponsors && <option>企業が登録されていません</option>}
-        </Select>
+        <SearchSelect
+          options={sponsorOptions || undefined}
+          setID={setFormDataSponsorID}
+          noOptionMessage={NO_SPONSORS_MESSAGE}
+          placeholder={NO_SPONSORS_MESSAGE}
+          value={
+            (sponsorOptions &&
+              sponsorOptions.filter((option) => {
+                return option.value === formDataSponsorID;
+              })[0]) ||
+            undefined
+          }
+        />
       </div>
       <p className='text-black-600'>協賛スタイル</p>
       <div className='col-span-4 w-full'>
         <MultiSelect
           options={styleOotions}
+          placeholder={'協賛スタイルが登録されていません'}
           values={
             selectedStyleIds
               ? styleOotions.filter((option) => selectedStyleIds.includes(Number(option.value)))
@@ -325,7 +347,7 @@ export default function EditModal(props: ModalProps) {
   );
 
   return (
-    <Modal className='mt-64 md:mt-10 md:w-1/2'>
+    <Modal className='md:w-1/2'>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
           <CloseButton

diff --git a/view/next-project/src/components/sponsoractivities/OpenAddModalButton.tsx b/view/next-project/src/components/sponsoractivities/OpenAddModalButton.tsx
@@ -18,6 +18,7 @@ export default function OpenModalButton(props: Props) {
   return (
     <>
       <AddButton
+        className='fixed bottom-4 right-4 md:static md:bottom-auto md:right-auto md:z-auto'
         onClick={() => {
           setIsOpen(true);
         }}

diff --git a/view/next-project/src/components/sponsoractivities/PaymentDayModal.tsx b/view/next-project/src/components/sponsoractivities/PaymentDayModal.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 
-import { createSponsorActivityFormPdf } from '@/utils/createSponsorActivityPdf';
-import { downloadFile } from '@/utils/downloadFile';
+import { PreviewPDF, createSponsorActivitiesPDF } from '@/utils/createSponsorActivitiesReceiptsPDF';
 import { CloseButton, Input, Modal, PrimaryButton } from '@components/common';
 import { SponsorActivityView } from '@type/common';
 
@@ -20,14 +19,26 @@ export default function PaymentDayModal(props: ModalProps) {
   const yyyy = String(today.getFullYear());
   const mm = String(today.getMonth() + 1).padStart(2, '0');
   const dd = String(today.getDate()).padStart(2, '0');
-  const issueDay = `${yyyy}年${mm}月${dd}日`;
+  const paymentDay = `${yyyy}-${mm}-${dd}`;
   const ymd = `${yyyy}-${mm}-${dd}`;
 
   const [formData, setFormData] = useState<FormDateFormat>({ receivedAt: ymd });
 
-  const formatDate = (date: string) => {
-    const arrayDate = date.split('-');
-    return String(arrayDate[0] + '年' + arrayDate[1] + '月' + arrayDate[2] + '日');
+  const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
+  const toReiwaYear = (year: number) => {
+    const reiwaStartYear = 2019;
+    const reiwaYear = year - reiwaStartYear + 1;
+    return reiwaYear === 1 ? '元' : `${reiwaYear}`;
+  };
+  const getWeekday = (date: Date) => {
+    return weekdays[date.getDay()];
+  };
+  const formatDate = (date: string, showWeekday = true) => {
+    const [year, month, day] = date.split('-').map(Number);
+    const dateObj = new Date(year, month - 1, day);
+    const reiwaYear = toReiwaYear(year);
+    const weekday = getWeekday(dateObj);
+    return `令和${reiwaYear}年${month}月${day}日${showWeekday ? `(${weekday})` : ''}`;
   };
 
   const handler =
@@ -37,7 +48,7 @@ export default function PaymentDayModal(props: ModalProps) {
     };
 
   return (
-    <Modal className='mt-64 md:mt-32 md:w-1/2'>
+    <Modal className='md:w-1/2'>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
           <CloseButton
@@ -60,20 +71,24 @@ export default function PaymentDayModal(props: ModalProps) {
         <div className='my-5 hidden justify-center md:flex'>
           <PrimaryButton
             onClick={async () => {
-              downloadFile({
-                downloadContent: await createSponsorActivityFormPdf(
-                  props.sponsorActivitiesViewItem,
-                  issueDay,
-                  formatDate(formData.receivedAt),
-                ),
-                fileName: `領収書_${yyyy}${mm}${dd}_${props.sponsorActivitiesViewItem.sponsor.name}.pdf`,
-                isBomAdded: true,
-              });
+              createSponsorActivitiesPDF(
+                props.sponsorActivitiesViewItem,
+                formatDate(paymentDay, false),
+                formatDate(formData.receivedAt, false),
+              );
+              props.setIsOpen(false);
             }}
           >
             領収書ダウンロード
           </PrimaryButton>
         </div>
+        <div className='h-[21rem] justify-center overflow-x-auto md:flex'>
+          <PreviewPDF
+            sponsorActivitiesViewItem={props.sponsorActivitiesViewItem}
+            date={formatDate(paymentDay, false)}
+            paymentDay={formatDate(formData.receivedAt, false)}
+          />
+        </div>
       </div>
     </Modal>
   );

diff --git a/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx b/view/next-project/src/components/sponsoractivities/SponsorActivitiesAddModal.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React, { useState, useEffect, useMemo } from 'react';
 import { RiArrowDropRightLine } from 'react-icons/ri';
 import { get, post } from '@/utils/api/api_methods';
-import { MultiSelect } from '@components/common';
+import { MultiSelect, SearchSelect } from '@components/common';
 
 import {
   CloseButton,
@@ -54,6 +54,7 @@ export default function SponsorActivitiesAddModal(props: Props) {
     expense: 0,
     remark: '',
   });
+  const [formDataSponsorID, setFormDataSponsorID] = useState<string>(String(formData.sponsorID));
 
   const setDesign = (e: React.ChangeEvent<HTMLInputElement>) => {
     const remarkOption = formData.feature === 'クーポン' ? REMARK_COUPON : '';
@@ -138,6 +139,7 @@ export default function SponsorActivitiesAddModal(props: Props) {
     });
   };
 
+  //react-selectのmulti-select用のオプション作成
   const styleOotions = useMemo(() => {
     const options = sponsorStyles.map((style) => {
       return {
@@ -177,10 +179,26 @@ export default function SponsorActivitiesAddModal(props: Props) {
     setSponsors(getSponsorsByYears);
   };
 
+  const sponsorOptions = useMemo(() => {
+    const options = sponsors
+      ? sponsors.map((sponsor) => {
+          return { value: String(sponsor?.id) || '', label: sponsor.name };
+        })
+      : null;
+
+    return options;
+  }, [sponsors]);
+
   useEffect(() => {
     getSponsors();
   }, [selectedYear]);
 
+  useEffect(() => {
+    setFormData({ ...formData, sponsorID: Number(formDataSponsorID) });
+  }, [formDataSponsorID]);
+
+  const NO_SPONSORS_MESSAGE = '企業が登録されていません';
+
   // 協賛活動の情報
   const content = (data: SponsorActivity) => (
     <div className='mx-auto my-10 grid grid-cols-5 items-center justify-items-center gap-2'>
@@ -202,20 +220,18 @@ export default function SponsorActivitiesAddModal(props: Props) {
       </div>
       <p className='text-black-600'>協賛企業</p>{' '}
       <div className='col-span-4 w-full'>
-        <Select value={data.sponsorID} onChange={formDataHandler('sponsorID')}>
-          {sponsors &&
-            sponsors.map((sponsor: Sponsor) => (
-              <option key={sponsor.id} value={sponsor.id}>
-                {sponsor.name}
-              </option>
-            ))}
-          {!sponsors && <option>企業が登録されていません</option>}
-        </Select>
+        <SearchSelect
+          options={sponsorOptions || undefined}
+          setID={setFormDataSponsorID}
+          noOptionMessage={NO_SPONSORS_MESSAGE}
+          placeholder={NO_SPONSORS_MESSAGE}
+        />
       </div>
       <p className='text-black-600'>協賛スタイル</p>
       <div className='col-span-4 w-full'>
         <MultiSelect
           options={styleOotions}
+          placeholder={'協賛スタイルが登録されていません'}
           onChange={(value) => {
             setSelectedStyleIds(value.map((v) => Number(v.value)));
           }}
@@ -410,7 +426,7 @@ export default function SponsorActivitiesAddModal(props: Props) {
   };
 
   return (
-    <Modal className='mt-64 md:mt-10 md:w-1/2'>
+    <Modal className='md:w-1/2'>
       <div className='w-full'>
         <div className='ml-auto w-fit'>
           <CloseButton