Merge pull request #739 from NUTFes/feat/yama/738/add-date-input

Feat/yama/738/add date input
NUTFes · Apr 30, 2024 · 5f00a03 · 5f00a03
2 parents edde80c + ec1b6eb
commit 5f00a03
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/view/next-project/src/components/common/Modal.tsx b/view/next-project/src/components/common/Modal.tsx
@@ -14,7 +14,9 @@ export default function Modal(props: Props) {
   return (
     <>
       <div className='fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black-300/50 outline-none focus:outline-none'>
-        <div className={clsx(className)}>{props.children}</div>
+        <div className={clsx(className)} style={{ maxHeight: '90vh', overflowY: 'auto' }}>
+          {props.children}
+        </div>
       </div>
     </>
   );

diff --git a/view/next-project/src/components/sponsoractivities/AddPdfDetailModal.tsx b/view/next-project/src/components/sponsoractivities/AddPdfDetailModal.tsx
@@ -13,6 +13,7 @@ interface ModalProps {
 
 interface FormDateFormat {
   receivedAt: string;
+  billIssuedAt: string;
 }
 
 export default function AddPdfDetailModal(props: ModalProps) {
@@ -31,15 +32,25 @@ export default function AddPdfDetailModal(props: ModalProps) {
   };
   const ymd = `${yyyy}-${mm}-${dd}`;
 
-  const formatDate = (date: string) => {
+  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}日(${weekday})`;
+    return `令和${reiwaYear}年${month}月${day}日${showWeekday ? `(${weekday})` : ''}`;
   };
 
-  const [formData, setFormData] = useState<FormDateFormat>({ receivedAt: ymd });
+  const todayFormatted = () => {
+    const today = new Date();
+    return `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(
+      today.getDate(),
+    ).padStart(2, '0')}`;
+  };
+
+  const [formData, setFormData] = useState<FormDateFormat>({
+    receivedAt: ymd,
+    billIssuedAt: todayFormatted(),
+  });
   const [remarks, setRemarks] = useState('');
 
   const handler =
@@ -66,14 +77,22 @@ export default function AddPdfDetailModal(props: ModalProps) {
           振込締め切り日・備考の入力
         </p>
         <div className='col-span-4 w-full'>
+          <p className='text-gray-600 mb-3 ml-1 text-sm'>請求書発行日</p>
+          <Input
+            type='date'
+            value={formData.billIssuedAt}
+            onChange={handler('billIssuedAt')}
+            className='mb-3 w-full'
+          />
+          <p className='text-gray-600 mb-3 ml-1 text-sm'>振込締め切り日</p>
           <Input
             type='date'
             value={formData.receivedAt}
             onChange={handler('receivedAt')}
             className='mb-3 w-full'
           />
+          <p className='text-gray-600 mb-3 ml-1 text-sm'>備考を入力</p>
           <Input
-            placeholder='備考を入力'
             type='text'
             value={remarks}
             onChange={handleRemarksChange}
@@ -86,6 +105,7 @@ export default function AddPdfDetailModal(props: ModalProps) {
               createSponsoractivitiesPDF(
                 props.sponsorActivitiesViewItem,
                 formatDate(formData.receivedAt),
+                formatDate(formData.billIssuedAt, false),
                 remarks,
               );
               props.setIsOpen(false);
@@ -99,6 +119,7 @@ export default function AddPdfDetailModal(props: ModalProps) {
         <PreviewPDF
           sponsorActivitiesViewItem={props.sponsorActivitiesViewItem}
           date={formatDate(formData.receivedAt)}
+          issuedDate={formatDate(formData.billIssuedAt, false)}
           remarks={remarks}
         />
       </div>

diff --git a/view/next-project/src/utils/createSponsoractivitiesReceiptPDF.tsx b/view/next-project/src/utils/createSponsoractivitiesReceiptPDF.tsx
@@ -134,6 +134,7 @@ interface MyDocumentProps {
   sponsorActivitiesViewItem: SponsorActivityView;
   totalPrice: number;
   date: string;
+  issuedDate: string;
   remarks: string;
   formatDate: (date: string) => string;
 }
@@ -170,10 +171,7 @@ const MyDocument = (props: MyDocumentProps) => (
             </View>
           </View>
           <View>
-            <Text style={styles.marginButtom}>
-              請求日 :{' '}
-              {props.formatDate(props.sponsorActivitiesViewItem.sponsorActivity.createdAt || '')}
-            </Text>
+            <Text style={styles.marginButtom}>請求日 : {props.issuedDate}</Text>
             <View>
               <View style={styles.marginButtom}>
                 <Text>技大祭実行委員会</Text>
@@ -261,13 +259,15 @@ const formatDate = (datetime: string) => {
 export const createSponsoractivitiesPDF = async (
   sponsorActivitiesViewItem: SponsorActivityView,
   date: string,
+  issuedDate: string,
   remarks: string,
 ) => {
   const asPdf = pdf(
     <MyDocument
       sponsorActivitiesViewItem={sponsorActivitiesViewItem}
       totalPrice={CalculateTotalPrice(sponsorActivitiesViewItem)}
       date={date}
+      issuedDate={issuedDate}
       remarks={remarks}
       formatDate={formatDate}
     />,
@@ -285,18 +285,21 @@ export const createSponsoractivitiesPDF = async (
 interface PreviewProps {
   sponsorActivitiesViewItem: SponsorActivityView;
   date: string;
+  issuedDate: string;
   remarks: string;
 }
 
 export const PreviewPDF: React.FC<PreviewProps> = ({
   sponsorActivitiesViewItem,
   date,
+  issuedDate,
   remarks,
 }) => (
   <PDFViewer style={{ width: '100vw', height: '100vh' }} showToolbar={false}>
     <MyDocument
       sponsorActivitiesViewItem={sponsorActivitiesViewItem}
       date={date}
+      issuedDate={issuedDate}
       remarks={remarks}
       totalPrice={CalculateTotalPrice(sponsorActivitiesViewItem)}
       formatDate={formatDate}