Merge pull request #184 from lunatech-labs/TK-350_entry_RedDayWarning

Tk 350 entry red day warning

frontend/src/components/Card/CardWeekCalendar.less

@@ -80,6 +80,11 @@
       }
     }
   }
+
+  .tk_CardWeekCalendar_Body_With_Warn {
+    background-color: rgba(233, 73, 78, .2);
+  }
+
 }
 
 

frontend/src/components/TimeSheet/WeekCalendar.js

@@ -148,7 +148,7 @@ const WeekCalendar = (props) => {
             }
           };
 
-          const today = (day) => {
+          const isToday = (day) => {
             return moment().isSame(day, 'day');
           };
 
@@ -159,15 +159,18 @@ const WeekCalendar = (props) => {
                 onMouseOver={() => setShowButton(index)}
                 onMouseLeave={() => setShowButton(-1)}>
                 <div className="tk_CardWeekCalendar_Head">
-                  <p className={today(moment(item.date)) ? 'tk_CurrentDay' : ''}>{item.date.format(dateFormat)}</p>
+                  <p className={isToday(moment(item.date)) ? 'tk_CurrentDay' : ''}>{item.date.format(dateFormat)}</p>
                   {((props.hiddenButtons && showButton === index) || (!props.hiddenButtons)) &&
                   <Button
                     shape="circle"
                     disabled={isDisabled(item)}
                     icon={<PlusOutlined/>}
                     onClick={(e) => props.onClickAddTask && props.onClickAddTask(e, item.date)}/>}
                 </div>
-                <div className="tk_CardWeekCalendar_Body" disabled={isDisabled(item)}>
+                <div className={props.warningCardPredicate && props.warningCardPredicate(item.date, item.day) ?
+                    "tk_CardWeekCalendar_Body tk_CardWeekCalendar_Body_With_Warn":
+                    "tk_CardWeekCalendar_Body"}
+                     disabled={isDisabled(item)}>
                   {renderDay()}
                 </div>
               </CardWeekCalendar>
@@ -194,7 +197,8 @@ WeekCalendar.propTypes = {
   ).isRequired,
   hiddenButtons: PropTypes.bool,
   onClickAddTask: PropTypes.func, // (event, moment) => void
-  onPanelChange: PropTypes.func // (id, start, end) => void
+  onPanelChange: PropTypes.func, // (id, start, end) => void
+  warningCardPredicate : PropTypes.func // (date, day) => bool
 };
 
 export default WeekCalendar;

frontend/src/pages/TimeSheet/timeEntriesPage.js

@@ -66,6 +66,12 @@ const TimeEntriesPage = () => {
   const openModal = () => setVisibleEntryModal(true);
   const closeModal = () => setVisibleEntryModal(false);
   const resetForm = () => form.resetFields();
+
+  // A day without entries in the past should be displayed with "warn" design
+  const hasWarnNoEntryInPastDay =(date,day) => {
+    return moment().subtract("1","days").isAfter(date) && !day
+  };
+
   return (
     <MainPage title="Time entries">
       <Modal
@@ -104,6 +110,7 @@ const TimeEntriesPage = () => {
           );
         }}
         days={datas.days}
+        warningCardPredicate={(date, day) => hasWarnNoEntryInPastDay(date,day)}
       />
     </MainPage>
   );