add accept all processing method description

PoApper · Dec 26, 2023 · 6cd3a01 · 6cd3a01
1 parent 718d5a7
commit 6cd3a01
Showing 1 changed file with 89 additions and 73 deletions.
diff --git a/components/place/place.reservation.wait.table.jsx b/components/place/place.reservation.wait.table.jsx
@@ -11,7 +11,7 @@ const PlaceReservationWaitTable = ({reservations}) => {
   function acceptAllInProgressPlaceReservations() {
     PoPoAxios.patch('/reservation-place/all/status/accept',
       {uuid_list: selectedUuidList}, {withCredentials: true}).then(() => {
-      alert('선택한 장소 예약을 승인했습니다.')
+      alert(`${selectedUuidList.length}개 장소 예약을 일괄 승인했습니다.`)
       window.location.reload();
     }).catch(err => {
       const errMsg = err.response.data.message;
@@ -31,13 +31,19 @@ const PlaceReservationWaitTable = ({reservations}) => {
   }
 
   return (
-    <>
-      <Table
-        celled selectable
-        textAlign={'center'}>
-        <Table.Header>
-          <Table.Row>
-              <Table.HeaderCell colSpan={6}>
+    <Table
+      celled selectable
+      textAlign={'center'}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell colSpan={6}>
+            <div style={{display: 'flex', justifyContent: 'space-between', textAlign: 'left'}}>
+              <p style={{fontWeight: 400}}>
+                일괄 예약 승인은 예약 생성 순으로 처리 됩니다.<br/>
+                일괄 처리 도중 예약 Overlap이 발생하면, 처리가 중단 됩니다.<br/>
+                일괄 예약 승인 때는 승인 메일을 보내지 않습니다.<br/>
+              </p>
+              <div>
                 <Button
                   positive
                   size='small'
@@ -46,74 +52,84 @@ const PlaceReservationWaitTable = ({reservations}) => {
                 >
                   예약 일괄 승인
                 </Button>
-              </Table.HeaderCell>
-            </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell width={1}>idx.</Table.HeaderCell>
-            <Table.HeaderCell width={3}>장소명</Table.HeaderCell>
-            <Table.HeaderCell width={2}>사용자</Table.HeaderCell>
-            <Table.HeaderCell>예약 제목</Table.HeaderCell>
-            <Table.HeaderCell width={4}>예약 기간</Table.HeaderCell>
-            <Table.HeaderCell width={1}/>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {
-            reservations.map((reservation, idx) => {
-              const reservation_end_datetime = moment(
-                `${reservation.date} ${reservation.end_time}`, 'YYYYMMDD HHmm')
-              const isOutdated = moment() > reservation_end_datetime
+              </div>
+            </div>
+          </Table.HeaderCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell width={1}>idx.</Table.HeaderCell>
+          <Table.HeaderCell width={3}>장소명</Table.HeaderCell>
+          <Table.HeaderCell width={2}>사용자</Table.HeaderCell>
+          <Table.HeaderCell>예약 제목</Table.HeaderCell>
+          <Table.HeaderCell width={4}>예약 기간</Table.HeaderCell>
+          <Table.HeaderCell width={1}/>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {
+          reservations.map((reservation, idx) => {
+            const reservation_end_datetime = moment(
+              `${reservation.date} ${reservation.end_time}`, 'YYYYMMDD HHmm')
+            const isOutdated = moment() > reservation_end_datetime
 
-              return (
-                <Table.Row key={reservation.uuid} error={isOutdated}>
-                  <Table.Cell>{idx + 1}</Table.Cell>
-                  <Table.Cell>{reservation.place.name}</Table.Cell>
-                  <Table.Cell>{reservation.booker.name}</Table.Cell>
-                  <PlaceReservationConfirmModal
-                    key={reservation.uuid}
-                    reservation={reservation}
-                    trigger={
-                        <Table.Cell>{reservation.title}</Table.Cell>
-                    }
-                  />
-                  <Table.Cell>
-                    <b>
-                      {moment(reservation.date, 'YYYYMMDD').
-                        format('YYYY년 MM월 DD일')}
-                      <br/>
-                      {moment(reservation.start_time, 'HHmm').
-                        format('HH:mm')}
-                      &nbsp;~&nbsp;
-                      {moment(reservation.end_time, 'HHmm').
-                        format('HH:mm')}
-                    </b>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Checkbox onClick={() => handleCheck(reservation.uuid)}/>
-                  </Table.Cell>
-                </Table.Row>
-              )
-             }
+            return (
+              <Table.Row key={reservation.uuid} error={isOutdated}>
+                <Table.Cell>{idx + 1}</Table.Cell>
+                <Table.Cell>{reservation.place.name}</Table.Cell>
+                <Table.Cell>{reservation.booker.name}</Table.Cell>
+                <PlaceReservationConfirmModal
+                  key={reservation.uuid}
+                  reservation={reservation}
+                  trigger={
+                      <Table.Cell>{reservation.title}</Table.Cell>
+                  }
+                />
+                <Table.Cell>
+                  <b>
+                    {moment(reservation.date, 'YYYYMMDD').
+                      format('YYYY년 MM월 DD일')}
+                    <br/>
+                    {moment(reservation.start_time, 'HHmm').
+                      format('HH:mm')}
+                    &nbsp;~&nbsp;
+                    {moment(reservation.end_time, 'HHmm').
+                      format('HH:mm')}
+                  </b>
+                </Table.Cell>
+                <Table.Cell>
+                  <Checkbox onClick={() => handleCheck(reservation.uuid)}/>
+                </Table.Cell>
+              </Table.Row>
             )
-          }
-        </Table.Body>
+            }
+          )
+        }
+      </Table.Body>
 
-        <Table.Footer fullWidth>
-          <Table.Row>
-            <Table.HeaderCell colSpan={6}>
-              <Button
-                positive
-                size='small'
-                floated='right'
-                onClick={acceptAllInProgressPlaceReservations}
-              >
-                예약 일괄 승인
-              </Button>
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Footer>
-      </Table>
-    </>
+      <Table.Footer fullWidth>
+        <Table.Row>
+          <Table.HeaderCell colSpan={6}>
+            <div style={{display: 'flex', justifyContent: 'space-between', textAlign: 'left'}}>
+              <p style={{fontWeight: 400}}>
+                일괄 예약 승인은 예약 생성 순으로 처리 됩니다.<br/>
+                일괄 처리 도중 예약 Overlap이 발생하면, 처리가 중단 됩니다.<br/>
+                일괄 예약 승인 때는 승인 메일을 보내지 않습니다.<br/>
+              </p>
+              <div>
+                <Button
+                  positive
+                  size='small'
+                  floated='right'
+                  onClick={acceptAllInProgressPlaceReservations}
+                >
+                  예약 일괄 승인
+                </Button>
+              </div>
+            </div>
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Footer>
+    </Table>
   )
 }