Meditor 910 history reporting incorrectly

packages/app/components/document/document-history.module.css

@@ -52,7 +52,6 @@
 }
 
 .pastState {
-    color: grey;
     display: flex;
     padding-top: 10px;
     padding-left: 20px;
@@ -78,7 +77,6 @@
 
 .pastState:first-child:before {
     content: '';
-    border-left: 1px solid grey;
     position: absolute;
     top: -4px;
     height: 20px;
@@ -89,10 +87,24 @@
     display: none;
 }
 
-.pastState svg {
+.dotCircleIcon {
     position: absolute;
     top: 10px;
     left: 0;
+    color: grey;
+}
+
+.arrowRightIcon {
+    color: grey;
+    margin: 0 3px;
+}
+
+.stateTransition {
+    margin-bottom: 4px;
+}
+
+.stateModifier {
+    color: grey;
 }
 
 .activeHistory {

packages/app/components/document/document-history.tsx

@@ -1,28 +1,46 @@
 import Button from 'react-bootstrap/Button'
 import Card from 'react-bootstrap/Card'
-import { FaRegDotCircle } from 'react-icons/fa'
+import { FaRegDotCircle, FaArrowRight } from 'react-icons/fa'
 import { IoMdEye, IoMdEyeOff } from 'react-icons/io'
 import { useLocalStorage } from '../../lib/use-localstorage.hook'
 import styles from './document-history.module.css'
 import DocumentStateBadge from './document-state-badge'
 
 const sortByLastModifiedDesc = (a, b) => {
+    // Used to sort the history details in descending order. NO LONGER USED
     let dateA = new Date(a.modifiedOn)
     let dateB = new Date(b.modifiedOn)
 
     return dateA > dateB ? -1 : dateA < dateB ? 1 : 0
 }
 
+const formatDate = date => {
+    date = new Date(date)
+
+    // Format the date to a more readable format
+    const formattedDate = date.toLocaleString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    })
+    return formattedDate
+}
+
 const PastState = ({ state }) => (
     <div className={styles.pastState}>
         <div>
-            <FaRegDotCircle />
-
+            <FaRegDotCircle className={styles.dotCircleIcon} />
             <div>
-                <div>{state.source}</div>
-                <div>
+                <div className={styles.stateTransition}>
+                    {state.source} <FaArrowRight className={styles.arrowRightIcon} />{' '}
+                    {state.target}
+                </div>
+                <div className={styles.stateModifier}>
                     <em>
-                        {state.modifiedBy} on {state.modifiedOn}
+                        {state.modifiedBy} on {formatDate(state.modifiedOn)}
                     </em>
                 </div>
             </div>
@@ -39,7 +57,7 @@ const DocumentHistory = ({
     const [historyPreferences, setHistoryPreferences] = useLocalStorage(
         'historyPreferences',
         {
-            showDetails: false,
+            showDetails: true, // Initial value if historyPreferences.showDetails not set on local storage.
         }
     )
 
@@ -112,7 +130,7 @@ const DocumentHistory = ({
                         <Card.Body>
                             <div className={styles.body}>
                                 <div className={styles.meta}>
-                                    <a>{item.modifiedOn}</a>
+                                    <a>{formatDate(item.modifiedOn)}</a>
                                     {item.modifiedBy}
                                 </div>
 
@@ -129,14 +147,12 @@ const DocumentHistory = ({
                                             : ''
                                     }`}
                                 >
-                                    {item.states
-                                        ?.sort(sortByLastModifiedDesc)
-                                        .map(state => (
-                                            <PastState
-                                                state={state}
-                                                key={state.source + state.modifiedOn}
-                                            />
-                                        ))}
+                                    {item.states.map(state => (
+                                        <PastState
+                                            state={state}
+                                            key={state.source + state.modifiedOn}
+                                        />
+                                    ))}
                                 </div>
                             )}
                         </Card.Body>

packages/app/documents/service.ts

@@ -64,7 +64,7 @@ export async function createDocument(
             )
         }
 
-        // validate that there is at least one edge going from "Init" to to the initialState
+        // validate that there is at least one edge going from "Init" to the initialState
         if (
             !workflow.edges.some(
                 edge => edge.source === INIT_STATE && edge.target === initialState
@@ -95,11 +95,16 @@ export async function createDocument(
         }
 
         //* This logic (and associated TODO) is ported from Meditor.js, saveDocument. Minimal modifications were made.
-        const rootState = { source: INIT_STATE, target: initialState }
+        const modifiedDate = new Date().toISOString()
 
-        // @ts-ignore
-        rootState.modifiedOn = document['x-meditor'].modifiedOn
-        document['x-meditor'].modifiedOn = new Date().toISOString()
+        //* Create the INITAL state history for a NEW document or an Edited/Saved document which creates a new DB object of the document.
+        const rootState = {
+            source: INIT_STATE,
+            target: initialState,
+            modifiedOn: modifiedDate,
+        }
+
+        document['x-meditor'].modifiedOn = modifiedDate
         document['x-meditor'].modifiedBy = user.uid
         // TODO: replace with actual model init state
         document['x-meditor'].states = [rootState]