feat: adding audit fields for quick info in list view

Author: Vikas Agarwal

src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss

@@ -85,6 +85,7 @@
       flex: 6;
       flex-wrap: nowrap;
       display: flex;
+      text-decoration: none;
 
       .name {
         flex:1;
@@ -102,6 +103,7 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      text-decoration: none;
     }
 
     .col3 {
@@ -180,6 +182,26 @@
       }
     }
   }
+
+  .createdAt {
+    color: $gray;
+    font-size: 10px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .lastUpdated {
+    text-decoration: none;
+    .lastUpdatedAt {
+      color: $tc-black;
+    }
+    .lastUpdatedBy {
+      color: $gray;
+      font-size: 10px;
+    }
+  }
 }
 
 .activateButton {

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -13,7 +13,7 @@ import { faFile, faUser } from '@fortawesome/free-solid-svg-icons'
 import ChallengeStatus from '../ChallengeStatus'
 import ChallengeTag from '../ChallengeTag'
 import styles from './ChallengeCard.module.scss'
-import { getFormattedDuration } from '../../../util/date'
+import { getFormattedDuration, formatDate } from '../../../util/date'
 import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, ONLINE_REVIEW_URL } from '../../../config/constants'
 import { patchChallenge } from '../../../services/challenges'
 import ConfirmationModal from '../../Modal/ConfirmationModal'
@@ -172,6 +172,15 @@ const renderStatus = (status) => {
   }
 }
 
+const renderLastUpdated = (challenge) => {
+  return (
+    <Link className={cn(styles.col2, styles.lastUpdated)} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
+      <div className={styles.lastUpdatedAt}>{formatDate(challenge.updated)}</div>
+      <div className={styles.lastUpdatedBy}>{challenge.updatedBy}</div>
+    </Link>
+  )
+}
+
 class ChallengeCard extends React.Component {
   constructor (props) {
     super(props)
@@ -248,8 +257,10 @@ class ChallengeCard extends React.Component {
           <div className={styles.name}>
             <span className={styles.block}>{challenge.name}</span>
             <ChallengeTag track={challenge.trackId} challengeType={challenge.type} />
+            <span className={styles.createdAt}>{`Created by ${challenge.createdBy} at ${formatDate(challenge.created)}`}</span>
           </div>
         </Link>
+        {renderLastUpdated(challenge)}
         <Link className={styles.col2} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
           {renderStatus(challenge.status.toUpperCase())}
         </Link>

src/components/ChallengesComponent/ChallengeList/index.js

@@ -192,6 +192,7 @@ class ChallengeList extends Component {
           challenges.length > 0 && (
             <div className={styles.header}>
               <div className={styles.col1}>Challenges Name</div>
+              <div className={styles.col2}>Last Updated</div>
               <div className={styles.col2}>Status</div>
               {(selectedTab === 0) && (<div className={styles.col3}>Current phase</div>)}
               <div className={styles.col4}>&nbsp;</div>

src/util/date.js

@@ -17,6 +17,15 @@ export const getLastDate = (dates) => {
   return Math.max(...dates)
 }
 
+/**
+ * Get formatted date
+ * @param {Date} date date to be formatted
+ * @returns formatted Date
+ */
+export const formatDate = (date) => {
+  return moment(date).format('DD/MM/YYYY')
+}
+
 /**
  * Formats duration
  * @param duration Duration