Add weekday in room booking details (#5743)

indico · Apr 26, 2023 · 93399dd · 93399dd
1 parent 4e7d0c9
commit 93399dd
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 3 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -25,6 +25,8 @@ Improvements
 - Allow searching for contributions by author in the management area (:pr:`5742`)
 - Include start/end dates of the whole booking in the timeline tooltip of recurring
   room bookings (:issue:`5730`, :pr:`5740`)
+- Add day of the week to room booking details modal and timeline (:issue:`5718`,
+  :pr:`5743`)
 
 Bugfixes
 ^^^^^^^^

diff --git a/indico/modules/rb/client/js/common/bookings/BookingDetails.jsx b/indico/modules/rb/client/js/common/bookings/BookingDetails.jsx
@@ -292,7 +292,11 @@ class BookingDetails extends React.Component {
         rejections: rejections[day] || [],
         other: other[day] || [],
       },
-      label: moment(day).format('L'),
+      label: (
+        <>
+          <span styleName="weekday">{moment(day).format('ddd')}</span> {moment(day).format('L')}
+        </>
+      ),
       key: day,
       room,
     });

diff --git a/indico/modules/rb/client/js/common/bookings/BookingDetails.module.scss b/indico/modules/rb/client/js/common/bookings/BookingDetails.module.scss
@@ -64,3 +64,7 @@
   overflow: auto;
   min-height: 20px;
 }
+
+.weekday {
+  color: $dark-gray;
+}
diff --git a/indico/modules/rb/client/js/components/TimeInformation.jsx b/indico/modules/rb/client/js/components/TimeInformation.jsx
@@ -49,11 +49,25 @@ function TimeInformation({
             <Icon name="calendar outline" />
             {mEndDate && !mStartDate.isSame(mEndDate, 'day') ? (
               <Translate>
-                <Param name="startDate" wrapper={<strong />} value={mStartDate.format('L')} /> to{' '}
+                <Param
+                  name="startDateDay"
+                  wrapper={<span styleName="booking-times-weekday" />}
+                  value={mStartDate.format('ddd')}
+                />{' '}
+                <Param name="startDate" wrapper={<strong />} value={mStartDate.format('L')} />
+                {' — '}
+                <Param
+                  name="endDateDay"
+                  wrapper={<span styleName="booking-times-weekday" />}
+                  value={mEndDate.format('ddd')}
+                />{' '}
                 <Param name="endDate" wrapper={<strong />} value={mEndDate.format('L')} />
               </Translate>
             ) : (
-              <strong>{mStartDate.format('L')}</strong>
+              <strong>
+                <span styleName="booking-times-weekday">{mStartDate.format('ddd')}</span>{' '}
+                {mStartDate.format('L')}
+              </strong>
             )}
           </div>
         </Segment>

diff --git a/indico/modules/rb/client/js/components/TimeInformation.module.scss b/indico/modules/rb/client/js/components/TimeInformation.module.scss
@@ -5,6 +5,8 @@
 // modify it under the terms of the MIT License; see the
 // LICENSE file for more details.
 
+@import 'rb:styles/palette';
+
 .booking-time-info {
   margin-top: 10px;
 }
@@ -14,3 +16,8 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.booking-times-weekday {
+  color: $dark-gray;
+  font-weight: bold;
+}