Reservation polish (#63)

PoApper · Dec 27, 2023 · 9df1b82 · 9df1b82
1 parent 80467a5
commit 9df1b82
Show file tree

Hide file tree

Showing 10 changed files with 269 additions and 158 deletions.
diff --git a/components/equipment/equipment.reservation.confirm.modal.jsx b/components/equipment/equipment.reservation.confirm.modal.jsx
@@ -107,12 +107,12 @@ const EquipmentReservationConfirmModal = (props) => {
           <Modal.Actions>
             <Button.Group floated={'left'}>
               <Button
-                positive name={'accept'}
+                positive name={'통과'}
                 onClick={handlePatch}>
                 <Icon name={'check'}/> 예약 승인
               </Button>
               <Button
-                negative name={'reject'}
+                negative name={'거절'}
                 onClick={handlePatch}>
                 <Icon name={'ban'}/> 예약 거절
               </Button>

diff --git a/components/place/place.reservation.confirm.modal.jsx b/components/place/place.reservation.confirm.modal.jsx
@@ -94,12 +94,12 @@ const PlaceReservationConfirmModal = ({trigger, reservation}) => {
           <Modal.Actions>
             <Button.Group floated={'left'}>
               <Button
-                positive name={'accept'}
+                positive name={'통과'}
                 onClick={handlePatch}>
                 <Icon name={'check'}/> 예약 승인
               </Button>
               <Button
-                negative name={'reject'}
+                negative name={'거절'}
                 onClick={handlePatch}>
                 <Icon name={'ban'}/> 예약 거절
               </Button>

diff --git a/components/place/place.reservation.wait.table.jsx b/components/place/place.reservation.wait.table.jsx
@@ -11,11 +11,11 @@ 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 => {
-      alert('전체 예약 승인에 실패했습니다.')
-      console.log(err)
+      const errMsg = err.response.data.message;
+      alert(`전체 예약 승인에 실패했습니다.\n${errMsg}`);
     })
   }
 
@@ -31,77 +31,105 @@ const PlaceReservationWaitTable = ({reservations}) => {
   }
 
   return (
-    <>
-      <Table
-        celled selectable
-        textAlign={'center'}>
-        <Table.Header>
-          <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
+    <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'
+                  floated='right'
+                  onClick={acceptAllInProgressPlaceReservations}
+                >
+                  예약 일괄 승인
+                </Button>
+              </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>
   )
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "popo-admin-web",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,11 +15,11 @@
     "moment": "^2.29.4",
     "next": "^12.3.4",
     "react": "^17.0.2",
-    "react-datepicker": "^4.24.0",
+    "react-datepicker": "^4.25.0",
     "react-dom": "17.0.2",
     "react-responsive": "^9.0.2",
     "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.4",
+    "semantic-ui-react": "^2.1.5",
     "styled-components": "^6.1.1"
   },
   "devDependencies": {

diff --git a/pages/place/create.jsx b/pages/place/create.jsx
@@ -15,7 +15,8 @@ const PlaceCreatePage = () => {
   const [location, setLocation] = useState('')
   const [description, setDescription] = useState('')
   const [staff_email, setStaffEmail] = useState('')
-  const [max_minutes, setMaxMinutes] = useState()
+  const [max_minutes, setMaxMinutes] = useState(24 * 60)
+  const [max_concurrent_reservation, setMaxConcurrentReservation] = useState(1)
   const [opening_hours, setOpeningHours] = useState({ 'Everyday': '00:00-24:00' })
   const [enable_auto_accept, setEnableAutoAccept] = useState('Inactive')
 
@@ -33,15 +34,13 @@ const PlaceCreatePage = () => {
       'location': location,
       'description': description,
       'staff_email': staff_email,
+      'max_minutes': max_minutes,
+      'max_concurrent_reservation': max_concurrent_reservation,
       'opening_hours': JSON.stringify(opening_hours),
       'enable_auto_accept': enable_auto_accept,
     }
 
-    if (max_minutes) {
-      body['max_minutes'] = max_minutes
-    }
-
-    PoPoAxios.post('/place', 
+    PoPoAxios.post('/place',
       body,
       { withCredentials: true },
     ).then(() => {
@@ -86,6 +85,12 @@ const PlaceCreatePage = () => {
         />
         <p>최대 예약가능 시간이 넘는 예약이 생성되지 않도록 합니다. (단위: minutes)</p>
 
+        <Form.Input
+            label={'최대 동시 예약 갯수'}
+            placeholder={'해당 장소를 동시 예약 가능한 최대 갯수를 입력해주세요 (ex. 1)'}
+            onChange={e => setMaxConcurrentReservation(e.target.value)}
+        />
+
         <OpeningHoursEditor
           currentOpeningHour={{ Everyday: '00:00-24:00' }}
           openingHour={opening_hours}